Refactor DatePicker.vue and api.graphql.ts, and RKeluhan_BerdasarMedia.vue files

2024-04-06 23:39:41 +07:00
parent dd6da0f25a
commit 253a076107
6 changed files with 1354 additions and 353 deletions
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -128,7 +128,7 @@
            data-type="number"
            caption="Jml"
            css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRatingTotal"
          />
          <DxColumn
            alignment="center"
@@ -136,7 +136,7 @@
            data-type="number"
            caption="1"
            css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating1"
          />
          <DxColumn
            alignment="center"
@@ -144,7 +144,7 @@
            data-type="number"
            caption="2"
            css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating2"
          />
          <DxColumn
            alignment="center"
@@ -152,7 +152,7 @@
            data-type="number"
            caption="3"
            css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating3"
          />
          <DxColumn
            alignment="center"
@@ -160,7 +160,7 @@
            data-type="number"
            caption="4"
            css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating4"
          />
          <DxColumn
            alignment="center"
@@ -168,7 +168,7 @@
            data-type="number"
            caption="5"
            css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating5"
          />
          <DxColumn
            alignment="center"
@@ -188,7 +188,7 @@
          data-type="number"
          caption="Jml"
          css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberJmlNonRating"
        />
        <DxColumn
          alignment="center"
@@ -201,19 +201,49 @@
      </DxColumn>

      <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p
+          class="text-left cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: false,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
          {{ data.text }}
        </p>
      </template>

      <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: false,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
          {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
        </p>
      </template>

      <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: false,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
          {{
            isNumber(data.text)
              ? data.column.caption == '%'
@@ -225,7 +255,17 @@
      </template>

      <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
          {{
            isNumber(data.text)
              ? data.column.caption == '%'
@@ -237,7 +277,17 @@
      </template>

      <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 1,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
          {{
            isNumber(data.text)
              ? data.column.caption == '%'
@@ -249,7 +299,17 @@
      </template>

      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 2,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
          {{
            isNumber(data.text)
              ? data.column.caption == '%'
@@ -261,10 +321,174 @@
      </template>

      <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p
+          class="!text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: false,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
        </p>
      </template>
+
+      <template #formatNumberRatingTotal="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 0,
+              nonRating: 2
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating1="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 1,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating2="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 2,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating3="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 3,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating4="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 4,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating5="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 5,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberJmlNonRating="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 0,
+              nonRating: 1
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
    </DxDataGrid>
  </div>

@@ -640,7 +864,6 @@ import {
  DxColumnFixing,
  DxExport,
  DxGrouping,
-  DxLoadPanel,
  DxPager,
  DxPaging,
  DxScrolling,
@@ -684,64 +907,14 @@ const reportMeta = ref({
  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
  periode: ''
 })
-const agreeToShowDialog = ref(false)
-const progressSelected = ref(0)
-// const ratingToShow = ref(0)
-// const nonRating = ref(0)
-
-// const setAgreementDialog = (
-//   status: boolean,
-//   progress: number,
-//   rating: number,
-//   ratingStatus: number
-// ) => {
-//   agreeToShowDialog.value = status
-//   progressSelected.value = progress
-//   ratingToShow.value = rating
-//   nonRating.value = ratingStatus
-// }
-
-// const getDetail = async () => {
-//   const dateValue = filters.value.periode.split(' s/d ')
-//   const ref = dataSelected.value
-
-//   const query = {
-//     dateFrom: dateValue[0]
-//       ? dateValue[0].split('-').reverse().join('-')
-//       : new Date().toISOString().slice(0, 10),
-//     dateTo: dateValue[1]
-//       ? dateValue[1].split('-').reverse().join('-')
-//       : new Date().toISOString().slice(0, 10),
-//     posko: ref?.id_ulp ? ref?.id_ulp : 0,
-//     idUid: ref?.id_uid ? ref?.id_uid : 0,
-//     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
-//     idRegu: ref?.id_regu ? ref?.id_regu : 0,
-//     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-//     isSelesai: progressSelected.value,
-//     isNonRating: nonRating.value,
-//     nilaiRating: ratingToShow.value
-//   }
-
-//   loadingSubData.value = true
-//   await requestGraphQl(queries.gangguan.rekap.gangguanRatingDetail, query)
-//     .then((result) => {
-//       if (result.data.data != undefined) {
-//         dataSub.value = result.data.data.detailRekapitulasiGangguanBerdasarkanRating
-//       } else {
-//         dataSub.value = []
-//       }
-//     })
-//     .catch((err) => {
-//       console.error(err)
-//     })
-//     .finally(() => {
-//       loadingSubData.value = false
-//       dialogDetail.value = true
-//     })
-// }
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
-  progressSelected.value = progress
+const parameterRequest = ref({
+  dialog: false,
+  progress: 0,
+  rating: 0,
+  nonRating: 0
+})
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
 }

 const getDetail = async () => {
@@ -755,24 +928,21 @@ const getDetail = async () => {
    dateTo: dateValue[1]
      ? dateValue[1].split('-').reverse().join('-')
      : new Date().toISOString().slice(0, 10),
-    posko: ref?.id_posko ? ref?.id_posko : 0,
+    posko: ref?.id_ulp ? ref?.id_ulp : 0,
    idUid: ref?.id_uid ? ref?.id_uid : 0,
    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
    idRegu: ref?.id_regu ? ref?.id_regu : 0,
-    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : '',
-    isSelesai: progressSelected.value,
-    tanggal: '',
-    namaIssuetype: '',
-    namaSubissuetype: ''
+    isSelesai: parameterRequest.value.progress,
+    isNonRating: parameterRequest.value.nonRating,
+    nilaiRating: parameterRequest.value.rating
  }

  loadingSubData.value = true
-  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+  await requestGraphQl(queries.gangguan.rekap.gangguanRatingDetail, query)
    .then((result) => {
      if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailGangguan
+        dataSub.value = result.data.data.detailRekapitulasiGangguanBerdasarkanRating
      } else {
        dataSub.value = []
      }
@@ -785,6 +955,52 @@ const getDetail = async () => {
      dialogDetail.value = true
    })
 }
+// const setAgreementDialog = (status: boolean, progress: number) => {
+//   agreeToShowDialog.value = status
+//   progressSelected.value = progress
+// }
+
+// const getDetail = async () => {
+//   const dateValue = filters.value.periode.split(' s/d ')
+//   const ref = dataSelected.value
+
+//   const query = {
+//     dateFrom: dateValue[0]
+//       ? dateValue[0].split('-').reverse().join('-')
+//       : new Date().toISOString().slice(0, 10),
+//     dateTo: dateValue[1]
+//       ? dateValue[1].split('-').reverse().join('-')
+//       : new Date().toISOString().slice(0, 10),
+//     posko: ref?.id_posko ? ref?.id_posko : 0,
+//     idUid: ref?.id_uid ? ref?.id_uid : 0,
+//     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+//     idRegu: ref?.id_regu ? ref?.id_regu : 0,
+//     idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+//     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+//     media: ref?.media ? ref?.media : '',
+//     isSelesai: progressSelected.value,
+//     tanggal: '',
+//     namaIssuetype: '',
+//     namaSubissuetype: ''
+//   }
+
+//   loadingSubData.value = true
+//   await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+//     .then((result) => {
+//       if (result.data.data != undefined) {
+//         dataSub.value = result.data.data.detailGangguan
+//       } else {
+//         dataSub.value = []
+//       }
+//     })
+//     .catch((err) => {
+//       console.error(err)
+//     })
+//     .finally(() => {
+//       loadingSubData.value = false
+//       dialogDetail.value = true
+//     })
+// }

 const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
@@ -795,7 +1011,7 @@ const showDetail = () => {
  clearSelection()
  dataSub.value = []
  dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (parameterRequest.value.dialog) {
    getDetail()
  }
 }