Update API and Form FiltersType components

src/components/Form/FiltersType/Type17.vue

@@ -1,10 +1,128 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue';
-import InputWithFilter from '../InputWithFilter.vue';
-import { ref } from 'vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputWithFilter from '../InputWithFilter.vue'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsUlp
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+const uidPlaceholder = 'Pilih Unit'
+const up3Placeholder = 'Pilih Area'
+const ulpPlaceholder = 'Pilih Rayon'
+const statusPlaceholder = 'Pilih Status'
+const slaPlaceholder = 'Pilih Durasi SLA'
+
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const ulp = ref({ id: 0, name: ulpPlaceholder })
+
+const keyword = ref('')
+const reportType = [
+  { id: 1, title: 'No Lapor' },
+  { id: 2, title: 'Nama Pelapor' },
+  { id: 3, title: 'Permasalahan' }
+]
+const searchBy = ref<any>(reportType[0].title)
+
+const statusType = [
+  { id: 1, name: 'Menunggu Tanggapan Supervisor CC' },
+  { id: 2, name: 'Dalam Proses Manager Unit' },
+  { id: 3, name: 'Dalam Proses Bidang Unit' },
+  { id: 4, name: 'Selesai Dijawab Bidang Unit' },
+  { id: 5, name: 'Konfirmasi' }
+]
+const status = ref(statusType[0])
+
+const slaType = [
+  {
+    id: 1,
+    name: '45 Menit',
+    time: 45
+  },
+  {
+    id: 2,
+    name: '3 Jam',
+    time: 180
+  },
+  {
+    id: 3,
+    name: '1 Hari',
+    time: 1440
+  },
+  {
+    id: 4,
+    name: '3 Hari',
+    time: 4320
+  }
+]
+const sla = ref(slaType[0])
+const emit = defineEmits(['update:filters'])
+
 const data = ref({
-  periode: '',
+  uid: uid.value,
+  up3: up3.value,
+  ulp: ulp.value,
+  status: status.value,
+  keyword: keyword.value,
+  searchBy: searchBy.value,
+  sla: sla.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Ulp(value)
+  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value.up3 = value
+  console.log(itemsUlp)
+}
+
+const setUlp = (value: any) => {
+  ulp.value = value
+  selectedUlp(value)
+  data.value.ulp = value
+}
+
+const setStatus = (value: any) => {
+  status.value = value
+  data.value.status = value
+}
+
+const changeKeyword = (value: string) => {
+  keyword.value = value
+  data.value.keyword = value
+}
+
+const changeReportTypeSelected = (id: any) => {
+  searchBy.value = reportType.find((item) => item.id == id)?.title
+  data.value.searchBy = searchBy.value
+}
+
+const setSla = (value: any) => {
+  sla.value = value
+  data.value.sla = value
+}
+
+onMounted(() => {
+  fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -13,18 +131,28 @@ const data = ref({
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Periode Tanggal:</label>
 
-      <DatePicker @update:date-value="(value) => data.periode = value" />
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit PLN:</label>
 
       <div class="flex flex-col gap-y-1">
-        <Select placeholder="Pilih Unit" />
+        <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
 
         <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-          <Select placeholder="Pilih Area" />
-          <Select placeholder="Pilih Rayon" />
+          <Select
+            @update:selected="setUp3($event)"
+            :data="itemsUp3"
+            :selected="up3"
+            :placeholder="up3Placeholder"
+          />
+          <Select
+            @update:selected="setUlp($event)"
+            :data="itemsUlp"
+            :selected="ulp"
+            :placeholder="ulpPlaceholder"
+          />
         </div>
       </div>
     </div>
@@ -32,20 +160,34 @@ const data = ref({
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Status:</label>
 
-      <Select placeholder="Pilih Status" />
+      <Select
+        @update:selected="setStatus($event)"
+        :data="statusType"
+        :selected="status"
+        :placeholder="statusPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">SLA:</label>
 
-      <Select placeholder="Pilih Durasi SLA" />
+      <Select
+        @update:selected="setSla($event)"
+        :data="slaType"
+        :selected="sla"
+        :placeholder="slaPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Pencarian:</label>
 
-      <InputWithFilter placeholder="cari report" :filters="[{ id: 1, title: 'Pilih Jenis' }]" />
+      <InputWithFilter
+        placeholder="Cari"
+        :filters="reportType"
+        @update:keyword="changeKeyword"
+        @update:filters="changeReportTypeSelected"
+      />
     </div>
   </div>
-
 </template>