Refactor filterData function parameters
This commit is contained in:
		| @@ -1,24 +1,33 @@ | ||||
| <template> | ||||
|     <Filters @run-search="() => filterData(filters)" class="mb-4"> | ||||
|         <Type1 @update:filters="(value) => { | ||||
|             filters = value | ||||
|         } | ||||
|             " /> | ||||
|     </Filters> | ||||
|     <div id="data"> | ||||
|         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" | ||||
|             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" | ||||
|             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> | ||||
|         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" | ||||
|             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" | ||||
|             @selection-changed="onSelectionChanged" @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" /> | ||||
|             <DxLoadPanel :enabled="true" /> | ||||
|             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" | ||||
|                 v-model:visible.sync="loading" :enabled="true" /> | ||||
|  | ||||
|             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> | ||||
|             <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" | ||||
|             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" | ||||
|              data-type="number" | ||||
|                 caption="No" /> | ||||
|             <DxColumn css-class="custom-table-column" :width="50" alignment="center" | ||||
|                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> | ||||
|             <DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" /> | ||||
|             <DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" /> | ||||
|             <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" /> | ||||
|             <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT" css-class="custom-table-column" /> | ||||
|             <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" | ||||
|                 css-class="custom-table-column" /> | ||||
|             <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT" | ||||
|                 css-class="custom-table-column" /> | ||||
|  | ||||
|         </DxDataGrid> | ||||
|     </div> | ||||
| @@ -100,22 +109,32 @@ query rekapitulasiGangguanAlihPosko | ||||
|         posko_out | ||||
|         } | ||||
| }`; | ||||
| const loadingVisible = ref<boolean>(true) | ||||
| onMounted(() => { | ||||
|     const filters = useFiltersStore() | ||||
|     const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, { | ||||
|         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|         dateTo: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|         posko: "", | ||||
|         idUid: 0, | ||||
|         idUp3: 0, | ||||
|  | ||||
| const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, { | ||||
|     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|     dateTo: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|     posko: "", | ||||
|     idUid: 0, | ||||
|     idUp3: 0, | ||||
| }) | ||||
|  | ||||
| const filterData = (params: any) => { | ||||
|     const dateValue = params.periode.split(' s/d ') | ||||
|     const posko = params.posko ? params.posko.id : '' | ||||
|     const uid = params.uid ? params.uid.id : 0 | ||||
|     const up3 = params.up3 ? params.up3.id : 0 | ||||
|     refetch({ | ||||
|         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: posko, | ||||
|         idUid: uid, | ||||
|         idUp3: up3, | ||||
|     }) | ||||
|  | ||||
|  | ||||
|     onResult(queryResult => { | ||||
|         if (queryResult.data != undefined) { | ||||
|             data.value = queryResult.data.rekapitulasiGangguanAlihPosko | ||||
|                 ; | ||||
|             loadingVisible.value = false | ||||
|             data.value = queryResult.data.rekapitulasiGangguanAlihPosko; | ||||
|         } | ||||
|         console.log(queryResult.data) | ||||
|         console.log(queryResult.loading) | ||||
| @@ -124,9 +143,7 @@ onMounted(() => { | ||||
|     onError((error) => { | ||||
|         console.log(error) | ||||
|     }) | ||||
|     filters.setConfig({ | ||||
|         type: 'type-1', | ||||
|         reportButton: true | ||||
|     }) | ||||
| }) | ||||
|  | ||||
| } | ||||
| const filters = ref(); | ||||
| </script> | ||||
		Reference in New Issue
	
	Block a user