Update dependencies and fix code issues

2024-02-20 18:44:11 +07:00
parent 2758481259
commit a0ccf13466
65 changed files with 3454 additions and 2271 deletions
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@ -11,30 +11,35 @@
            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
            <DxSelection mode="single" />
            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <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" data-field="" data-type="number"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan"
                caption="Nomor Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
                caption="Nama Pelanggan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Isi Laporan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
+                caption="Isi Laporan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
                caption="Penyebab Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Padam" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
+                caption="Tgl Padam" />
            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Regu" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
            <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Sumber" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
+                    caption="Sumber" />
                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Satuan" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Vol" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
+                    caption="Satuan" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
+                    caption="Vol" />
            </DxColumn>

        </DxDataGrid>
@ -42,19 +47,81 @@
 </template>

 <script setup lang="ts">
+
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import Filters from '@/components/Form/Filters.vue';
 import { Type14 } from '@/components/Form/FiltersType';
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const loading = ref(false)
-const filters = ref()
-const filterData = (filters: any) => {
-    console.log(filters)
+const data = ref<any[]>([])
+
+const daftarGangguanDanMaterialDipakai = gql`
+  query DaftardaftarGangguanDanMaterialDipakai(
+    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+  ) {
+    daftarGangguanDanMaterialDipakai(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        distribusi: $idUid
+        area: $idUp3
+        posko: $posko
+    ) {
+        isi_laporan
+        nama_material
+        nama_pelanggan
+        nomor_gangguan
+        penyebab_gangguan
+        regu
+        satuan
+        sumber
+        volume
+        waktu_padam
+
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    idUid: 0,
+    idUp3: 0,
+    posko: ''
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const { posko, idUid, idUp3 } = params
+    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),
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        posko: posko ? posko.id : "",
+
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
+const filters = ref()
 </script>
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@ -1,29 +1,35 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type14 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
            <DxSelection mode="single" />
            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <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" data-field="" data-type="number"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material"
                caption="Kode Material" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
                caption="Nama Material" />
-            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="" caption="Satuan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
                caption="Sumber Material" />
            <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
-                <DxColumn v-for="i in 31" css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                    :caption="i" />
+                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+                    :caption="i" css-class="custom-table-column" />
            </DxColumn>

        </DxDataGrid>
@ -31,21 +37,106 @@
 </template>

 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { Type14 } from '@/components/Form/FiltersType';
+import Filters from '@/components/Form/Filters.vue';
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const loading = ref(false)
+const data = ref<any[]>([])

-onMounted(() => {
-    const filters = useFiltersStore()
+const rekapitulasiPemakaianMaterial = gql`
+  query DaftarrekapitulasiPemakaianMaterial(
+    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+  ) {
+    rekapitulasiPemakaianMaterial(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        distribusi: $idUid
+        area: $idUp3
+        posko: $posko
+    ) {
+        kode_material
+nama_material
+satuan
+sumber_material
+tgl1
+tgl10
+tgl11
+tgl12
+tgl13
+tgl14
+tgl15
+tgl16
+tgl17
+tgl18
+tgl19
+tgl2
+tgl20
+tgl21
+tgl22
+tgl23
+tgl24
+tgl25
+tgl26
+tgl27
+tgl28
+tgl29
+tgl3
+tgl30
+tgl31
+tgl4
+tgl5
+tgl6
+tgl7
+tgl8
+tgl9

-    filters.setConfig({
-        type: 'type-14'
-    })
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    idUid: 0,
+    idUp3: 0,
+    posko: ''
 })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+
+    const { posko, idUid, idUp3 } = params
+
+    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),
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        posko: posko ? posko.id : "",
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const filters = ref()
 </script>