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 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'
-import { ref } from '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
-          <Select placeholder="Pilih Rayon" />
+            @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>

src/components/Pages/Transaksi/Transaksi.vue

@@ -63,87 +63,123 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="no_laporan"
         caption="No.Lapor"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="issuetype"
         caption="Tipe Isu"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="nama_pelapor"
         caption="Nama"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="nama_ulp"
         caption="Unit"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="no_telp_pelapor"
         caption="No.Telp"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
-        :width="170"
+        :width="250"
         alignment="center"
-        data-field=""
+        data-field="permasalahan"
         caption="Permasalahan"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
-        :width="170"
+        :width="250"
         alignment="center"
-        data-field=""
+        data-field="deskripsi"
         caption="Deskripsi"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="waktu_lapor"
         caption="Tgl Buat"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="jumlah_lapor"
         caption="Lap.Ulang"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="keterangan_lapor_ulang"
         caption="Ket.Lap.Ulang"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="status_akhir"
         caption="Status"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="durasi"
         caption="Durasi"
         css-class="custom-table-column"
+        cell-template="formatTime"
       />
+
+      <template #formatText="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatTime="{ data }">
+        <p class="!text-right cursor-pointer">
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
   <BufferDialog v-if="loadingData" />
@@ -171,6 +207,8 @@ import { Type17 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -182,6 +220,7 @@ const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const tab = ref('gangguan')
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -252,7 +291,7 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
-  const { posko, idUid, idUp3 } = params
+  const { ulp, uid, up3, status, keyword, searchBy, sla } = params
   const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -260,16 +299,24 @@ const filterData = async (params: any) => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUid: idUid ? idUid.id : 0,
+    idPosko: 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUid: uid ? uid.id : 0,
-    posko: posko ? posko.id : 0
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    tipe_sla: sla ? sla.id : 0,
+    operator_sla: '',
+    status_akhir: status ? status.name : '',
+    no_laporan: searchBy == 'No Lapor' ? keyword : '',
+    nama_pelapor: searchBy == 'Nama Pelapor' ? keyword : '',
+    permasalahan: searchBy == 'Permasalahan' ? keyword : '',
+    tipe_laporan: tab.value == 'gangguan' ? 'G' : 'K'
   }
 
   loadingData.value = true
   await requestGraphQl(queries.transaksi.transaksiAPKT, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        data.value = result.data.data.rekapitulasiPemakaianMaterial
+        data.value = result.data.data.transaksiApkt
       } else {
         data.value = []
       }

src/utils/api/api.graphql.ts

@@ -4479,35 +4479,44 @@ export const queries = {
         $dateFrom: Date!
         $dateTo: Date!
         $idPosko: Int!
+        $idUlp: Int!
         $idUid: Int!
         $idUp3: Int!
         $tipe_sla: Int!
         $operator_sla: String!
-        $is_sla: Int!
         $status_akhir: String!
         $no_laporan: String!
+        $nama_pelapor: String!
+        $permasalahan: String!
+        $tipe_laporan: String!
       ) {
         transaksiApkt(
           dateFrom: $dateFrom
           dateTo: $dateTo
           idPosko: $idPosko
+          idUlp: $idUlp
           idUid: $idUid
           idUp3: $idUp3
           tipe_sla: $tipe_sla
           operator_sla: $operator_sla
-          is_sla: $is_sla
           status_akhir: $status_akhir
           no_laporan: $no_laporan
+          nama_pelapor: $nama_pelapor
+          permasalahan: $permasalahan
+          tipe_laporan: $tipe_laporan
         ) {
           no_laporan
           issuetype
           nama_pelapor
-          nama_posko
+          nama_ulp
           no_telp_pelapor
-          penyebab
+          permasalahan
-          keterangan_pelapor
+          deskripsi
           waktu_lapor
           jumlah_lapor
+          keterangan_lapor_ulang
+          status_akhir
+          durasi
           tipe_sla
           operator_sla
           is_sla