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
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { import {
selectedUid, selectedUid,
selectedUp3Posko, selectedUp3Posko,
@ -11,6 +12,7 @@ import {
fetchUid fetchUid
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' 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(() => { onMounted(() => {
fetchUid() 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) emit('update:filters', data.value)
}) })
</script> </script>
@ -104,47 +127,62 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:selected="up3" :data="itemsUp3"
:placeholder="up3placeholder" :selected="up3"
/> :placeholder="up3placeholder"
/>
<Select <Select
v-else v-else
@update:selected="setUp3($event)" @update:selected="setUp3($event)"
:data="itemsUp3" :data="itemsUp3"
:selected="up3" :selected="up3"
:placeholder="up3placeholder" :placeholder="up3placeholder"
/> />
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2" v-if="showPosko"> <div class="flex flex-col flex-1 space-y-2" v-if="showPosko">
<label class="filter-input-label">Posko:</label> <label class="filter-input-label">Posko:</label>
<Select <div v-if="!presetPosko">
v-if="renderPosko" <Select
@update:selected="setPosko($event)" v-if="renderPosko"
:data="itemsPosko" @update:selected="setPosko($event)"
:selected="posko" :data="itemsPosko"
:placeholder="poskoPlaceholder" :selected="posko"
/> :placeholder="poskoPlaceholder"
/>
<Select <Select
v-else v-else
@update:selected="setPosko($event)" @update:selected="setPosko($event)"
:data="itemsPosko" :data="itemsPosko"
:selected="posko" :selected="posko"
:placeholder="poskoPlaceholder" :placeholder="poskoPlaceholder"
/> />
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { import {
selectedUid, selectedUid,
@ -12,6 +13,7 @@ import {
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InputNumber from '@/components/Form/InputNumber.vue' import InputNumber from '@/components/Form/InputNumber.vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -70,9 +72,34 @@ const setUlp = (value: any) => {
ulp: value 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(() => { 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() fetchUid()
emit('update:filters', data.value)
}) })
</script> </script>
@ -81,43 +108,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
/>
<Select <Select
v-else v-else
@update:selected="setUp3($event)" @update:selected="setUp3($event)"
:data="itemsUp3" :data="itemsUp3"
:placeholder="up3Placeholder" :placeholder="up3Placeholder"
/> />
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label> <label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select <div v-if="!presetULP">
v-if="renderUlp" <Select
@update:selected="setUlp($event)" v-if="renderUlp"
:data="itemsUlp" @update:selected="setUlp($event)"
:placeholder="ulpPlaceholder" :data="itemsUlp"
/> :placeholder="ulpPlaceholder"
/>
<Select <Select
v-else v-else
@update:selected="setUlp($event)" @update:selected="setUlp($event)"
:data="itemsUlp" :data="itemsUlp"
:placeholder="ulpPlaceholder" :placeholder="ulpPlaceholder"
/> />
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -6,6 +6,7 @@ interface SlaOption {
max: string max: string
} }
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { import {
selectedUid, selectedUid,
@ -19,6 +20,7 @@ import {
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '@/components/Form/InputWithSuffix.vue' import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
import { readDataJson } from '@/utils/storage'
const props = defineProps({ const props = defineProps({
slaOptions: { 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(() => { 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() fetchUid()
emit('update:filters', data.value)
}) })
</script> </script>
@ -158,43 +184,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
/>
<Select <Select
v-else v-else
@update:selected="setUp3($event)" @update:selected="setUp3($event)"
:data="itemsUp3" :data="itemsUp3"
:placeholder="up3Placeholder" :placeholder="up3Placeholder"
/> />
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label> <label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select <div v-if="!presetULP">
v-if="renderUlp" <Select
@update:selected="setUlp($event)" v-if="renderUlp"
:data="itemsUlp" @update:selected="setUlp($event)"
:placeholder="ulpPlaceholder" :data="itemsUlp"
/> :placeholder="ulpPlaceholder"
/>
<Select <Select
v-else v-else
@update:selected="setUlp($event)" @update:selected="setUlp($event)"
:data="itemsUlp" :data="itemsUlp"
:placeholder="ulpPlaceholder" :placeholder="ulpPlaceholder"
/> />
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue' import InputWithSuffix from '../InputWithSuffix.vue'
@ -12,6 +13,8 @@ import {
itemsUlp itemsUlp
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan' const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@ -102,9 +105,34 @@ const changeDuration = (value: any) => {
console.log('Melebihi SLA (> 45 menit)') 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(() => { 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() fetchUid()
emit('update:filters', data.value)
}) })
</script> </script>
@ -113,41 +141,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
<Select />
v-else
@update:selected="setUp3($event)" <Select
:data="itemsUp3" v-else
:placeholder="up3Placeholder" @update:selected="setUp3($event)"
/> :data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label> <label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select <div v-if="!presetULP">
v-if="renderUlp" <Select
@update:selected="setUlp($event)" v-if="renderUlp"
:data="itemsUlp" @update:selected="setUlp($event)"
:placeholder="ulpPlaceholder" :data="itemsUlp"
/> :placeholder="ulpPlaceholder"
<Select />
v-else
@update:selected="setUlp($event)" <Select
:data="itemsUlp" v-else
:placeholder="ulpPlaceholder" @update:selected="setUlp($event)"
/> :data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue' import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
@ -12,6 +13,7 @@ import {
itemsUlp itemsUlp
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -72,9 +74,33 @@ const setUlp = (value: any) => {
console.log('data.value', data.value) 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(() => { 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() fetchUid()
emit('update:filters', data.value)
}) })
</script> </script>
@ -83,42 +109,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
/>
<Select <Select
v-else v-else
@update:selected="setUp3($event)" @update:selected="setUp3($event)"
:data="itemsUp3" :data="itemsUp3"
:placeholder="up3Placeholder" :placeholder="up3Placeholder"
/> />
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label> <label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select <div v-if="!presetULP">
v-else <Select
@update:selected="setUlp($event)" v-if="renderUlp"
:data="itemsUlp" @update:selected="setUlp($event)"
:placeholder="ulpPlaceholder" :data="itemsUlp"
/> :placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import { import {
@ -11,6 +12,8 @@ import {
itemsPosko itemsPosko
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Distribusi/Wilayah' const uidPlaceholder = 'Semua Distribusi/Wilayah'
const up3Placeholder = 'Semua Area' const up3Placeholder = 'Semua Area'
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan' const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
@ -65,9 +68,30 @@ const setPosko = (value: any) => {
posko: value 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(() => { 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) emit('update:filters', data.value)
fetchUid()
}) })
</script> </script>
@ -75,39 +99,59 @@ onMounted(() => {
<div class="grid grid-cols-1 gap-4 md:grid-cols-2"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Area:</label> <label class="filter-input-label">Area:</label>
<Select
v-if="renderUp3" <div v-if="!presetUP3">
@update:selected="setUp3($event)" <Select
:data="itemsUp3" v-if="renderUp3"
:placeholder="up3Placeholder" @update:selected="setUp3($event)"
/> :data="itemsUp3"
<Select :placeholder="up3Placeholder"
v-else />
@update:selected="setUp3($event)"
:data="itemsUp3" <Select
:placeholder="up3Placeholder" v-else
/> @update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label> <label class="filter-input-label">Posko:</label>
<Select
v-if="renderPosko" <div v-if="!presetPosko">
@update:selected="setPosko($event)" <Select
:data="itemsPosko" v-if="renderPosko"
:placeholder="poskoPlaceholder" @update:selected="setPosko($event)"
/> :data="itemsPosko"
<Select :placeholder="poskoPlaceholder"
v-else />
@update:selected="setPosko($event)"
:data="itemsPosko" <Select
:placeholder="poskoPlaceholder" v-else
/> @update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import { import {
@ -13,6 +14,7 @@ import {
itemsMedia itemsMedia
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' 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(() => { onMounted(() => {
emit('update:filters', data.value) filterPresets.value = readDataJson('filterPresets') || null
fetchUid()
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() fetchMedia()
emit('update:filters', data.value)
}) })
</script> </script>
@ -94,43 +118,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
:data="itemsUp3" v-if="renderUp3"
@update:selected="setUp3($event)" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
/>
<Select <Select
v-else v-else
:data="itemsUp3" @update:selected="setUp3($event)"
@update:selected="setUp3($event)" :data="itemsUp3"
:placeholder="up3Placeholder" :placeholder="up3Placeholder"
/> />
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label> <label class="filter-input-label">Posko:</label>
<Select <div v-if="!presetPosko">
v-if="renderPosko" <Select
:data="itemsPosko" v-if="renderPosko"
@update:selected="setPosko($event)" @update:selected="setPosko($event)"
:placeholder="poskoPlaceholder" :data="itemsPosko"
/> :placeholder="poskoPlaceholder"
/>
<Select <Select
v-else v-else
:data="itemsPosko" @update:selected="setPosko($event)"
@update:selected="setPosko($event)" :data="itemsPosko"
:placeholder="poskoPlaceholder" :placeholder="poskoPlaceholder"
/> />
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InputWithFilter from '../InputWithFilter.vue' import InputWithFilter from '../InputWithFilter.vue'
@ -12,6 +13,8 @@ import {
selectedUp3Posko selectedUp3Posko
} from './reference' } from './reference'
import { onMounted, ref, watch, type PropType } from 'vue' import { onMounted, ref, watch, type PropType } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Pilih Unit' const uidPlaceholder = 'Pilih Unit'
const up3Placeholder = 'Pilih Area' const up3Placeholder = 'Pilih Area'
const poskoPlaceholder = 'Pilih Posko' 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(() => { onMounted(() => {
fetchUid() 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) emit('update:filters', data.value)
}) })
</script> </script>
@ -167,33 +191,51 @@ onMounted(() => {
<label class="filter-input-label">Unit PLN:</label> <label class="filter-input-label">Unit PLN:</label>
<div class="flex flex-col gap-y-1"> <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 class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
<Select />
v-else
@update:selected="setUp3($event)" <Select
:data="itemsUp3" v-else
:placeholder="up3Placeholder" @update:selected="setUp3($event)"
/> :data="itemsUp3"
<Select :placeholder="up3Placeholder"
v-if="renderPosko" />
@update:selected="setPosko($event)" </div>
:data="itemsPosko"
:placeholder="poskoPlaceholder" <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
/>
<Select <div v-if="!presetPosko">
v-else <Select
@update:selected="setPosko($event)" v-if="renderPosko"
:data="itemsPosko" @update:selected="setPosko($event)"
:placeholder="poskoPlaceholder" :data="itemsPosko"
/> :placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div> </div>
</div> </div>
</div> </div>

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InputWithFilter from '../InputWithFilter.vue' import InputWithFilter from '../InputWithFilter.vue'
@ -12,6 +13,8 @@ import {
itemsUlp itemsUlp
} from './reference' } from './reference'
import { onMounted, ref, watch, type PropType } from 'vue' import { onMounted, ref, watch, type PropType } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Pilih Unit' const uidPlaceholder = 'Pilih Unit'
const up3Placeholder = 'Pilih Area' const up3Placeholder = 'Pilih Area'
const ulpPlaceholder = 'Pilih Rayon' 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(() => { 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() fetchUid()
emit('update:filters', data.value) emit('update:filters', data.value)
}) })
</script> </script>
@ -172,33 +199,51 @@ onMounted(() => {
<label class="filter-input-label">Unit PLN:</label> <label class="filter-input-label">Unit PLN:</label>
<div class="flex flex-col gap-y-1"> <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 class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
<Select />
v-else
@update:selected="setUp3($event)" <Select
:data="itemsUp3" v-else
:placeholder="up3Placeholder" @update:selected="setUp3($event)"
/> :data="itemsUp3"
<Select :placeholder="up3Placeholder"
v-if="renderUlp" />
@update:selected="setUlp($event)" </div>
:data="itemsUlp"
:placeholder="ulpPlaceholder" <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
/>
<Select <div v-if="!presetULP">
v-else <Select
@update:selected="setUlp($event)" v-if="renderUlp"
:data="itemsUlp" @update:selected="setUlp($event)"
:placeholder="ulpPlaceholder" :data="itemsUlp"
/> :placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div> </div>
</div> </div>
</div> </div>

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue' import SelectMulti from '@/components/SelectMulti.vue'
@ -13,6 +14,7 @@ import {
itemsPosko itemsPosko
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' 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(() => { 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) emit('update:filters', data.value)
fetchUid()
}) })
</script> </script>
@ -97,46 +120,57 @@ onMounted(() => {
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select <Select
v-if="!presetUID"
@update:selected="setUid($event)" @update:selected="setUid($event)"
:data="itemsUid" :data="itemsUid"
placeholder="Semua Unit Induk Distribusi/Wilayah" :placeholder="uidPlaceholder"
/> />
<InputReadonly v-if="presetUID" :value="presetUID.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" :data="itemsUp3"
/> :placeholder="up3Placeholder"
/>
<Select <Select
v-else v-else
@update:selected="setUp3($event)" @update:selected="setUp3($event)"
:data="itemsUp3" :data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" :placeholder="up3Placeholder"
/> />
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label> <label class="filter-input-label">Posko:</label>
<Select <div v-if="!presetPosko">
v-if="renderPosko" <Select
@update:selected="setPosko($event)" v-if="renderPosko"
:data="itemsPosko" @update:selected="setPosko($event)"
placeholder="Semua Posko" :data="itemsPosko"
/> :placeholder="poskoPlaceholder"
/>
<Select <Select
v-else v-else
@update:selected="setPosko($event)" @update:selected="setPosko($event)"
:data="itemsPosko" :data="itemsPosko"
placeholder="Semua Posko" :placeholder="poskoPlaceholder"
/> />
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Jenis Transaksi:</label> <label class="filter-input-label">Jenis Transaksi:</label>

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

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

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

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { import {
selectedUid, selectedUid,
selectedUp3Ulp, selectedUp3Ulp,
@ -11,6 +12,7 @@ import {
itemsUlp itemsUlp
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const renderUp3 = ref(false) const renderUp3 = ref(false)
const renderUlp = 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(() => { 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() fetchUid()
emit('update:filters', data.value) emit('update:filters', data.value)
}) })
</script> </script>
@ -81,41 +107,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
<Select />
v-else
@update:selected="setUp3($event)" <Select
:data="itemsUp3" v-else
:placeholder="up3Placeholder" @update:selected="setUp3($event)"
/> :data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label> <label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select <div v-if="!presetULP">
v-if="renderUlp" <Select
@update:selected="setUlp($event)" v-if="renderUlp"
:data="itemsUlp" @update:selected="setUlp($event)"
:placeholder="ulpPlaceholder" :data="itemsUlp"
/> :placeholder="ulpPlaceholder"
<Select />
v-else
@update:selected="setUlp($event)" <Select
:data="itemsUlp" v-else
:placeholder="ulpPlaceholder" @update:selected="setUlp($event)"
/> :data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import { import {
selectedUid, selectedUid,
@ -11,6 +12,8 @@ import {
fetchUid fetchUid
} from './reference' } from './reference'
import { computed, onMounted, ref, watch } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan 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(() => { 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() fetchUid()
emit('update:filters', data.value)
}) })
</script> </script>
@ -91,41 +118,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
<Select />
v-else
@update:selected="setUp3($event)" <Select
:data="itemsUp3" v-else
:placeholder="up3Placeholder" @update:selected="setUp3($event)"
/> :data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label> <label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select <div v-if="!presetULP">
v-if="renderUlp" <Select
@update:selected="setUlp($event)" v-if="renderUlp"
:data="itemsUlp" @update:selected="setUlp($event)"
:placeholder="ulpPlaceholder" :data="itemsUlp"
/> :placeholder="ulpPlaceholder"
<Select />
v-else
@update:selected="setUlp($event)" <Select
:data="itemsUlp" v-else
:placeholder="ulpPlaceholder" @update:selected="setUlp($event)"
/> :data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<InputReadonly v-if="presetULP" :value="presetULP.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { import {
selectedUid, selectedUid,
@ -9,6 +10,7 @@ import {
itemsUp3, itemsUp3,
itemsPosko itemsPosko
} from './reference' } from './reference'
import { readDataJson } from '@/utils/storage'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.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(() => { 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) emit('update:filters', data.value)
fetchUid()
}) })
</script> </script>
@ -78,41 +101,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="uppPlaceholder" :data="itemsUp3"
/> :placeholder="uppPlaceholder"
<Select />
v-else
@update:selected="setUp3($event)" <Select
:data="itemsUp3" v-else
:placeholder="uppPlaceholder" @update:selected="setUp3($event)"
/> :data="itemsUp3"
:placeholder="uppPlaceholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label> <label class="filter-input-label">Posko:</label>
<Select <div v-if="!presetPosko">
v-if="renderPosko" <Select
@update:selected="setPosko($event)" v-if="renderPosko"
:data="itemsPosko" @update:selected="setPosko($event)"
:placeholder="poskoPlaceholder" :data="itemsPosko"
/> :placeholder="poskoPlaceholder"
<Select />
v-else
@update:selected="setPosko($event)" <Select
:data="itemsPosko" v-else
:placeholder="poskoPlaceholder" @update:selected="setPosko($event)"
/> :data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import InputNumber from '@/components/Form/InputNumber.vue' import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
@ -12,6 +13,7 @@ import {
itemsPosko itemsPosko
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const emit = defineEmits(['update:filters']) const emit = defineEmits(['update:filters'])
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' 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(() => { onMounted(() => {
fetchUid() 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) emit('update:filters', data.value)
}) })
</script> </script>
@ -82,42 +105,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
<Select />
v-else
@update:selected="setUp3($event)" <Select
:data="itemsUp3" v-else
:placeholder="up3Placeholder" @update:selected="setUp3($event)"
/> :data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label> <label class="filter-input-label">Posko:</label>
<Select <div v-if="!presetPosko">
v-if="renderPosko" <Select
@update:selected="setPosko($event)" v-if="renderPosko"
:data="itemsPosko" @update:selected="setPosko($event)"
:placeholder="poskoPlaceholder" :data="itemsPosko"
/> :placeholder="poskoPlaceholder"
/>
<Select <Select
v-else v-else
@update:selected="setPosko($event)" @update:selected="setPosko($event)"
:data="itemsPosko" :data="itemsPosko"
:placeholder="poskoPlaceholder" :placeholder="poskoPlaceholder"
/> />
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -6,6 +6,7 @@ interface SlaOption {
max: string max: string
} }
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue' import InputWithSuffix from '../InputWithSuffix.vue'
@ -19,6 +20,7 @@ import {
itemsPosko itemsPosko
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'
const props = defineProps({ const props = defineProps({
slaOptions: { 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(() => { onMounted(() => {
fetchUid() 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) emit('update:filters', data.value)
}) })
</script> </script>
@ -154,43 +177,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="up3Placeholder" :data="itemsUp3"
/> :placeholder="up3Placeholder"
/>
<Select <Select
v-else v-else
@update:selected="setUp3($event)" @update:selected="setUp3($event)"
:data="itemsUp3" :data="itemsUp3"
:placeholder="up3Placeholder" :placeholder="up3Placeholder"
/> />
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label> <label class="filter-input-label">Posko:</label>
<Select <div v-if="!presetPosko">
v-if="renderPosko" <Select
@update:selected="setPosko($event)" v-if="renderPosko"
:data="itemsPosko" @update:selected="setPosko($event)"
:placeholder="poskoPlaceholder" :data="itemsPosko"
/> :placeholder="poskoPlaceholder"
/>
<Select <Select
v-else v-else
@update:selected="setPosko($event)" @update:selected="setPosko($event)"
:data="itemsPosko" :data="itemsPosko"
:placeholder="poskoPlaceholder" :placeholder="poskoPlaceholder"
/> />
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference' import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' 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(() => { 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 !== 'posko') {
setFunctions[index](filterPresets.value[key])
}
}
})
} else {
fetchUid()
}
emit('update:filters', data.value) emit('update:filters', data.value)
fetchUid()
}) })
</script> </script>
@ -54,25 +79,36 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="uppPlaceholder" :data="itemsUp3"
/> :placeholder="uppPlaceholder"
/>
<Select <Select
v-else v-else
@update:selected="setUp3($event)" @update:selected="setUp3($event)"
:data="itemsUp3" :data="itemsUp3"
:placeholder="uppPlaceholder" :placeholder="uppPlaceholder"
/> />
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import InputReadonly from '@/components/Form/InputReadonly.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue' import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
@ -13,6 +14,7 @@ import {
itemsUp3, itemsUp3,
itemsPosko itemsPosko
} from './reference' } from './reference'
import { readDataJson } from '@/utils/storage'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' 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(() => { onMounted(() => {
fetchUid() 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) emit('update:filters', data.value)
}) })
</script> </script>
@ -82,43 +105,58 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label> <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>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select <div v-if="!presetUP3">
v-if="renderUp3" <Select
@update:selected="setUp3($event)" v-if="renderUp3"
:data="itemsUp3" @update:selected="setUp3($event)"
:placeholder="uppPlaceholder" :data="itemsUp3"
/> :placeholder="uppPlaceholder"
/>
<Select <Select
v-else v-else
@update:selected="setUp3($event)" @update:selected="setUp3($event)"
:data="itemsUp3" :data="itemsUp3"
:placeholder="uppPlaceholder" :placeholder="uppPlaceholder"
/> />
</div>
<InputReadonly v-if="presetUP3" :value="presetUP3.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label> <label class="filter-input-label">Posko:</label>
<Select <div v-if="!presetPosko">
v-if="renderPosko" <Select
@update:selected="setPosko($event)" v-if="renderPosko"
:data="itemsPosko" @update:selected="setPosko($event)"
:placeholder="poskoPlaceholder" :data="itemsPosko"
/> :placeholder="poskoPlaceholder"
/>
<Select <Select
v-else v-else
@update:selected="setPosko($event)" @update:selected="setPosko($event)"
:data="itemsPosko" :data="itemsPosko"
:placeholder="poskoPlaceholder" :placeholder="poskoPlaceholder"
/> />
</div>
<InputReadonly v-if="presetPosko" :value="presetPosko.name" />
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

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

27
src/stores/auth.ts
View File

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