Refactor InputWithFilter and Type15 components

src/components/Form/FiltersType/Type15.vue

@@ -1,21 +1,44 @@
 <script setup lang="ts">
-import InputWithFilter from '../InputWithFilter.vue';
-import DatePicker from '@/components/DatePicker.vue';
-import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue';
-import { ref } from 'vue';
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-const uppp = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+import InputWithFilter from '../InputWithFilter.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import { onMounted, ref } from 'vue'
+const type = ref('Gangguan')
+const keyword = ref('')
+const reportType = [
+  { id: 1, title: 'Nomor Laporan' },
+  { id: 2, title: 'Nama Pelapor' },
+  { id: 3, title: 'No Telepon' },
+  { id: 4, title: 'Alamat' },
+  { id: 5, title: 'Pembuat' }
+]
+const searchBy = ref<any>(reportType[0].title)
 const emit = defineEmits(['update:filters'])
+
 const data = ref({
-  uid: uid.value,
-  up3: uppp.value,
-  ulp: ulp.value,
-  periode: '',
-  group: 1
+  type: type.value,
+  keyword: keyword.value,
+  searchBy: searchBy.value,
+  periode: ''
+})
+
+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 setPengaduan = (value: any) => {
+  type.value = value.title
+  data.value.type = value.title
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -24,20 +47,30 @@ const data = ref({
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Jenis Pengaduan:</label>
 
-      <InlineRadioGroup :radio-items="[{ id: 1, title: 'Gangguan', checked: true }, { id: 2, title: 'Keluhan' }]" />
+      <InlineRadioGroup
+        @update:group-value="setPengaduan"
+        :radio-items="[
+          { id: 1, title: 'Gangguan', checked: true },
+          { id: 2, title: 'Keluhan' }
+        ]"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Cari Report Number:</label>
 
-      <InputWithFilter placeholder="cari report" :filters="[{ id: 1, title: 'Nama Pelapor' }]" />
+      <InputWithFilter
+        placeholder="Cari Report"
+        :filters="reportType"
+        @update:keyword="changeKeyword"
+        @update:filters="changeReportTypeSelected"
+      />
     </div>
 
-    <div class="flex flex-col flex-1 space-y-2">
+    <div class="flex flex-col flex-1 space-y-2" v-if="searchBy != 'Nomor Laporan'">
       <label class="filter-input-label">Periode Tanggal:</label>
 
-      <DatePicker @update:date-value="(value) => data.periode = value" />
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>