fix: load pane in daftar gangguan

This commit is contained in:
kur0nek-o
2024-04-01 14:23:12 +07:00
parent fd08049392
commit 10faa589a1
16 changed files with 84 additions and 37 deletions

View File

@ -30,7 +30,7 @@
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
<!-- <DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
@ -39,7 +39,7 @@
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
/> -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
@ -281,6 +281,8 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loading" />
</template>
<script setup lang="ts">
@ -303,6 +305,7 @@ import {
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_BM'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)

View File

@ -30,7 +30,7 @@
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
<!-- <DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
@ -39,7 +39,7 @@
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
/> -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
@ -276,6 +276,8 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loading" />
</template>
<script setup lang="ts">
@ -298,6 +300,7 @@ import {
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DMAPKT'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)

View File

@ -30,7 +30,7 @@
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
<!-- <DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
@ -38,7 +38,7 @@
:shading="shading"
v-model:visible.sync="loadingData"
:enabled="true"
/>
/> -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
@ -323,7 +323,7 @@
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
<!-- <DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
@ -331,7 +331,7 @@
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
/> -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
@ -421,13 +421,15 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type6 from '@/components/Form/FiltersType/Type6.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -440,12 +442,12 @@ import {
} from 'devextreme-vue/data-grid'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient()
provideApolloClient(client)
@ -488,7 +490,7 @@ const getDetail = async () => {
const query = {
noLaporan: selected?.no_laporan ? selected?.no_laporan : ''
}
loadingSubData.value = false
loadingSubData.value = true
await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKaliDetail, query)
.then((result) => {
if (result.data.data != undefined) {
@ -503,6 +505,7 @@ const getDetail = async () => {
console.error(err)
})
.finally(() => {
dialogDetail.value = true
loadingSubData.value = false
})
}
@ -515,7 +518,6 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
dialogDetail.value = true
if (detailType.value == 'table') {
getDetail()
}

View File

@ -46,7 +46,7 @@
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
<!-- <DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
@ -55,7 +55,7 @@
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
/> -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
@ -331,6 +331,8 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loading" />
</template>
<script setup lang="ts">
@ -357,6 +359,7 @@ import {
exportToXLSX,
exportToDOCX
} from '@/report/Gangguan/Daftar/DGangguan_RecoveryTime'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)

View File

@ -30,7 +30,7 @@
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
<!-- <DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
@ -39,7 +39,7 @@
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
/> -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
@ -308,6 +308,8 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loading" />
</template>
<script setup lang="ts">
@ -334,6 +336,7 @@ import {
exportToXLSX,
exportToDOCX
} from '@/report/Gangguan/Daftar/DGangguan_ResponseTime'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)

View File

@ -30,7 +30,7 @@
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
<!-- <DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
@ -39,7 +39,7 @@
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
/> -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
@ -280,6 +280,8 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loading" />
</template>
<script setup lang="ts">
@ -302,6 +304,7 @@ import {
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_STIDP'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)

View File

@ -1,12 +1,14 @@
<template>
<main
class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white lg:mr-3 sm:px-3 lg:px-6 rounded-t-2xl lg:rounded-t-3xl no-scroll-bar relative"
class="bg-white overflow-hidden flex flex-col justify-between flex-1 rounded-t-2xl lg:rounded-t-3xl relative"
>
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-lg font-semibold md:text-xl text-dark">{{ pageTitle }}</h1>
</div>
<div class="flex-1 mt-2 sm:mt-4 dx-viewport">
<slot></slot>
<div class="overflow-y-auto no-scroll-bar px-4 lg:mr-3 sm:px-3 lg:px-6 w-full">
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-lg font-semibold md:text-xl text-dark">{{ pageTitle }}</h1>
</div>
<div class="flex-1 mt-2 sm:mt-4 dx-viewport">
<slot></slot>
</div>
</div>
</main>
</template>