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

Refactor form layout and styling

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-03-05 09:17:26 +07:00
parent 748b981e63
commit 664b5a1d90
17 changed files with 440 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,40 +102,43 @@ onMounted(() => {
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<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="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
</div>
<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="filter-input-label">Unit Layanan Pelanggan:</label>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" :selected="ulp" />
</div>
<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="filter-input-label">Periode Tanggal:</label>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<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="filter-input-label">Durasi:</label>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Durasi:</label>
<div class="flex flex-col gap-y-1">
<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`" />
<small class="flex items-center">s/d</small>
<InputWithSuffix :value="`${data.maxTime} Menit`" />
<div class="flex flex-col gap-y-1">
<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`" />
<small class="flex items-center">s/d</small>
<InputWithSuffix :value="`${data.maxTime} Menit`" />
</div>
</div>
</div>
</div>
</template>