defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor filters component and add new data property

Browse Source
This commit is contained in:
probdg 2024-02-10 06:14:08 +07:00
parent 83a25527bb
commit eece7bcb92
6 changed files with 361 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/Form/FiltersType/Type10.vue
View File

@ -1,13 +1,73 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Ulp,
selectedUlp,
fetchUid,
itemsUid,
itemsUp3,
itemsUlp
} from './reference'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputNumber from '@/components/Form/InputNumber.vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
periode: '',
minJmlLapor: 1,
maxJmlLapor: 1
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(value);
data.value.posko = value;
};
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</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>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -15,7 +75,11 @@
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -23,7 +87,11 @@
>Unit Layanan Pelanggan:</label
>
<Select placeholder="Semua Unit Layanan Pelanggan" />
<Select
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -39,9 +107,13 @@
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select placeholder="1" />
<InputNumber @update:time-value="(value) => {
data.minJmlLapor = value
}" />
<small class="flex items-center">s/d</small>
<Select placeholder="2" />
<InputNumber @update:time-value="(value) => {
data.maxJmlLapor = value
}" />
</div>
</div>
</template>

128
src/components/Form/FiltersType/Type11.vue
View File

@ -1,13 +1,99 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Ulp,
selectedUlp,
fetchUid,
itemsUid,
itemsUp3,
itemsUlp
} from './reference'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputNumber from '@/components/Form/InputNumber.vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const sla = [
{
id: 1,
name: 'Dibawah / Sesuai SLA (<= 45 menit)'
},
{
id: 2,
name: 'Melebihi SLA (> 45 menit)'
}
];
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
periode: '',
minDurasiRecoveryTime: 1,
maxDurasiRecoveryTime: 1
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(value);
data.value.posko = value;
};
const triggerInput = ref(false)
const changeDuration = (value: any) => {
if (value.id === 0) {
console.log('Durasi Menit')
data.value.minDurasiRecoveryTime = 0
data.value.maxDurasiRecoveryTime = 5
triggerInput.value = false
} else if (value.id === 1) {
data.value.minDurasiRecoveryTime = 0
data.value.maxDurasiRecoveryTime = 45
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
triggerInput.value = true
} else {
data.value.minDurasiRecoveryTime = 46
data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
triggerInput.value = true
console.log('Melebihi SLA (> 45 menit)')
}
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</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>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -15,7 +101,11 @@
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -23,7 +113,11 @@
>Unit Layanan Pelanggan:</label
>
<Select placeholder="Semua Unit Layanan Pelanggan" />
<Select
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -39,12 +133,30 @@
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
<div class="flex flex-col gap-y-1">
<Select placeholder="Durasi Menit" />
<Select
@update:selected="changeDuration($event)"
:data="sla"
placeholder="Durasi Menit"
/>
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select placeholder="1" />
<InputWithSuffix
@update:minute-value="
(value :any)=> {
data.minDurasiRecoveryTime =value
}
"
@value="data.minDurasiRecoveryTime"
:disabled=triggerInput />
<small class="flex items-center">s/d</small>
<Select placeholder="2" />
<InputWithSuffix
@update:minute-value="
(value :any)=> {
data.maxDurasiRecoveryTime = value
}
"
@value="data.maxDurasiRecoveryTime"
:disabled="triggerInput" />
</div>
</div>
</div>

4
src/components/Form/FiltersType/Type17.vue
View File

@ -2,6 +2,10 @@
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithFilter from '../InputWithFilter.vue'
import { ref } from 'vue'
const data = ref({
periode: '',
})
</script>
<template>

81
src/components/Form/FiltersType/Type8.vue
View File

@ -1,29 +1,90 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
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 }
data.value.uid = value
}
const setUp3 = (value: any) => {
uppp.value = value
selectedUp3Posko(value)
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}
const setPosko = (value: any) => {
posko.value = value
selectedPosko(value)
data.value.posko = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</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>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
</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 placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
: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">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

72
src/components/Form/FiltersType/Type9.vue
View File

@ -2,13 +2,71 @@
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
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 }
data.value.uid = value
}
const setUp3 = (value: any) => {
uppp.value = value
selectedUp3Posko(value)
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}
const setPosko = (value: any) => {
posko.value = value
selectedPosko(value)
data.value.posko = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</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>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -16,13 +74,21 @@
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
: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 placeholder="Semua Posko" />
<Select
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

36
src/components/Pages/Gangguan/Table_7.vue
View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
@ -103,22 +109,19 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_
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
const filterData = (data: any) => {
const dateValue = data.periode.split(' s/d ')
const posko = data.posko ? data.posko.id : ''
const uid = data.uid ? data.uid.id : 0
const up3 = data.up3 ? data.up3.id : 0
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
posko: posko,
idUid: uid,
idUp3: up3,
idUp3: up3
})
onResult(queryResult => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
}
@ -129,12 +132,9 @@ watch(detected, () => {
onError((error) => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-1',
})
})
}
const filters = ref();
</script>