Refactor code for improved performance and readability
This commit is contained in:
kur0nek-o
@ -1,11 +1,15 @@
|
||||
<!-- ss -->
|
||||
<script setup lang="ts">
|
||||
// components
|
||||
import Button from '@/components/Button.vue'
|
||||
// icons
|
||||
import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
|
||||
|
||||
const emit = defineEmits(['runSearch','resetForm'])
|
||||
defineProps({
|
||||
reportButton: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['runSearch', 'resetForm', 'runReport'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -26,10 +30,12 @@ const emit = defineEmits(['runSearch','resetForm'])
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
v-if="reportButton"
|
||||
label="Lihat Laporan"
|
||||
style-type="outline"
|
||||
class-name="bg-white"
|
||||
>
|
||||
@on:click="() => emit('runReport')"
|
||||
>
|
||||
<PhFileText size="18" class="ml-1" weight="regular" />
|
||||
</Button>
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
fetchUid
|
||||
} 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'
|
||||
@ -39,6 +40,7 @@ const setUid = (value: any) => {
|
||||
const setUp3 = (value: any) => {
|
||||
up3.value = value
|
||||
selectedUp3Posko(value)
|
||||
console.log(itemsPosko)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
@ -57,28 +59,39 @@ onMounted(() => {
|
||||
|
||||
<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="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 @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3placeholder" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
: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="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 @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -13,6 +13,7 @@ import {
|
||||
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'
|
||||
@ -20,7 +21,7 @@ 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: "", name: mediaPlaceholder })
|
||||
const media = ref({ id: '', name: mediaPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
@ -53,10 +54,12 @@ const setPosko = (value: any) => {
|
||||
selectedPosko(value)
|
||||
data.value.posko = value
|
||||
}
|
||||
|
||||
const setMedia = (value: any) => {
|
||||
media.value = value
|
||||
data.value.media = value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
@ -116,12 +119,6 @@ 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">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker
|
||||
@update:date-value="
|
||||
(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
"
|
||||
/>
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,15 +2,24 @@
|
||||
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 { onMounted, ref } from 'vue';
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
selectedPosko,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsPosko
|
||||
} from './reference'
|
||||
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 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 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,
|
||||
@ -41,50 +50,63 @@ const setPosko = (value: any) => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
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="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 @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
: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="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 @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}" />
|
||||
<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="data.minJmlLapor" @update:time-value="(value) => {
|
||||
data.minJmlLapor = value
|
||||
}" />
|
||||
<InputNumber
|
||||
:value="data.minJmlLapor"
|
||||
@update:time-value="(value) => (data.minJmlLapor = value)"
|
||||
/>
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
|
||||
data.maxJmlLapor = value
|
||||
}" />
|
||||
<InputNumber
|
||||
:value="data.maxJmlLapor"
|
||||
@update:time-value="(value) => (data.maxJmlLapor = value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,18 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
||||
import { useTotalDuration } from '@/stores/totalDuration';
|
||||
import InputWithSuffix from '../InputWithSuffix.vue'
|
||||
import { useTotalDuration } from '@/stores/totalDuration'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
selectedPosko,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsPosko
|
||||
} from './reference'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
|
||||
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 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,
|
||||
@ -21,6 +29,7 @@ const data = ref({
|
||||
minTime: useTotalDuration().getDataMin().split(' ')[0],
|
||||
maxTime: useTotalDuration().getDataMax().split(' ')[0]
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
@ -49,14 +58,12 @@ const sla = [
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 45 menit)'
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
const setMin = (value: any) => {
|
||||
console.log(value)
|
||||
data.value.minTime = value
|
||||
useTotalDuration().setDataMin(value)
|
||||
|
||||
}
|
||||
const setMax = (value: any) => {
|
||||
data.value.maxTime = value
|
||||
@ -65,17 +72,17 @@ const setMax = (value: any) => {
|
||||
const triggerInput = ref(false)
|
||||
const changeDuration = (value: any) => {
|
||||
if (value.id === 0) {
|
||||
setMin("1")
|
||||
setMax("5")
|
||||
setMin('1')
|
||||
setMax('5')
|
||||
console.log('Durasi Menit')
|
||||
triggerInput.value = false
|
||||
} else if (value.id === 1) {
|
||||
setMin("1")
|
||||
setMax("45")
|
||||
setMin('1')
|
||||
setMax('45')
|
||||
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
|
||||
triggerInput.value = true
|
||||
} else {
|
||||
setMin("45")
|
||||
setMin('45')
|
||||
setMax(99999 * 60 * 24)
|
||||
triggerInput.value = true
|
||||
console.log('Melebihi SLA (> 45 menit)')
|
||||
@ -84,38 +91,50 @@ const changeDuration = (value: any) => {
|
||||
watch(data, (newValue) => {
|
||||
emit('update:filters', newValue)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
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="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 @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
: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="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 @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -125,12 +144,9 @@ onMounted(() => {
|
||||
<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="`${data.minTime} Menit`"
|
||||
/>
|
||||
<InputWithSuffix :value="`${data.minTime} Menit`" />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputWithSuffix
|
||||
:value="`${data.maxTime} Menit`"/>
|
||||
<InputWithSuffix :value="`${data.maxTime} Menit`" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
@ -16,15 +16,16 @@ const props = defineProps({
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: ''
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:timeValue'])
|
||||
const timeValue = ref(1)
|
||||
|
||||
watch(timeValue, (newValue) => {
|
||||
emit('update:timeValue', newValue)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -38,8 +39,8 @@ watch(timeValue, (newValue) => {
|
||||
: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, '')"
|
||||
onblur="this.value = parseInt(this.value) ? this.value : 1"
|
||||
oninput="this.value = parseInt(this.value) ? this.value.replace(/[^0-9.]/g, '') : 1"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
@ -18,25 +16,25 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: '1 Menit'
|
||||
}
|
||||
|
||||
})
|
||||
const handleInput = (e :any) => {
|
||||
e.value = e.value.replace(/[^0-9.]/g, '')
|
||||
|
||||
const handleInput = (e: any) => {
|
||||
e.target.value = e.target.value.replace(/[^0-9.]/g, '')
|
||||
}
|
||||
const handleBlur = (e :any) => {
|
||||
e.value = e.value ? e.value + ' Menit' : ''
|
||||
|
||||
const handleBlur = (e: any) => {
|
||||
e.target.value = e.target.value ? e.target.value + ' Menit' : ''
|
||||
}
|
||||
const handleFocus = (e:any) => {
|
||||
e.value = e.value.replace(/[^0-9.]/g, '')
|
||||
|
||||
const handleFocus = (e: any) => {
|
||||
e.target.value = e.target.value.replace(/[^0-9.]/g, '')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
|
||||
class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<input
|
||||
:value="props.value"
|
||||
:value="props.value"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
@ -44,9 +42,9 @@ const handleFocus = (e:any) => {
|
||||
inputmode="numeric"
|
||||
pattern="[0-9.]*"
|
||||
:disabled="disabled"
|
||||
@oninput="handleInput($event)"
|
||||
@onblur="handleBlur($event)"
|
||||
@onfocus="handleFocus($event)"
|
||||
@input="handleInput($event)"
|
||||
@blur="handleBlur($event)"
|
||||
@focus="handleFocus($event)"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user