fix: daftar keluhan

2024-02-28 15:03:24 +07:00
parent 80fdc2b1fe
commit 19b0ddc27e
14 changed files with 2306 additions and 1607 deletions
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@ -1,6 +1,5 @@
 <script setup lang="ts">
- 
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import {
  selectedUid,
  selectedUp3Ulp,
@ -10,17 +9,16 @@ import {
  itemsUp3,
  itemsUlp
 } from './reference'
-
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputNumber from '@/components/Form/InputNumber.vue'

-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-const up3 = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
  uid: uid.value,
@ -30,29 +28,26 @@ const data = ref({
  minJmlLapor: 1,
  maxJmlLapor: 1
 })
+
 const setUid = (value: any) => {
-  uid.value = value;
-  selectedUid(value);
-  up3.value = { id: 0, name: up3Placeholder };
-  data.value.uid = value;
-};
+  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;
-};
+  up3.value = value
+  selectedUp3Ulp(value)
+  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value.up3 = value
+}

 const setUlp = (value: any) => {
-  ulp.value = value;
-  selectedUlp(value);
-  data.value.ulp = value;
-};
-onMounted(() => {
-  emit('update:filters', data.value)
-  fetchUid()
-})
+  ulp.value = value
+  selectedUlp(value)
+  data.value.ulp = value
+}
 onMounted(() => {
  emit('update:filters', data.value)
  fetchUid()
@ -61,13 +56,11 @@ onMounted(() => {

 <template>
  <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 Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >

-    <Select
-      @update:selected="setUid($event)"
-      :data="itemsUid"
-      :placeholder="uidPlaceholder"
-    />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
  </div>

  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -75,18 +68,16 @@ onMounted(() => {
      >Unit Pelaksanaan Pelayanan Pelanggan:</label
    >

-    <Select 
-      @update:selected="setUp3($event)" 
-      :data="itemsUp3" 
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
      :selected="up3"
      :placeholder="up3Placeholder"
    />
  </div>

  <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 Layanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>

    <Select
      @update:selected="setUlp($event)"
@ -99,23 +90,16 @@ onMounted(() => {
  <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">Periode Tanggal:</label>

-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
-      " />
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
  </div>

  <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">Lapor Ulang:</label>

    <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber @update:time-value="(value) => {
-        data.minJmlLapor = value
-      }" />
+      <InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" />
      <small class="flex items-center">s/d</small>
-      <InputNumber  @update:time-value="(value) => {
-        data.maxJmlLapor = value
-      }" />
+      <InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" />
    </div>
  </div>
 </template>
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@ -1,8 +1,6 @@
 <script setup lang="ts">
-
-import { onMounted, ref, watch } from 'vue'
-import { useTotalDuration } from '@/stores/totalDuration';
-
+import { onMounted, ref } from 'vue'
+import { useTotalDuration } from '@/stores/totalDuration'
 import {
  selectedUid,
  selectedUp3Ulp,
@ -12,16 +10,16 @@ import {
  itemsUp3,
  itemsUlp
 } from './reference'
-
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-const up3 = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])

 const sla = [
@ -33,7 +31,8 @@ const sla = [
    id: 2,
    name: 'Melebihi SLA (> 45 menit)'
  }
-];
+]
+
 const data = ref({
  uid: uid.value,
  up3: up3.value,
@ -42,54 +41,58 @@ const data = ref({
  minTime: 1,
  maxTime: 1
 })
+
 const setUid = (value: any) => {
-  uid.value = value;
-  selectedUid(value);
-  up3.value = { id: 0, name: up3Placeholder };
-  data.value.uid = value;
-};
+  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;
-};
+  up3.value = value
+  selectedUp3Ulp(value)
+  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value.up3 = value
+}

 const setUlp = (value: any) => {
-  ulp.value = value;
-  selectedUlp(value);
-  data.value.ulp = value;
-};
+  ulp.value = value
+  selectedUlp(value)
+  data.value.ulp = value
+}
+
 const setMin = (value: any) => {
  console.log(value)
  data.value.minTime = value
  useTotalDuration().setDataMin(value)
-
 }
+
 const setMax = (value: any) => {
  data.value.maxTime = value
  useTotalDuration().setDataMax(value)
 }
+
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
  if (value.id === 0) {
-    setMin("1")
-    setMax("5")
+    setMin('1')
+    setMax('5')
    console.log('Durasi Menit')
    triggerInput.value = false
  } else if (value.id === 1) {
-    setMin("1")
-    setMax("45")
+    setMin('1')
+    setMax('45')
    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
    triggerInput.value = true
  } else {
-    setMin("45")
+    setMin('45')
    setMax(99999 * 60 * 24)
    triggerInput.value = true
    console.log('Melebihi SLA (> 45 menit)')
  }
 }
+
 onMounted(() => {
  emit('update:filters', data.value)
  fetchUid()
@ -98,30 +101,41 @@ onMounted(() => {

 <template>
  <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 Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >

    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
  </div>

  <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>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >

-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :selected="up3"
+      :placeholder="up3Placeholder"
+    />
  </div>

  <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 Layanan Pelanggan:</label>

-    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+      :selected="ulp"
+    />
  </div>

  <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">Periode Tanggal:</label>

-    <DatePicker @update:date-value="(value) => {
-      data.periode = value
-    }
-      " />
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
  </div>

  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -136,5 +150,4 @@ onMounted(() => {
      </div>
    </div>
  </div>
-
 </template>
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@ -11,6 +11,7 @@ import {
  itemsUlp
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@ -25,6 +26,7 @@ const data = ref({
  ulp: ulp.value,
  periode: ''
 })
+
 watch(data.value, (value) => {
  emit('update:filters', value)
 })
@ -41,6 +43,7 @@ const setUp3 = (value: any) => {
  selectedUp3Ulp(value)
  ulp.value = { id: 0, name: ulpPlaceholder }
  data.value.up3 = value
+  console.log(itemsUlp)
 }

 const setUlp = (value: any) => {
@ -48,6 +51,7 @@ const setUlp = (value: any) => {
  selectedUlp(value)
  data.value.ulp = value
 }
+
 onMounted(() => {
  fetchUid()
  emit('update:filters', data.value)
@ -90,12 +94,6 @@ onMounted(() => {
  <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">Periode Tanggal:</label>

-    <DatePicker
-      @update:date-value="
-        (value) => {
-          data.periode = value
-        }
-      "
-    />
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
  </div>
 </template>
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@ -105,7 +105,7 @@ const fetchDataUlp = async (up3: number) => {
      const res = await getUlp(up3)
      itemsUlp.value = res.data.map((item: any) => ({
        id: item.id,
-        name: item.name
+        name: item.nama
      }))
    } catch (error) {
      console.error('Error fetching data:', error)