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>

src/components/Form/InputWithFilter.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { PhMagnifyingGlass } from '@phosphor-icons/vue';
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import { type PropType } from 'vue'
 
 interface FilterItems {
-  id: number;
-  title: string;
+  id: number
+  title: string
 }
 
 const props = defineProps({
@@ -25,29 +25,43 @@ const props = defineProps({
     required: true
   }
 })
+
+const emit = defineEmits(['update:keyword', 'update:filters'])
+
+const setKeyword = (event: Event) => {
+  emit('update:keyword', (event.target as HTMLInputElement).value)
+}
+
+const setFilter = (event: Event) => {
+  emit('update:filters', (event.target as HTMLSelectElement).value)
+}
 </script>
 
 <template>
   <div class="relative w-full overflow-hidden rounded-lg">
-    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
       <PhMagnifyingGlass size="18" class="text-gray-900" weight="regular" />
     </div>
     <input
+      @input="setKeyword"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
       type="text"
-      class="w-full px-4 py-2 pl-10 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+      class="w-full px-4 py-2 pl-10 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 class="absolute inset-y-0 right-0 flex items-center">
       <label for="filters" class="sr-only">filters</label>
-      <span class="block border border-gray-600 h-5"></span>
+      <span class="block h-5 border border-gray-600"></span>
       <select
+        @change="setFilter"
         id="filters"
         name="filters"
-        class="h-full bg-gray-200 text-sm rounded-lg border-transparent py-0 pl-2 pr-7 text-gray-900 focus:outline-0 focus:border-0 focus:ring-0"
+        class="h-full py-0 pl-2 text-sm text-gray-900 bg-gray-200 border-transparent rounded-lg pr-7 focus:outline-0 focus:border-0 focus:ring-0"
       >
-        <option :key="filter.id" :value="filter.id" v-for="filter in filters">{{ filter.title }}</option>
+        <option :key="filter.id" :value="filter.id" v-for="filter in filters">
+          {{ filter.title }}
+        </option>
       </select>
     </div>
   </div>

src/utils/api/api.graphql.ts

@@ -268,7 +268,7 @@ export const queries = {
             waktu_response
           }
         }
-      `,
+      `
     },
     rekap: {
       keluhanPerRatingUnit: gql`
@@ -573,8 +573,8 @@ export const queries = {
             total_diatas_sla_recovery
           }
         }
-      `,
-    },
+      `
+    }
   },
   gangguan: {
     rekap: {
@@ -1036,45 +1036,45 @@ export const queries = {
       `,
       gangguanAllDetail: gql`
         query daftarGangguanDiselesaikanMobileAPKT(
-            $dateFrom: Date!
-            $dateTo: Date!
-            $posko: Int!
-            $idUid: Int!
-            $idUp3: Int!
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
         ) {
-          detailGangguan (
-            dateFrom:$dateFrom 
-            dateTo:$dateTo
-            posko:$posko
-            idUid:$idUid
-            idUp3:$idUp3
+          detailGangguan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
           ) {
-                id
-                no_laporan
-                pembuat_laporan
-                waktu_lapor
-                waktu_response
-                waktu_recovery
-                durasi_dispatch_time
-                durasi_response_time
-                durasi_recovery_time
-                status_akhir
-                is_marking
-                referensi_marking
-                idpel_nometer
-                nama_pelapor
-                alamat_pelapor
-                no_telp_pelapor
-                keterangan_pelapor
-                media
-                nama_posko
-                jarak_closing
-                dispatch_oleh
-                diselesaikan_oleh
-                penyebab
-                tindakan
-                kode_gangguan
-                jenis_gangguan
+            id
+            no_laporan
+            pembuat_laporan
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_dispatch_time
+            durasi_response_time
+            durasi_recovery_time
+            status_akhir
+            is_marking
+            referensi_marking
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            nama_posko
+            jarak_closing
+            dispatch_oleh
+            diselesaikan_oleh
+            penyebab
+            tindakan
+            kode_gangguan
+            jenis_gangguan
           }
         }
       `,
@@ -1103,7 +1103,7 @@ export const queries = {
             posko_out
           }
         }
-      `,
+      `
     },
     daftar: {
       selesaiTanpaIDPelanggan: gql`
@@ -1286,7 +1286,13 @@ export const queries = {
         }
       `,
       dataDialihkanKePoskoLain: gql`
-        query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: Int, $idUid: Int, $idUp3: Int) {
+        query DaftarGangguan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int
+          $idUid: Int
+          $idUp3: Int
+        ) {
           daftarGangguanDialihkanKePoskoLain(
             dateFrom: $dateFrom
             dateTo: $dateTo
@@ -1352,7 +1358,7 @@ export const queries = {
           }
         }
       `
-    },
+    }
   },
   monalisa: {
     gangguan: {
@@ -2019,5 +2025,85 @@ export const queries = {
         }
       }
     `
+  },
+  pencarian: {
+    pencarianGangguan: gql`
+      query pencarianDataReportNumberGangguan(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $noLaporan: String!
+        $namaPelapor: String!
+        $noTelpPelapor: String!
+        $alamatPelapor: String!
+        $pembuatLaporan: String!
+      ) {
+        pencarianDataReportNumberGangguan(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          noLaporan: $noLaporan
+          namaPelapor: $namaPelapor
+          noTelpPelapor: $noTelpPelapor
+          alamatPelapor: $alamatPelapor
+          pembuatLaporan: $pembuatLaporan
+        ) {
+          id
+          no_laporan
+          idpel_nometer
+          nama_pelapor
+          alamat_pelapor
+          no_telp_pelapor
+          status_akhir
+          nama_uid
+          nama_up3
+          nama_ulp
+          nama_posko
+          id_regu
+          waktu_lapor
+          waktu_response
+          waktu_recovery
+          durasi_response_time
+          durasi_recovery_time
+        }
+      }
+    `,
+    pencarianKeluhan: gql`
+      query pencarianDataReportNumberKeluhan(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $noLaporan: String!
+        $namaPelapor: String!
+        $noTelpPelapor: String!
+        $alamatPelapor: String!
+        $pembuatLaporan: String!
+      ) {
+        pencarianDataReportNumberKeluhan(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          noLaporan: $noLaporan
+          namaPelapor: $namaPelapor
+          noTelpPelapor: $noTelpPelapor
+          alamatPelapor: $alamatPelapor
+          pembuatLaporan: $pembuatLaporan
+        ) {
+          id
+          no_laporan
+          idpel_nometer
+          nama_pelapor
+          alamat_pelapor
+          no_telp_pelapor
+          status_akhir
+          nama_uid
+          nama_up3
+          nama_ulp
+          nama_posko
+          id_regu
+          waktu_lapor
+          waktu_response
+          waktu_recovery
+          durasi_response_time
+          durasi_recovery_time
+        }
+      }
+    `
   }
 }