Refactor CSS styles and input components

This commit is contained in:
Dede Fuji Abdul
2024-03-08 13:52:14 +07:00
parent 163c0b7d25
commit b66bc38b1c
13 changed files with 378708 additions and 140 deletions

View File

@@ -18,41 +18,48 @@
<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"
<DxColumn css-class="custom-table-column !align-top" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Contact Center"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UI Dist."
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP" css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP"
css-class="custom-table-column !align-top" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="APKT Status"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Created By"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Penyelesaian"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="jumlah_lapor" caption="Lapor Ulang"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_issuetype" caption="Issue Type"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_subissuetype" caption="Sub Issue Type"
css-class="custom-table-column" />
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<template #cellLeft="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
</DxDataGrid>
</div>
</template>
@@ -60,7 +67,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@@ -79,6 +86,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
const position = { of: '#data' }
const showIndicator = ref(true)
@@ -157,4 +165,8 @@ const filterData = (params: any) => {
console.log(error)
})
}
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
})
</script>