defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: create login filterPresets

Browse Source
This commit is contained in:
kur0nek-o 2024-04-25 10:24:42 +07:00
parent 54c4d12c4f
commit 0fb6b50272
21 changed files with 1250 additions and 487 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Form/FiltersType/Type1.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import {
selectedUid,
selectedUp3Posko,
@ -11,6 +12,7 @@ import {
fetchUid
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -93,8 +95,29 @@ const setPosko = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]
onMounted(() => {
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
setFunctions[index](filterPresets.value[key])
}
})
} else {
fetchUid()
}
emit('update:filters', data.value)
})
</script>
@ -104,12 +127,20 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
@ -127,9 +158,13 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2" v-if="showPosko">
<label class="filter-input-label">Posko:</label>
<div v-if="!presetPosko">
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
@ -147,6 +182,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</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)" />

46
src/components/Form/FiltersType/Type10.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
@ -12,6 +13,7 @@ import {
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputNumber from '@/components/Form/InputNumber.vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -70,9 +72,34 @@ const setUlp = (value: any) => {
ulp: value
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetULP: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'ulp']
const presetValues: any = [presetUID, presetUP3, presetULP]
const setFunctions: any = [setUid, setUp3, setUlp]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
if (key !== 'uid') {
setFunctions[index](filterPresets.value[key])
}
}
})
}
fetchUid()
emit('update:filters', data.value)
})
</script>
@ -81,12 +108,20 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
@ -102,9 +137,13 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<div v-if="!presetULP">
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
@ -120,6 +159,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>

45
src/components/Form/FiltersType/Type11.vue
View File

@ -6,6 +6,7 @@ interface SlaOption {
max: string
}
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
@ -19,6 +20,7 @@ import {
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
import { readDataJson } from '@/utils/storage'
const props = defineProps({
slaOptions: {
@ -147,9 +149,33 @@ const changeDuration = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetULP: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'ulp']
const presetValues: any = [presetUID, presetUP3, presetULP]
const setFunctions: any = [setUid, setUp3, setUlp]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
if (key !== 'uid') {
setFunctions[index](filterPresets.value[key])
}
}
})
}
fetchUid()
emit('update:filters', data.value)
})
</script>
@ -158,12 +184,20 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
@ -179,9 +213,13 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<div v-if="!presetULP">
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
@ -197,6 +235,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>

49
src/components/Form/FiltersType/Type12.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue'
@ -12,6 +13,8 @@ import {
itemsUlp
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@ -102,9 +105,34 @@ const changeDuration = (value: any) => {
console.log('Melebihi SLA (> 45 menit)')
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetULP: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'ulp']
const presetValues: any = [presetUID, presetUP3, presetULP]
const setFunctions: any = [setUid, setUp3, setUlp]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
if (key !== 'uid') {
setFunctions[index](filterPresets.value[key])
}
}
})
}
fetchUid()
emit('update:filters', data.value)
})
</script>
@ -113,18 +141,27 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
@ -133,15 +170,20 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<div v-if="!presetULP">
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
@ -150,6 +192,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>

46
src/components/Form/FiltersType/Type13.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
@ -12,6 +13,7 @@ import {
itemsUlp
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -72,9 +74,33 @@ const setUlp = (value: any) => {
console.log('data.value', data.value)
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetULP: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'ulp']
const presetValues: any = [presetUID, presetUP3, presetULP]
const setFunctions: any = [setUid, setUp3, setUlp]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
if (key !== 'uid') {
setFunctions[index](filterPresets.value[key])
}
}
})
}
fetchUid()
emit('update:filters', data.value)
})
</script>
@ -83,12 +109,20 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
@ -104,8 +138,13 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<div v-if="!presetULP">
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
@ -121,6 +160,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</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)" />

48
src/components/Form/FiltersType/Type14.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import {
@ -11,6 +12,8 @@ import {
itemsPosko
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Distribusi/Wilayah'
const up3Placeholder = 'Semua Area'
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
@ -65,9 +68,30 @@ const setPosko = (value: any) => {
posko: value
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
setFunctions[index](filterPresets.value[key])
}
})
} else {
fetchUid()
}
emit('update:filters', data.value)
})
</script>
@ -75,17 +99,28 @@ onMounted(() => {
<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" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Area:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
@ -94,14 +129,20 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<div v-if="!presetPosko">
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
@ -110,6 +151,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>

51
src/components/Form/FiltersType/Type16.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import {
@ -13,6 +14,7 @@ import {
itemsMedia
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -82,10 +84,32 @@ const setMedia = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
setFunctions[index](filterPresets.value[key])
}
})
} else {
fetchUid()
}
fetchMedia()
emit('update:filters', data.value)
})
</script>
@ -94,45 +118,60 @@ 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" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
:data="itemsUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
:data="itemsUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<div v-if="!presetPosko">
<Select
v-if="renderPosko"
:data="itemsPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
:data="itemsPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Media:</label>

44
src/components/Form/FiltersType/Type17Gangguan.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithFilter from '../InputWithFilter.vue'
@ -12,6 +13,8 @@ import {
selectedUp3Posko
} from './reference'
import { onMounted, ref, watch, type PropType } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Pilih Unit'
const up3Placeholder = 'Pilih Area'
const poskoPlaceholder = 'Pilih Posko'
@ -149,8 +152,29 @@ const setSla = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]
onMounted(() => {
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
setFunctions[index](filterPresets.value[key])
}
})
} else {
fetchUid()
}
emit('update:filters', data.value)
})
</script>
@ -167,27 +191,42 @@ onMounted(() => {
<label class="filter-input-label">Unit PLN:</label>
<div class="flex flex-col gap-y-1">
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
<div v-if="!presetPosko">
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
@ -195,6 +234,9 @@ onMounted(() => {
:placeholder="poskoPlaceholder"
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div>
</div>
</div>

47
src/components/Form/FiltersType/Type17Keluhan.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithFilter from '../InputWithFilter.vue'
@ -12,6 +13,8 @@ import {
itemsUlp
} from './reference'
import { onMounted, ref, watch, type PropType } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Pilih Unit'
const up3Placeholder = 'Pilih Area'
const ulpPlaceholder = 'Pilih Rayon'
@ -154,8 +157,32 @@ const setSla = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetULP: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'ulp']
const presetValues: any = [presetUID, presetUP3, presetULP]
const setFunctions: any = [setUid, setUp3, setUlp]
onMounted(() => {
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
if (key !== 'uid') {
setFunctions[index](filterPresets.value[key])
}
}
})
}
fetchUid()
emit('update:filters', data.value)
})
</script>
@ -172,27 +199,42 @@ onMounted(() => {
<label class="filter-input-label">Unit PLN:</label>
<div class="flex flex-col gap-y-1">
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
<div v-if="!presetULP">
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
@ -200,6 +242,9 @@ onMounted(() => {
:placeholder="ulpPlaceholder"
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div>
</div>
</div>

46
src/components/Form/FiltersType/Type18.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue'
@ -13,6 +14,7 @@ import {
itemsPosko
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -85,9 +87,30 @@ const setTags = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
setFunctions[index](filterPresets.value[key])
}
})
} else {
fetchUid()
}
emit('update:filters', data.value)
})
</script>
@ -97,47 +120,58 @@ onMounted(() => {
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
placeholder="Semua Unit Induk Distribusi/Wilayah"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
:placeholder="up3Placeholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<div v-if="!presetPosko">
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
placeholder="Semua Posko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
placeholder="Semua Posko"
:placeholder="poskoPlaceholder"
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Jenis Transaksi:</label>

55
src/components/Form/FiltersType/Type2.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import {
selectedUid,
selectedUp3Ulp,
@ -13,6 +14,7 @@ import {
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { getMonthName } from '@/utils/texts'
import { readDataJson } from '@/utils/storage'
const renderUid = ref(false)
const renderUp3 = ref(false)
@ -65,16 +67,14 @@ watch(data, (value) => {
})
const setRegional = (value: any) => {
console.log(value)
if (!presetUID.value) {
fetchUid()
selectedUid(value)
}
data.value = {
...data.value,
regional: value,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: up3Placholder },
ulp: { id: 0, name: ulpPlaceholder }
regional: value
}
renderUid.value = true
@ -137,9 +137,35 @@ const setYear = (value: any) => {
data.value.tahun = value
}
const presetRegional: any = ref(null)
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetULP: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['regional', 'uid', 'up3', 'ulp']
const presetValues: any = [presetRegional, presetUID, presetUP3, presetULP]
const setFunctions: any = [setRegional, setUid, setUp3, setUlp]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
if (key !== 'regional' || key !== 'uid') {
setFunctions[index](filterPresets.value[key])
}
}
})
}
fetchRegional()
fetchUid()
emit('update:filters', data.value)
})
</script>
@ -149,15 +175,19 @@ onMounted(() => {
<label class="filter-input-label">Regional:</label>
<Select
v-if="!presetRegional"
@update:selected="setRegional($event)"
:data="itemsRegional"
:placeholder="regionalPlaceholder"
/>
<InputReadonly v-if="presetRegional" :value="presetRegional.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<div v-if="!presetUID">
<Select
v-if="renderUid"
@update:selected="setUid($event)"
@ -173,9 +203,13 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
@ -191,9 +225,13 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<div v-if="!presetULP">
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
@ -209,6 +247,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode</label>

45
src/components/Form/FiltersType/Type3.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import {
selectedUid,
selectedUp3Ulp,
@ -11,6 +12,7 @@ import {
itemsUlp
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const renderUp3 = ref(false)
const renderUlp = ref(false)
@ -70,8 +72,32 @@ const setUlp = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetULP: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'ulp']
const presetValues: any = [presetUID, presetUP3, presetULP]
const setFunctions: any = [setUid, setUp3, setUlp]
onMounted(() => {
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
if (key !== 'uid') {
setFunctions[index](filterPresets.value[key])
}
}
})
}
fetchUid()
emit('update:filters', data.value)
})
</script>
@ -81,18 +107,27 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
@ -101,15 +136,20 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<div v-if="!presetULP">
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
@ -118,6 +158,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>

48
src/components/Form/FiltersType/Type4.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import DatePicker from '@/components/DatePicker.vue'
import {
selectedUid,
@ -11,6 +12,8 @@ import {
fetchUid
} from './reference'
import { computed, onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@ -80,9 +83,33 @@ const setUlp = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetULP: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'ulp']
const presetValues: any = [presetUID, presetUP3, presetULP]
const setFunctions: any = [setUid, setUp3, setUlp]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
if (key !== 'uid') {
setFunctions[index](filterPresets.value[key])
}
}
})
}
fetchUid()
emit('update:filters', data.value)
})
</script>
@ -91,18 +118,27 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
@ -111,15 +147,20 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<div v-if="!presetULP">
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
@ -128,6 +169,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Jenis Laporan:</label>

44
src/components/Form/FiltersType/Type5.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
@ -9,6 +10,7 @@ import {
itemsUp3,
itemsPosko
} from './reference'
import { readDataJson } from '@/utils/storage'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
@ -67,9 +69,30 @@ const setPosko = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
setFunctions[index](filterPresets.value[key])
}
})
} else {
fetchUid()
}
emit('update:filters', data.value)
})
</script>
@ -78,18 +101,27 @@ 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" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="uppPlaceholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
@ -98,15 +130,20 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<div v-if="!presetPosko">
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
@ -115,6 +152,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</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)" />

41
src/components/Form/FiltersType/Type6.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
@ -12,6 +13,7 @@ import {
itemsPosko
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const emit = defineEmits(['update:filters'])
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
@ -71,8 +73,29 @@ const setPosko = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]
onMounted(() => {
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
setFunctions[index](filterPresets.value[key])
}
})
} else {
fetchUid()
}
emit('update:filters', data.value)
})
</script>
@ -82,18 +105,27 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
@ -102,9 +134,13 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<div v-if="!presetPosko">
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
@ -120,6 +156,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>

40
src/components/Form/FiltersType/Type7.vue
View File

@ -6,6 +6,7 @@ interface SlaOption {
max: string
}
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue'
@ -19,6 +20,7 @@ import {
itemsPosko
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const props = defineProps({
slaOptions: {
@ -143,8 +145,29 @@ const changeDuration = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]
onMounted(() => {
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
setFunctions[index](filterPresets.value[key])
}
})
} else {
fetchUid()
}
emit('update:filters', data.value)
})
</script>
@ -154,12 +177,20 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
@ -175,9 +206,13 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<div v-if="!presetPosko">
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
@ -193,6 +228,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>

40
src/components/Form/FiltersType/Type8.vue
View File

@ -1,9 +1,11 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { onMounted, ref, watch } from 'vue'
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -43,9 +45,32 @@ const setUp3 = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3']
const presetValues: any = [presetUID, presetUP3]
const setFunctions: any = [setUid, setUp3]
onMounted(() => {
emit('update:filters', data.value)
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
if (key !== 'posko') {
setFunctions[index](filterPresets.value[key])
}
}
})
} else {
fetchUid()
}
emit('update:filters', data.value)
})
</script>
@ -54,12 +79,20 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
@ -75,6 +108,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>

40
src/components/Form/FiltersType/Type9.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
@ -13,6 +14,7 @@ import {
itemsUp3,
itemsPosko
} from './reference'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -71,8 +73,29 @@ const setPosko = (value: any) => {
}
}
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()
const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]
onMounted(() => {
filterPresets.value = readDataJson('filterPresets') || null
if (filterPresets.value) {
keys.forEach((key: any, index: any) => {
if (filterPresets.value[key]) {
presetValues[index].value = filterPresets.value[key]
setFunctions[index](filterPresets.value[key])
}
})
} else {
fetchUid()
}
emit('update:filters', data.value)
})
</script>
@ -82,12 +105,20 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
v-if="!presetUID"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div v-if="!presetUP3">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
@ -103,9 +134,13 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<div v-if="!presetPosko">
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
@ -121,6 +156,9 @@ onMounted(() => {
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>

19
src/components/Form/InputReadonly.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="relative w-full overflow-hidden bg-gray-200 rounded-lg">
<input
type="text"
:value="value"
:readonly="true"
class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"
/>
</div>
</template>
<script setup lang="ts">
defineProps({
value: {
type: String,
required: true
}
})
</script>

6
src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
View File

@ -363,7 +363,6 @@ import InputText from '@/components/InputText.vue'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
import { readDataJson } from '@/utils/storage'
const data = ref<any[]>([])
const dataSelected = ref<any>()
@ -391,6 +390,9 @@ const filterData = async (params: any) => {
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
console.log(query)
loading.value = true
await requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
.then((result) => {
@ -435,8 +437,6 @@ const reportMeta = ref({
})
onMounted(() => {
// console.log(readDataJson('filterPresets'))
if (import.meta.env.DEV) {
data.value = [
{

27
src/stores/auth.ts
View File

@ -12,12 +12,7 @@ export const useAuthStore = defineStore('auth', () => {
const password = ref('')
const isLoading = ref(false)
const isLoggedIn = computed(() => token.value !== '')
const filterPresets = {
uid: {
id: 2,
name: 'DISTRIBUSI JAKARTA RAYA'
}
}
const filterPresets: any = ref({})
// define your actions
const login = () => {
@ -28,13 +23,31 @@ export const useAuthStore = defineStore('auth', () => {
type: 'warning'
})
} else {
// filterPresets.value = {
// uid: {
// id: 2,
// name: 'DISTRIBUSI JAKARTA RAYA'
// },
// up3: {
// id: 4,
// name: 'UP3 MENTENG'
// },
// posko: {
// id: 541101,
// name: 'POSKO MENTENG'
// }
// }
isLoading.value = true
setTimeout(() => {
isLoading.value = false
if (username.value == 'demo' && password.value == 'demo') {
// store token in localStorage
writeData('token', 'secret-token')
writeDataJson('filterPresets', filterPresets)
if (Object.keys(filterPresets.value).length > 0) {
writeDataJson('filterPresets', filterPresets.value)
}
dispatchNotification({
title: 'Berhasil',