Update version.json to 0.0.141-vm
This commit is contained in:
Dede Fuji Abdul
parent
32ac2ad74b
commit
efb641cdf2
@ -1 +1 @@
|
||||
{"name":"eis","version":"0.0.138-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
|
||||
{"name":"eis","version":"0.0.141-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
|
||||
@ -1 +1 @@
|
||||
{"version":"0.0.138-vm"}
|
||||
{"version":"0.0.141-vm"}
|
||||
@ -38,6 +38,9 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const renderUp3 = ref(false)
|
||||
const renderPosko = ref(false)
|
||||
|
||||
const up3 = ref(props.up3)
|
||||
const uid = ref(props.uid)
|
||||
const posko = ref(props.posko)
|
||||
@ -58,6 +61,13 @@ const setUid = (value: any) => {
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderPosko.value = false
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -66,6 +76,11 @@ const setUp3 = (value: any) => {
|
||||
console.log(itemsPosko)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderPosko.value = false
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
@ -92,6 +107,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3placeholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
@ -103,6 +127,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Posko:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
|
||||
@ -28,12 +28,21 @@ const data = ref({
|
||||
minJmlLapor: 1,
|
||||
maxJmlLapor: 1
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderUlp = ref(false)
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -41,6 +50,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
@ -65,13 +79,41 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
|
||||
<Select
|
||||
v-if="renderUlp"
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
@ -84,11 +126,16 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Lapor Ulang:</label>
|
||||
|
||||
<div class="flex flex-1 justify-between gap-x-1.5">
|
||||
<InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" class="flex flex-1" />
|
||||
<InputNumber
|
||||
@update:time-value="(value) => (data.minJmlLapor = value)"
|
||||
class="flex flex-1"
|
||||
/>
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" class="flex flex-1" />
|
||||
<InputNumber
|
||||
@update:time-value="(value) => (data.maxJmlLapor = value)"
|
||||
class="flex flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -71,12 +71,21 @@ const data = ref({
|
||||
minTime: getDataMin().split(' ')[0],
|
||||
maxTime: getDataMax().split(' ')[0]
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderUlp = ref(false)
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -84,6 +93,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
@ -143,6 +157,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
@ -154,6 +177,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUlp"
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
:selected="ulp"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
|
||||
@ -1,15 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue';
|
||||
import DatePicker from '@/components/DatePicker.vue';
|
||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
||||
import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder });
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Ulp,
|
||||
selectedUlp,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsUlp
|
||||
} from './reference'
|
||||
import { onMounted, ref } from 'vue'
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||
const uppp = ref({ id: 0, name: up3Placeholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
@ -19,25 +27,40 @@ const data = ref({
|
||||
minDurasiResponseTime: 1,
|
||||
maxDurasiResponseTime: 1
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderUlp = ref(false)
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
uppp.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: 0, name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
uppp.value = value
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.ulp = value;
|
||||
};
|
||||
ulp.value = value
|
||||
selectedUlp(value)
|
||||
data.value.ulp = value
|
||||
}
|
||||
const triggerInput = ref(false)
|
||||
const sla = [
|
||||
{
|
||||
@ -52,7 +75,7 @@ const sla = [
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 45 menit)'
|
||||
}
|
||||
];
|
||||
]
|
||||
const changeDuration = (value: any) => {
|
||||
if (value.id === 0) {
|
||||
console.log('Durasi Menit')
|
||||
@ -70,7 +93,6 @@ const changeDuration = (value: any) => {
|
||||
triggerInput.value = true
|
||||
console.log('Melebihi SLA (> 45 menit)')
|
||||
}
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
@ -89,19 +111,41 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
|
||||
<Select
|
||||
v-if="renderUlp"
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => data.periode = value" />
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
@ -111,14 +155,21 @@ onMounted(() => {
|
||||
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
|
||||
|
||||
<div class="flex flex-1 justify-between gap-x-1.5">
|
||||
<InputWithSuffix @update:minute-value="(value: any) => data.minDurasiResponseTime = value" @value="data.minDurasiResponseTime" :disabled=triggerInput
|
||||
class="flex flex-1" />
|
||||
<InputWithSuffix
|
||||
@update:minute-value="(value: any) => (data.minDurasiResponseTime = value)"
|
||||
@value="data.minDurasiResponseTime"
|
||||
:disabled="triggerInput"
|
||||
class="flex flex-1"
|
||||
/>
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputWithSuffix @update:minute-value="(value: any) => data.maxDurasiResponseTime = value" @value="data.maxDurasiResponseTime"
|
||||
:disabled="triggerInput" class="flex flex-1" />
|
||||
<InputWithSuffix
|
||||
@update:minute-value="(value: any) => (data.maxDurasiResponseTime = value)"
|
||||
@value="data.maxDurasiResponseTime"
|
||||
:disabled="triggerInput"
|
||||
class="flex flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -27,12 +27,21 @@ const data = ref({
|
||||
periode: '',
|
||||
groupBy: false
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderUlp = ref(false)
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -40,6 +49,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
@ -68,6 +82,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
@ -78,6 +101,15 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||
<Select
|
||||
v-if="renderUlp"
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
|
||||
@ -1,72 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue';
|
||||
import DatePicker from '@/components/DatePicker.vue';
|
||||
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const uidPlaceholder = 'Semua Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Area';
|
||||
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const up3 = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder });
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
selectedPosko,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsPosko
|
||||
} from './reference'
|
||||
import { onMounted, ref } from 'vue'
|
||||
const uidPlaceholder = 'Semua Distribusi/Wilayah'
|
||||
const up3Placeholder = 'Semua Area'
|
||||
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: up3.value,
|
||||
posko: posko.value,
|
||||
periode: '',
|
||||
periode: ''
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderPosko = ref(false)
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
up3.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
up3.value = value;
|
||||
selectedUp3Posko(value);
|
||||
posko.value = { id: 0, name: poskoPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
up3.value = value
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
posko.value = value;
|
||||
selectedPosko(value);
|
||||
data.value.posko = value;
|
||||
};
|
||||
posko.value = value
|
||||
selectedPosko(value)
|
||||
data.value.posko = value
|
||||
}
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">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 class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Area:</label>
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Posko:</label>
|
||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
|
||||
:placeholder="poskoPlaceholder" />
|
||||
|
||||
<Select
|
||||
v-if="renderPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => data.periode = value" />
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue';
|
||||
import DatePicker from '@/components/DatePicker.vue';
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
@ -11,8 +11,8 @@ import {
|
||||
itemsUp3,
|
||||
itemsPosko,
|
||||
itemsMedia
|
||||
} from './reference';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
} from './reference'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
@ -35,11 +35,21 @@ watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
})
|
||||
|
||||
const renderUp3 = ref(false)
|
||||
const renderPosko = ref(false)
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -47,6 +57,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
@ -72,27 +87,63 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-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 class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select :data="itemsUp3" @update:selected="setUp3($event)" :placeholder="up3Placeholder" :selected="up3" />
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
:data="itemsUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:placeholder="up3Placeholder"
|
||||
:selected="up3"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
:data="itemsUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:placeholder="up3Placeholder"
|
||||
:selected="up3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Posko:</label>
|
||||
|
||||
<Select :data="itemsPosko" @update:selected="setPosko($event)" :placeholder="poskoPlaceholder"
|
||||
:selected="posko" />
|
||||
<Select
|
||||
v-if="renderPosko"
|
||||
:data="itemsPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:placeholder="poskoPlaceholder"
|
||||
:selected="posko"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
:data="itemsPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:placeholder="poskoPlaceholder"
|
||||
:selected="posko"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Media:</label>
|
||||
|
||||
<Select :selected="media" @update:selected="setMedia($event)" :placeholder="mediaPlaceholder"
|
||||
:data="itemsMedia" />
|
||||
<Select
|
||||
:selected="media"
|
||||
@update:selected="setMedia($event)"
|
||||
:placeholder="mediaPlaceholder"
|
||||
:data="itemsMedia"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
@ -101,5 +152,4 @@ onMounted(() => {
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -74,6 +74,8 @@ const data = ref({
|
||||
sla: sla.value,
|
||||
periode: ''
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderUlp = ref(false)
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
@ -84,6 +86,13 @@ const setUid = (value: any) => {
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -91,7 +100,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
console.log(itemsUlp)
|
||||
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
@ -142,12 +155,28 @@ onMounted(() => {
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
<Select
|
||||
v-if="renderUlp"
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
|
||||
@ -35,6 +35,8 @@ const data = ref({
|
||||
jenisTransaksi: [],
|
||||
group: 1
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderPosko = ref(false)
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
@ -45,6 +47,13 @@ const setUid = (value: any) => {
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -52,6 +61,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
@ -86,6 +100,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
@ -97,6 +120,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Posko:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
placeholder="Semua Posko"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
|
||||
@ -15,6 +15,10 @@ import {
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
|
||||
const renderUid = ref(false)
|
||||
const renderUp3 = ref(false)
|
||||
const renderUlp = ref(false)
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||
@ -59,6 +63,15 @@ const setRegional = (value: any) => {
|
||||
selectedUid(value)
|
||||
uid.value = { id: 0, name: uidPlaceholder }
|
||||
data.value.regional = value
|
||||
|
||||
renderUid.value = true
|
||||
renderUp3.value = true
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUid.value = false
|
||||
renderUp3.value = false
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUid = (value: any) => {
|
||||
@ -66,6 +79,13 @@ const setUid = (value: any) => {
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: up3Placholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -73,6 +93,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
@ -114,6 +139,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUid"
|
||||
@update:selected="setUid($event)"
|
||||
:data="itemsUid"
|
||||
:selected="uid"
|
||||
:placeholder="uidPlaceholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUid($event)"
|
||||
:data="itemsUid"
|
||||
:selected="uid"
|
||||
@ -125,6 +159,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:selected="uppp"
|
||||
:data="itemsUp3"
|
||||
:placeholder="up3Placholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:selected="uppp"
|
||||
:data="itemsUp3"
|
||||
@ -136,6 +179,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUlp"
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue';
|
||||
import DatePicker from '@/components/DatePicker.vue';
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Ulp,
|
||||
@ -9,8 +9,11 @@ import {
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsUlp
|
||||
} from './reference';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
} from './reference'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
|
||||
const renderUp3 = ref(false)
|
||||
const renderUlp = ref(false)
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
@ -36,6 +39,13 @@ const setUid = (value: any) => {
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -43,7 +53,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
console.log(itemsUlp)
|
||||
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
@ -69,13 +83,39 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
|
||||
<Select
|
||||
v-if="renderUlp"
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:selected="ulp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
@ -84,5 +124,4 @@ onMounted(() => {
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -28,6 +28,8 @@ const props = defineProps({
|
||||
]
|
||||
}
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderUlp = ref(false)
|
||||
|
||||
const jenisLaporan = ref(computed(() => props.jenisLaporan))
|
||||
const data = ref({
|
||||
@ -42,6 +44,13 @@ const setUid = (value: any) => {
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -49,6 +58,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderUlp.value = true
|
||||
setTimeout(() => {
|
||||
renderUlp.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
@ -74,13 +88,35 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
|
||||
<Select
|
||||
v-if="renderUlp"
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
@ -8,10 +8,10 @@ import {
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsPosko
|
||||
} from './reference';
|
||||
} from './reference'
|
||||
|
||||
import Select from '@/components/Select.vue';
|
||||
import DatePicker from '@/components/DatePicker.vue';
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const poskoPlaceholder = 'Semua Posko'
|
||||
@ -25,6 +25,8 @@ const data = ref({
|
||||
posko: posko.value,
|
||||
periode: ''
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderPosko = ref(false)
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
@ -35,6 +37,13 @@ const setUid = (value: any) => {
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: uppPlaceholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -42,6 +51,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
@ -61,26 +75,55 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-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 class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="uppp"
|
||||
:placeholder="uppPlaceholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="uppp"
|
||||
:placeholder="uppPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Posko:</label>
|
||||
|
||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
|
||||
:placeholder="poskoPlaceholder" />
|
||||
<Select
|
||||
v-if="renderPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Periode Tanggal:</label>
|
||||
<DatePicker @update:date-value="(value) => data.periode = value" />
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -29,11 +29,21 @@ const data = ref({
|
||||
maxJmlLapor: 1
|
||||
})
|
||||
|
||||
const renderUp3 = ref(false)
|
||||
const renderPosko = ref(false)
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -41,6 +51,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
@ -66,14 +81,40 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Posko:</label>
|
||||
|
||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
|
||||
:placeholder="poskoPlaceholder" />
|
||||
<Select
|
||||
v-if="renderPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
@ -86,13 +127,18 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Lapor Ulang:</label>
|
||||
|
||||
<div class="flex flex-1 justify-between gap-x-1.5">
|
||||
<InputNumber :value="data.minJmlLapor" @update:time-value="(value) => (data.minJmlLapor = value)"
|
||||
class="flex flex-1" />
|
||||
<InputNumber
|
||||
:value="data.minJmlLapor"
|
||||
@update:time-value="(value) => (data.minJmlLapor = value)"
|
||||
class="flex flex-1"
|
||||
/>
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => (data.maxJmlLapor = value)"
|
||||
class="flex flex-1" />
|
||||
<InputNumber
|
||||
:value="data.maxJmlLapor"
|
||||
@update:time-value="(value) => (data.maxJmlLapor = value)"
|
||||
class="flex flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -61,7 +61,8 @@ const setDataMin = (value: any) => (totalMin.value = value)
|
||||
const getDataMin = () => totalMin.value
|
||||
const setDataMax = (value: any) => (totalMax.value = value)
|
||||
const getDataMax = () => totalMax.value
|
||||
|
||||
const renderUp3 = ref(false)
|
||||
const renderPosko = ref(false)
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: up3.value,
|
||||
@ -76,6 +77,13 @@ const setUid = (value: any) => {
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -83,6 +91,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
@ -144,6 +157,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
@ -155,6 +177,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Posko:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue';
|
||||
import DatePicker from '@/components/DatePicker.vue';
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference';
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
@ -23,11 +23,18 @@ watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
})
|
||||
|
||||
const renderUp3 = ref(false)
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: uppPlaceholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -52,7 +59,21 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="uppp"
|
||||
:placeholder="uppPlaceholder"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="uppp"
|
||||
:placeholder="uppPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
@ -61,5 +82,4 @@ onMounted(() => {
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -28,6 +28,8 @@ const data = ref({
|
||||
periode: '',
|
||||
groupBy: false
|
||||
})
|
||||
const renderUp3 = ref(false)
|
||||
const renderPosko = ref(false)
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
@ -38,6 +40,13 @@ const setUid = (value: any) => {
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: uppPlaceholder }
|
||||
data.value.uid = value
|
||||
|
||||
renderUp3.value = true
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderUp3.value = false
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
@ -45,6 +54,11 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
|
||||
renderPosko.value = true
|
||||
setTimeout(() => {
|
||||
renderPosko.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
@ -71,6 +85,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="uppPlaceholder"
|
||||
:selected="uppp"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="uppPlaceholder"
|
||||
@ -82,6 +105,15 @@ onMounted(() => {
|
||||
<label class="filter-input-label">Posko:</label>
|
||||
|
||||
<Select
|
||||
v-if="renderPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
:selected="posko"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-else
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
|
||||
@ -53,6 +53,9 @@ const fetchMedia = () => {
|
||||
const fetchUidByRegional = async (regional: number) => {
|
||||
if (regional == 0) {
|
||||
itemsUid.value = []
|
||||
itemsUp3.value = []
|
||||
itemsPosko.value = []
|
||||
itemsUlp.value = []
|
||||
} else {
|
||||
try {
|
||||
const res = await getUidRegional(regional)
|
||||
@ -154,15 +157,22 @@ const formatWaktu = (durasiDetik: any): string => {
|
||||
|
||||
const selectedUid = (value: any) => {
|
||||
fetchDataUp3(value.id)
|
||||
itemsUp3.value = []
|
||||
itemsPosko.value = []
|
||||
itemsUlp.value = []
|
||||
}
|
||||
const selectedUp3Posko = (value: any) => {
|
||||
if (value.id != 0) {
|
||||
fetchDataPosko(value.id)
|
||||
} else {
|
||||
itemsPosko.value = []
|
||||
}
|
||||
}
|
||||
const selectedUp3Ulp = (value: any) => {
|
||||
if (value.id != 0) {
|
||||
fetchDataUlp(value.id)
|
||||
} else {
|
||||
itemsUlp.value = []
|
||||
}
|
||||
}
|
||||
const selectedPosko = (value: any) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { RichSelect } from '@flavorly/vanilla-components'
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { RichSelect } from '@flavorly/vanilla-components';
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
@ -27,12 +27,10 @@ const data = computed(() =>
|
||||
)
|
||||
const selected = ref(data.value[props.indexSelected].id)
|
||||
|
||||
// watch(
|
||||
// () => props.selected,
|
||||
// (value: any) => {
|
||||
// selected.value = value.id
|
||||
// }
|
||||
// )
|
||||
watch(props.selected.id, (value: any) => {
|
||||
console.log('id has changed', value)
|
||||
selected.value = value
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user