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

implement filters to the menu

Browse Source
This commit is contained in:
kur0nek-o
2023-10-27 20:22:36 +07:00
parent dfcd95ba8a
commit 0f6ed81e48
10 changed files with 211 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Form/Filters.vue
View File

@ -18,13 +18,13 @@
</script>
<template>
<div class="filters rounded-2xl shadow">
<div class="filters rounded-2xl">
<form class="filter-body bg-gray-50 mx-auto space-y-3 p-4">
<form class="filter-body bg-gray-50 mx-auto space-y-3 p-4 rounded-t-2xl">
<slot></slot>
</form>
<div class="filter-footer px-4 py-3 bg-primary-50 flex justify-end">
<div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
<div class="filter-buttons flex gap-3 flex-wrap">
<Button label="Ulangi" style-type="outline" class-name="bg-white">
<PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />

65
src/components/Form/FiltersType/Type1.vue
View File

@ -1,67 +1,32 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Regional:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
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">
<option value="">Semua Regional</option>
</select>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
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">
<option value="">Semua Unit Induk Distribusi/Wilayah</option>
</select>
</div>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
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">
<option value="">Semua Unit Pelaksanaan Pelayanan Pelanggan</option>
</select>
</div>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
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">
<option value="">Semua Unit Layanan Pelanggan</option>
</select>
</div>
<Select placeholder="Semua Posko" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode:</label>
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<div class="flex gap-2">
<div class="flex-1 relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
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">
<option value="">Juli</option>
</select>
</div>
<div class="flex-1 relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
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">
<option value="">2023</option>
</select>
</div>
</div>
<DatePicker />
</div>
</template>
</template>

23
src/components/Form/FiltersType/Type2.vue
View File

@ -1,14 +1,3 @@
<script setup lang="ts">
import { ref } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
const dateValue = ref("")
const formatter = ref({
date: 'DD MMM YYYY',
month: 'MMM'
})
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
@ -45,17 +34,5 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<div class="flex-1 relative w-full rounded-lg bg-gray-200">
<vue-tailwind-datepicker
input-classes="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"
v-model="dateValue"
:formatter="formatter"
separator=" s/d "
:shortcuts="false"
:auto-apply="false"
/>
</div>
</div>
</template>