From ca933980cdad037d60ce9407722c1bf157ce8857 Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Fri, 9 Feb 2024 11:48:28 +0700
Subject: [PATCH] Update Select component and import statements

---
 src/components/Form/FiltersType/Type16.vue   |   4 +-
 src/components/Form/FiltersType/Type18.vue   |   4 +-
 src/components/Form/FiltersType/Type6.vue    |   4 +-
 src/components/Form/FiltersType/reference.ts | 124 ++++++++++++-------
 src/components/Pages/Gangguan/Table_1.vue    |  13 +-
 src/components/Select.vue                    |   2 +-
 6 files changed, 96 insertions(+), 55 deletions(-)

diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
index 61a8e47..f8e518c 100644
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
+fetchMedia();
 </script>
 
 <template>
@@ -27,7 +29,7 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
 
-    <Select placeholder="Semua Media" />
+    <Select placeholder="Semua Media" :data="itemsMedia" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index 6bf4d78..b33c51b 100644
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -3,7 +3,7 @@ import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
 fetchData();
 
 const departments = [
@@ -26,7 +26,7 @@ const departments = [
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
       placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 4dd4293..ac323f1 100644
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -2,7 +2,7 @@
   import InputNumber from '@/components/Form/InputNumber.vue'
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
 import { useTotalReport } from '@/stores/totalReport';
   fetchData();
   const changeMinReport = (value: any) => {
@@ -25,7 +25,7 @@ import { useTotalReport } from '@/stores/totalReport';
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index a290e46..08f2a0f 100644
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -1,5 +1,5 @@
 
-import { getUid, getUp3, getPosko ,getUlp} from '@/utils/network';
+import { getUid, getUp3, getPosko, getUlp } from '@/utils/network';
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts';
 import { useUp3Store } from '@/stores/up3';
@@ -7,49 +7,49 @@ import { useRegionStore } from '@/stores/region';
 import { useUlpStore } from '@/stores/ulp';
 
 interface Item {
-  id: number;
+  id: any;
   name: any;
 }
-const months =[
-  {id:1, name: 'Januari'},
-  {id:2, name: 'Februari'},
-  {id:3, name: 'Maret'},
-  {id:4, name: 'April'},
-  {id:5, name: 'Mei'},
-  {id:6, name: 'Juni'},
-  {id:7, name: 'Juli'},
-  {id:8, name: 'Agustus'},
-  {id:9, name: 'September'},
-  {id:10, name: 'Oktober'},
-  {id:11, name: 'November'},
-  {id:12, name: 'Desember'},
+const months = [
+  { id: 1, name: 'Januari' },
+  { id: 2, name: 'Februari' },
+  { id: 3, name: 'Maret' },
+  { id: 4, name: 'April' },
+  { id: 5, name: 'Mei' },
+  { id: 6, name: 'Juni' },
+  { id: 7, name: 'Juli' },
+  { id: 8, name: 'Agustus' },
+  { id: 9, name: 'September' },
+  { id: 10, name: 'Oktober' },
+  { id: 11, name: 'November' },
+  { id: 12, name: 'Desember' },
 ]
 // create 4 year back array
 const year = new Date().getFullYear();
-const years =ref<Item[]>([]);
+const years = ref<Item[]>([]);
 for (let i = 0; i < 5; i++) {
-  years.value.push({id:year-i, name: year-i})
+  years.value.push({ id: year - i, name: year - i })
 }
 const timeout = ref()
 const items = ref<Item[]>([]);
 const itemsUp3 = ref<Item[]>([]);
 const itemsPosko = ref<Item[]>([]);
-const itemsUlp =  ref<Item[]>([]);
+const itemsUlp = ref<Item[]>([]);
 const itemsRegional = ref<Item[]>([]);
 const itemsMedia = ref<Item[]>([]);
 // Fetch data from the API using Axios
 const fetchData = async () => {
-    try {
-      const res = await getUid()
-      items.value = res.data.map((item: any) => (
-        {
-          id: item.id,
-          name: item.nama,
-        }
-      ));
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
+  try {
+    const res = await getUid()
+    items.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
 };
 
 const fetchDataUp3 = async (uid: number) => {
@@ -73,8 +73,8 @@ const fetchDataUlp = async (up3: number) => {
     const res = await getUlp(up3)
     itemsUlp.value = res.data.map((item: any) => (
       {
-        id: item.id,
-        name: item.nama,
+        id: item.name,
+        name: item.name,
       }
     ));
   } catch (error) {
@@ -84,19 +84,55 @@ const fetchDataUlp = async (up3: number) => {
 const fetchDataPosko = async (up3: number) => {
   clearTimeout(timeout.value)
   timeout.value = setTimeout(async () => {
-  try {
-    const res = await getPosko(up3)
-    itemsPosko.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-},300);
+    try {
+      const res = await getPosko(up3)
+      itemsPosko.value = res.data.map((item: any) => (
+        {
+          id: item.nama,
+          name: item.nama,
+        }
+      ));
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  }, 300);
 };
+const fetchMedia = () => {
+  itemsMedia.value = [
+  { id: "Ulasan Aplikasi PLN Mobile", name: "Ulasan Aplikasi PLN Mobile"},
+  { id: "Twitter", name: "Twitter" },
+  { id: "PLN Mobile", name: "PLN Mobile" },
+  { id: "Media Massa", name: "Media Massa" },
+  { id: "Live Chat Website", name: "Live Chat Website" },
+  { id: "Live Chat PLN Mobile", name: "Live Chat PLN Mobile" },
+  { id: "Instagram", name: "Instagram" },
+  { id: "Facebook", name: "Facebook" },
+  { id: "Email", name: "Email" },
+  { id: "EMS", name: "EMS" },
+  { id: "Datang ke Kantor", name: "Datang ke Kantor" },
+  { id: "Call ke Kantor Unit", name: "Call ke Kantor Unit" },
+  { id: "Call PLN 123", name: "Call PLN 123" },
+  ]
+
+}
+const fetchStatus = (data : any) => {
+
+  const status  = [
+    {"id": "8", "name": "Selesai"},
+    {"id": "7", "name": "Nyala"},
+    {"id": "6", "name": "Pengalihan"},
+    {"id": "5", "name": "Dialihkan"},
+    {"id": "4", "name": "Dalam Pengerjaan"},
+    {"id": "3", "name": "Dalam Perjalanan"},
+    {"id": "2", "name": "Penugasan Regu"},
+    {"id": "1", "name": "lapor"}
+  ]
+  return status.filter((item: any) => {
+    if (item.id == data) {
+      return item.name
+    }
+  });
+}
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id);
   fetchDataUp3(value.id);
@@ -118,4 +154,4 @@ const selectedUlp = (value: any) => {
 
 
 
-export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp, fetchData, items, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchData,fetchMedia,fetchStatus, items, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 088f0ad..51af1e7 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -25,11 +25,11 @@
                 caption="Pembuat Laporan" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
                 caption="Tgl Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
                 caption="Tgl Dialihkan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
                 caption="Tgl Response" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
                 caption="Tgl Recovery" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
                 caption="Durasi Response Time" cell-template="data" />
@@ -218,11 +218,11 @@ import { useSearchStore } from '@/stores/filtersAction';
 import { usePostsStore } from '@/stores/posts';
 import { useUp3Store } from '@/stores/up3';
 import { useRegionStore } from '@/stores/region';
+import { fetchStatus } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
-const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
@@ -271,6 +271,9 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
+      waktu_dialihkan
+      waktu_recovery
+      waktu_response
       id_gangguan
       idpel_nometer
       keterangan_pelapor
@@ -313,7 +316,7 @@ watch(detected, () => {
             queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
                 data.value = [...data.value, {
                     ...item,
-                    pembuat_laporan: '-'
+                    status_akhir : fetchStatus(item.status_akhir)
                 }];
             });
         }
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 52ced6f..05b2153 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface DataItem {
-  id: number;
+  id: any;
   name: string;
 }