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

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

@@ -1,50 +1,51 @@
<script setup lang="ts">
import Select from '@/components/Select.vue';
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: '',
})
const data = ref({
periode: '',
})
</script>
<template>
<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="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">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">Unit PLN:</label>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit PLN:</label>
<div class="flex flex-col gap-y-1">
<Select placeholder="Pilih Unit" />
<div class="flex flex-col gap-y-1">
<Select placeholder="Pilih Unit" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select placeholder="Pilih Area" />
<Select placeholder="Pilih Rayon" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select placeholder="Pilih Area" />
<Select placeholder="Pilih Rayon" />
</div>
</div>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Status:</label>
<Select placeholder="Pilih Status" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">SLA:</label>
<Select placeholder="Pilih Durasi SLA" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Pencarian:</label>
<InputWithFilter placeholder="cari report" :filters="[{ id: 1, title: 'Pilih Jenis' }]" />
</div>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="filter-input-label">Status:</label>
<Select placeholder="Pilih Status"/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="filter-input-label"
>SLA:</label
>
<Select placeholder="Pilih Durasi SLA" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="filter-input-label">Pencarian:</label>
<InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Pilih Jenis'}]" />
</div>
</template>