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

Refactor form components and remove totalDuration store

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-02-29 13:56:43 +07:00
parent 567ea660c8
commit f913c5f471
3 changed files with 34 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useTotalDuration } from '@/stores/totalDuration'
import {
selectedUid,
selectedUp3Ulp,
@@ -13,7 +12,10 @@ import {
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
const totalMin = ref("1 Menit")
const totalMax = ref("5 Menit")
const setDataMin = (value: any) => totalMin.value = value
const setDataMax = (value: any) => totalMax.value = value
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -65,12 +67,12 @@ const setUlp = (value: any) => {
const setMin = (value: any) => {
console.log(value)
data.value.minTime = value
useTotalDuration().setDataMin(value)
setDataMin(value)
}
const setMax = (value: any) => {
data.value.maxTime = value
useTotalDuration().setDataMax(value)
setDataMax(value)
}
const triggerInput = ref(false)
@@ -101,45 +103,31 @@ 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="block mb-2 font-semibold text-gray-800 sm:mb-0">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="block mb-2 font-semibold text-gray-800 sm:mb-0">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">Unit Layanan Pelanggan:</label>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
<Select
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
:selected="ulp"
/>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" :selected="ulp" />
</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>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
<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">Durasi:</label>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Durasi:</label>
<div class="flex flex-col gap-y-1">
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />