Update dependencies and fix code issues
This commit is contained in:
Eko Haryadi
3351
package-lock.json
generated
3351
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -27,6 +27,7 @@
|
|||||||
"@vue/apollo-components": "^4.0.0",
|
"@vue/apollo-components": "^4.0.0",
|
||||||
"@vue/apollo-composable": "^4.0.1",
|
"@vue/apollo-composable": "^4.0.1",
|
||||||
"@vue/apollo-option": "^4.0.0",
|
"@vue/apollo-option": "^4.0.0",
|
||||||
|
"@vueform/multiselect": "^2.6.6",
|
||||||
"axios": "^1.6.7",
|
"axios": "^1.6.7",
|
||||||
"devextreme": "23.1.5",
|
"devextreme": "23.1.5",
|
||||||
"devextreme-vue": "23.1.5",
|
"devextreme-vue": "23.1.5",
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
|
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -32,9 +32,11 @@
|
|||||||
4. Use the user's configured `sans` font-family by default.
|
4. Use the user's configured `sans` font-family by default.
|
||||||
5. Use the user's configured `sans` font-feature-settings by default.
|
5. Use the user's configured `sans` font-feature-settings by default.
|
||||||
6. Use the user's configured `sans` font-variation-settings by default.
|
6. Use the user's configured `sans` font-variation-settings by default.
|
||||||
|
7. Disable tap highlights on iOS
|
||||||
*/
|
*/
|
||||||
|
|
||||||
html {
|
html,
|
||||||
|
:host {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
@ -50,6 +52,8 @@ html {
|
|||||||
/* 5 */
|
/* 5 */
|
||||||
font-variation-settings: normal;
|
font-variation-settings: normal;
|
||||||
/* 6 */
|
/* 6 */
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
/* 7 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -121,8 +125,10 @@ strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Use the user's configured `mono` font family by default.
|
1. Use the user's configured `mono` font-family by default.
|
||||||
2. Correct the odd `em` font sizing in all browsers.
|
2. Use the user's configured `mono` font-feature-settings by default.
|
||||||
|
3. Use the user's configured `mono` font-variation-settings by default.
|
||||||
|
4. Correct the odd `em` font sizing in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
code,
|
code,
|
||||||
@ -131,8 +137,12 @@ samp,
|
|||||||
pre {
|
pre {
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
font-size: 1em;
|
font-feature-settings: normal;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
|
font-variation-settings: normal;
|
||||||
|
/* 3 */
|
||||||
|
font-size: 1em;
|
||||||
|
/* 4 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -567,10 +577,26 @@ select {
|
|||||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (forced-colors: active) {
|
||||||
|
[type='checkbox']:checked {
|
||||||
|
-webkit-appearance: auto;
|
||||||
|
-moz-appearance: auto;
|
||||||
|
appearance: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[type='radio']:checked {
|
[type='radio']:checked {
|
||||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (forced-colors: active) {
|
||||||
|
[type='radio']:checked {
|
||||||
|
-webkit-appearance: auto;
|
||||||
|
-moz-appearance: auto;
|
||||||
|
appearance: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
|
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
@ -585,6 +611,14 @@ select {
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (forced-colors: active) {
|
||||||
|
[type='checkbox']:indeterminate {
|
||||||
|
-webkit-appearance: auto;
|
||||||
|
-moz-appearance: auto;
|
||||||
|
appearance: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
|
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
@ -705,6 +739,40 @@ select {
|
|||||||
--tw-backdrop-sepia: ;
|
--tw-backdrop-sepia: ;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.container {
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 768px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1024px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1536px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1536px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
@ -883,6 +951,10 @@ body {
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.invisible {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.static {
|
.static {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
@ -912,14 +984,30 @@ body {
|
|||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.-bottom-px {
|
||||||
|
bottom: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
.-left-2 {
|
.-left-2 {
|
||||||
left: -0.5rem;
|
left: -0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.-left-px {
|
||||||
|
left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-right-px {
|
||||||
|
right: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
.bottom-0 {
|
.bottom-0 {
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bottom-auto {
|
||||||
|
bottom: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.left-0 {
|
.left-0 {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
@ -960,6 +1048,10 @@ body {
|
|||||||
top: 100%;
|
top: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-px {
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
.z-10 {
|
.z-10 {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
@ -984,6 +1076,37 @@ body {
|
|||||||
grid-column: span 7 / span 7;
|
grid-column: span 7 / span 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.-m-px {
|
||||||
|
margin: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-0 {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-3 {
|
||||||
|
margin: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-3\.5 {
|
||||||
|
margin: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx-0 {
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx-0\.5 {
|
||||||
|
margin-left: 0.125rem;
|
||||||
|
margin-right: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx-1 {
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mx-2 {
|
.mx-2 {
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
@ -1017,6 +1140,14 @@ body {
|
|||||||
margin-right: -3rem;
|
margin-right: -3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.-mt-px {
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-1 {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-2 {
|
.mb-2 {
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
@ -1065,6 +1196,14 @@ body {
|
|||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mr-3 {
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-3\.5 {
|
||||||
|
margin-right: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mt-0 {
|
.mt-0 {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
@ -1109,6 +1248,14 @@ body {
|
|||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box-border {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-content {
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
.line-clamp-1 {
|
.line-clamp-1 {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
@ -1160,6 +1307,10 @@ body {
|
|||||||
height: 4rem;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-3 {
|
||||||
|
height: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.h-4 {
|
.h-4 {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
}
|
}
|
||||||
@ -1213,6 +1364,10 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-px {
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
.h-screen-80 {
|
.h-screen-80 {
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
}
|
}
|
||||||
@ -1265,6 +1420,18 @@ body {
|
|||||||
width: 4rem;
|
width: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-2 {
|
||||||
|
width: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-2\.5 {
|
||||||
|
width: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-3 {
|
||||||
|
width: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.w-4 {
|
.w-4 {
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
}
|
}
|
||||||
@ -1313,6 +1480,14 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-px {
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-w-0 {
|
||||||
|
min-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.max-w-2xl {
|
.max-w-2xl {
|
||||||
max-width: 42rem;
|
max-width: 42rem;
|
||||||
}
|
}
|
||||||
@ -1321,6 +1496,10 @@ body {
|
|||||||
max-width: 80rem;
|
max-width: 80rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.max-w-full {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.max-w-sm {
|
.max-w-sm {
|
||||||
max-width: 24rem;
|
max-width: 24rem;
|
||||||
}
|
}
|
||||||
@ -1337,6 +1516,10 @@ body {
|
|||||||
flex: none;
|
flex: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-shrink {
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-shrink-0 {
|
.flex-shrink-0 {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@ -1349,6 +1532,10 @@ body {
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-grow-0 {
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.grow {
|
.grow {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
@ -1367,6 +1554,11 @@ body {
|
|||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.-translate-y-full {
|
||||||
|
--tw-translate-y: -100%;
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
|
}
|
||||||
|
|
||||||
.translate-x-0 {
|
.translate-x-0 {
|
||||||
--tw-translate-x: 0px;
|
--tw-translate-x: 0px;
|
||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
@ -1392,6 +1584,11 @@ body {
|
|||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.translate-y-full {
|
||||||
|
--tw-translate-y: 100%;
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
|
}
|
||||||
|
|
||||||
.rotate-180 {
|
.rotate-180 {
|
||||||
--tw-rotate: 180deg;
|
--tw-rotate: 180deg;
|
||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
@ -1427,6 +1624,10 @@ body {
|
|||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cursor-not-allowed {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
.cursor-pointer {
|
.cursor-pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -1442,6 +1643,16 @@ body {
|
|||||||
scroll-padding-bottom: 0.5rem;
|
scroll-padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-none {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appearance-none {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
.auto-cols-auto {
|
.auto-cols-auto {
|
||||||
grid-auto-columns: auto;
|
grid-auto-columns: auto;
|
||||||
}
|
}
|
||||||
@ -1502,10 +1713,6 @@ body {
|
|||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-2 {
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-3 {
|
.gap-3 {
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
}
|
}
|
||||||
@ -1605,12 +1812,24 @@ body {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overflow-y-scroll {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
.truncate {
|
.truncate {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overflow-ellipsis {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.whitespace-normal {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.whitespace-nowrap {
|
.whitespace-nowrap {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@ -1619,6 +1838,10 @@ body {
|
|||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.break-all {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
.rounded {
|
.rounded {
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -1639,15 +1862,29 @@ body {
|
|||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded-sm {
|
||||||
|
border-radius: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
.rounded-xl {
|
.rounded-xl {
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded-b {
|
||||||
|
border-bottom-right-radius: 0.25rem;
|
||||||
|
border-bottom-left-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.rounded-b-2xl {
|
.rounded-b-2xl {
|
||||||
border-bottom-right-radius: 1rem;
|
border-bottom-right-radius: 1rem;
|
||||||
border-bottom-left-radius: 1rem;
|
border-bottom-left-radius: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded-b-none {
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
border-bottom-left-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.rounded-l-full {
|
.rounded-l-full {
|
||||||
border-top-left-radius: 9999px;
|
border-top-left-radius: 9999px;
|
||||||
border-bottom-left-radius: 9999px;
|
border-bottom-left-radius: 9999px;
|
||||||
@ -1658,11 +1895,21 @@ body {
|
|||||||
border-bottom-right-radius: 9999px;
|
border-bottom-right-radius: 9999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded-t {
|
||||||
|
border-top-left-radius: 0.25rem;
|
||||||
|
border-top-right-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.rounded-t-2xl {
|
.rounded-t-2xl {
|
||||||
border-top-left-radius: 1rem;
|
border-top-left-radius: 1rem;
|
||||||
border-top-right-radius: 1rem;
|
border-top-right-radius: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rounded-t-none {
|
||||||
|
border-top-left-radius: 0px;
|
||||||
|
border-top-right-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.border {
|
.border {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
@ -1723,11 +1970,6 @@ body {
|
|||||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-blue-50 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gray-100 {
|
.bg-gray-100 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||||
@ -1738,6 +1980,11 @@ body {
|
|||||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-gray-300 {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
.bg-gray-50 {
|
.bg-gray-50 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
||||||
@ -1758,6 +2005,16 @@ body {
|
|||||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-green-500 {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-green-600 {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
.bg-indigo-600 {
|
.bg-indigo-600 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
|
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
|
||||||
@ -1808,6 +2065,10 @@ body {
|
|||||||
background-color: rgb(13 148 136 / var(--tw-bg-opacity));
|
background-color: rgb(13 148 136 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.bg-vtd-primary-100 {
|
.bg-vtd-primary-100 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(205 222 227 / var(--tw-bg-opacity));
|
background-color: rgb(205 222 227 / var(--tw-bg-opacity));
|
||||||
@ -1850,6 +2111,10 @@ body {
|
|||||||
--tw-bg-opacity: 0.05;
|
--tw-bg-opacity: 0.05;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-opacity-50 {
|
||||||
|
--tw-bg-opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
.bg-opacity-60 {
|
.bg-opacity-60 {
|
||||||
--tw-bg-opacity: 0.6;
|
--tw-bg-opacity: 0.6;
|
||||||
}
|
}
|
||||||
@ -1862,10 +2127,30 @@ body {
|
|||||||
--tw-bg-opacity: 0.8;
|
--tw-bg-opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-multiselect-caret {
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3e%3c/path%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-multiselect-remove {
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3e%3c/path%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-multiselect-spinner {
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 512 512' fill='%2322c55e' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'%3e%3c/path%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
|
||||||
.bg-none {
|
.bg-none {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-center {
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-no-repeat {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
.fill-gray-500 {
|
.fill-gray-500 {
|
||||||
fill: #6b7280;
|
fill: #6b7280;
|
||||||
}
|
}
|
||||||
@ -1907,10 +2192,6 @@ body {
|
|||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-0\.5 {
|
|
||||||
padding: 0.125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-1 {
|
.p-1 {
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -1977,6 +2258,11 @@ body {
|
|||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.py-0\.5 {
|
||||||
|
padding-top: 0.125rem;
|
||||||
|
padding-bottom: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
.py-1 {
|
.py-1 {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.25rem;
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.25rem;
|
||||||
@ -2022,6 +2308,16 @@ body {
|
|||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.py-\[5px\] {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-px {
|
||||||
|
padding-top: 1px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
.pb-4 {
|
.pb-4 {
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
}
|
}
|
||||||
@ -2046,6 +2342,10 @@ body {
|
|||||||
padding-left: 0.75rem;
|
padding-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pl-3\.5 {
|
||||||
|
padding-left: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pr-10 {
|
.pr-10 {
|
||||||
padding-right: 2.5rem;
|
padding-right: 2.5rem;
|
||||||
}
|
}
|
||||||
@ -2054,10 +2354,22 @@ body {
|
|||||||
padding-right: 3rem;
|
padding-right: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pr-16 {
|
||||||
|
padding-right: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pr-2 {
|
.pr-2 {
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pr-3 {
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr-3\.5 {
|
||||||
|
padding-right: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pr-4 {
|
.pr-4 {
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
@ -2098,6 +2410,10 @@ body {
|
|||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.font-sans {
|
||||||
|
font-family: Plus Jakarta Sans, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
.text-2xl {
|
.text-2xl {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
@ -2186,10 +2502,18 @@ body {
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.leading-normal {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
.leading-relaxed {
|
.leading-relaxed {
|
||||||
line-height: 1.625;
|
line-height: 1.625;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.leading-snug {
|
||||||
|
line-height: 1.375;
|
||||||
|
}
|
||||||
|
|
||||||
.tracking-tight {
|
.tracking-tight {
|
||||||
letter-spacing: -0.025em;
|
letter-spacing: -0.025em;
|
||||||
}
|
}
|
||||||
@ -2208,11 +2532,6 @@ body {
|
|||||||
color: rgb(96 165 250 / var(--tw-text-opacity));
|
color: rgb(96 165 250 / var(--tw-text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-blue-700 {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(29 78 216 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-dark {
|
.text-dark {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(21 22 23 / var(--tw-text-opacity));
|
color: rgb(21 22 23 / var(--tw-text-opacity));
|
||||||
@ -2258,6 +2577,11 @@ body {
|
|||||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-green-100 {
|
||||||
|
--tw-text-opacity: 1;
|
||||||
|
color: rgb(220 252 231 / var(--tw-text-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
.text-green-400 {
|
.text-green-400 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(74 222 128 / var(--tw-text-opacity));
|
color: rgb(74 222 128 / var(--tw-text-opacity));
|
||||||
@ -2323,6 +2647,10 @@ body {
|
|||||||
color: rgb(13 148 136 / var(--tw-text-opacity));
|
color: rgb(13 148 136 / var(--tw-text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-transparent {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.text-vtd-primary-500 {
|
.text-vtd-primary-500 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||||
@ -2385,6 +2713,10 @@ body {
|
|||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.opacity-90 {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
.shadow {
|
.shadow {
|
||||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||||
@ -2426,6 +2758,11 @@ body {
|
|||||||
--tw-shadow: var(--tw-shadow-colored);
|
--tw-shadow: var(--tw-shadow-colored);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.outline-none {
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.outline {
|
.outline {
|
||||||
outline-style: solid;
|
outline-style: solid;
|
||||||
}
|
}
|
||||||
@ -2455,10 +2792,6 @@ body {
|
|||||||
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
|
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.ring-blue-700\/10 {
|
|
||||||
--tw-ring-color: rgb(29 78 216 / 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ring-gray-300 {
|
.ring-gray-300 {
|
||||||
--tw-ring-opacity: 1;
|
--tw-ring-opacity: 1;
|
||||||
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
|
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
|
||||||
@ -2584,6 +2917,11 @@ body {
|
|||||||
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hover\:bg-black:hover {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
.hover\:bg-gray-50:hover {
|
.hover\:bg-gray-50:hover {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
||||||
@ -2629,6 +2967,10 @@ body {
|
|||||||
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
|
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hover\:bg-opacity-10:hover {
|
||||||
|
--tw-bg-opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
.hover\:text-primary-500:hover {
|
.hover\:text-primary-500:hover {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||||
@ -2639,6 +2981,10 @@ body {
|
|||||||
color: rgb(2 73 90 / var(--tw-text-opacity));
|
color: rgb(2 73 90 / var(--tw-text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hover\:opacity-80:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
.focus\:border-0:focus {
|
.focus\:border-0:focus {
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
}
|
}
|
||||||
@ -2835,53 +3181,15 @@ body {
|
|||||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group:hover .group-hover\:opacity-60 {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
.peer:checked ~ .peer-checked\:text-primary-500 {
|
.peer:checked ~ .peer-checked\:text-primary-500 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.dark\:bg-opacity-50 {
|
|
||||||
--tw-bg-opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:text-vtd-primary-400 {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(53 124 141 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:text-opacity-70 {
|
|
||||||
--tw-text-opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:hover\:text-vtd-primary-300:hover {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(104 157 170 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:focus\:border-vtd-primary-500:focus {
|
|
||||||
--tw-border-opacity: 1;
|
|
||||||
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:focus\:bg-opacity-50:focus {
|
|
||||||
--tw-bg-opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:focus\:text-vtd-primary-300:focus {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(104 157 170 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:focus\:ring-opacity-20:focus {
|
|
||||||
--tw-ring-opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark\:focus\:ring-opacity-25:focus {
|
|
||||||
--tw-ring-opacity: 0.25;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.sm\:static {
|
.sm\:static {
|
||||||
position: static;
|
position: static;
|
||||||
@ -3378,3 +3686,105 @@ body {
|
|||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rtl\:left-auto:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:right-0:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:ml-1:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:ml-3:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:ml-3\.5:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
margin-left: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:mr-0:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:pl-0:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:pl-2:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:pl-3:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:pl-3\.5:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
padding-left: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:pr-0:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:pr-2:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:pr-3:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:pr-3\.5:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
padding-right: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.dark\:bg-opacity-50 {
|
||||||
|
--tw-bg-opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark\:text-vtd-primary-400 {
|
||||||
|
--tw-text-opacity: 1;
|
||||||
|
color: rgb(53 124 141 / var(--tw-text-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark\:text-opacity-70 {
|
||||||
|
--tw-text-opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark\:hover\:text-vtd-primary-300:hover {
|
||||||
|
--tw-text-opacity: 1;
|
||||||
|
color: rgb(104 157 170 / var(--tw-text-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark\:focus\:border-vtd-primary-500:focus {
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark\:focus\:bg-opacity-50:focus {
|
||||||
|
--tw-bg-opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark\:focus\:text-vtd-primary-300:focus {
|
||||||
|
--tw-text-opacity: 1;
|
||||||
|
color: rgb(104 157 170 / var(--tw-text-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark\:focus\:ring-opacity-20:focus {
|
||||||
|
--tw-ring-opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark\:focus\:ring-opacity-25:focus {
|
||||||
|
--tw-ring-opacity: 0.25;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -45,6 +45,7 @@ const buttonStyle = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['on:click'])
|
const emit = defineEmits(['on:click'])
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -12,7 +12,31 @@ const formatter = ref({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['update:dateValue'])
|
const emit = defineEmits(['update:dateValue'])
|
||||||
|
const customShortcuts = () => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: "Last 15 Days",
|
||||||
|
atClick: () => {
|
||||||
|
const date = new Date();
|
||||||
|
return [new Date(date.setDate(date.getDate() + 1)), date];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Last Years",
|
||||||
|
atClick: () => {
|
||||||
|
const date = new Date();
|
||||||
|
return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Last 3 Years",
|
||||||
|
atClick: () => {
|
||||||
|
const date = new Date();
|
||||||
|
return [new Date(date.setFullYear(date.getFullYear() - 3)), new Date()];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
watch(dateValue, (newValue) => {
|
watch(dateValue, (newValue) => {
|
||||||
emit('update:dateValue', newValue)
|
emit('update:dateValue', newValue)
|
||||||
})
|
})
|
||||||
@ -24,7 +48,7 @@ watch(dateValue, (newValue) => {
|
|||||||
v-model="dateValue"
|
v-model="dateValue"
|
||||||
:formatter="formatter"
|
:formatter="formatter"
|
||||||
separator=" s/d "
|
separator=" s/d "
|
||||||
:shortcuts="false"
|
:shortcuts="customShortcuts"
|
||||||
:auto-apply="false"
|
:auto-apply="false"
|
||||||
as-single
|
as-single
|
||||||
use-range
|
use-range
|
||||||
|
|||||||
@ -2,19 +2,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// components
|
// components
|
||||||
import Button from '@/components/Button.vue'
|
import Button from '@/components/Button.vue'
|
||||||
import { useSearchStore } from '@/stores/filtersAction'
|
|
||||||
|
|
||||||
// icons
|
// icons
|
||||||
import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
|
import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
|
||||||
const cariButton = useSearchStore()
|
|
||||||
defineProps({
|
|
||||||
reportButton: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['runSearch'])
|
const emit = defineEmits(['runSearch','resetForm'])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -26,7 +17,7 @@ const emit = defineEmits(['runSearch'])
|
|||||||
<div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
|
<div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
|
||||||
<div class="filter-buttons flex gap-3 flex-wrap">
|
<div class="filter-buttons flex gap-3 flex-wrap">
|
||||||
<Button
|
<Button
|
||||||
@click="() => (cariButton.isTriggerChange = !cariButton.isTriggerChange)"
|
@on:click="() => emit('resetForm')"
|
||||||
label="Ulangi"
|
label="Ulangi"
|
||||||
style-type="outline"
|
style-type="outline"
|
||||||
class-name="bg-white"
|
class-name="bg-white"
|
||||||
@ -35,11 +26,10 @@ const emit = defineEmits(['runSearch'])
|
|||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
v-if="reportButton"
|
|
||||||
label="Lihat Laporan"
|
label="Lihat Laporan"
|
||||||
style-type="outline"
|
style-type="outline"
|
||||||
class-name="bg-white"
|
class-name="bg-white"
|
||||||
>
|
>
|
||||||
<PhFileText size="18" class="ml-1" weight="regular" />
|
<PhFileText size="18" class="ml-1" weight="regular" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
|||||||
@ -10,6 +10,12 @@ import {
|
|||||||
itemsPosko
|
itemsPosko
|
||||||
} from './reference'
|
} from './reference'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
runReset: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
import Select from '@/components/Select.vue'
|
import Select from '@/components/Select.vue'
|
||||||
import DatePicker from '@/components/DatePicker.vue'
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
@ -17,7 +23,7 @@ const up3laceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
|||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const up3 = ref({ id: 0, name: up3laceholder })
|
const up3 = ref({ id: 0, name: up3laceholder })
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||||
const posko = ref({ id: "", name: poskoPlaceholder })
|
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: uid.value,
|
||||||
@ -40,7 +46,7 @@ const setUid = (value: any) => {
|
|||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
up3.value = value
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: "", name: poskoPlaceholder }
|
posko.value = { id: 0, name: poskoPlaceholder }
|
||||||
data.value.up3 = value
|
data.value.up3 = value
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,7 +55,20 @@ const setPosko = (value: any) => {
|
|||||||
selectedPosko(value)
|
selectedPosko(value)
|
||||||
data.value.posko = value
|
data.value.posko = value
|
||||||
}
|
}
|
||||||
|
watch(() => props.runReset, (value) => {
|
||||||
|
if (value) {
|
||||||
|
uid.value = { id: 0, name: uidPlaceholder }
|
||||||
|
up3.value = { id: 0, name: up3laceholder }
|
||||||
|
posko.value = { id: 0, name: poskoPlaceholder }
|
||||||
|
data.value.periode = ''
|
||||||
|
data.value = {
|
||||||
|
uid: uid.value,
|
||||||
|
up3: up3.value,
|
||||||
|
posko: posko.value,
|
||||||
|
periode: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
fetchUid()
|
fetchUid()
|
||||||
@ -58,17 +77,13 @@ onMounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||||
>Unit Induk Distribusi/Wilayah:</label
|
|
||||||
>
|
|
||||||
|
|
||||||
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
|
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
|
||||||
>
|
|
||||||
|
|
||||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3laceholder" />
|
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3laceholder" />
|
||||||
</div>
|
</div>
|
||||||
@ -82,8 +97,8 @@ onMounted(() => {
|
|||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||||
<DatePicker @update:date-value="(value) => {
|
<DatePicker @update:date-value="(value) => {
|
||||||
data.periode = value
|
data.periode = value
|
||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -77,6 +77,6 @@ onMounted(() => {
|
|||||||
<InlineRadioGroup @update:group-value="(value) => {
|
<InlineRadioGroup @update:group-value="(value) => {
|
||||||
data.group = value
|
data.group = value
|
||||||
console.log('data.group', value)
|
console.log('data.group', value)
|
||||||
}" :radio-items="[{ id: 1, title: 'Tidak', checked: true }, { id: 2, title: 'Ya, Grupkan' }]" />
|
}" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,41 +1,63 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Select from '@/components/Select.vue'
|
import Select from '@/components/Select.vue'
|
||||||
import DatePicker from '@/components/DatePicker.vue'
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
import { ref } from 'vue';
|
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
import { onMounted, ref } from 'vue';
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
const uidPlaceholder = 'Semua Distribusi/Wilayah';
|
||||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
const up3Placeholder = 'Semua Area';
|
||||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||||
|
const up3 = ref({ id: 0, name: up3Placeholder });
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||||
const ulp = ref({ id: "", name: ulpPlaceholder });
|
const posko = ref({ id: 0, name: poskoPlaceholder });
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: uid.value,
|
||||||
up3: uppp.value,
|
up3: up3.value,
|
||||||
posko: ulp.value,
|
posko: posko.value,
|
||||||
periode: '',
|
periode: '',
|
||||||
group: 1
|
|
||||||
})
|
})
|
||||||
|
const setUid = (value: any) => {
|
||||||
|
uid.value = value;
|
||||||
|
selectedUid(value);
|
||||||
|
up3.value = { id: 0, name: up3Placeholder };
|
||||||
|
data.value.uid = value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setUp3 = (value: any) => {
|
||||||
|
up3.value = value;
|
||||||
|
selectedUp3Posko(value);
|
||||||
|
posko.value = { id: 0, name: poskoPlaceholder };
|
||||||
|
data.value.up3 = value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setPosko = (value: any) => {
|
||||||
|
posko.value = value;
|
||||||
|
selectedPosko(value);
|
||||||
|
data.value.posko = value;
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
emit('update:filters', data.value)
|
||||||
|
fetchUid()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Distribusi/Wilayah:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Distribusi/Wilayah:</label>
|
||||||
|
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
|
||||||
<Select placeholder="Semua Distribusi/Wilayah" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
|
||||||
|
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||||
|
|
||||||
<Select placeholder="Semua Area" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||||
|
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
|
||||||
|
|
||||||
<Select placeholder="Semua Posko" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
|
|||||||
@ -19,7 +19,7 @@ const poskoPlaceholder = 'Semua Posko'
|
|||||||
const mediaPlaceholder = 'Semua Media'
|
const mediaPlaceholder = 'Semua Media'
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
const up3 = ref({ id: 0, name: up3Placeholder })
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||||
const posko = ref({ id: "", name: poskoPlaceholder })
|
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||||
const media = ref({ id: 0, name: mediaPlaceholder })
|
const media = ref({ id: 0, name: mediaPlaceholder })
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
@ -44,7 +44,7 @@ const setUid = (value: any) => {
|
|||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
up3.value = value
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: "", name: poskoPlaceholder }
|
posko.value = { id: 0, name: poskoPlaceholder }
|
||||||
data.value.up3 = value
|
data.value.up3 = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,17 +1,16 @@
|
|||||||
<!-- <script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Select from '@/components/Select.vue'
|
import Select from '@/components/Select.vue'
|
||||||
import SelectMulti from '@/components/SelectMulti.vue'
|
import SelectMulti from '@/components/SelectMulti.vue'
|
||||||
|
|
||||||
import DatePicker from '@/components/DatePicker.vue'
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
|
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
|
||||||
fetchData();
|
fetchUid();
|
||||||
|
|
||||||
const departments = [
|
const jenisTransakasi = [
|
||||||
{ id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
|
{ id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },
|
||||||
{ id: 2, name: 'HR', contact: 'Kenton Towne' },
|
{ id: 2, value: 'Cleansing Traksaksi TM',label: 'Cleansing Traksaksi TM', },
|
||||||
{ id: 3, name: 'Sales', contact: 'Therese Wunsch' },
|
{ id: 3, value: 'Koreksi Transaksi TM',label: 'Koreksi Transaksi TM', },
|
||||||
{ id: 4, name: 'Finance', contact: 'Benedict Kessler' },
|
{ id: 4, value: 'Koreksi Kode Gangguan dan Anev',label: 'Koreksi Kode Gangguan dan Anev' },
|
||||||
{ id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
|
|
||||||
]
|
]
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -38,12 +37,15 @@ const departments = [
|
|||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
|
||||||
|
|
||||||
<SelectMulti :data="departments" placeholder="Semua Jenis Transaksi" />
|
<SelectMulti
|
||||||
|
:tags="jenisTransakasi"
|
||||||
|
placeholder="Semua Jenis Transaksi"
|
||||||
|
useLabel
|
||||||
|
label="Jenis Transaksi"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||||
<DatePicker />
|
<DatePicker />
|
||||||
</div>
|
</div>
|
||||||
</template> -->
|
</template>
|
||||||
|
|
||||||
<template></template>
|
|
||||||
|
|||||||
@ -38,7 +38,7 @@ const setUlp = (value: any) => {
|
|||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
fetchUid()
|
// fetchUid()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -17,7 +17,7 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
|||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
const uppp = ref({ id: 0, name: uppPlaceholder })
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||||
const posko = ref({ id: "", name: poskoPlaceholder })
|
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: uid.value,
|
||||||
@ -40,7 +40,7 @@ const setUid = (value: any) => {
|
|||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value
|
uppp.value = value
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: "", name: poskoPlaceholder }
|
posko.value = { id: 0, name: poskoPlaceholder }
|
||||||
data.value.up3 = value
|
data.value.up3 = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
|||||||
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder });
|
const up3 = ref({ id: 0, name: up3Placeholder });
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||||
const posko = ref({ id: "", name: poskoPlaceholder });
|
const posko = ref({ id: 0, name: poskoPlaceholder });
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: uid.value,
|
||||||
up3: up3.value,
|
up3: up3.value,
|
||||||
@ -30,7 +30,7 @@ const setUid = (value: any) => {
|
|||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
up3.value = value
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: "", name: poskoPlaceholder }
|
posko.value = { id: 0, name: poskoPlaceholder }
|
||||||
data.value.up3 = value
|
data.value.up3 = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -12,14 +12,14 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
|||||||
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder });
|
const up3 = ref({ id: 0, name: up3Placeholder });
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||||
const posko = ref({ id: "", name: poskoPlaceholder });
|
const posko = ref({ id: 0, name: poskoPlaceholder });
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: uid.value,
|
||||||
up3: up3.value,
|
up3: up3.value,
|
||||||
posko: posko.value,
|
posko: posko.value,
|
||||||
periode: '',
|
periode: '',
|
||||||
minTime: 1,
|
minTime: useTotalDuration().getDataMin().split(' ')[0],
|
||||||
maxTime: 1
|
maxTime: useTotalDuration().getDataMax().split(' ')[0]
|
||||||
})
|
})
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
uid.value = value
|
||||||
@ -31,7 +31,7 @@ const setUid = (value: any) => {
|
|||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
up3.value = value
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: "", name: poskoPlaceholder }
|
posko.value = { id: 0, name: poskoPlaceholder }
|
||||||
data.value.up3 = value
|
data.value.up3 = value
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -40,8 +40,6 @@ const setPosko = (value: any) => {
|
|||||||
selectedPosko(value)
|
selectedPosko(value)
|
||||||
data.value.posko = value
|
data.value.posko = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const sla = [
|
const sla = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
@ -53,28 +51,32 @@ const sla = [
|
|||||||
}
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const setMin = (value: any) => {
|
const setMin = (value: any) => {
|
||||||
console.log(value)
|
console.log(value)
|
||||||
data.value.minTime = value
|
data.value.minTime = value
|
||||||
|
useTotalDuration().setDataMin(value)
|
||||||
|
|
||||||
}
|
}
|
||||||
const setMax = (value: any) => {
|
const setMax = (value: any) => {
|
||||||
data.value.maxTime = value
|
data.value.maxTime = value
|
||||||
|
useTotalDuration().setDataMax(value)
|
||||||
}
|
}
|
||||||
const triggerInput = ref(false)
|
const triggerInput = ref(false)
|
||||||
const changeDuration = (value: any) => {
|
const changeDuration = (value: any) => {
|
||||||
if (value.id === 0) {
|
if (value.id === 0) {
|
||||||
|
setMin("1 Menit")
|
||||||
|
setMax("5 Menit")
|
||||||
console.log('Durasi Menit')
|
console.log('Durasi Menit')
|
||||||
data.value.minTime = 0
|
|
||||||
data.value.maxTime = 5
|
|
||||||
triggerInput.value = false
|
triggerInput.value = false
|
||||||
} else if (value.id === 1) {
|
} else if (value.id === 1) {
|
||||||
data.value.minTime = 0
|
setMin("1 Menit")
|
||||||
data.value.maxTime = 45
|
setMax("45 Menit")
|
||||||
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
|
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
|
||||||
triggerInput.value = true
|
triggerInput.value = true
|
||||||
} else {
|
} else {
|
||||||
data.value.minTime = 46
|
setMin("45 Menit")
|
||||||
data.value.maxTime = 99999 * 60 * 24
|
setMax(99999 * 60 * 24+ ' Menit')
|
||||||
triggerInput.value = true
|
triggerInput.value = true
|
||||||
console.log('Melebihi SLA (> 45 menit)')
|
console.log('Melebihi SLA (> 45 menit)')
|
||||||
}
|
}
|
||||||
@ -123,9 +125,12 @@ onMounted(() => {
|
|||||||
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
|
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
|
||||||
|
|
||||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||||
<InputWithSuffix @default-value="data.minTime" @update:menit-value="setMin($event)" />
|
<InputWithSuffix
|
||||||
|
:value="`${data.minTime} Menit`"
|
||||||
|
/>
|
||||||
<small class="flex items-center">s/d</small>
|
<small class="flex items-center">s/d</small>
|
||||||
<InputWithSuffix @default-value="data.maxTime" @update:menit-value="setMax($event)" />
|
<InputWithSuffix
|
||||||
|
:value="`${data.maxTime} Menit`"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -16,7 +16,7 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
|||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
const uppp = ref({ id: 0, name: uppPlaceholder })
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||||
const posko = ref({ id: "", name: poskoPlaceholder })
|
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: uid.value,
|
||||||
@ -39,7 +39,7 @@ const setUid = (value: any) => {
|
|||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value
|
uppp.value = value
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: "", name: poskoPlaceholder }
|
posko.value = { id: 0, name: poskoPlaceholder }
|
||||||
data.value.up3 = value
|
data.value.up3 = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -42,7 +42,7 @@ const setUid = (value: any) => {
|
|||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value
|
uppp.value = value
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: "", name: poskoPlaceholder }
|
posko.value = { id: 0, name: poskoPlaceholder }
|
||||||
data.value.up3 = value
|
data.value.up3 = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,8 @@
|
|||||||
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
|
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
|
||||||
<input v-model="groupValue"
|
<input v-model="groupValue"
|
||||||
type="radio" name="radio"
|
type="radio" name="radio"
|
||||||
:checked="item.checked" @change="onChange(item)"
|
:checked="itemSelected.id === item.id ? true : false"
|
||||||
|
@change="onChange(item)"
|
||||||
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
|
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
|
||||||
<label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
|
<label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
|
||||||
item.title }}</label>
|
item.title }}</label>
|
||||||
|
|||||||
@ -14,17 +14,21 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
defaultValue: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '1 Menit'
|
default: '1 Menit'
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['update:menitValue'])
|
const handleInput = (e :any) => {
|
||||||
const menitValue = ref(props.defaultValue)
|
e.value = e.value.replace(/[^0-9.]/g, '')
|
||||||
watch(menitValue, (newValue) => {
|
}
|
||||||
emit('update:menitValue', newValue)
|
const handleBlur = (e :any) => {
|
||||||
})
|
e.value = e.value ? e.value + ' Menit' : ''
|
||||||
|
}
|
||||||
|
const handleFocus = (e:any) => {
|
||||||
|
e.value = e.value.replace(/[^0-9.]/g, '')
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -32,7 +36,7 @@ watch(menitValue, (newValue) => {
|
|||||||
|
|
||||||
class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||||
<input
|
<input
|
||||||
v-model="menitValue"
|
:value="props.value"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
type="text"
|
type="text"
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
@ -40,12 +44,10 @@ watch(menitValue, (newValue) => {
|
|||||||
inputmode="numeric"
|
inputmode="numeric"
|
||||||
pattern="[0-9.]*"
|
pattern="[0-9.]*"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:defaultValue="props.defaultValue"
|
@oninput="handleInput($event)"
|
||||||
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
|
@onblur="handleBlur($event)"
|
||||||
onblur="this.value = this.value ? this.value + ' Menit' : ''"
|
@onfocus="handleFocus($event)"
|
||||||
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
|
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
||||||
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0
|
|
||||||
"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,18 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
|
<Type4 @update:filters="(value) => {
|
||||||
|
filters = value
|
||||||
|
}
|
||||||
|
" />
|
||||||
|
</Filters>
|
||||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||||
Laporan Pengaduan Total
|
Laporan Pengaduan Total
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:word-wrap-enabled="true">
|
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
@ -111,11 +117,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
|||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { AnomaliTable2 } from '.'
|
import { AnomaliTable2 } from '.'
|
||||||
|
import { Type4 } from '@/components/Form/FiltersType'
|
||||||
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
const position = { of: '#data' };
|
const position = { of: '#data' };
|
||||||
const showIndicator = ref(true);
|
const showIndicator = ref(true);
|
||||||
const shading = ref(true);
|
const shading = ref(true);
|
||||||
const showPane = ref(true);
|
const showPane = ref(true);
|
||||||
const loading = ref(false)
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -150,11 +161,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
|
||||||
const filters = useFiltersStore()
|
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
||||||
|
laporanAnomaliPenangananPengaduanGangguanPetugas(
|
||||||
filters.setConfig({
|
dateFrom: $dateFrom
|
||||||
type: 'type-4'
|
dateTo: $dateTo
|
||||||
|
posko: $posko
|
||||||
|
idUid: $idUid
|
||||||
|
idUp3: $idUp3
|
||||||
|
) {
|
||||||
|
nama_posko
|
||||||
|
persen_penyelesaian_petugas_anomali_cc_123_marking
|
||||||
|
persen_penyelesaian_petugas_anomali_cc_123_non_marking
|
||||||
|
persen_penyelesaian_petugas_anomali_marking
|
||||||
|
persen_penyelesaian_petugas_anomali_non_marking
|
||||||
|
persen_penyelesaian_petugas_anomali_pln_mobile_marking
|
||||||
|
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
|
||||||
|
total_penyelesaian_petugas_anomali_cc_123_marking
|
||||||
|
total_penyelesaian_petugas_anomali_cc_123_non_marking
|
||||||
|
total_penyelesaian_petugas_anomali_marking
|
||||||
|
total_penyelesaian_petugas_anomali_non_marking
|
||||||
|
total_penyelesaian_petugas_anomali_pln_mobile_marking
|
||||||
|
total_penyelesaian_petugas_anomali_pln_mobile_non_marking
|
||||||
|
total_petugas
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const { posko, uid, up3 } = params
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : "",
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
})
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||||
|
data.value = [
|
||||||
|
...data.value,
|
||||||
|
{
|
||||||
|
...item,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
|
GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
|
||||||
|
{
|
||||||
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: '',
|
||||||
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -4,7 +4,7 @@
|
|||||||
Laporan Pengaduan PLN Mobile
|
Laporan Pengaduan PLN Mobile
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||||
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
@ -48,6 +48,7 @@ const showIndicator = ref(true);
|
|||||||
const shading = ref(true);
|
const shading = ref(true);
|
||||||
const showPane = ref(true);
|
const showPane = ref(true);
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
|
|||||||
@ -1,4 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
|
<Type4 @update:filters="(value) => {
|
||||||
|
filters = value
|
||||||
|
}
|
||||||
|
" />
|
||||||
|
</Filters>
|
||||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||||
Laporan Pengaduan Total
|
Laporan Pengaduan Total
|
||||||
@ -11,66 +17,70 @@
|
|||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
||||||
|
css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
|
<DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
|
||||||
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
<DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
||||||
css-class="custom-table-column">
|
css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="b" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="c" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
|
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="d=b+c" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
<DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
||||||
css-class="custom-table-column">
|
css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
<DxColumn :width="150" alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
caption="Marking" css-class="custom-table-column" />
|
||||||
css-class="custom-table-column" />
|
<DxColumn :width="150" alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
|
||||||
|
caption="Non Marking" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="Marking" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
<DxColumn :width="150" alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
|
||||||
|
caption="Non Marking" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="Marking" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="Non Marking" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
|
|
||||||
<AnomaliTable4 />
|
<AnomaliTable4 :filters-detail="filters" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
@ -79,11 +89,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
|||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { AnomaliTable4 } from '.'
|
import { AnomaliTable4 } from '.'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
|
import { Type4 } from '@/components/Form/FiltersType'
|
||||||
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
|
|
||||||
const position = { of: '#data' };
|
const position = { of: '#data' };
|
||||||
const showIndicator = ref(true);
|
const showIndicator = ref(true);
|
||||||
const shading = ref(true);
|
const shading = ref(true);
|
||||||
const showPane = ref(true);
|
const showPane = ref(true);
|
||||||
const loading = ref(true)
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
@ -118,12 +133,76 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
|
||||||
|
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!,
|
||||||
|
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
|
||||||
|
laporanAnomaliPenangananPengaduanGangguanPetugas(
|
||||||
|
dateFrom: $dateFrom
|
||||||
|
dateTo: $dateTo
|
||||||
|
jenisLaporan :$jenisLaporan
|
||||||
|
idUid: $idUid
|
||||||
|
idUp3: $idUp3
|
||||||
|
posko: $posko
|
||||||
|
|
||||||
onMounted(() => {
|
) {
|
||||||
const filters = useFiltersStore()
|
nama_posko
|
||||||
|
persen_penyelesaian_petugas_anomali_cc_123_marking
|
||||||
filters.setConfig({
|
persen_penyelesaian_petugas_anomali_cc_123_non_marking
|
||||||
type: 'type-4'
|
persen_penyelesaian_petugas_anomali_marking
|
||||||
|
persen_penyelesaian_petugas_anomali_non_marking
|
||||||
|
persen_penyelesaian_petugas_anomali_pln_mobile_marking
|
||||||
|
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
|
||||||
|
total_penyelesaian_petugas_anomali_cc_123_marking
|
||||||
|
total_penyelesaian_petugas_anomali_cc_123_non_marking
|
||||||
|
total_penyelesaian_petugas_anomali_marking
|
||||||
|
total_penyelesaian_petugas_anomali_non_marking
|
||||||
|
total_penyelesaian_petugas_anomali_pln_mobile_marking
|
||||||
|
total_penyelesaian_petugas_anomali_pln_mobile_non_marking
|
||||||
|
total_petugas
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const { posko, uid, up3 } = params
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : "",
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
})
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||||
|
data.value = [
|
||||||
|
...data.value,
|
||||||
|
{
|
||||||
|
...item,
|
||||||
|
total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
|
||||||
|
total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
|
||||||
|
total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
|
GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
|
||||||
|
{
|
||||||
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: '',
|
||||||
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -4,54 +4,56 @@
|
|||||||
Laporan Pengaduan PLN Mobile
|
Laporan Pengaduan PLN Mobile
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:word-wrap-enabled="true">
|
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
|
||||||
|
css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
|
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||||
css-class="custom-table-column">
|
css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="b" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="c" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
|
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="d=b+c" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=b/a"
|
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="e=b/a" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f=c/a"
|
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="f=c/a" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g=e+f"
|
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali"
|
||||||
css-class="custom-table-column" />
|
data-type="number" caption="g=e+f" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
@ -59,6 +61,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
defineProps({
|
||||||
|
filtersDetail: {
|
||||||
|
type: Object as PropType<any>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
@ -66,12 +74,18 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
|||||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { ref } from 'vue'
|
import { ref, watch, type PropType } from 'vue'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
const position = { of: '#data' };
|
const position = { of: '#data' };
|
||||||
const showIndicator = ref(true);
|
const showIndicator = ref(true);
|
||||||
const shading = ref(true);
|
const shading = ref(true);
|
||||||
const showPane = ref(true);
|
const showPane = ref(true);
|
||||||
const loading = ref(true)
|
const data = ref<any[]>([])
|
||||||
|
const filtersDetail = ref({}); // Declare the 'filters' variable
|
||||||
|
watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
|
||||||
|
filterData(newValue)
|
||||||
|
}, { immediate: true })
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -105,5 +119,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
|
||||||
|
query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!,
|
||||||
|
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
|
||||||
|
laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
|
||||||
|
dateFrom: $dateFrom
|
||||||
|
dateTo: $dateTo
|
||||||
|
jenisLaporan :$jenisLaporan
|
||||||
|
idUid: $idUid
|
||||||
|
idUp3: $idUp3
|
||||||
|
posko: $posko
|
||||||
|
|
||||||
|
) {
|
||||||
|
nama_petugas
|
||||||
|
nama_posko
|
||||||
|
persen_penyelesaian_petugas_anomali
|
||||||
|
persen_penyelesaian_petugas_anomali_cc_123
|
||||||
|
persen_penyelesaian_petugas_anomali_pln_mobile
|
||||||
|
total_penyelesaian_petugas_anomali
|
||||||
|
total_penyelesaian_petugas_anomali_cc_123
|
||||||
|
total_penyelesaian_petugas_anomali_pln_mobile
|
||||||
|
total_wo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const { posko, uid, up3 } = params
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : "",
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3 ? up3.id : 0
|
||||||
|
})
|
||||||
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||||
|
data.value = [
|
||||||
|
...data.value,
|
||||||
|
{
|
||||||
|
...item,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
|
laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
|
||||||
|
{
|
||||||
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: '',
|
||||||
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -1,4 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
|
<Type4 @update:filters="(value) => {
|
||||||
|
filters = value
|
||||||
|
}
|
||||||
|
" />
|
||||||
|
</Filters>
|
||||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||||
Laporan Pengaduan Total
|
Laporan Pengaduan Total
|
||||||
@ -77,6 +83,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
import { useFiltersStore } from '@/stores/filters'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
@ -87,11 +95,14 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
|||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { AnomaliTable6 } from '.'
|
import { AnomaliTable6 } from '.'
|
||||||
|
import { Type4 } from '@/components/Form/FiltersType'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
const position = { of: '#data' };
|
const position = { of: '#data' };
|
||||||
const showIndicator = ref(true);
|
const showIndicator = ref(true);
|
||||||
const shading = ref(true);
|
const shading = ref(true);
|
||||||
const showPane = ref(true);
|
const showPane = ref(true);
|
||||||
const loading = ref(true)
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
@ -127,11 +138,64 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
const GET_laporanCheckInCheckOut = gql`
|
||||||
const filters = useFiltersStore()
|
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
||||||
|
laporanCheckInCheckOut(
|
||||||
filters.setConfig({
|
dateFrom: $dateFrom
|
||||||
type: 'type-4'
|
dateTo: $dateTo
|
||||||
|
posko: $posko
|
||||||
|
idUid: $idUid
|
||||||
|
idUp3: $idUp3
|
||||||
|
) {
|
||||||
|
avg_durasi_wo_gangguan_individual
|
||||||
|
avg_durasi_wo_penugasan_khusus
|
||||||
|
avg_rct_wo_gangguan_individual
|
||||||
|
avg_rpt_wo_gangguan_individual
|
||||||
|
jumlah_wo_gangguan_individual
|
||||||
|
jumlah_wo_penugasan_khusus
|
||||||
|
personil_yantek
|
||||||
|
user_regu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const { posko, uid, up3 } = params
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : "",
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
})
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||||
|
data.value = [
|
||||||
|
...data.value,
|
||||||
|
{
|
||||||
|
...item,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
|
GET_laporanCheckInCheckOut,
|
||||||
|
{
|
||||||
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: '',
|
||||||
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -35,6 +35,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
@ -47,6 +49,7 @@ const position = { of: '#data' };
|
|||||||
const showIndicator = ref(true);
|
const showIndicator = ref(true);
|
||||||
const shading = ref(true);
|
const shading = ref(true);
|
||||||
const showPane = ref(true);
|
const showPane = ref(true);
|
||||||
|
const data = ref<any[]>([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
|
|||||||
@ -1,45 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => {
|
<Type1 @update:filters="(value) => {
|
||||||
filters = value
|
filters = value
|
||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
:word-wrap-enabled="true">
|
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="200" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column" />
|
<DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" css-class="custom-table-column" />
|
||||||
<DxColumn :width="200" alignment="center" data-field="" caption="Personil Yantek"
|
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
|
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
|
||||||
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
|
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
|
||||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
|
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
|
||||||
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
|
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RPT WO Gangguan"
|
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
|
||||||
|
caption="Rata-rata RPT WO Gangguan"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RCT WO Gangguan"
|
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" caption="Rata-rata RCT WO Gangguan"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Jumlah Wo Penugasan Khusus"
|
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" caption="Jumlah Wo Penugasan Khusus"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
|
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
|
||||||
caption="Rata-rata Duarasi WO Penugasan" css-class="custom-table-column" />
|
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
import { useFiltersStore } from '@/stores/filters'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
@ -51,13 +53,18 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { Type1 } from '@/components/Form/FiltersType'
|
import { Type1 } from '@/components/Form/FiltersType'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
|
const data = ref<any[]>([])
|
||||||
const showDetail = ref(false)
|
const showDetail = ref(false)
|
||||||
const loading = ref(false)
|
const showData = () => {
|
||||||
|
showDetail.value = true
|
||||||
|
}
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -86,14 +93,72 @@ const onExporting = (e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
|
dataDetail.value = data
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref();
|
const GET_laporanCheckInCheckOut = gql`
|
||||||
const filterData = (filters: any) => {
|
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
||||||
console.log(filters)
|
laporanCheckInCheckOut(
|
||||||
|
dateFrom: $dateFrom
|
||||||
|
dateTo: $dateTo
|
||||||
|
posko: $posko
|
||||||
|
idUid: $idUid
|
||||||
|
idUp3: $idUp3
|
||||||
|
) {
|
||||||
|
avg_durasi_wo_gangguan_individual
|
||||||
|
avg_durasi_wo_penugasan_khusus
|
||||||
|
avg_rct_wo_gangguan_individual
|
||||||
|
avg_rpt_wo_gangguan_individual
|
||||||
|
jumlah_wo_gangguan_individual
|
||||||
|
jumlah_wo_penugasan_khusus
|
||||||
|
personil_yantek
|
||||||
|
user_regu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const { posko, uid, up3 } = params
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : "",
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3 ? up3.id : 0
|
||||||
|
})
|
||||||
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||||
|
data.value = [
|
||||||
|
...data.value,
|
||||||
|
{
|
||||||
|
...item,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
|
GET_laporanCheckInCheckOut,
|
||||||
|
{
|
||||||
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: '',
|
||||||
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => {
|
<Type3 @update:filters="(value) => {
|
||||||
filters = value
|
filters = value
|
||||||
}
|
}
|
||||||
@ -13,47 +13,47 @@
|
|||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
|
<DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
<DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
<DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
|
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e"
|
<DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas" data-type="number" caption="e"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
|
<DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
|
<DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h"
|
<DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
@ -73,13 +73,14 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import { Type3 } from '@/components/Form/FiltersType'
|
import { Type3 } from '@/components/Form/FiltersType'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const showDetail = ref(false)
|
||||||
const loading = ref(false)
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -109,13 +110,74 @@ const onExporting = (e: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const GET_laporanCttKwhPeriksa = gql`
|
||||||
|
query laporanCttKwhPeriksa($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
||||||
|
laporanCttKwhPeriksa(
|
||||||
|
dateFrom: $dateFrom
|
||||||
|
dateTo: $dateTo
|
||||||
|
posko: $posko
|
||||||
|
idUid: $idUid
|
||||||
|
idUp3: $idUp3
|
||||||
|
) {
|
||||||
|
dlpd
|
||||||
|
history_p2ti
|
||||||
|
nama_posko
|
||||||
|
rekomendasi_sistem_mendatangkan_petugas
|
||||||
|
total_wo
|
||||||
|
total_wo_cc123
|
||||||
|
total_wo_comcen
|
||||||
|
total_wo_loket
|
||||||
|
total_wo_pln_mobile
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const { posko, uid, up3 } = params
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : "",
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3 ? up3.id : 0
|
||||||
|
})
|
||||||
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||||
|
data.value = [
|
||||||
|
...data.value,
|
||||||
|
{
|
||||||
|
...item,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
|
GET_laporanCttKwhPeriksa,
|
||||||
|
{
|
||||||
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: '',
|
||||||
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
|
dataDetail.value = data
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
const showData = () => {
|
||||||
const filters = ref()
|
showDetail.value = true
|
||||||
const filterData = (filters: any) => {
|
|
||||||
console.log(filters)
|
|
||||||
}
|
}
|
||||||
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="runReset = !runReset" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => {
|
<Type1 :run-reset="runReset" @update:filters="(value) => {
|
||||||
filters = value
|
filters = value
|
||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
@ -12,15 +12,18 @@
|
|||||||
:hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
|
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||||
|
caption="No Laporan" cell-template="data" />
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
|
||||||
caption="Pembuat Laporan" cell-template="data" />
|
caption="Pembuat Laporan" cell-template="data" />
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||||
@ -31,13 +34,13 @@
|
|||||||
caption="Tgl Response" cell-template="data" />
|
caption="Tgl Response" cell-template="data" />
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||||
caption="Tgl Recovery" cell-template="data" />
|
caption="Tgl Recovery" cell-template="data" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||||
caption="Durasi Response Time" cell-template="data" />
|
caption="Durasi Response Time" cell-template="data" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||||
caption="Durasi Recovery Time" cell-template="data" />
|
caption="Durasi Recovery Time" cell-template="data" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
|
||||||
caption="Posko Awal" cell-template="data" />
|
caption="Posko Awal" cell-template="data" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
|
||||||
caption="Posko Tujuan" cell-template="data" />
|
caption="Posko Tujuan" cell-template="data" />
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
cell-template="data" />
|
cell-template="data" />
|
||||||
@ -125,14 +128,14 @@
|
|||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
Posko Awal:
|
Posko Awal:
|
||||||
</h3>
|
</h3>
|
||||||
<InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
|
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
Posko Tujuan:
|
Posko Tujuan:
|
||||||
</h3>
|
</h3>
|
||||||
<InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
|
<InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -188,7 +191,7 @@
|
|||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
Posko:
|
Posko:
|
||||||
</h3>
|
</h3>
|
||||||
<InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
|
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -215,7 +218,6 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
|||||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
|
|
||||||
import { useDialogStore } from '@/stores/dialog'
|
import { useDialogStore } from '@/stores/dialog'
|
||||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
@ -230,24 +232,23 @@ const dialog = useDialogStore()
|
|||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const showDetail = ref(false)
|
||||||
|
const runReset = ref(false)
|
||||||
const closeDetail = () => {
|
const closeDetail = () => {
|
||||||
showDetail.value = false
|
showDetail.value = false
|
||||||
}
|
}
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
|
|
||||||
exportToPdf({
|
exportToPdf({
|
||||||
jsPDFDocument: doc,
|
jsPDFDocument: doc,
|
||||||
component: e.component,
|
component: e.component,
|
||||||
indent: 5
|
indent: 100
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
doc.save(`.pdf`)
|
doc.save(`.pdf`)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet('Employees')
|
const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
|
||||||
|
|
||||||
exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
@ -255,7 +256,7 @@ const onExporting = (e: any) => {
|
|||||||
autoFilterEnabled: true
|
autoFilterEnabled: true
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -264,7 +265,7 @@ const onExporting = (e: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
|
const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
|
||||||
query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: Int, $idUid: Int, $idUp3: Int) {
|
||||||
daftarGangguanDialihkanKePoskoLain(
|
daftarGangguanDialihkanKePoskoLain(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
@ -275,18 +276,18 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
|
|||||||
alamat_pelapor
|
alamat_pelapor
|
||||||
durasi_recovery_time
|
durasi_recovery_time
|
||||||
durasi_response_time
|
durasi_response_time
|
||||||
|
waktu_lapor
|
||||||
waktu_dialihkan
|
waktu_dialihkan
|
||||||
waktu_recovery
|
waktu_recovery
|
||||||
waktu_response
|
waktu_response
|
||||||
id_gangguan
|
|
||||||
idpel_nometer
|
idpel_nometer
|
||||||
keterangan_pelapor
|
keterangan_pelapor
|
||||||
media
|
media
|
||||||
nama_pelapor
|
nama_pelapor
|
||||||
no_laporan
|
no_laporan
|
||||||
no_telp_pelapor
|
no_telp_pelapor
|
||||||
posko_asal
|
nama_posko_lama
|
||||||
posko_tujuan
|
nama_posko_baru
|
||||||
status_akhir
|
status_akhir
|
||||||
waktu_recovery
|
waktu_recovery
|
||||||
waktu_response
|
waktu_response
|
||||||
@ -299,7 +300,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
@ -311,9 +312,7 @@ const filterData = (params: any) => {
|
|||||||
{
|
{
|
||||||
...item,
|
...item,
|
||||||
pembuat_laporan: '-',
|
pembuat_laporan: '-',
|
||||||
waktu_lapor: '-',
|
posko: item.nama_posko_baru
|
||||||
status_akhir: fetchStatus(item.status_akhir),
|
|
||||||
posko: item.posko_asal
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
|
|||||||
@ -19,7 +19,8 @@
|
|||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
|
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" name="poskoGroup" alignment="center" data-field="posko" caption="Posko"
|
<DxColumn :width="150" name="poskoGroup" alignment="center" data-field="posko" caption="Posko"
|
||||||
css-class="custom-table-column" :group-index="0" />
|
css-class="custom-table-column" :group-index="0" />
|
||||||
@ -260,7 +261,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0,
|
idUp3: up3 ? up3.id : 0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -188,7 +188,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0,
|
idUp3: up3 ? up3.id : 0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -191,7 +191,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id :0,
|
idUid: uid ? uid.id :0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3? up3.id:0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -158,7 +158,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0,
|
idUp3: up3 ? up3.id : 0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -124,7 +124,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id :0,
|
idUid: uid ? uid.id :0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3? up3.id:0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -275,7 +275,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id :0,
|
idUid: uid ? uid.id :0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3? up3.id:0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -205,7 +205,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id :0,
|
idUid: uid ? uid.id :0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3? up3.id:0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -181,7 +181,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id :0,
|
idUid: uid ? uid.id :0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3? up3.id:0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -154,7 +154,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id :0,
|
idUid: uid ? uid.id :0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3? up3.id:0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -12,10 +12,10 @@
|
|||||||
column-resizing-mode="widget">
|
column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible.sync="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
@ -240,7 +240,7 @@ const filterData = (params: any) => {
|
|||||||
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
|
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|||||||
@ -159,7 +159,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id :0,
|
idUid: uid ? uid.id :0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3? up3.id:0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
@ -75,7 +75,7 @@ const filterData = (params: any) => {
|
|||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
minDurasiResponseTime : minTime ? minTime : 0,
|
minDurasiResponseTime : minTime ? minTime : 0,
|
||||||
maxDurasiResponseTime : maxTime ? maxTime : 1,
|
maxDurasiResponseTime : maxTime ? maxTime : 1,
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
@ -75,7 +75,7 @@ const filterData = (params: any) => {
|
|||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
|
minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
|
||||||
maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
|
maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
@ -108,7 +108,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true"/>
|
v-if="loading" v-model:visible="loading" :enabled="true"/>
|
||||||
@ -103,7 +103,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0,
|
idUp3: up3 ? up3.id : 0,
|
||||||
media : media ? media.id : "Twitter"
|
media : media ? media.id : "Twitter"
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
@ -110,7 +110,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3?.id ? up3.id : 0,
|
idUp3: up3?.id ? up3.id : 0,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
|||||||
@ -245,7 +245,7 @@ const filterData = (params: any) => {
|
|||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|||||||
@ -5,15 +5,14 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
<div id="data">
|
||||||
<div>
|
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
|||||||
@ -5,14 +5,14 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
|||||||
@ -5,14 +5,14 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
|||||||
@ -5,14 +5,14 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
|||||||
@ -5,14 +5,14 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
|||||||
@ -5,14 +5,14 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="true">
|
:word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
|||||||
@ -5,14 +5,14 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
}
|
}
|
||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
|
|||||||
@ -11,30 +11,35 @@
|
|||||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan"
|
||||||
caption="No" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
|
||||||
caption="Nomor Gangguan" />
|
caption="Nomor Gangguan" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
|
||||||
caption="Nama Pelanggan" />
|
caption="Nama Pelanggan" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Isi Laporan" />
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
caption="Isi Laporan" />
|
||||||
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
|
||||||
caption="Penyebab Gangguan" />
|
caption="Penyebab Gangguan" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Padam" />
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
|
||||||
|
caption="Tgl Padam" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Regu" />
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
|
||||||
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
|
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Sumber" />
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
|
||||||
|
caption="Sumber" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Satuan" />
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Vol" />
|
caption="Satuan" />
|
||||||
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
|
||||||
|
caption="Vol" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -42,19 +47,81 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||||
import Filters from '@/components/Form/Filters.vue';
|
import Filters from '@/components/Form/Filters.vue';
|
||||||
import { Type14 } from '@/components/Form/FiltersType';
|
import { Type14 } from '@/components/Form/FiltersType';
|
||||||
|
import { useQuery } from '@vue/apollo-composable';
|
||||||
|
import gql from 'graphql-tag';
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const loading = ref(false)
|
const data = ref<any[]>([])
|
||||||
const filters = ref()
|
|
||||||
const filterData = (filters: any) => {
|
const daftarGangguanDanMaterialDipakai = gql`
|
||||||
console.log(filters)
|
query DaftardaftarGangguanDanMaterialDipakai(
|
||||||
|
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
|
||||||
|
) {
|
||||||
|
daftarGangguanDanMaterialDipakai(
|
||||||
|
dateFrom: $dateFrom
|
||||||
|
dateTo: $dateTo
|
||||||
|
distribusi: $idUid
|
||||||
|
area: $idUp3
|
||||||
|
posko: $posko
|
||||||
|
) {
|
||||||
|
isi_laporan
|
||||||
|
nama_material
|
||||||
|
nama_pelanggan
|
||||||
|
nomor_gangguan
|
||||||
|
penyebab_gangguan
|
||||||
|
regu
|
||||||
|
satuan
|
||||||
|
sumber
|
||||||
|
volume
|
||||||
|
waktu_padam
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
|
||||||
|
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
||||||
|
idUid: 0,
|
||||||
|
idUp3: 0,
|
||||||
|
posko: ''
|
||||||
|
})
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
const { posko, idUid, idUp3 } = params
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
idUid: idUid ? idUid.id : 0,
|
||||||
|
idUp3: idUp3 ? idUp3.id : 0,
|
||||||
|
posko: posko ? posko.id : "",
|
||||||
|
|
||||||
|
})
|
||||||
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
|
||||||
|
data.value = [
|
||||||
|
...data.value,
|
||||||
|
{
|
||||||
|
...item
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -1,29 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
|
<Type14 @update:filters="(value) => {
|
||||||
|
filters = value
|
||||||
|
}
|
||||||
|
" />
|
||||||
|
</Filters>
|
||||||
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
|
||||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material"
|
||||||
caption="No" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
|
||||||
caption="Kode Material" />
|
caption="Kode Material" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
|
||||||
caption="Nama Material" />
|
caption="Nama Material" />
|
||||||
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="" caption="Satuan" />
|
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan" />
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
|
||||||
caption="Sumber Material" />
|
caption="Sumber Material" />
|
||||||
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
|
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
|
||||||
<DxColumn v-for="i in 31" css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
|
||||||
:caption="i" />
|
:caption="i" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -31,21 +37,106 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||||
|
import { Type14 } from '@/components/Form/FiltersType';
|
||||||
|
import Filters from '@/components/Form/Filters.vue';
|
||||||
|
import { useQuery } from '@vue/apollo-composable';
|
||||||
|
import gql from 'graphql-tag';
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const loading = ref(false)
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
onMounted(() => {
|
const rekapitulasiPemakaianMaterial = gql`
|
||||||
const filters = useFiltersStore()
|
query DaftarrekapitulasiPemakaianMaterial(
|
||||||
|
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
|
||||||
|
) {
|
||||||
|
rekapitulasiPemakaianMaterial(
|
||||||
|
dateFrom: $dateFrom
|
||||||
|
dateTo: $dateTo
|
||||||
|
distribusi: $idUid
|
||||||
|
area: $idUp3
|
||||||
|
posko: $posko
|
||||||
|
) {
|
||||||
|
kode_material
|
||||||
|
nama_material
|
||||||
|
satuan
|
||||||
|
sumber_material
|
||||||
|
tgl1
|
||||||
|
tgl10
|
||||||
|
tgl11
|
||||||
|
tgl12
|
||||||
|
tgl13
|
||||||
|
tgl14
|
||||||
|
tgl15
|
||||||
|
tgl16
|
||||||
|
tgl17
|
||||||
|
tgl18
|
||||||
|
tgl19
|
||||||
|
tgl2
|
||||||
|
tgl20
|
||||||
|
tgl21
|
||||||
|
tgl22
|
||||||
|
tgl23
|
||||||
|
tgl24
|
||||||
|
tgl25
|
||||||
|
tgl26
|
||||||
|
tgl27
|
||||||
|
tgl28
|
||||||
|
tgl29
|
||||||
|
tgl3
|
||||||
|
tgl30
|
||||||
|
tgl31
|
||||||
|
tgl4
|
||||||
|
tgl5
|
||||||
|
tgl6
|
||||||
|
tgl7
|
||||||
|
tgl8
|
||||||
|
tgl9
|
||||||
|
|
||||||
filters.setConfig({
|
}
|
||||||
type: 'type-14'
|
}
|
||||||
})
|
`
|
||||||
|
const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
|
||||||
|
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
||||||
|
idUid: 0,
|
||||||
|
idUp3: 0,
|
||||||
|
posko: ''
|
||||||
})
|
})
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|
||||||
|
const { posko, idUid, idUp3 } = params
|
||||||
|
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||||
|
idUid: idUid ? idUid.id : 0,
|
||||||
|
idUp3: idUp3 ? idUp3.id : 0,
|
||||||
|
posko: posko ? posko.id : "",
|
||||||
|
})
|
||||||
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
|
||||||
|
data.value = [
|
||||||
|
...data.value,
|
||||||
|
{
|
||||||
|
...item
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -6,32 +6,34 @@
|
|||||||
" />
|
" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
:word-wrap-enabled="true">
|
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
||||||
<DxColumn alignment="center" caption="Januari 2019" css-class="custom-table-column">
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Keluhan"
|
<DxColumn alignment="center" :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number" caption="Gangguan"
|
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Keluhan" css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number"
|
||||||
|
caption="Gangguan" css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number" caption="Keluhan"
|
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Keluhan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number" caption="Gangguan"
|
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Gangguan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number" caption="Total"
|
<DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Total" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||||
@ -39,22 +41,22 @@
|
|||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_lalu"
|
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
||||||
data-type="number" />
|
data-field="total_komplain_bulan_lalu" data-type="number" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number" caption="Keluhan"
|
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Keluhan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Gangguan"
|
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Gangguan" css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number" caption="Keluhan"
|
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Keluhan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number" caption="Gangguan"
|
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Gangguan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number" caption="Total"
|
<DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Total" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||||
@ -62,26 +64,26 @@
|
|||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_ini"
|
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
||||||
data-type="number" />
|
data-field="total_komplain_bulan_ini" data-type="number" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number" caption="Keluhan"
|
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Keluhan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number" caption="Gangguan"
|
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Gangguan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number" caption="Informasi"
|
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Informasi" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number" caption="Keluhan"
|
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Keluhan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number" caption="Gangguan"
|
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Gangguan" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number" caption="Informasi"
|
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Informasi" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number" caption="% Total"
|
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="% Total" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -101,6 +103,7 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
|
import { getMonthName } from '@/utils/texts'
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
@ -108,6 +111,15 @@ const showPane = ref(true)
|
|||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const showDetail = ref(false)
|
||||||
|
const tahunSekarang = ref(new Date().getFullYear())
|
||||||
|
const bulanSekarang = ref(new Date().getMonth())
|
||||||
|
if (bulanSekarang.value - 1 == 0) {
|
||||||
|
let bulanLalu = 12
|
||||||
|
let tahunLalu = tahunSekarang.value - 1
|
||||||
|
} else {
|
||||||
|
let bulanLalu = bulanSekarang.value - 1
|
||||||
|
let tahunLalu = tahunSekarang.value
|
||||||
|
}
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -137,8 +149,8 @@ const onExporting = (e: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
const penurunanJumlahKomplainBulanan = gql`
|
const penurunanJumlahKomplainBulanan = gql`
|
||||||
query DaftarpenurunanJumlahKomplainBulanan(
|
query DaftarpenurunanJumlahKomplainBulanan(
|
||||||
@ -181,42 +193,42 @@ const penurunanJumlahKomplainBulanan = gql`
|
|||||||
}
|
}
|
||||||
`
|
`
|
||||||
const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
|
const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
|
||||||
regional: '',
|
regional: '',
|
||||||
posko: '',
|
posko: '',
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0,
|
||||||
bulan: 10,
|
bulan: 10,
|
||||||
tahun: 2023
|
tahun: 2023
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
|
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
posko: posko ? posko.id : "",
|
posko: posko ? posko.id : "",
|
||||||
idUid: idUid ? idUid.id : 0,
|
idUid: idUid ? idUid.id : 0,
|
||||||
idUp3: idUp3 ? idUp3.id : 0,
|
idUp3: idUp3 ? idUp3.id : 0,
|
||||||
bulan: bulan ? bulan.id : 10,
|
bulan: bulan ? bulan.id : 10,
|
||||||
tahun: bulan ? tahun.id : 2023
|
tahun: bulan ? tahun.id : 2023
|
||||||
})
|
})
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
|
queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
|
||||||
data.value = [
|
data.value = [
|
||||||
...data.value,
|
...data.value,
|
||||||
{
|
{
|
||||||
...item
|
...item
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
console.log(queryResult.networkStatus)
|
console.log(queryResult.networkStatus)
|
||||||
})
|
})
|
||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -71,6 +71,9 @@ const showPane = ref(true)
|
|||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const showDetail = ref(false)
|
||||||
|
const tahunSekarang = ref(new Date().getFullYear())
|
||||||
|
const bulanSekarang = ref(new Date().getMonth())
|
||||||
|
const tahunLalu = ref(tahunSekarang.value - 1)
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
|||||||
@ -1,107 +1,115 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
interface DataItem {
|
|
||||||
id: number;
|
import { type PropType } from 'vue'
|
||||||
name: string;
|
import Multiselect from '@vueform/multiselect'
|
||||||
|
interface Tags {
|
||||||
|
id: number
|
||||||
|
value: string,
|
||||||
|
label: string
|
||||||
}
|
}
|
||||||
|
|
||||||
import { ref, computed, onMounted } from 'vue'
|
defineProps({
|
||||||
import {
|
|
||||||
Combobox,
|
|
||||||
ComboboxInput,
|
|
||||||
ComboboxButton,
|
|
||||||
ComboboxOptions,
|
|
||||||
ComboboxOption,
|
|
||||||
TransitionRoot
|
|
||||||
} from '@headlessui/vue'
|
|
||||||
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
placeholder: {
|
placeholder: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
data: {
|
tags: {
|
||||||
type: Array as () => DataItem[],
|
type: Array as PropType<Tags[]>,
|
||||||
default: []
|
required: true
|
||||||
|
},
|
||||||
|
useLabel: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const emit = defineEmits(["update:selected"])
|
|
||||||
|
|
||||||
const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]);
|
|
||||||
|
|
||||||
let selected = ref<DataItem[]>([data.value[0]])
|
|
||||||
let query = ref('')
|
|
||||||
let filteredData = computed(() =>
|
|
||||||
query.value === ''
|
|
||||||
? data.value
|
|
||||||
: data.value.filter((item: DataItem) =>
|
|
||||||
item.name
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/\s+/g, '')
|
|
||||||
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
|
|
||||||
)
|
|
||||||
)
|
|
||||||
|
|
||||||
const show = ref(false)
|
|
||||||
const removeJenis = (item: DataItem) => {
|
|
||||||
selected.value = selected.value.filter((i) => i.id !== item.id)
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple>
|
<div class="flex flex-col">
|
||||||
<div class="relative mt-1">
|
<Multiselect
|
||||||
|
mode="tags"
|
||||||
<div
|
:placeholder="placeholder"
|
||||||
class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
|
:close-on-select="false"
|
||||||
<ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
|
:searchable="true"
|
||||||
:displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
|
:create-option="true"
|
||||||
@click="show = true" @blur="show = false" defaultValue="" />
|
:options="tags"
|
||||||
|
:classes="{
|
||||||
<ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
|
container:
|
||||||
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
|
'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg bg-gray-200 text-left text-base leading-snug outline-none',
|
||||||
</ComboboxButton>
|
containerDisabled: 'cursor-default bg-gray-50',
|
||||||
</div>
|
containerOpen: 'rounded-b-none',
|
||||||
<span class="flex flex-wrap gap-2">
|
containerOpenTop: 'rounded-t-none',
|
||||||
<span v-if="selected.length == 0" class="p-0.5">Empty</span>
|
containerActive: '',
|
||||||
<span v-for="item in selected" :key="item.id" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
|
wrapper:
|
||||||
<span>{{ item.name }}</span>
|
'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
|
||||||
<svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
singleLabel:
|
||||||
xmlns="http://www.w3.org/2000/svg" @click.stop.prevent="removeJenis(item)">
|
'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
|
||||||
</svg>
|
multipleLabel:
|
||||||
</span>
|
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
|
||||||
</span>
|
search:
|
||||||
<TransitionRoot :show="show || open" leave="transition ease-in duration-100" leaveFrom="opacity-100"
|
'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
|
||||||
leaveTo="opacity-0" @after-leave="query = ''">
|
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
|
||||||
<ComboboxOptions static
|
tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
|
||||||
class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
|
||||||
<div v-if="filteredData.length === 0 && query !== ''"
|
tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
|
||||||
class="relative cursor-default select-none py-2 px-4 text-gray-700">
|
tagWrapperBreak: 'whitespace-normal break-all',
|
||||||
Nothing found.
|
tagRemove:
|
||||||
</div>
|
'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
|
||||||
|
tagRemoveIcon:
|
||||||
<ComboboxOption v-for="item in filteredData" as="template" :key="item.id" :value="item"
|
'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
|
||||||
v-slot="{ selected, active }">
|
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
|
||||||
<li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
|
tagsSearch:
|
||||||
'bg-teal-600 text-white': active,
|
' bg-gray-200 absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
|
||||||
'text-gray-900': !active
|
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
|
||||||
}">
|
placeholder:
|
||||||
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
|
'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
|
||||||
{{ item.name }}
|
caret:
|
||||||
</span>
|
'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
|
||||||
<span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
|
caretOpen: 'rotate-180 pointer-events-auto',
|
||||||
:class="{ 'text-white': active, 'text-teal-600': !active }">
|
clear:
|
||||||
<CheckIcon class="h-5 w-5" aria-hidden="true" />
|
'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
|
||||||
</span>
|
clearIcon:
|
||||||
</li>
|
'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
|
||||||
</ComboboxOption>
|
spinner:
|
||||||
</ComboboxOptions>
|
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
|
||||||
</TransitionRoot>
|
infinite: 'flex items-center justify-center w-full',
|
||||||
</div>
|
infiniteSpinner:
|
||||||
</Combobox>
|
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
|
||||||
</template>
|
dropdown:
|
||||||
|
'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
|
||||||
|
dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
|
||||||
|
dropdownHidden: 'hidden',
|
||||||
|
options: 'flex flex-col p-0 m-0 list-none',
|
||||||
|
optionsTop: '',
|
||||||
|
group: 'p-0 m-0',
|
||||||
|
groupLabel:
|
||||||
|
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
|
||||||
|
groupLabelPointable: 'cursor-pointer',
|
||||||
|
groupLabelPointed: 'bg-gray-300 text-gray-700',
|
||||||
|
groupLabelSelected: 'bg-green-600 text-white',
|
||||||
|
groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
|
||||||
|
groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
|
||||||
|
groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
|
||||||
|
groupOptions: 'p-0 m-0',
|
||||||
|
option:
|
||||||
|
'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
|
||||||
|
optionPointed: 'text-gray-800 bg-gray-100',
|
||||||
|
optionSelected: 'text-white bg-green-500',
|
||||||
|
optionDisabled: 'text-gray-300 cursor-not-allowed',
|
||||||
|
optionSelectedPointed: 'text-white bg-green-500 opacity-90',
|
||||||
|
optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
|
||||||
|
noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
|
||||||
|
noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
|
||||||
|
fakeInput:
|
||||||
|
'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
|
||||||
|
assist: 'absolute -m-px w-px h-px overflow-hidden',
|
||||||
|
spacer: 'box-content'
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -2,8 +2,8 @@ import { ref } from 'vue'
|
|||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
export const useTotalDuration = defineStore('totalDuration', () => {
|
export const useTotalDuration = defineStore('totalDuration', () => {
|
||||||
const totalMin = ref(1)
|
const totalMin = ref("1 Menit")
|
||||||
const totalMax = ref(1)
|
const totalMax = ref("5 Menit")
|
||||||
const setDataMin = (value: any) => {
|
const setDataMin = (value: any) => {
|
||||||
totalMin.value = value
|
totalMin.value = value
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,102 +1,116 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
const colors = require("tailwindcss/colors")
|
const svgToDataUri = require('mini-svg-data-uri')
|
||||||
|
const colors = require('tailwindcss/colors')
|
||||||
export default {
|
export default {
|
||||||
content: [
|
content: [
|
||||||
"./index.html",
|
'./index.html',
|
||||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
'./src/**/*.{vue,js,ts,jsx,tsx}',
|
||||||
"./src/**/**/*.{vue,js,ts,jsx,tsx}",
|
'./src/**/**/*.{vue,js,ts,jsx,tsx}',
|
||||||
"./node_modules/vue-tailwind-datepicker/**/*.js"
|
'./node_modules/vue-tailwind-datepicker/**/*.js'
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
backgroundImage: (theme) => ({
|
||||||
|
'multiselect-caret': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>`
|
||||||
|
)}")`,
|
||||||
|
'multiselect-spinner': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 512 512" fill="${theme(
|
||||||
|
'colors.green.500'
|
||||||
|
)}" xmlns="http://www.w3.org/2000/svg"><path d="M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z"></path></svg>`
|
||||||
|
)}")`,
|
||||||
|
'multiselect-remove': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>`
|
||||||
|
)}")`
|
||||||
|
}),
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Plus Jakarta Sans', 'sans-serif'],
|
sans: ['Plus Jakarta Sans', 'sans-serif']
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
'266': '266px',
|
266: '266px',
|
||||||
'320': '320px',
|
320: '320px'
|
||||||
},
|
},
|
||||||
height: {
|
height: {
|
||||||
'screen-80': '80vh'
|
'screen-80': '80vh'
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
"vtd-primary": {
|
'vtd-primary': {
|
||||||
'50': '#e6eff1',
|
50: '#e6eff1',
|
||||||
'100': '#cddee3',
|
100: '#cddee3',
|
||||||
'200': '#9abdc6',
|
200: '#9abdc6',
|
||||||
'300': '#689daa',
|
300: '#689daa',
|
||||||
'400': '#357c8d',
|
400: '#357c8d',
|
||||||
'500': '#035b71',
|
500: '#035b71',
|
||||||
'600': '#02495a',
|
600: '#02495a',
|
||||||
'700': '#02495a',
|
700: '#02495a',
|
||||||
'800': '#01242d',
|
800: '#01242d',
|
||||||
'900': '#011217',
|
900: '#011217'
|
||||||
},
|
},
|
||||||
'layout': '#F3F7F9',
|
layout: '#F3F7F9',
|
||||||
'dark': '#151617',
|
dark: '#151617',
|
||||||
'aside': '#2E3536',
|
aside: '#2E3536',
|
||||||
'primary': {
|
primary: {
|
||||||
'50': '#e6eff1',
|
50: '#e6eff1',
|
||||||
'100': '#cddee3',
|
100: '#cddee3',
|
||||||
'200': '#9abdc6',
|
200: '#9abdc6',
|
||||||
'300': '#689daa',
|
300: '#689daa',
|
||||||
'400': '#357c8d',
|
400: '#357c8d',
|
||||||
'500': '#035b71',
|
500: '#035b71',
|
||||||
'600': '#02495a',
|
600: '#02495a',
|
||||||
'700': '#02495a',
|
700: '#02495a',
|
||||||
'800': '#01242d',
|
800: '#01242d',
|
||||||
'900': '#011217',
|
900: '#011217'
|
||||||
},
|
},
|
||||||
'secondary': {
|
secondary: {
|
||||||
'50': '#e5eef7',
|
50: '#e5eef7',
|
||||||
'100': '#ccebef',
|
100: '#ccebef',
|
||||||
'200': '#99d7df',
|
200: '#99d7df',
|
||||||
'300': '#66c2d0',
|
300: '#66c2d0',
|
||||||
'400': '#33aec0',
|
400: '#33aec0',
|
||||||
'500': '#00a2b9',
|
500: '#00a2b9',
|
||||||
'600': '#007b8d',
|
600: '#007b8d',
|
||||||
'700': '#005c6a',
|
700: '#005c6a',
|
||||||
'800': '#003e46',
|
800: '#003e46',
|
||||||
'900': '#001f23',
|
900: '#001f23'
|
||||||
},
|
},
|
||||||
'red': {
|
red: {
|
||||||
'50': '#ffe5e5',
|
50: '#ffe5e5',
|
||||||
'100': '#ffcccc',
|
100: '#ffcccc',
|
||||||
'200': '#ff9999',
|
200: '#ff9999',
|
||||||
'300': '#ff6666',
|
300: '#ff6666',
|
||||||
'400': '#ff3333',
|
400: '#ff3333',
|
||||||
'500': '#ff0000',
|
500: '#ff0000',
|
||||||
'600': '#cc0000',
|
600: '#cc0000',
|
||||||
'700': '#990000',
|
700: '#990000',
|
||||||
'800': '#660000',
|
800: '#660000',
|
||||||
'900': '#330000',
|
900: '#330000'
|
||||||
},
|
},
|
||||||
'yellow': {
|
yellow: {
|
||||||
'50': '#ffffe5',
|
50: '#ffffe5',
|
||||||
'100': '#ffffcc',
|
100: '#ffffcc',
|
||||||
'200': '#ffff99',
|
200: '#ffff99',
|
||||||
'300': '#ffff66',
|
300: '#ffff66',
|
||||||
'400': '#ffff33',
|
400: '#ffff33',
|
||||||
'500': '#ffff00',
|
500: '#ffff00',
|
||||||
'600': '#cccc00',
|
600: '#cccc00',
|
||||||
'700': '#999900',
|
700: '#999900',
|
||||||
'800': '#666600',
|
800: '#666600',
|
||||||
'900': '#333300',
|
900: '#333300'
|
||||||
},
|
},
|
||||||
'gray': {
|
gray: {
|
||||||
'50': '#f9fafb',
|
50: '#f9fafb',
|
||||||
'100': '#f3f4f6',
|
100: '#f3f4f6',
|
||||||
'200': '#e5e7eb',
|
200: '#e5e7eb',
|
||||||
'300': '#d1d5db',
|
300: '#d1d5db',
|
||||||
'400': '#9ca3af',
|
400: '#9ca3af',
|
||||||
'500': '#6b7280',
|
500: '#6b7280',
|
||||||
'600': '#4b5563',
|
600: '#4b5563',
|
||||||
'700': '#374151',
|
700: '#374151',
|
||||||
'800': '#1f2937',
|
800: '#1f2937',
|
||||||
'900': '#111827',
|
900: '#111827'
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require('@tailwindcss/typography'),
|
require('@tailwindcss/typography'),
|
||||||
@ -104,6 +118,6 @@ export default {
|
|||||||
require('@tailwindcss/aspect-ratio'),
|
require('@tailwindcss/aspect-ratio'),
|
||||||
require('@tailwindcss/container-queries'),
|
require('@tailwindcss/container-queries'),
|
||||||
require('@headlessui/tailwindcss'),
|
require('@headlessui/tailwindcss'),
|
||||||
require('@headlessui/tailwindcss')({ prefix: 'ui' }),
|
require('@headlessui/tailwindcss')({ prefix: 'ui' })
|
||||||
],
|
]
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user