feat: create login filterPresets

src/components/Form/FiltersType/Type11.vue

@@ -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,43 +184,58 @@ 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>
 
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="up3Placeholder"
-      />
+      <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"
-      />
+        <Select
+          v-else
+          @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">Unit Layanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUlp"
-        @update:selected="setUlp($event)"
-        :data="itemsUlp"
-        :placeholder="ulpPlaceholder"
-      />
+      <div v-if="!presetULP">
+        <Select
+          v-if="renderUlp"
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setUlp($event)"
-        :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 class="flex flex-col flex-1 space-y-2">