fix(filters): change code structure and data flow in filter type 1
This commit is contained in:
kur0nek-o
parent
62cbcc9c28
commit
cb8e11b1e9
6
package-lock.json
generated
6
package-lock.json
generated
@ -9257,9 +9257,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
|
||||
"integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
|
||||
"integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.18.10",
|
||||
"postcss": "^8.4.27",
|
||||
|
||||
@ -1502,6 +1502,10 @@ body {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
@ -1719,6 +1723,11 @@ body {
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
@ -1894,6 +1903,14 @@ body {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.p-0\.5 {
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
@ -2191,6 +2208,11 @@ body {
|
||||
color: rgb(96 165 250 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-blue-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(29 78 216 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(21 22 23 / var(--tw-text-opacity));
|
||||
@ -2433,6 +2455,10 @@ body {
|
||||
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.ring-blue-700\/10 {
|
||||
--tw-ring-color: rgb(29 78 216 / 0.1);
|
||||
}
|
||||
|
||||
.ring-gray-300 {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
|
||||
|
||||
@ -6,10 +6,6 @@ const props = defineProps({
|
||||
type: String as () => 'button' | 'submit' | 'reset',
|
||||
default: 'button'
|
||||
},
|
||||
onClick: {
|
||||
type: Function as unknown as () => (payload: MouseEvent) => void,
|
||||
default: () => {}
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
@ -47,12 +43,14 @@ const buttonStyle = computed(() => {
|
||||
return 'bg-none text-primary-500 border border-transparent hover:border-primary-500 rounded-lg disabled:border-primary-300 disabled:text-primary-300'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['on:click'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
:type="type"
|
||||
@click="onClick"
|
||||
@click="emit('on:click')"
|
||||
:disabled="isLoading ? true : disabled"
|
||||
:class="['px-3 py-2 text-sm font-semibold', buttonStyle, className]"
|
||||
>
|
||||
|
||||
@ -1,27 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { useDateStore } from '@/stores/date';
|
||||
import { PhCalendarBlank } from '@phosphor-icons/vue';
|
||||
// import { useDateStore } from '@/stores/date';
|
||||
import { PhCalendarBlank } from '@phosphor-icons/vue'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
|
||||
|
||||
const dateValue = ref('')
|
||||
const formatter = ref({
|
||||
date: 'DD-MM-YYYY',
|
||||
month: 'MMMM'
|
||||
})
|
||||
watch(dateValue, (newValue) => {
|
||||
useDateStore().setDateValue(newValue);
|
||||
|
||||
const emit = defineEmits(['update:dateValue'])
|
||||
|
||||
watch(dateValue, (newValue) => {
|
||||
emit('update:dateValue', newValue)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="false"
|
||||
:auto-apply="false" as-single use-range v-slot="{ value, placeholder }">
|
||||
<vue-tailwind-datepicker
|
||||
v-model="dateValue"
|
||||
:formatter="formatter"
|
||||
separator=" s/d "
|
||||
:shortcuts="false"
|
||||
:auto-apply="false"
|
||||
as-single
|
||||
use-range
|
||||
v-slot="{ value, placeholder }"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
<button type="button"
|
||||
class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
||||
>
|
||||
<span class="text-gray-900">
|
||||
{{ value || placeholder }}
|
||||
</span>
|
||||
@ -31,4 +45,4 @@ watch(dateValue, (newValue) => {
|
||||
</div>
|
||||
</vue-tailwind-datepicker>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,44 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
// components
|
||||
import Button from '@/components/Button.vue';
|
||||
import { useSearchStore } from '@/stores/filtersAction';
|
||||
// icons
|
||||
import {
|
||||
PhArrowsCounterClockwise,
|
||||
PhFileText,
|
||||
PhMagnifyingGlass
|
||||
} from '@phosphor-icons/vue';
|
||||
const cariButton = useSearchStore()
|
||||
defineProps({
|
||||
reportButton: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
// components
|
||||
import Button from '@/components/Button.vue'
|
||||
import { useSearchStore } from '@/stores/filtersAction'
|
||||
|
||||
// icons
|
||||
import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
|
||||
const cariButton = useSearchStore()
|
||||
defineProps({
|
||||
reportButton: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['runSearch'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="filters rounded-2xl">
|
||||
|
||||
<form class="filter-body bg-gray-50 mx-auto space-y-3 p-4 rounded-t-2xl">
|
||||
<slot></slot>
|
||||
</form>
|
||||
|
||||
|
||||
<div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
|
||||
<div class="filter-buttons flex gap-3 flex-wrap">
|
||||
<Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Ulangi" style-type="outline" class-name="bg-white">
|
||||
<Button
|
||||
@click="() => (cariButton.isTriggerChange = !cariButton.isTriggerChange)"
|
||||
label="Ulangi"
|
||||
style-type="outline"
|
||||
class-name="bg-white"
|
||||
>
|
||||
<PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />
|
||||
</Button>
|
||||
|
||||
<Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white">
|
||||
<Button
|
||||
v-if="reportButton"
|
||||
label="Lihat Laporan"
|
||||
style-type="outline"
|
||||
class-name="bg-white"
|
||||
>
|
||||
<PhFileText size="18" class="ml-1" weight="regular" />
|
||||
</Button>
|
||||
|
||||
<Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Cari Data">
|
||||
<PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
|
||||
<Button @on:click="() => emit('runSearch')" label="Cari Data">
|
||||
<PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,58 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
selectedPosko,
|
||||
fetchData,
|
||||
items,
|
||||
itemsUp3,
|
||||
itemsPosko
|
||||
} from './reference'
|
||||
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
|
||||
import { ref } from 'vue';
|
||||
fetchData();
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const poskoPlaceholder = 'Semua Posko';
|
||||
const uppp = ref({ id: 0, name: uppPlaceholder });
|
||||
const uid = ref({ id: 0, name:uidPlaceholder });
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder });
|
||||
// fetchData();
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const poskoPlaceholder = 'Semua Posko'
|
||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||
|
||||
const emit = defineEmits(['update:filters'])
|
||||
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: posko.value,
|
||||
periode: ''
|
||||
})
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
uppp.value = { id: 0, name: uppPlaceholder };
|
||||
};
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: uppPlaceholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value;
|
||||
selectedUp3Posko(value);
|
||||
posko.value = { id: 0, name: poskoPlaceholder };
|
||||
};
|
||||
uppp.value = value
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
posko.value = value;
|
||||
selectedPosko(value);
|
||||
};
|
||||
posko.value = value
|
||||
selectedPosko(value)
|
||||
data.value.posko = value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Induk Distribusi/Wilayah:</label
|
||||
>
|
||||
|
||||
<Select @update:selected="setUid($event)" :data="items"
|
||||
:placeholder="uidPlaceholder" />
|
||||
<Select
|
||||
:data="items"
|
||||
@update:selected="setUid($event)"
|
||||
:placeholder="uidPlaceholder"
|
||||
:selected="uid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp"
|
||||
:placeholder="uppPlaceholder" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="uppp"
|
||||
:placeholder="uppPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select @update:selected="setPosko($event)"
|
||||
:data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
|
||||
<Select
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
<DatePicker />
|
||||
<DatePicker
|
||||
@update:date-value="
|
||||
(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<!-- <script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import SelectMulti from '@/components/SelectMulti.vue'
|
||||
|
||||
@ -44,4 +44,6 @@ const departments = [
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
</template> -->
|
||||
|
||||
<template></template>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<!-- <script setup lang="ts">
|
||||
import InputNumber from '@/components/Form/InputNumber.vue'
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
@ -49,4 +49,6 @@ import { useTotalReport } from '@/stores/totalReport';
|
||||
<InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template> -->
|
||||
|
||||
<template></template>
|
||||
|
||||
@ -1,205 +1,339 @@
|
||||
<template>
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
|
||||
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
|
||||
:hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxSelection mode="single" />
|
||||
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
|
||||
<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" />
|
||||
<Filters @run-search="() => console.log(filters)" class="mb-4">
|
||||
<Type1
|
||||
@update:filters="
|
||||
(value) => {
|
||||
filters = value
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Filters>
|
||||
|
||||
<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="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="data" />
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:remote-operations="true"
|
||||
:data-source="data"
|
||||
key-expr="no_laporan"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20, 'all']"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
<DxSelection mode="single" />
|
||||
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
|
||||
<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="150" alignment="center" data-field="pembuat_laporan"
|
||||
caption="Pembuat Laporan" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
|
||||
caption="Tgl Lapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
|
||||
caption="Tgl Dialihkan" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
|
||||
caption="Tgl Response" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
|
||||
caption="Tgl Recovery" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
|
||||
caption="Durasi Response Time" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
|
||||
caption="Posko Awal" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
|
||||
caption="Posko Tujuan" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
||||
caption="Status" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
||||
caption="Sumber Lapor" cell-template="data" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
|
||||
cell-template="data" />
|
||||
<template #data="{ data }">
|
||||
<span class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</span>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
<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="150"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
cell-template="data"
|
||||
/>
|
||||
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="pembuat_laporan"
|
||||
caption="Pembuat Laporan"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tanggal_laporan"
|
||||
caption="Tgl Lapor"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tanggal_dialihkan"
|
||||
caption="Tgl Dialihkan"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tanggal_respon"
|
||||
caption="Tgl Response"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tanggal_recovery"
|
||||
caption="Tgl Recovery"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_respon_time"
|
||||
caption="Durasi Response Time"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="posko_asal"
|
||||
caption="Posko Awal"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="posko_tujuan"
|
||||
caption="Posko Tujuan"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="posko"
|
||||
caption="Posko"
|
||||
cell-template="data"
|
||||
/>
|
||||
<template #data="{ data }">
|
||||
<span class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</span>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog
|
||||
:open="showDetail"
|
||||
title="Daftar Gangguan Dialihkan ke Posko Lain"
|
||||
@on-close="closeDetail"
|
||||
>
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Pembuat Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Dialihkan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Respon:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Recovery:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Durasi Response Time:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Durasi Recovery Time:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Posko Awal:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Posko Tujuan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Status:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
IDPEL/NO METER:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Alamat Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Pembuat Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Keterangan Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Sumber Laporan:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Posko:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DetailDialog>
|
||||
</DetailDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// filters components
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
@ -208,55 +342,54 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { useDateStore } from '@/stores/date'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
import { useSearchStore } from '@/stores/filtersAction';
|
||||
import { usePostsStore } from '@/stores/posts';
|
||||
import { useUp3Store } from '@/stores/up3';
|
||||
import { useRegionStore } from '@/stores/region';
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
import { useSearchStore } from '@/stores/filtersAction'
|
||||
import { usePostsStore } from '@/stores/posts'
|
||||
import { useUp3Store } from '@/stores/up3'
|
||||
import { useRegionStore } from '@/stores/region'
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const dialog = useDialogStore()
|
||||
const data = ref<any[]>([])
|
||||
const dataDetail = ref<any>()
|
||||
const showDetail = ref(false)
|
||||
|
||||
const closeDetail = () => {
|
||||
showDetail.value = false
|
||||
showDetail.value = false
|
||||
}
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
|
||||
@ -285,59 +418,61 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
|
||||
waktu_response
|
||||
}
|
||||
}
|
||||
`;
|
||||
const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN, {
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: "",
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
})
|
||||
const reportButton = useSearchStore()
|
||||
const detected = computed(() => reportButton.isTriggerChange)
|
||||
watch(detected, () => {
|
||||
|
||||
const dateValue = useDateStore().getDateValue().split(' s/d ');
|
||||
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
|
||||
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
|
||||
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
|
||||
refetch({
|
||||
dateFrom: dateValue[0].split('-').reverse().join('-'),
|
||||
dateTo: dateValue[1].split('-').reverse().join('-'),
|
||||
posko: posko,
|
||||
idUid: uid,
|
||||
idUp3: up3,
|
||||
})
|
||||
onResult(queryResult => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
data.value = [...data.value, {
|
||||
...item,
|
||||
pembuat_laporan: '-'
|
||||
}];
|
||||
});
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
})
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
// const reportButton = useSearchStore()
|
||||
// const detected = computed(() => reportButton.isTriggerChange)
|
||||
// watch(detected, () => {
|
||||
// const dateValue = useDateStore().getDateValue().split(' s/d ')
|
||||
// const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
|
||||
// const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
|
||||
// const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
|
||||
// refetch({
|
||||
// dateFrom: dateValue[0].split('-').reverse().join('-'),
|
||||
// dateTo: dateValue[1].split('-').reverse().join('-'),
|
||||
// posko: posko,
|
||||
// idUid: uid,
|
||||
// idUp3: up3
|
||||
// })
|
||||
// onResult((queryResult) => {
|
||||
// if (queryResult.data != undefined) {
|
||||
// queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
// data.value = [
|
||||
// ...data.value,
|
||||
// {
|
||||
// ...item,
|
||||
// pembuat_laporan: '-'
|
||||
// }
|
||||
// ]
|
||||
// })
|
||||
// }
|
||||
// console.log(queryResult.data)
|
||||
// console.log(queryResult.loading)
|
||||
// console.log(queryResult.networkStatus)
|
||||
// })
|
||||
// onError((error) => {
|
||||
// console.log(error)
|
||||
// })
|
||||
// })
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const showData = () => {
|
||||
showDetail.value = true
|
||||
showDetail.value = true
|
||||
}
|
||||
onMounted(() => {
|
||||
const filters = useFiltersStore()
|
||||
filters.setConfig({
|
||||
type: 'type-1',
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
// filters handler
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -1,25 +1,20 @@
|
||||
<template>
|
||||
<main
|
||||
class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
|
||||
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
|
||||
</div>
|
||||
<div class="flex-1 mt-2 sm:mt-4 dx-viewport">
|
||||
<Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.component">
|
||||
<component :is="filters.config.component" />
|
||||
</Filters>
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</main>
|
||||
<main
|
||||
class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar"
|
||||
>
|
||||
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
|
||||
</div>
|
||||
<div class="flex-1 mt-2 sm:mt-4 dx-viewport">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useFiltersStore } from '@/stores/filters';
|
||||
|
||||
import Filters from '../Form/Filters.vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
|
||||
// Dapatkan objek route dari vue-router
|
||||
const route = useRoute()
|
||||
@ -27,4 +22,4 @@ const route = useRoute()
|
||||
// Dapatkan nama rute menggunakan computed property
|
||||
const pageTitle = computed(() => route.name)
|
||||
const filters = useFiltersStore()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
interface DataItem {
|
||||
id: number;
|
||||
name: string;
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
import { ref, computed, watch } from 'vue'
|
||||
@ -29,25 +29,26 @@ const props = defineProps({
|
||||
default: () => ({ id: 0, name: '' })
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(["update:selected"])
|
||||
const emit = defineEmits(['update:selected'])
|
||||
|
||||
const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
|
||||
const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data])
|
||||
|
||||
computed(() => {
|
||||
if (props.selected.id === 0) {
|
||||
selected.value = { id:0, name: props.placeholder }
|
||||
selected.value = { id: 0, name: props.placeholder }
|
||||
}
|
||||
|
||||
console.log('selected', selected.value.name);
|
||||
|
||||
// console.log('selected', selected.value.name)
|
||||
})
|
||||
|
||||
watch(() => props.selected, (value) => {
|
||||
if (value.id === 0) {
|
||||
selected.value = { id:0, name: props.placeholder }
|
||||
watch(
|
||||
() => props.selected,
|
||||
(value) => {
|
||||
if (value.id === 0) {
|
||||
selected.value = { id: 0, name: props.placeholder }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
)
|
||||
|
||||
let selected = ref<DataItem>(data.value[0])
|
||||
let query = ref('')
|
||||
@ -55,56 +56,86 @@ let filteredData = computed(() =>
|
||||
query.value === ''
|
||||
? data.value
|
||||
: data.value.filter((item: DataItem) =>
|
||||
item.name
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '')
|
||||
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
|
||||
)
|
||||
item.name
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '')
|
||||
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
|
||||
)
|
||||
)
|
||||
|
||||
watch(selected, (value) => {
|
||||
emit('update:selected', value)
|
||||
})
|
||||
|
||||
const show = ref(false)
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Combobox
|
||||
@update:modelValue="value => emit('update:selected', value)"
|
||||
v-model="selected" v-slot="{ open }">
|
||||
<Combobox
|
||||
@update:modelValue="(value) => emit('update:selected', value)"
|
||||
v-model="selected"
|
||||
v-slot="{ open }"
|
||||
>
|
||||
<div class="relative mt-1">
|
||||
<div
|
||||
class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
|
||||
<ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
|
||||
:displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
|
||||
@click="show = true" @blur="show = false" defaultValue="" />
|
||||
class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
|
||||
>
|
||||
<ComboboxInput
|
||||
class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
|
||||
:displayValue="(item: any) => (show || open ? '' : item.name)"
|
||||
@change="query = $event.target.value"
|
||||
@click="show = true"
|
||||
@blur="show = false"
|
||||
defaultValue=""
|
||||
/>
|
||||
|
||||
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</ComboboxButton>
|
||||
</div>
|
||||
<TransitionRoot :show="show || open"
|
||||
|
||||
leave="transition ease-in duration-100" leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0" @after-leave="query = ''">
|
||||
<ComboboxOptions static
|
||||
class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<div v-if="filteredData.length === 0 && query !== ''"
|
||||
class="relative cursor-default select-none py-2 px-4 text-gray-700">
|
||||
<TransitionRoot
|
||||
:show="show || open"
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
@after-leave="query = ''"
|
||||
>
|
||||
<ComboboxOptions
|
||||
static
|
||||
class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<div
|
||||
v-if="filteredData.length === 0 && query !== ''"
|
||||
class="relative cursor-default select-none py-2 px-4 text-gray-700"
|
||||
>
|
||||
Nothing found.
|
||||
</div>
|
||||
|
||||
<ComboboxOption v-for="item in filteredData"
|
||||
as="template" :key="item.id" :value="item"
|
||||
v-slot="{ selected, active }">
|
||||
<li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
|
||||
'bg-teal-600 text-white': active,
|
||||
'text-gray-900': !active
|
||||
}">
|
||||
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
|
||||
|
||||
<ComboboxOption
|
||||
v-for="item in filteredData"
|
||||
as="template"
|
||||
:key="item.id"
|
||||
:value="item"
|
||||
v-slot="{ selected, active }"
|
||||
>
|
||||
<li
|
||||
class="relative cursor-default select-none py-2 pl-10 pr-4"
|
||||
:class="{
|
||||
'bg-teal-600 text-white': active,
|
||||
'text-gray-900': !active
|
||||
}"
|
||||
>
|
||||
<span
|
||||
class="block truncate"
|
||||
:class="{ 'font-medium': selected, 'font-normal': !selected }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
|
||||
:class="{ 'text-white': active, 'text-teal-600': !active }">
|
||||
<span
|
||||
v-if="selected"
|
||||
class="absolute inset-y-0 left-0 flex items-center pl-3"
|
||||
:class="{ 'text-white': active, 'text-teal-600': !active }"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import HomeView from '@/views/HomeView.vue'
|
||||
@ -28,7 +27,7 @@ import {
|
||||
GangguanTable17,
|
||||
GangguanTable18,
|
||||
GangguanTable19,
|
||||
GangguanTable20,
|
||||
GangguanTable20
|
||||
} from '@/components/Pages/Gangguan'
|
||||
import {
|
||||
KeluhanTable1,
|
||||
@ -45,7 +44,7 @@ import {
|
||||
KeluhanTable12,
|
||||
KeluhanTable13,
|
||||
KeluhanTable14,
|
||||
KeluhanTable15,
|
||||
KeluhanTable15
|
||||
} from '@/components/Pages/Keluhan'
|
||||
import {
|
||||
MonalisaTable1,
|
||||
@ -74,7 +73,12 @@ import {
|
||||
MonalisaTable9
|
||||
} from '@/components/Pages/Monalisa'
|
||||
import { CicoTable1 } from '@/components/Pages/Cico'
|
||||
import { AnomaliTable1, AnomaliTable2, AnomaliTable3, AnomaliTable5 } from '@/components/Pages/Anomali'
|
||||
import {
|
||||
AnomaliTable1,
|
||||
AnomaliTable2,
|
||||
AnomaliTable3,
|
||||
AnomaliTable5
|
||||
} from '@/components/Pages/Anomali'
|
||||
import { CttTable1 } from '@/components/Pages/Ctt'
|
||||
import { MaterialTable1, MaterialTable2 } from '@/components/Pages/Material'
|
||||
import { TransaksiTable1 } from '@/components/Pages/Transaksi'
|
||||
@ -89,7 +93,7 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '',
|
||||
name: 'Home Page',
|
||||
component: WelcomePage,
|
||||
component: WelcomePage
|
||||
},
|
||||
{
|
||||
path: 'gangguan',
|
||||
@ -102,43 +106,43 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Daftar Gangguan Dialihkan Ke Posko Lain',
|
||||
component: GangguanTable1,
|
||||
component: GangguanTable1
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
|
||||
component: GangguanTable2,
|
||||
component: GangguanTable2
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: 'Daftar Gangguan Response Time',
|
||||
component: GangguanTable3,
|
||||
component: GangguanTable3
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Daftar Gangguan Recovery Time',
|
||||
component: GangguanTable4,
|
||||
component: GangguanTable4
|
||||
},
|
||||
{
|
||||
path: '5',
|
||||
name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
|
||||
component: GangguanTable5,
|
||||
component: GangguanTable5
|
||||
},
|
||||
{
|
||||
path: '6',
|
||||
name: 'Daftar Gangguan Berdasarkan Media',
|
||||
component: GangguanTable6,
|
||||
component: GangguanTable6
|
||||
},
|
||||
{
|
||||
path: '7',
|
||||
name: 'Daftar Gangguan Diselesaikan Mobile APKT',
|
||||
component: GangguanTable7,
|
||||
component: GangguanTable7
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'rekapitulasi',
|
||||
@ -147,77 +151,77 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Rekapitulasi Gangguan All',
|
||||
component: GangguanTable8,
|
||||
component: GangguanTable8
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Rekapitulasi Gangguan/Jenis Gangguan',
|
||||
component: GangguanTable9,
|
||||
component: GangguanTable9
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: 'Rekapitulasi Gangguan/Jenis Gangguan SE 004',
|
||||
component: GangguanTable10,
|
||||
component: GangguanTable10
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Rekapitulasi Gangguan Per Posko',
|
||||
component: GangguanTable11,
|
||||
component: GangguanTable11
|
||||
},
|
||||
{
|
||||
path: '5',
|
||||
name: 'Rekapitulasi Gangguan Per Regu',
|
||||
component: GangguanTable12,
|
||||
component: GangguanTable12
|
||||
},
|
||||
{
|
||||
path: '6',
|
||||
name: 'Rekapitulasi Gangguan Per Tanggal',
|
||||
component: GangguanTable13,
|
||||
component: GangguanTable13
|
||||
},
|
||||
{
|
||||
path: '7',
|
||||
name: 'Rekapitulasi Gangguan Berdasarkan Media',
|
||||
component: GangguanTable14,
|
||||
component: GangguanTable14
|
||||
},
|
||||
{
|
||||
path: '8',
|
||||
name: 'Rekapitulasi Gangguan Alih Posko',
|
||||
component: GangguanTable15,
|
||||
component: GangguanTable15
|
||||
},
|
||||
{
|
||||
path: '9',
|
||||
name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
|
||||
component: GangguanTable16,
|
||||
component: GangguanTable16
|
||||
},
|
||||
{
|
||||
path: '10',
|
||||
name: 'Rekapitulasi Rating Per Posko',
|
||||
component: GangguanTable17,
|
||||
component: GangguanTable17
|
||||
},
|
||||
{
|
||||
path: '11',
|
||||
name: 'Rekapitulasi Rating Per Regu',
|
||||
component: GangguanTable18,
|
||||
component: GangguanTable18
|
||||
},
|
||||
{
|
||||
path: '12',
|
||||
name: 'Rekapitulasi Koreksi Transaksi Individual',
|
||||
component: GangguanTable19,
|
||||
component: GangguanTable19
|
||||
},
|
||||
{
|
||||
path: '13',
|
||||
name: 'Rekapitulasi Cleansing Transaksi TM',
|
||||
component: GangguanTable20,
|
||||
component: GangguanTable20
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -232,43 +236,43 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
|
||||
component: KeluhanTable1,
|
||||
component: KeluhanTable1
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
|
||||
component: KeluhanTable2,
|
||||
component: KeluhanTable2
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: 'Daftar Keluhan Response Time',
|
||||
component: KeluhanTable3,
|
||||
component: KeluhanTable3
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Daftar Keluhan Recovery Time',
|
||||
component: KeluhanTable4,
|
||||
component: KeluhanTable4
|
||||
},
|
||||
{
|
||||
path: '5',
|
||||
name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
|
||||
component: KeluhanTable5,
|
||||
component: KeluhanTable5
|
||||
},
|
||||
{
|
||||
path: '6',
|
||||
name: 'Daftar Keluhan Berdasarkan Media',
|
||||
component: KeluhanTable6,
|
||||
component: KeluhanTable6
|
||||
},
|
||||
{
|
||||
path: '7',
|
||||
name: 'Daftar Keluhan Selesai di CC123',
|
||||
component: KeluhanTable7,
|
||||
component: KeluhanTable7
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'rekapitulasi',
|
||||
@ -277,54 +281,54 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Rekapitulasi Keluhan All',
|
||||
component: KeluhanTable8,
|
||||
component: KeluhanTable8
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
|
||||
component: KeluhanTable9,
|
||||
component: KeluhanTable9
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
|
||||
component: KeluhanTable10,
|
||||
component: KeluhanTable10
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
|
||||
component: KeluhanTable11,
|
||||
component: KeluhanTable11
|
||||
},
|
||||
{
|
||||
path: '5',
|
||||
name: 'Rekapitulasi Keluhan Per Tanggal',
|
||||
component: KeluhanTable12,
|
||||
component: KeluhanTable12
|
||||
},
|
||||
{
|
||||
path: '6',
|
||||
name: 'Rekapitulasi Keluhan Per Unit',
|
||||
component: KeluhanTable13,
|
||||
component: KeluhanTable13
|
||||
},
|
||||
{
|
||||
path: '7',
|
||||
name: 'Rekapitulasi Keluhan Berdasarkan Media',
|
||||
component: KeluhanTable14,
|
||||
component: KeluhanTable14
|
||||
},
|
||||
{
|
||||
path: '8',
|
||||
name: 'Rekapitulasi Rating Per Unit',
|
||||
component: KeluhanTable15,
|
||||
component: KeluhanTable15
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'monalisa',
|
||||
@ -341,59 +345,59 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Jumlah Kali Gangguan',
|
||||
component: MonalisaTable1,
|
||||
component: MonalisaTable1
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Dispacthing Time (DT) Gangguan',
|
||||
component: MonalisaTable2,
|
||||
component: MonalisaTable2
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: 'Recovery Time (RCT) Gangguan',
|
||||
component: MonalisaTable3,
|
||||
component: MonalisaTable3
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Response Time (RPT) Gangguan',
|
||||
component: MonalisaTable4,
|
||||
component: MonalisaTable4
|
||||
},
|
||||
{
|
||||
path: '5',
|
||||
name: 'Jumlah dan Durasi RPT RCT Gangguan',
|
||||
component: MonalisaTable5,
|
||||
component: MonalisaTable5
|
||||
},
|
||||
{
|
||||
path: '6',
|
||||
name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
|
||||
component: MonalisaTable6,
|
||||
component: MonalisaTable6
|
||||
},
|
||||
{
|
||||
path: '7',
|
||||
name: 'Rekapitulasi Lapor Ulang Gangguan',
|
||||
component: MonalisaTable7,
|
||||
component: MonalisaTable7
|
||||
},
|
||||
{
|
||||
path: '8',
|
||||
name: 'Rekapitulasi ENS Gangguan',
|
||||
component: MonalisaTable8,
|
||||
component: MonalisaTable8
|
||||
},
|
||||
{
|
||||
path: '9',
|
||||
name: 'Rekapitulasi Gangguan Belum Selesai',
|
||||
component: MonalisaTable9,
|
||||
component: MonalisaTable9
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'keluhan',
|
||||
@ -406,49 +410,49 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Jumlah Kali Keluhan',
|
||||
component: MonalisaTable10,
|
||||
component: MonalisaTable10
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Recovery Time (RCT) Keluhan',
|
||||
component: MonalisaTable11,
|
||||
component: MonalisaTable11
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: 'Response Time (RPT) Keluhan',
|
||||
component: MonalisaTable12,
|
||||
component: MonalisaTable12
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Jumlah dan Durasi RPT RCT Keluhan',
|
||||
component: MonalisaTable13,
|
||||
component: MonalisaTable13
|
||||
},
|
||||
{
|
||||
path: '5',
|
||||
name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
|
||||
component: MonalisaTable14,
|
||||
component: MonalisaTable14
|
||||
},
|
||||
{
|
||||
path: '6',
|
||||
name: 'Rekapitulasi Lapor Ulang Keluhan',
|
||||
component: MonalisaTable15,
|
||||
component: MonalisaTable15
|
||||
},
|
||||
{
|
||||
path: '7',
|
||||
name: 'Rekapitulasi Keluhan Belum Selesai',
|
||||
component: MonalisaTable16,
|
||||
component: MonalisaTable16
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'laporan-kpi',
|
||||
@ -461,28 +465,28 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: '(Monalisa) Penurunan Jumlah Komplain',
|
||||
component: MonalisaTable17,
|
||||
component: MonalisaTable17
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: '(Monalisa) Aging Complaint',
|
||||
component: MonalisaTable18,
|
||||
component: MonalisaTable18
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: '(Monalisa) Energy Not Sales (ENS)',
|
||||
component: MonalisaTable19,
|
||||
component: MonalisaTable19
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: '(Monalisa) Kepatuhan dan Akurasi Dalam Pelaporan',
|
||||
component: MonalisaTable20,
|
||||
component: MonalisaTable20
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'kumulatif',
|
||||
@ -491,40 +495,40 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Penurunan Jumlah Komplain',
|
||||
component: MonalisaTable21,
|
||||
component: MonalisaTable21
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Aging Complaint',
|
||||
component: MonalisaTable22,
|
||||
component: MonalisaTable22
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: 'Energy Not Sales (ENS)',
|
||||
component: MonalisaTable23,
|
||||
component: MonalisaTable23
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
|
||||
component: MonalisaTable24,
|
||||
component: MonalisaTable24
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
},
|
||||
],
|
||||
component: EmptyPage
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
},
|
||||
],
|
||||
component: EmptyPage
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'check-in-out',
|
||||
@ -537,19 +541,19 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Laporan Check In /Check Out (CICO)',
|
||||
component: CicoTable1,
|
||||
component: CicoTable1
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'anomali-pengaduan',
|
||||
@ -562,18 +566,18 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
|
||||
component: AnomaliTable1,
|
||||
component: AnomaliTable1
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
|
||||
component: AnomaliTable3,
|
||||
component: AnomaliTable3
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'keluhan',
|
||||
@ -582,19 +586,19 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
|
||||
component: AnomaliTable5,
|
||||
component: AnomaliTable5
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'ctt-kwh-periksa',
|
||||
@ -603,13 +607,13 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Laporan CTT & KWH Periksa',
|
||||
component: CttTable1,
|
||||
component: CttTable1
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'material',
|
||||
@ -622,13 +626,13 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Daftar Gangguan Dan Material Yang Dipakai',
|
||||
component: MaterialTable1,
|
||||
component: MaterialTable1
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'rekapitulasi',
|
||||
@ -637,19 +641,19 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Rekapitulasi Pemakaian Material',
|
||||
component: MaterialTable2,
|
||||
component: MaterialTable2
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'transaksi',
|
||||
@ -658,13 +662,13 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Transaksi APKT',
|
||||
component: TransaksiTable1,
|
||||
component: TransaksiTable1
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'pencarian-data',
|
||||
@ -673,17 +677,17 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Pencarian Report Number',
|
||||
component: PencarianDataTable1,
|
||||
component: PencarianDataTable1
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':pathMatch(.*)*',
|
||||
component: EmptyPage,
|
||||
component: EmptyPage
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -711,46 +715,45 @@ export const routes: RouteRecordRaw[] = [
|
||||
]
|
||||
|
||||
export const mergeChildrenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
|
||||
const mergedRoutes: RouteRecordRaw[] = [];
|
||||
const mergedRoutes: RouteRecordRaw[] = []
|
||||
|
||||
for (const route of routes) {
|
||||
if (route.children && route.children.length > 0) {
|
||||
// Buat salinan route tanpa children
|
||||
const topLevelRoute: RouteRecordRaw = { ...route, children: [] };
|
||||
const topLevelRoute: RouteRecordRaw = { ...route, children: [] }
|
||||
|
||||
// Salin setiap route children ke children route paling atas
|
||||
for (const childRoute of route.children) {
|
||||
const fullPath = `${route.path}/${childRoute.path}`.replace(/\/+/g, '/');
|
||||
const mergedChildRoute: RouteRecordRaw = { ...childRoute, path: fullPath };
|
||||
topLevelRoute.children?.push(mergedChildRoute);
|
||||
const fullPath = `${route.path}/${childRoute.path}`.replace(/\/+/g, '/')
|
||||
const mergedChildRoute: RouteRecordRaw = { ...childRoute, path: fullPath }
|
||||
topLevelRoute.children?.push(mergedChildRoute)
|
||||
}
|
||||
|
||||
mergedRoutes.push(topLevelRoute);
|
||||
mergedRoutes.push(topLevelRoute)
|
||||
} else {
|
||||
// Jika route tidak memiliki children, tambahkan as is
|
||||
mergedRoutes.push(route);
|
||||
mergedRoutes.push(route)
|
||||
}
|
||||
}
|
||||
|
||||
return mergedRoutes;
|
||||
return mergedRoutes
|
||||
}
|
||||
|
||||
export const extractLeafRoutes = (routes: RouteRecordRaw[], parentPath = ''): RouteRecordRaw[] => {
|
||||
const leafRoutes: RouteRecordRaw[] = [];
|
||||
const leafRoutes: RouteRecordRaw[] = []
|
||||
|
||||
for (const route of routes) {
|
||||
|
||||
const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/');
|
||||
const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/')
|
||||
|
||||
if (route.children && route.children.length > 0) {
|
||||
leafRoutes.push(...extractLeafRoutes(route.children, fullPath));
|
||||
leafRoutes.push(...extractLeafRoutes(route.children, fullPath))
|
||||
} else {
|
||||
const leafRoute = { ...route, path: fullPath };
|
||||
leafRoutes.push(leafRoute);
|
||||
const leafRoute = { ...route, path: fullPath }
|
||||
leafRoutes.push(leafRoute)
|
||||
}
|
||||
}
|
||||
|
||||
return leafRoutes;
|
||||
return leafRoutes
|
||||
}
|
||||
|
||||
export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
|
||||
@ -770,14 +773,27 @@ export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
|
||||
getRoute(r.children, `${parent}/${r.path}`)
|
||||
} else {
|
||||
const fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}`
|
||||
if (newRoute.find((nr) => nr.path !== '/' && nr.path === '/home' && fullPath.includes(nr.path))) {
|
||||
if (
|
||||
newRoute.find(
|
||||
(nr) => nr.path !== '/' && nr.path === '/home' && fullPath.includes(nr.path)
|
||||
)
|
||||
) {
|
||||
const index = newRoute.findIndex((nr) => nr.path !== '/' && fullPath.includes(nr.path))
|
||||
newRoute[index] = {
|
||||
...newRoute[index], children: [...newRoute[index].children ?? [], {
|
||||
path: fullPath === '/home/' ? '' : fullPath.includes('/home/') ? fullPath.replace('/home/', '') : fullPath,
|
||||
name: r.name,
|
||||
component: r.component
|
||||
} as RouteRecordRaw]
|
||||
...newRoute[index],
|
||||
children: [
|
||||
...(newRoute[index].children ?? []),
|
||||
{
|
||||
path:
|
||||
fullPath === '/home/'
|
||||
? ''
|
||||
: fullPath.includes('/home/')
|
||||
? fullPath.replace('/home/', '')
|
||||
: fullPath,
|
||||
name: r.name,
|
||||
component: r.component
|
||||
} as RouteRecordRaw
|
||||
]
|
||||
}
|
||||
} else {
|
||||
newRoute.push({
|
||||
@ -792,25 +808,26 @@ export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
|
||||
getRoute(route)
|
||||
|
||||
// remove duplicate route path and sort by path length
|
||||
const uniqueRoute = newRoute.filter((nr, index, self) => self.findIndex((n) => n.path === nr.path) === index).sort((a, b) => b.path.length - a.path.length)
|
||||
const uniqueRoute = newRoute
|
||||
.filter((nr, index, self) => self.findIndex((n) => n.path === nr.path) === index)
|
||||
.sort((a, b) => b.path.length - a.path.length)
|
||||
// console.log('route', newRoute);
|
||||
|
||||
// return uniqueRoute
|
||||
return newRoute
|
||||
}
|
||||
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
linkActiveClass: 'active',
|
||||
stringifyQuery: qs.stringify,
|
||||
routes: fixRoute(routes),
|
||||
strict: true,
|
||||
strict: true
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
// redirect to login page if not logged in and trying to access a restricted page
|
||||
const auth = useAuthStore();
|
||||
const auth = useAuthStore()
|
||||
|
||||
// if to is not found, redirect to 404
|
||||
if (to.matched.length === 0) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user