Refactor DatePicker.vue and api.graphql.ts, and RKeluhan_BerdasarMedia.vue files
This commit is contained in:
		| @@ -1,35 +1,84 @@ | ||||
| <template> | ||||
|   <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" | ||||
|     @run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4"> | ||||
|   <Filters | ||||
|     @reset-form="data = []" | ||||
|     :report-button="true" | ||||
|     @run-search="() => filterData(filters)" | ||||
|     @run-report="() => exportToPDF(reportMeta, data, true)" | ||||
|     class="mb-4" | ||||
|   > | ||||
|     <Type1 @update:filters="(value) => (filters = value)" /> | ||||
|   </Filters> | ||||
|  | ||||
|   <div id="data"> | ||||
|     <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10" | ||||
|       :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" | ||||
|       :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged" | ||||
|       :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" | ||||
|       :word-wrap-enabled="true"> | ||||
|     <DxDataGrid | ||||
|       ref="dataGridRef" | ||||
|       :allow-column-reordering="true" | ||||
|       class="max-h-[calc(100vh-140px)] mb-10" | ||||
|       :data-source="data" | ||||
|       :show-column-lines="true" | ||||
|       :show-row-lines="false" | ||||
|       :show-borders="true" | ||||
|       :row-alternation-enabled="true" | ||||
|       :hover-state-enabled="true" | ||||
|       @selection-changed="onDataSelectionChanged" | ||||
|       :column-width="100" | ||||
|       @exporting="onExporting" | ||||
|       :allow-column-resizing="true" | ||||
|       column-resizing-mode="widget" | ||||
|       :word-wrap-enabled="true" | ||||
|     > | ||||
|       <DxSelection mode="single" /> | ||||
|       <DxPaging :enabled="false" /> | ||||
|       <DxScrolling column-rendering-mode="virtual" mode="virtual" /> | ||||
|       <!--  --> | ||||
|  | ||||
|       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> | ||||
|       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> | ||||
|       <DxExport | ||||
|         :enabled="true" | ||||
|         :formats="['pdf', 'xlsx', 'document']" | ||||
|         :allow-export-selected-data="false" | ||||
|       /> | ||||
|       <DxColumnFixing :enabled="true" /> | ||||
|  | ||||
|       <DxColumn css-class="custom-table-column" :width="50" alignment="center" | ||||
|         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" | ||||
|         data-field="no" cell-template="formatNumber" /> | ||||
|       <DxColumn :width="170" data-field="media" caption="Nama Media" alignment="center" cell-template="formatText" | ||||
|         css-class="custom-table-column" header-cell-template="title-header" /> | ||||
|       <DxColumn | ||||
|         css-class="custom-table-column" | ||||
|         :width="50" | ||||
|         alignment="center" | ||||
|         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" | ||||
|         data-type="number" | ||||
|         caption="No" | ||||
|         data-field="no" | ||||
|         cell-template="formatNumber" | ||||
|       /> | ||||
|       <DxColumn | ||||
|         :width="170" | ||||
|         data-field="media" | ||||
|         caption="Nama Media" | ||||
|         alignment="center" | ||||
|         cell-template="formatText" | ||||
|         css-class="custom-table-column" | ||||
|         header-cell-template="title-header" | ||||
|       /> | ||||
|       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> | ||||
|         <DxColumn v-for="i in 31" :width="100" alignment="center" :data-field="`tgl${i}`" data-type="number" | ||||
|           :caption="i" css-class="custom-table-column" cell-template="formatNumber" /> | ||||
|         <DxColumn | ||||
|           v-for="i in 31" | ||||
|           :width="100" | ||||
|           alignment="center" | ||||
|           :data-field="`tgl${i}`" | ||||
|           data-type="number" | ||||
|           :caption="i" | ||||
|           css-class="custom-table-column" | ||||
|           cell-template="formatNumber" | ||||
|         /> | ||||
|       </DxColumn> | ||||
|       <DxColumn :width="170" alignment="center" data-field="total" caption="Total" css-class="custom-table-column" | ||||
|         cell-template="formatNumber" /> | ||||
|       <DxColumn | ||||
|         :width="170" | ||||
|         alignment="center" | ||||
|         data-field="total" | ||||
|         caption="Total" | ||||
|         css-class="custom-table-column" | ||||
|         cell-template="formatNumber" | ||||
|       /> | ||||
|  | ||||
|       <template #formatText="{ data }"> | ||||
|         <p class="text-left cursor-pointer" @click="setDate(data.column.caption)"> | ||||
| @@ -40,12 +89,12 @@ | ||||
|       <template #formatNumber="{ data }"> | ||||
|         <p class="text-right cursor-pointer" @click="setDate(data.column.caption)"> | ||||
|           {{ | ||||
|     isNumber(data.text) | ||||
|       ? data.column.caption == '%' | ||||
|         ? formatPercentage(data.text) | ||||
|         : formatNumber(data.text) | ||||
|       : data.text | ||||
|   }} | ||||
|             isNumber(data.text) | ||||
|               ? data.column.caption == '%' | ||||
|                 ? formatPercentage(data.text) | ||||
|                 : formatNumber(data.text) | ||||
|               : data.text | ||||
|           }} | ||||
|         </p> | ||||
|       </template> | ||||
|  | ||||
| @@ -56,66 +105,208 @@ | ||||
|       </template> | ||||
|  | ||||
|       <DxSummary> | ||||
|         <DxTotalItem display-format="Total" show-in-column="media" css-class="text-white !text-l eft" /> | ||||
|         <DxTotalItem v-for="i in 31" summary-type="sum" display-format="{0}" :column="`tgl${i}`" | ||||
|           css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" /> | ||||
|         <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right" | ||||
|           :customize-text="(e: any) => formatNumber(e.value)" /> | ||||
|         <DxTotalItem | ||||
|           display-format="Total" | ||||
|           show-in-column="media" | ||||
|           css-class="text-white !text-l eft" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           v-for="i in 31" | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           :column="`tgl${i}`" | ||||
|           css-class="text-white !text-right" | ||||
|           :customize-text="(e: any) => formatNumber(e.value)" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           column="total" | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           css-class="text-white !text-right" | ||||
|           :customize-text="(e: any) => formatNumber(e.value)" | ||||
|         /> | ||||
|       </DxSummary> | ||||
|     </DxDataGrid> | ||||
|   </div> | ||||
|  | ||||
|   <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Berdasarkan Media" @on-close="closeDialog" | ||||
|     :full-width="true"> | ||||
|   <DetailDialog | ||||
|     :open="dialogDetail" | ||||
|     title="Detail Rekapitulasi Gangguan Berdasarkan Media" | ||||
|     @on-close="closeDialog" | ||||
|     :full-width="true" | ||||
|   > | ||||
|     <div class="w-full mb-4 lg:w-[70%] lg:float-left"> | ||||
|       <div class="p-4 bg-white rounded-xl lg:mr-4"> | ||||
|         <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub" | ||||
|           :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" | ||||
|           :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100" | ||||
|           @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget"> | ||||
|         <DxDataGrid | ||||
|           :allow-column-reordering="true" | ||||
|           class="max-h-[calc(100vh-140px)]" | ||||
|           :data-source="dataSub" | ||||
|           :show-column-lines="true" | ||||
|           :show-row-lines="false" | ||||
|           :show-borders="true" | ||||
|           :row-alternation-enabled="true" | ||||
|           :hover-state-enabled="true" | ||||
|           @selection-changed="onDataSubSelectionChanged" | ||||
|           :column-width="100" | ||||
|           @exporting="onExportingDetail" | ||||
|           :allow-column-resizing="true" | ||||
|           column-resizing-mode="widget" | ||||
|         > | ||||
|           <DxSelection mode="single" /> | ||||
|           <DxPaging :page-size="20" :enabled="true" /> | ||||
|           <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full" | ||||
|             :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> | ||||
|           <DxPager | ||||
|             :visible="true" | ||||
|             :allowed-page-sizes="[20, 50, 100]" | ||||
|             display-mode="full" | ||||
|             :show-page-size-selector="true" | ||||
|             :show-info="true" | ||||
|             :show-navigation-buttons="true" | ||||
|           /> | ||||
|           <!--  --> | ||||
|           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> | ||||
|           <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> | ||||
|           <DxExport | ||||
|             :enabled="true" | ||||
|             :formats="['pdf', 'xlsx', 'document']" | ||||
|             :allow-export-selected-data="false" | ||||
|           /> | ||||
|  | ||||
|           <DxColumn css-class="custom-table-column" :width="50" alignment="center" | ||||
|             :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" | ||||
|             caption="No" cell-template="formatNumber" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time" | ||||
|             css-class="custom-table-column" cell-template="formatTime" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time" | ||||
|             css-class="custom-table-column" cell-template="formatTime" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" | ||||
|             css-class="custom-table-column" cell-template="formatText" /> | ||||
|           <DxColumn | ||||
|             css-class="custom-table-column" | ||||
|             :width="50" | ||||
|             alignment="center" | ||||
|             :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" | ||||
|             data-type="number" | ||||
|             caption="No" | ||||
|             cell-template="formatNumber" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="no_laporan" | ||||
|             caption="No Laporan" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="waktu_lapor" | ||||
|             caption="Tgl Lapor" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="waktu_response" | ||||
|             caption="Tgl Datang" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="waktu_recovery" | ||||
|             caption="Tgl Nyala" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="durasi_response_time" | ||||
|             caption="Durasi Response Time" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatTime" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="durasi_recovery_time" | ||||
|             caption="Durasi Recovery Time" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatTime" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="status_akhir" | ||||
|             caption="Status" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="referensi_marking" | ||||
|             caption="Referensi Marking" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="idpel_nometer" | ||||
|             caption="IDPEL/NO METER" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="nama_pelapor" | ||||
|             caption="Nama Pelapor" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="alamat_pelapor" | ||||
|             caption="Alamat Pelapor" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="no_telp_pelapor" | ||||
|             caption="No Telp Pelapor" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="200" | ||||
|             alignment="center" | ||||
|             data-field="keterangan_pelapor" | ||||
|             caption="Keterangan Pelapor" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="nama_posko" | ||||
|             caption="Posko" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="tindakan" | ||||
|             caption="Tidakan" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="penyebab" | ||||
|             caption="Penyebab" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="formatText" | ||||
|           /> | ||||
|  | ||||
|           <template #formatText="{ data }"> | ||||
|             <p class="text-left cursor-pointer"> | ||||
| @@ -151,28 +342,46 @@ | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
|           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3> | ||||
|           <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" /> | ||||
|           <InputText | ||||
|             :readonly="true" | ||||
|             :value="dataSubSelected?.waktu_response" | ||||
|             class-name="flex-1" | ||||
|           /> | ||||
|         </div> | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
|           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3> | ||||
|           <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" /> | ||||
|           <InputText | ||||
|             :readonly="true" | ||||
|             :value="dataSubSelected?.waktu_recovery" | ||||
|             class-name="flex-1" | ||||
|           /> | ||||
|         </div> | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
|           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3> | ||||
|           <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time) | ||||
|       ? formatWaktu(dataSubSelected?.durasi_response_time) | ||||
|       : '-' | ||||
|     " class-name="flex-1" /> | ||||
|           <InputText | ||||
|             :readonly="true" | ||||
|             :value=" | ||||
|               parseInt(dataSubSelected?.durasi_response_time) | ||||
|                 ? formatWaktu(dataSubSelected?.durasi_response_time) | ||||
|                 : '-' | ||||
|             " | ||||
|             class-name="flex-1" | ||||
|           /> | ||||
|         </div> | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
|           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3> | ||||
|           <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time) | ||||
|       ? formatWaktu(dataSubSelected?.durasi_recovery_time) | ||||
|       : '-' | ||||
|     " class-name="flex-1" /> | ||||
|           <InputText | ||||
|             :readonly="true" | ||||
|             :value=" | ||||
|               parseInt(dataSubSelected?.durasi_recovery_time) | ||||
|                 ? formatWaktu(dataSubSelected?.durasi_recovery_time) | ||||
|                 : '-' | ||||
|             " | ||||
|             class-name="flex-1" | ||||
|           /> | ||||
|         </div> | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
| @@ -182,7 +391,11 @@ | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
|           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3> | ||||
|           <InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" /> | ||||
|           <InputText | ||||
|             :readonly="true" | ||||
|             :value="dataSubSelected?.referensi_marking" | ||||
|             class-name="flex-1" | ||||
|           /> | ||||
|         </div> | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
| @@ -197,17 +410,29 @@ | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
|           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3> | ||||
|           <InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" /> | ||||
|           <InputText | ||||
|             :readonly="true" | ||||
|             :value="dataSubSelected?.alamat_pelapor" | ||||
|             class-name="flex-1" | ||||
|           /> | ||||
|         </div> | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
|           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3> | ||||
|           <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" /> | ||||
|           <InputText | ||||
|             :readonly="true" | ||||
|             :value="dataSubSelected?.no_telp_pelapor" | ||||
|             class-name="flex-1" | ||||
|           /> | ||||
|         </div> | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
|           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3> | ||||
|           <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" /> | ||||
|           <InputText | ||||
|             :readonly="true" | ||||
|             :value="dataSubSelected?.keterangan_pelapor" | ||||
|             class-name="flex-1" | ||||
|           /> | ||||
|         </div> | ||||
|  | ||||
|         <div class="flex flex-row items-center justify-between w-full"> | ||||
| @@ -240,7 +465,6 @@ import { | ||||
|   DxColumn, | ||||
|   DxColumnFixing, | ||||
|   DxExport, | ||||
|   DxLoadPanel, | ||||
|   DxPager, | ||||
|   DxPaging, | ||||
|   DxScrolling, | ||||
| @@ -293,6 +517,7 @@ const setDate = (value: any) => { | ||||
|     const dateValue = filters.value.periode.split(' s/d ') | ||||
|     const dateYear = dateValue[0].split('-').reverse().join('-').slice(0, -2) + tanggal | ||||
|     console.log('date', dateYear) | ||||
|     console.log('filters', filters.value) | ||||
|     date.value = dateYear | ||||
|   } else { | ||||
|     date.value = '' | ||||
| @@ -301,12 +526,12 @@ const setDate = (value: any) => { | ||||
|  | ||||
| const getDetail = async () => { | ||||
|   const ref = dataSelected.value | ||||
|  | ||||
|   const { posko, uid, up3 } = filters.value | ||||
|   const query = { | ||||
|     tanggal: date.value, | ||||
|     posko: ref?.id_posko ? ref?.id_posko : 0, | ||||
|     idUid: ref?.id_uid ? ref?.id_uid : 0, | ||||
|     idUp3: ref?.id_up3 ? ref?.id_up3 : 0, | ||||
|     posko: posko ? posko.id : 0, | ||||
|     idUid: uid ? uid.id : 0, | ||||
|     idUp3: up3 ? up3.id : 0, | ||||
|     namaRegional: ref?.nama_regional ? ref?.nama_regional : '', | ||||
|     media: ref?.media ? ref?.media : '' | ||||
|   } | ||||
|   | ||||
| @@ -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() | ||||
|   } | ||||
| } | ||||
|   | ||||
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
		Reference in New Issue
	
	Block a user