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

Add lifecycle hook and fetch data on mounted

Browse Source 
Add two-way binding for menitValue in InputWithSuffix
Add two-way binding for timeValue in InputNumber
Refactor filterData function in Table_5.vue
This commit is contained in:
probdg 2024-02-10 05:56:05 +07:00
parent 2e4eb3b6b2
commit 83a25527bb
14 changed files with 741 additions and 511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/Form/FiltersType/Type16.vue
View File

@ -1,15 +1,81 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
fetchMedia();
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchUid,
fetchMedia,
itemsUid,
itemsUp3,
itemsPosko,
itemsMedia
} from './reference'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko'
const mediaPlaceholder = 'Semua Media'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const media = ref({ id: 0, name: mediaPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: up3.value,
posko: posko.value,
media: media.value,
periode: ''
})
watch(data.value, (value) => {
emit('update:filters', value)
})
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
up3.value = { id: 0, name: up3Placeholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
up3.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
}
const setMedia = (value: any) => {
media.value = value
data.value.media = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
fetchMedia()
})
</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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select
:data="itemsUid"
@update:selected="setUid($event)"
:placeholder="uidPlaceholder"
:selected="uid"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -17,27 +83,45 @@ fetchMedia();
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select
:data="itemsUp3"
@update:selected="setUp3($event)"
:placeholder="up3Placeholder"
:selected="up3"
/>
</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
:data="itemsPosko"
@update:selected="setPosko($event)"
:placeholder="poskoPlaceholder"
:selected="posko"
/>
</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">Media:</label>
<Select placeholder="Semua Media" :data="itemsMedia" />
<Select
:selected="media"
@update:selected="setMedia($event)"
:placeholder="mediaPlaceholder"
:data="itemsMedia"
/>
</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) => {
<DatePicker
@update:date-value="
(value) => {
data.periode = value
}
" />
"
/>
</div>
</template>

6
src/components/Form/FiltersType/Type3.vue
View File

@ -2,7 +2,7 @@
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@ -35,6 +35,10 @@ const setUlp = (value: any) => {
selectedUlp(value);
data.value.posko = value;
};
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</script>
<template>

69
src/components/Form/FiltersType/Type4.vue
View File

@ -1,13 +1,56 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { onMounted, ref } from '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: '',
jenisLaporan : ''
})
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()
})
</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 +58,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 +70,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">
@ -31,7 +82,17 @@
>Jenis Laporan:</label
>
<Select placeholder="Laporan Berulang Unit" />
<Select
@update:selected="(value) => {
data.jenisLaporan = value
}"
:data="[
{ id: 1, name: 'Laporan Berulang Unit' },
{ id: 2, name: 'Laporan Berulang Pelanggan' },
{ id: 3, name: 'Laporan Berulang Pelanggan dan Unit' },
]"
:placeholder="'Semua Jenis Laporan'"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

64
src/components/Form/FiltersType/Type5.vue
View File

@ -1,13 +1,68 @@
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
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>
<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 :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -15,18 +70,17 @@
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<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 placeholder="Semua Posko" />
<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 @update:date-value="(value) => {
data.periode = value
}

56
src/components/Form/FiltersType/Type6.vue
View File

@ -3,31 +3,43 @@ import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
import { useTotalReport } from '@/stores/totalReport';
import { onMounted, ref } from 'vue';
const emit = defineEmits(['update:filters'])
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 poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
up3: up3.value,
posko: posko.value,
periode: '',
minReport: useTotalReport().getDataMin() ? useTotalReport().getDataMin() : 1,
maxReport: useTotalReport().getDataMax()? useTotalReport().getDataMax() : 1
minJmlLapor: 1,
maxJmlLapor: 1
})
///Can di ganti masih ka store
const changeMinReport = (value: any) => {
useTotalReport().setDataMin(value)
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
up3.value = { id: 0, name: up3Placeholder }
data.value.uid = value
}
const changeMaxReport = (value: any) => {
useTotalReport().setDataMax(value)
const setUp3 = (value: any) => {
up3.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()
@ -38,20 +50,19 @@ onMounted(() => {
<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 @update:selected="selectedUid($event)" :data="itemsUid" 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>
<Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
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">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" 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">
@ -59,17 +70,20 @@ onMounted(() => {
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
}" />
</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">Lapor Ulang:</label>
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<InputNumber :value="1" @change="changeMinReport($event.target.value)" />
<InputNumber @update:time-value="(value) => {
data.minJmlLapor = value
}" />
<small class="flex items-center">s/d</small>
<InputNumber :value="1" @change="changeMaxReport($event.target.value)" />
<InputNumber @update:time-value="(value) => {
data.maxJmlLapor = value
}" />
</div>
</div>
</template>

104
src/components/Form/FiltersType/Type7.vue
View File

@ -3,9 +3,46 @@
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue';
import { useTotalDuration } from '@/stores/totalDuration';
import { ref } from 'vue';
const data = [
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
import { onMounted, ref, watch } from 'vue';
const emit = defineEmits(['update:filters'])
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const data = ref({
uid: uid.value,
up3: up3.value,
posko: posko.value,
periode: '',
minDurasiRecoveryTime: 1,
maxDurasiRecoveryTime: 1
})
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
up3.value = { id: 0, name: up3Placeholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
up3.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
}
const sla = [
{
id: 1,
name: 'Dibawah / Sesuai SLA (<= 45 menit)'
@ -20,42 +57,61 @@ import { ref } from 'vue';
const changeDuration = (value: any) => {
if (value.id === 0) {
console.log('Durasi Menit')
useTotalDuration().setDataMin(0)
useTotalDuration().setDataMax(5)
data.value.minDurasiRecoveryTime = 0
data.value.maxDurasiRecoveryTime = 5
triggerInput.value = false
} else if (value.id === 1) {
useTotalDuration().setDataMin(0)
useTotalDuration().setDataMax(45)
data.value.minDurasiRecoveryTime = 0
data.value.maxDurasiRecoveryTime = 45
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
triggerInput.value = true
} else {
useTotalDuration().setDataMin(46)
useTotalDuration().setDataMax(7*60*24)
data.value.minDurasiRecoveryTime = 46
data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
triggerInput.value = true
console.log('Melebihi SLA (> 45 menit)')
}
}
watch(() => data.value, () => {
emit('update:filters', data.value)
}, { deep: true })
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="up3Placeholder"
/>
</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">
@ -71,12 +127,26 @@ import { ref } from 'vue';
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
<div class="flex flex-col gap-y-1">
<Select @update:selected="changeDuration($event)" :data="data" 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">
<InputWithSuffix :value="useTotalDuration().getDataMin()" :disabled=triggerInput />
<InputWithSuffix
@update:minute-value="
(value :any)=> {
data.minDurasiRecoveryTime =value
}
"
@value="data.minDurasiRecoveryTime"
:disabled=triggerInput />
<small class="flex items-center">s/d</small>
<InputWithSuffix :value="useTotalDuration().getDataMax()" :disabled="triggerInput" />
<InputWithSuffix
@update:minute-value="
(value :any)=> {
data.maxDurasiRecoveryTime = value
}
"
@value="data.maxDurasiRecoveryTime"
:disabled="triggerInput" />
</div>
</div>
</div>

22
src/components/Form/InputNumber.vue
View File

@ -1,36 +1,44 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
placeholder: {
type: String,
default: "",
default: ''
},
disabled: {
type: Boolean,
default: false,
default: false
},
readonly: {
type: Boolean,
default: false,
default: false
},
value: {
type: Number,
default: "",
},
default: ''
}
})
const emit = defineEmits(['update:timeValue'])
const timeValue = ref(1)
watch(timeValue, (newValue) => {
console.log('newValue', newValue)
emit('update:timeValue', newValue)
})
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
v-model="timeValue"
autocomplete="off"
type="number"
:value ="props.value"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
inputmode="numeric"
pattern="[0-9.]*"
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
class="w-full 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"

21
src/components/Form/InputWithSuffix.vue
View File

@ -1,35 +1,44 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
placeholder: {
type: String,
default: "",
default: ''
},
disabled: {
type: Boolean,
default: false,
default: false
},
readonly: {
type: Boolean,
default: false,
default: false
},
value: {
type: Number,
default: "",
},
default: ''
}
})
const emit = defineEmits(['update:menitValue'])
const menitValue = ref(1)
watch(menitValue, (newValue) => {
console.log('newValue', newValue)
emit('update:menitValue', newValue)
})
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
v-model="menitValue"
autocomplete="off"
type="text"
:value ="props.value"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
inputmode="numeric"
pattern="[0-9.]*"
defaultValue="1"
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
onblur="this.value = this.value ? this.value + ' Menit' : ''"
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"

68
src/components/Pages/Gangguan/Table_1.vue
View File

@ -1,57 +1,25 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1
@update:filters="
(value) => {
<Type1 @update:filters="(value) => {
filters = value
}
"
/>
" />
</Filters>
<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"
>
<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"
/>
<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"
/>
<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"
/>
<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" />
@ -71,8 +39,8 @@
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="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"
@ -83,8 +51,8 @@
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="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 }">
@ -192,8 +160,7 @@
<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]" />
<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">
@ -349,7 +316,8 @@ const filterData = (data :any)=>{
...data.value,
{
...item,
pembuat_laporan: '-'
pembuat_laporan: '-',
waktu_lapor: '-',
}
]
})

28
src/components/Pages/Gangguan/Table_2.vue
View File

@ -166,9 +166,8 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type6 from '@/components/Form/FiltersType/Type6.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { useFiltersStore } from '@/stores/filters'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
import InputText from '@/components/InputText.vue';
@ -195,7 +194,7 @@ const showData = () => {
const closeDetail = () => {
showDetail.value = false
}
const loadingVisible = ref(true)
const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
daftarGangguanMelaporLebihDariSatuKali(
@ -234,26 +233,21 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LE
})
const filterData = (data: any) => {
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = data;
const dateValue = data.periode.split(' s/d ');
const posko = data.posko ? data.posko.id : ""
const up3 = data.up3 ? data.up3.id : 0
const uid = data.uid ? data.uid.id : 0
const minJmlLapor = data.minReport
const maxJmlLapor = data.maxReport
console.log(data)
refetch({
minJmlLapor,
maxJmlLapor,
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
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),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)

74
src/components/Pages/Gangguan/Table_3.vue
View File

@ -1,5 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type7 @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=""
@ -50,25 +55,41 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type7 from '@/components/Form/FiltersType/Type7.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { useFiltersStore } from '@/stores/filters'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import { useDateStore } from '@/stores/date';
import { useSearchStore } from '@/stores/filtersAction';
import { usePostsStore } from '@/stores/posts';
import { useRegionStore } from '@/stores/region';
import { useUp3Store } from '@/stores/up3';
import { useTotalDuration } from '@/stores/totalDuration';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const filterData = (data: any) => {
const { minDurasiResponseTime, maxDurasiResponseTime, posko, uid, up3 } = data;
const dateValue = data.periode.split(' s/d ')
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),
minDurasiResponseTime : minDurasiResponseTime ? minDurasiResponseTime : 1,
maxDurasiResponseTime : maxDurasiResponseTime ? maxDurasiResponseTime : 1,
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
}
const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
query daftarGangguanResponseTime(
$dateFrom: Date!
@ -121,35 +142,6 @@ onResult(queryResult => {
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
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 minDurasiResponseTime = useTotalDuration().getDataMin();
const maxDurasiResponseTime = useTotalDuration().getDataMax();
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
minDurasiResponseTime,
maxDurasiResponseTime,
posko,
idUid: uid,
idUp3: up3
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
})
const filters = ref()
</script>

76
src/components/Pages/Gangguan/Table_4.vue
View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type7 @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"
@ -52,22 +58,39 @@
import Filters from '@/components/Form/Filters.vue'
import Type7 from '@/components/Form/FiltersType/Type7.vue'
import { computed, onMounted, ref, watch } 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 { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import { useDateStore } from '@/stores/date';
import { usePostsStore } from '@/stores/posts';
import { useRegionStore } from '@/stores/region';
import { useTotalDuration } from '@/stores/totalDuration';
import { useUp3Store } from '@/stores/up3';
import { useSearchStore } from '@/stores/filtersAction';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const filterData = (data: any) => {
const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = data;
const dateValue = data.periode.split(' s/d ')
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),
minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanRecoveryTime;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
}
const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
query daftarGangguanRecoveryTime(
$dateFrom: Date!
@ -113,40 +136,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_REC
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 minDurasiRecoveryTime = useTotalDuration().getDataMin();
const maxDurasiRecoveryTime = useTotalDuration().getDataMax();
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
minDurasiRecoveryTime,
maxDurasiRecoveryTime,
posko,
idUid: uid,
idUp3: up3
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanRecoveryTime;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-7',
})
})
const filters = ref()
</script>

38
src/components/Pages/Gangguan/Table_5.vue
View File

@ -1,5 +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=""
@ -46,7 +51,6 @@
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
@ -104,20 +108,15 @@ const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PE
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 { posko, uid, up3 } = data;
const dateValue = data.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3
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),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
@ -130,11 +129,6 @@ watch(detected, () => {
onError(error => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-1',
})
})
}
const filters = ref()
</script>

48
src/components/Pages/Gangguan/Table_6.vue
View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type16 @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=""
@ -40,18 +46,11 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type16 from '@/components/Form/FiltersType/Type16.vue'
import { computed, onMounted, ref, watch } 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 gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable';
import { useDateStore } from '@/stores/date';
import { useSearchStore } from '@/stores/filtersAction';
import { usePostsStore } from '@/stores/posts';
import { useRegionStore } from '@/stores/region';
import { useUp3Store } from '@/stores/up3';
import { useMediaStore } from '@/stores/media';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
@ -98,22 +97,16 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BER
idUp3: 0,
media : "Twitter"
})
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 media = useMediaStore().getData() ? useMediaStore().getData() : "Twitter"
const filterData = (data: any) => {
const { posko, uid, up3, media } = data;
const dateValue = data.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3,
media
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),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
media : media ? media.id : "Twitter"
})
onResult(queryResult => {
if (queryResult.data != undefined) {
@ -126,12 +119,7 @@ watch(detected, () => {
onError((error) => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()
}
const filters = ref()
filters.setConfig({
type: 'type-16',
})
})
</script>