Refactor code to update version numbers and fix bugs in Gangguan and Monalisa components
This commit is contained in:
		| @@ -12,6 +12,7 @@ | ||||
|   <div id="data"> | ||||
|     <DxDataGrid | ||||
|       ref="dataGridRef" | ||||
|       @cell-click="onCellClicked" | ||||
|       :allow-column-reordering="true" | ||||
|       class="max-h-[calc(100vh-140px)] mb-10" | ||||
|       :data-source="data" | ||||
| @@ -27,7 +28,7 @@ | ||||
|       column-resizing-mode="widget" | ||||
|       :word-wrap-enabled="true" | ||||
|     > | ||||
|       <DxGrouping expand-mode="rowClick" :auto-expand-all="false" /> | ||||
|       <DxGrouping expand-mode="" :auto-expand-all="false" /> | ||||
|       <DxSelection mode="single" /> | ||||
|       <DxPaging :enabled="false" /> | ||||
|       <DxScrolling column-rendering-mode="virtual" mode="virtual" /> | ||||
| @@ -1013,6 +1014,7 @@ import { | ||||
|   exportToDOCX, | ||||
|   exportDetailToDOCX | ||||
| } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan' | ||||
| import { getDataRowGroup } from '@/utils/helper' | ||||
|  | ||||
| const client = apolloClient() | ||||
| provideApolloClient(client) | ||||
| @@ -1035,9 +1037,13 @@ const dialogDetail = ref(false) | ||||
| const closedialogDetail = () => (dialogDetail.value = false) | ||||
| const loadingData = ref(false) | ||||
| const loadingSubData = ref(false) | ||||
| const isDialogEnabled = ref(false) | ||||
| const dataType = ref('') | ||||
| const dataYear = ref(new Date().getFullYear()) | ||||
| const dataMonth = ref(new Date().getMonth()) | ||||
| const groupIndex = ref(0) | ||||
| const groupDialog = ref(false) | ||||
| const groupData = ref<any>(null) | ||||
| const reportMeta = ref({ | ||||
|   regional: { id: 0, name: 'Semua Regional' }, | ||||
|   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, | ||||
| @@ -1068,6 +1074,38 @@ const grouping = ref<any[]>([ | ||||
|   } | ||||
| ]) | ||||
|  | ||||
| const onCellClicked = (e: any) => { | ||||
|   if (e.rowType == 'group') { | ||||
|     groupDialog.value = true | ||||
|     groupIndex.value = e.row.groupIndex | ||||
|  | ||||
|     setDialogStatus(e.column.caption) | ||||
|     groupData.value = getDataRowGroup(e.data) | ||||
|     showDetail() | ||||
|   } else { | ||||
|     groupDialog.value = false | ||||
|   } | ||||
| } | ||||
|  | ||||
| const setDialogStatus = (column: string) => { | ||||
|   if (column == `${getMonthName(lastMonth.value)} ${lastYearMoM.value}`) { | ||||
|     isDialogEnabled.value = true | ||||
|     setRequirements('mom', lastMonth.value, lastYearMoM.value) | ||||
|   } else if (column == `${getMonthName(currentMonth.value)} ${currentYear.value}`) { | ||||
|     isDialogEnabled.value = true | ||||
|     setRequirements('mom', currentMonth.value, currentYear.value) | ||||
|   } else if (column == `s.d ${getMonthName(currentMonth.value)} ${lastYear.value}`) { | ||||
|     isDialogEnabled.value = true | ||||
|     setRequirements('yoy', currentMonth.value, lastYear.value) | ||||
|   } else if (column == `s.d ${getMonthName(currentMonth.value)} ${currentYear.value}`) { | ||||
|     isDialogEnabled.value = true | ||||
|     setRequirements('yoy', currentMonth.value, currentYear.value) | ||||
|   } else { | ||||
|     isDialogEnabled.value = false | ||||
|     setRequirements('', 0, 0) | ||||
|   } | ||||
| } | ||||
|  | ||||
| let mom_bulan_kemarin = 0 | ||||
| let count_mom_bulan_kemarin = 0 | ||||
| let cal_mom_bulan_kemarin = 0 | ||||
| @@ -1217,6 +1255,12 @@ const setRequirements = (type: string, month: number, year: number) => { | ||||
|   dataType.value = type | ||||
|   dataYear.value = year | ||||
|   dataMonth.value = month | ||||
|  | ||||
|   if (dataType.value == 'yoy' || dataType.value == 'mom') { | ||||
|     isDialogEnabled.value = true | ||||
|   } else { | ||||
|     isDialogEnabled.value = false | ||||
|   } | ||||
| } | ||||
|  | ||||
| const onExporting = (e: any) => { | ||||
| @@ -1336,12 +1380,44 @@ const filterData = async (params: any) => { | ||||
| const getDetail = async () => { | ||||
|   const selected = dataSelected.value | ||||
|  | ||||
|   const query = { | ||||
|   var query = { | ||||
|     bulan: dataMonth.value, | ||||
|     tahun: dataYear.value, | ||||
|     idUlp: selected?.id_ulp ? selected?.id_ulp : 0, | ||||
|     idUid: selected?.id_uid ? selected?.id_uid : 0, | ||||
|     idUp3: selected?.id_up3 ? selected?.id_up3 : 0 | ||||
|     idUlp: 0, | ||||
|     idUid: 0, | ||||
|     idUp3: 0, | ||||
|     namaRegional: '' | ||||
|   } | ||||
|  | ||||
|   if (groupDialog.value) { | ||||
|     if (grouping.value[groupIndex.value].data == 'nama_regional') { | ||||
|       query = { | ||||
|         ...query, | ||||
|         namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' | ||||
|       } | ||||
|     } else if (grouping.value[groupIndex.value].data == 'nama_uid') { | ||||
|       query = { | ||||
|         ...query, | ||||
|         idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0, | ||||
|         namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' | ||||
|       } | ||||
|     } else if (grouping.value[groupIndex.value].data == 'nama_up3') { | ||||
|       query = { | ||||
|         ...query, | ||||
|         idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0, | ||||
|         idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0, | ||||
|         namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' | ||||
|       } | ||||
|     } | ||||
|   } else { | ||||
|     query = { | ||||
|       bulan: dataMonth.value, | ||||
|       tahun: dataYear.value, | ||||
|       idUlp: selected?.id_ulp ? selected?.id_ulp : 0, | ||||
|       idUid: selected?.id_uid ? selected?.id_uid : 0, | ||||
|       idUp3: selected?.id_up3 ? selected?.id_up3 : 0, | ||||
|       namaRegional: selected?.nama_regional ? selected?.nama_regional : '' | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   loadingSubData.value = true | ||||
| @@ -1380,7 +1456,9 @@ const showDetail = () => { | ||||
|   clearSelection() | ||||
|   dataSubSelected.value = null | ||||
|   if (dataType.value == 'yoy' || dataType.value == 'mom') { | ||||
|     getDetail() | ||||
|     if (isDialogEnabled.value) { | ||||
|       getDetail() | ||||
|     } | ||||
|   } | ||||
| } | ||||
| const onDataSelectionChanged = ({ selectedRowsData }: any) => { | ||||
|   | ||||
| @@ -11,6 +11,7 @@ | ||||
|   <div id="data"> | ||||
|     <DxDataGrid | ||||
|       ref="dataGridRef" | ||||
|       @cell-click="onCellClicked" | ||||
|       :allow-column-reordering="true" | ||||
|       class="max-h-[calc(100vh-140px)] mb-10" | ||||
|       :data-source="data" | ||||
| @@ -26,7 +27,7 @@ | ||||
|       column-resizing-mode="widget" | ||||
|       :word-wrap-enabled="true" | ||||
|     > | ||||
|       <DxGrouping :auto-expand-all="false" expand-mode="rowClick" /> | ||||
|       <DxGrouping :auto-expand-all="false" expand-mode="" /> | ||||
|       <DxSelection mode="single" /> | ||||
|       <DxPaging :enabled="false" /> | ||||
|       <DxScrolling column-rendering-mode="virtual" mode="virtual" /> | ||||
| @@ -65,7 +66,7 @@ | ||||
|           data-type="number" | ||||
|           caption="Gangguan" | ||||
|           css-class="custom-table-column" | ||||
|           cell-template="formatNumber" | ||||
|           cell-template="formatNumberGangguan" | ||||
|         /> | ||||
|         <DxColumn | ||||
|           :width="150" | ||||
| @@ -74,7 +75,7 @@ | ||||
|           data-type="number" | ||||
|           caption="Informasi" | ||||
|           css-class="custom-table-column" | ||||
|           cell-template="formatNumber" | ||||
|           cell-template="formatNumberInformasi" | ||||
|         /> | ||||
|         <DxColumn | ||||
|           :width="150" | ||||
| @@ -87,7 +88,55 @@ | ||||
|         /> | ||||
|       </DxColumn> | ||||
|       <template #formatNumber="{ data }"> | ||||
|         <p class="text-right cursor-pointer"> | ||||
|         <p | ||||
|           class="text-right" | ||||
|           @click=" | ||||
|             setParameterRequest({ | ||||
|               type: '', | ||||
|               value: data.text | ||||
|             }) | ||||
|           " | ||||
|         > | ||||
|           {{ | ||||
|             isNumber(data.text) | ||||
|               ? data.column.caption == '%' | ||||
|                 ? formatPercentage(data.text) | ||||
|                 : formatNumber(data.text) | ||||
|               : data.text | ||||
|           }} | ||||
|         </p> | ||||
|       </template> | ||||
|  | ||||
|       <template #formatNumberGangguan="{ data }"> | ||||
|         <p | ||||
|           class="text-right cursor-pointer" | ||||
|           @click=" | ||||
|             setParameterRequest({ | ||||
|               type: 'Gangguan', | ||||
|               value: data.text | ||||
|             }) | ||||
|           " | ||||
|         > | ||||
|           {{ | ||||
|             isNumber(data.text) | ||||
|               ? data.column.caption == '%' | ||||
|                 ? formatPercentage(data.text) | ||||
|                 : formatNumber(data.text) | ||||
|               : data.text | ||||
|           }} | ||||
|         </p> | ||||
|       </template> | ||||
|  | ||||
|       <template #formatNumberInformasi="{ data }"> | ||||
|         <p | ||||
|           class="text-right cursor-pointer" | ||||
|           @click=" | ||||
|             setParameterRequest({ | ||||
|               type: 'Informasi', | ||||
|               value: data.text | ||||
|             }) | ||||
|           " | ||||
|         > | ||||
|           {{ | ||||
|             isNumber(data.text) | ||||
|               ? data.column.caption == '%' | ||||
| @@ -99,7 +148,15 @@ | ||||
|       </template> | ||||
|  | ||||
|       <template #formatText="{ data }"> | ||||
|         <p class="!text-left cursor-pointer"> | ||||
|         <p | ||||
|           class="!text-left" | ||||
|           @click=" | ||||
|             setParameterRequest({ | ||||
|               type: '', | ||||
|               value: data.text | ||||
|             }) | ||||
|           " | ||||
|         > | ||||
|           {{ data.text }} | ||||
|         </p> | ||||
|       </template> | ||||
| @@ -521,6 +578,7 @@ import { | ||||
|   exportToDOCX, | ||||
|   exportDetailToDOCX | ||||
| } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai' | ||||
| import { getDataRowGroup } from '@/utils/helper' | ||||
|  | ||||
| const client = apolloClient() | ||||
| provideApolloClient(client) | ||||
| @@ -539,6 +597,10 @@ const dialogDetail = ref(false) | ||||
| const closedialogDetail = () => (dialogDetail.value = false) | ||||
| const loadingData = ref(false) | ||||
| const loadingSubData = ref(false) | ||||
| const isDialogEnabled = ref(false) | ||||
| const groupIndex = ref(0) | ||||
| const groupDialog = ref(false) | ||||
| const groupData = ref<any>(null) | ||||
| const reportMeta = ref({ | ||||
|   regional: { id: 0, name: 'Semua Regional' }, | ||||
|   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, | ||||
| @@ -548,6 +610,10 @@ const reportMeta = ref({ | ||||
|   tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() }, | ||||
|   periode: '' | ||||
| }) | ||||
| const parameterRequest = ref<any>({ | ||||
|   type: '', | ||||
|   value: 0 | ||||
| }) | ||||
|  | ||||
| const grouping = ref<any[]>([ | ||||
|   { | ||||
| @@ -564,6 +630,46 @@ const grouping = ref<any[]>([ | ||||
|   } | ||||
| ]) | ||||
|  | ||||
| const setParameterRequest = (data: any) => { | ||||
|   parameterRequest.value = data | ||||
|   const parameter = parameterRequest.value | ||||
|   if (parameter.type == 'Gangguan' || parameter.type == 'Informasi') { | ||||
|     if (parameter.value != 0) { | ||||
|       isDialogEnabled.value = true | ||||
|     } else { | ||||
|       isDialogEnabled.value = false | ||||
|     } | ||||
|   } else { | ||||
|     isDialogEnabled.value = false | ||||
|   } | ||||
| } | ||||
|  | ||||
| const onCellClicked = (e: any) => { | ||||
|   if (e.rowType == 'group') { | ||||
|     groupDialog.value = true | ||||
|     groupIndex.value = e.row.groupIndex | ||||
|  | ||||
|     if (e.column.caption == 'Gangguan' || e.column.caption == 'Informasi') { | ||||
|       console.log(e.data) | ||||
|       console.log('columnIndex', e) | ||||
|       console.log('columnValue', e.data.aggregates[e.column.columnIndex]) | ||||
|       if (e.data.aggregates[e.column.columnIndex] != 0) { | ||||
|         setParameterRequest({ | ||||
|           type: | ||||
|             e.column.caption == 'Gangguan' || e.column.caption == 'Informasi' | ||||
|               ? e.column.caption | ||||
|               : '', | ||||
|           value: e.data.aggregates[e.column.columnIndex] | ||||
|         }) | ||||
|         groupData.value = getDataRowGroup(e.data) | ||||
|         showDetail() | ||||
|       } | ||||
|     } | ||||
|   } else { | ||||
|     groupDialog.value = false | ||||
|   } | ||||
| } | ||||
|  | ||||
| const closeDialog = () => { | ||||
|   dialogDetail.value = false | ||||
| } | ||||
| @@ -681,13 +787,44 @@ const getDetail = async () => { | ||||
|  | ||||
|   const { bulan, tahun } = filters.value | ||||
|  | ||||
|   const query = { | ||||
|     idUlp: selected?.id_ulp ? selected?.id_ulp : 0, | ||||
|     idUid: selected?.id_uid ? selected?.id_uid : 0, | ||||
|     idUp3: selected?.id_up3 ? selected?.id_up3 : 0, | ||||
|   var query = { | ||||
|     bulan: bulan.id, | ||||
|     tahun: tahun.id, | ||||
|     namaRegional: selected?.nama_regional ? selected?.nama_regional : '' | ||||
|     idUlp: 0, | ||||
|     idUid: 0, | ||||
|     idUp3: 0, | ||||
|     namaRegional: '', | ||||
|     type: parameterRequest.value.type | ||||
|   } | ||||
|  | ||||
|   if (groupDialog.value) { | ||||
|     if (grouping.value[groupIndex.value].data == 'nama_regional') { | ||||
|       query = { | ||||
|         ...query, | ||||
|         namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' | ||||
|       } | ||||
|     } else if (grouping.value[groupIndex.value].data == 'nama_uid') { | ||||
|       query = { | ||||
|         ...query, | ||||
|         idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0, | ||||
|         namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' | ||||
|       } | ||||
|     } else if (grouping.value[groupIndex.value].data == 'nama_up3') { | ||||
|       query = { | ||||
|         ...query, | ||||
|         idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0, | ||||
|         idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0, | ||||
|         namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' | ||||
|       } | ||||
|     } | ||||
|   } else { | ||||
|     query = { | ||||
|       ...query, | ||||
|       idUlp: selected?.id_ulp ? selected?.id_ulp : 0, | ||||
|       idUid: selected?.id_uid ? selected?.id_uid : 0, | ||||
|       idUp3: selected?.id_up3 ? selected?.id_up3 : 0, | ||||
|       namaRegional: selected?.nama_regional ? selected?.nama_regional : '' | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   loadingSubData.value = true | ||||
| @@ -716,7 +853,9 @@ const clearSelection = () => { | ||||
| const showDetail = () => { | ||||
|   clearSelection() | ||||
|   dataSubSelected.value = null | ||||
|   getDetail() | ||||
|   if (isDialogEnabled.value) { | ||||
|     getDetail() | ||||
|   } | ||||
| } | ||||
|  | ||||
| const onDataSelectionChanged = ({ selectedRowsData }: any) => { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user