completed create all filters type
This commit is contained in:
kur0nek-o
parent
4635106e5d
commit
c9e200c174
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "eis",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "eis",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@headlessui/vue": "^1.7.16",
|
||||
|
||||
@ -705,40 +705,6 @@ select {
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
|
||||
/* NavBar */
|
||||
|
||||
.menu-item {
|
||||
@ -1085,6 +1051,10 @@ select {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-2\.5 {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
@ -1200,6 +1170,10 @@ select {
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
.h-\[16px\] {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.h-\[2\.7rem\] {
|
||||
height: 2.7rem;
|
||||
}
|
||||
@ -1208,6 +1182,10 @@ select {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.h-\[7px\] {
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.h-\[calc\(100\%-64px\)\] {
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
@ -1305,6 +1283,10 @@ select {
|
||||
width: 2.25rem;
|
||||
}
|
||||
|
||||
.w-\[16px\] {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.w-\[2\.7rem\] {
|
||||
width: 2.7rem;
|
||||
}
|
||||
@ -1313,6 +1295,10 @@ select {
|
||||
width: 266px;
|
||||
}
|
||||
|
||||
.w-\[7px\] {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
@ -1519,11 +1505,21 @@ select {
|
||||
column-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-x-1\.5 {
|
||||
-moz-column-gap: 0.375rem;
|
||||
column-gap: 0.375rem;
|
||||
}
|
||||
|
||||
.gap-x-2 {
|
||||
-moz-column-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-x-4 {
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-x-6 {
|
||||
-moz-column-gap: 1.5rem;
|
||||
column-gap: 1.5rem;
|
||||
@ -1537,9 +1533,8 @@ select {
|
||||
row-gap: 0.125rem;
|
||||
}
|
||||
|
||||
.gap-x-1\.5 {
|
||||
-moz-column-gap: 0.375rem;
|
||||
column-gap: 0.375rem;
|
||||
.gap-y-1 {
|
||||
row-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
|
||||
@ -1566,6 +1561,12 @@ select {
|
||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
@ -1692,6 +1693,11 @@ select {
|
||||
border-color: rgb(209 213 219 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(75 85 99 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-primary-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
||||
@ -1897,10 +1903,6 @@ select {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.px-0 {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
@ -1946,6 +1948,11 @@ select {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.py-0 {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
@ -2007,6 +2014,10 @@ select {
|
||||
padding-left: 2.75rem;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
@ -2031,6 +2042,10 @@ select {
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.pr-7 {
|
||||
padding-right: 1.75rem;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0px;
|
||||
}
|
||||
@ -2059,10 +2074,6 @@ select {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
@ -2303,6 +2314,11 @@ select {
|
||||
color: rgb(153 153 0 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-primary-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(2 73 90 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-opacity-40 {
|
||||
--tw-text-opacity: 0.4;
|
||||
}
|
||||
@ -2751,10 +2767,20 @@ select {
|
||||
color: rgb(53 124 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:checked .group-checked\:text-primary-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:bg-gray-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:bg-primary-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
|
||||
@ -2787,6 +2813,21 @@ select {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.peer:checked ~ .peer-checked\:border-primary-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.peer:checked ~ .peer-checked\:bg-primary-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.peer:checked ~ .peer-checked\:text-primary-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
@ -3022,12 +3063,36 @@ select {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(2.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0px * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1.25rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(2rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.sm\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 1;
|
||||
}
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
:shortcuts="false"
|
||||
:auto-apply="false"
|
||||
v-slot="{ value, placeholder }"
|
||||
overlay
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
|
||||
<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>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -19,13 +19,13 @@
|
||||
</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">Posko:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<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 Tanggal:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
44
src/components/Form/FiltersType/Type10.vue
Normal file
44
src/components/Form/FiltersType/Type10.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<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-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</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 />
|
||||
</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">
|
||||
<Select placeholder="1" />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<Select placeholder="2" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
48
src/components/Form/FiltersType/Type11.vue
Normal file
48
src/components/Form/FiltersType/Type11.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<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-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</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 />
|
||||
</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>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select placeholder="Durasi Menit" />
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<Select placeholder="1" />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<Select placeholder="2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
49
src/components/Form/FiltersType/Type12.vue
Normal file
49
src/components/Form/FiltersType/Type12.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
||||
</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>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</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 />
|
||||
</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>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select placeholder="Durasi Menit" />
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<InputWithSuffix />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputWithSuffix />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
41
src/components/Form/FiltersType/Type13.vue
Normal file
41
src/components/Form/FiltersType/Type13.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
</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>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</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 />
|
||||
</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">Group By Kode Unit Distribusi:</label>
|
||||
|
||||
<InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
|
||||
</div>
|
||||
</template>
|
||||
34
src/components/Form/FiltersType/Type14.vue
Normal file
34
src/components/Form/FiltersType/Type14.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<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-semibold mb-2 sm:mb-0 block">Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Distribusi/Wilayah"/>
|
||||
</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"
|
||||
>Area:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Area" />
|
||||
</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 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-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
25
src/components/Form/FiltersType/Type15.vue
Normal file
25
src/components/Form/FiltersType/Type15.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import InputWithFilter from '../InputWithFilter.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
</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">Jenis Pengaduan:</label>
|
||||
|
||||
<InlineRadioGroup :radio-items="[{id: 1, title: 'Gangguan', checked: true}, {id: 2, title: 'Keluhan'}]" />
|
||||
</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">Cari Report Number:</label>
|
||||
|
||||
<InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Nama Pelapor'}]" />
|
||||
</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 />
|
||||
</div>
|
||||
</template>
|
||||
38
src/components/Form/FiltersType/Type16.vue
Normal file
38
src/components/Form/FiltersType/Type16.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<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-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block">Media:</label>
|
||||
|
||||
<Select placeholder="Semua Media" />
|
||||
</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 />
|
||||
</div>
|
||||
</template>
|
||||
46
src/components/Form/FiltersType/Type17.vue
Normal file
46
src/components/Form/FiltersType/Type17.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithFilter from '../InputWithFilter.vue'
|
||||
</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">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</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 PLN:</label>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</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">Status:</label>
|
||||
|
||||
<Select placeholder="Pilih Status"/>
|
||||
</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"
|
||||
>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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Cari Report Number:</label>
|
||||
|
||||
<InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Pilih Jenis'}]" />
|
||||
</div>
|
||||
</template>
|
||||
@ -4,19 +4,19 @@
|
||||
|
||||
<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>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
|
||||
|
||||
<Select placeholder="Semua Regional"/>
|
||||
</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>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
</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-semibold mb-2 sm:mb-0 block">Periode</label>
|
||||
|
||||
<div class="grid grid-cols-2 gap-x-2">
|
||||
<Select placeholder="Juli" />
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
|
||||
<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>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</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 Tanggal:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
|
||||
<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>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Jenis Laporan:</label
|
||||
>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
</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 Tanggal:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
|
||||
<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>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -19,13 +19,13 @@
|
||||
</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">Posko:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<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 Tanggal:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
|
||||
<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>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -19,19 +19,19 @@
|
||||
</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">Posko:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<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 Tanggal:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</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">Lapor Ulang:</label>
|
||||
<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">
|
||||
<Select placeholder="1" />
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.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">Unit Induk Distribusi/Wilayah:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -19,27 +20,27 @@
|
||||
</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">Posko:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<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 Tanggal:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</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">Durasi:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
|
||||
|
||||
<div class="flex flex-column">
|
||||
<Select placeholder="Semua Posko" />
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select placeholder="Durasi Menit" />
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<Select placeholder="1" />
|
||||
<InputWithSuffix />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<Select placeholder="2" />
|
||||
<InputWithSuffix />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
26
src/components/Form/FiltersType/Type8.vue
Normal file
26
src/components/Form/FiltersType/Type8.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<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-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
39
src/components/Form/FiltersType/Type9.vue
Normal file
39
src/components/Form/FiltersType/Type9.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
</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>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<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-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</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">Group By Kode Unit Distribusi:</label>
|
||||
|
||||
<InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
|
||||
</div>
|
||||
</template>
|
||||
43
src/components/Form/InlineRadioGroup.vue
Normal file
43
src/components/Form/InlineRadioGroup.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<fieldset>
|
||||
<div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
|
||||
<div
|
||||
v-for="item in radioItems"
|
||||
:key="item.id"
|
||||
class="flex items-center"
|
||||
>
|
||||
<input
|
||||
:id="`${item.id}`"
|
||||
type="radio"
|
||||
name="radio"
|
||||
:checked="item.hasOwnProperty('checked') && item.checked === true"
|
||||
class="h-4 w-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
|
||||
/>
|
||||
<label
|
||||
:for="`${item.id}`"
|
||||
class="ml-3 block text-sm font-medium text-gray-700 peer-checked:text-primary-500"
|
||||
>{{ item.title }}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, type PropType } from 'vue'
|
||||
|
||||
interface Item {
|
||||
id: number;
|
||||
title: string;
|
||||
checked?: boolean;
|
||||
}
|
||||
|
||||
defineProps({
|
||||
radioItems: {
|
||||
type: Array as PropType<Item[]>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
54
src/components/Form/InputWithFilter.vue
Normal file
54
src/components/Form/InputWithFilter.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { PhMagnifyingGlass } from '@phosphor-icons/vue';
|
||||
import { type PropType } from 'vue'
|
||||
|
||||
interface FilterItems {
|
||||
id: number;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filters: {
|
||||
type: Array as PropType<FilterItems[]>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full overflow-hidden rounded-lg">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<PhMagnifyingGlass size="18" class="text-gray-900" weight="regular" />
|
||||
</div>
|
||||
<input
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 pl-10 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 class="absolute inset-y-0 right-0 flex items-center">
|
||||
<label for="filters" class="sr-only">filters</label>
|
||||
<span class="block border border-gray-600 h-5"></span>
|
||||
<select
|
||||
id="filters"
|
||||
name="filters"
|
||||
class="h-full bg-gray-200 text-sm rounded-lg border-transparent py-0 pl-2 pr-7 text-gray-900 focus:outline-0 focus:border-0 focus:ring-0"
|
||||
>
|
||||
<option :key="filter.id" :value="filter.id" v-for="filter in filters">{{ filter.title }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
34
src/components/Form/InputWithSuffix.vue
Normal file
34
src/components/Form/InputWithSuffix.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<input
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9.]*"
|
||||
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
|
||||
onblur="this.value = this.value ? this.value + ' Menit' : ''"
|
||||
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
|
||||
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>
|
||||
</template>
|
||||
@ -29,7 +29,7 @@ const props = defineProps({
|
||||
<component :is="item.icon"
|
||||
:class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']"
|
||||
aria-hidden="true" />
|
||||
{{ item.name.split(' | ')[0] }}
|
||||
{{ item.name }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
@ -72,6 +72,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { writeDataJson } from '@/utils/storage'
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
|
||||
const dialog = useDialogStore()
|
||||
const data = ref<Data1[]>([])
|
||||
@ -146,9 +147,13 @@ const showData = (data: string) => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createDummy()
|
||||
// console.log(readDataJson('data-daftar-1'));
|
||||
const filters = useFiltersStore()
|
||||
|
||||
createDummy()
|
||||
filters.setConfig({
|
||||
type: 'type-15',
|
||||
reportButton: false
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -2,17 +2,26 @@
|
||||
<main
|
||||
class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
|
||||
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageMetaData[0] }}</h1>
|
||||
<h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageTitle }}</h1>
|
||||
</div>
|
||||
<div class="flex-1 mt-2 sm:mt-4 dx-viewport">
|
||||
<Filters :report-button="(typeof pageMetaData[2]) !== 'undefined'" class="mb-4" v-if="pageMetaData.length > 1">
|
||||
<Type1 v-if="pageMetaData[1] == 'type-1'" />
|
||||
<Type2 v-if="pageMetaData[1] == 'type-2'" />
|
||||
<Type3 v-if="pageMetaData[1] == 'type-3'" />
|
||||
<Type4 v-if="pageMetaData[1] == 'type-4'" />
|
||||
<Type5 v-if="pageMetaData[1] == 'type-5'" />
|
||||
<Type6 v-if="pageMetaData[1] == 'type-6'" />
|
||||
<Type7 v-if="pageMetaData[1] == 'type-7'" />
|
||||
<Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.type">
|
||||
<Type1 v-if="filters.config.type == 'type-1'" />
|
||||
<Type2 v-else-if="filters.config.type == 'type-2'" />
|
||||
<Type3 v-else-if="filters.config.type == 'type-3'" />
|
||||
<Type4 v-else-if="filters.config.type == 'type-4'" />
|
||||
<Type5 v-else-if="filters.config.type == 'type-5'" />
|
||||
<Type6 v-else-if="filters.config.type == 'type-6'" />
|
||||
<Type7 v-else-if="filters.config.type == 'type-7'" />
|
||||
<Type8 v-else-if="filters.config.type == 'type-8'" />
|
||||
<Type9 v-else-if="filters.config.type == 'type-9'" />
|
||||
<Type10 v-else-if="filters.config.type == 'type-10'" />
|
||||
<Type11 v-else-if="filters.config.type == 'type-11'" />
|
||||
<Type12 v-else-if="filters.config.type == 'type-12'" />
|
||||
<Type13 v-else-if="filters.config.type == 'type-13'" />
|
||||
<Type14 v-else-if="filters.config.type == 'type-14'" />
|
||||
<Type15 v-else-if="filters.config.type == 'type-15'" />
|
||||
<Type17 v-else-if="filters.config.type == 'type-17'" />
|
||||
</Filters>
|
||||
|
||||
<slot></slot>
|
||||
@ -31,20 +40,22 @@ import Type4 from '../Form/FiltersType/Type4.vue';
|
||||
import Type5 from '../Form/FiltersType/Type5.vue';
|
||||
import Type6 from '../Form/FiltersType/Type6.vue';
|
||||
import Type7 from '../Form/FiltersType/Type7.vue';
|
||||
import Type8 from '../Form/FiltersType/Type8.vue';
|
||||
import Type9 from '../Form/FiltersType/Type9.vue';
|
||||
import Type10 from '../Form/FiltersType/Type10.vue';
|
||||
import Type11 from '../Form/FiltersType/Type11.vue';
|
||||
import Type12 from '../Form/FiltersType/Type12.vue';
|
||||
import Type13 from '../Form/FiltersType/Type13.vue';
|
||||
import Type14 from '../Form/FiltersType/Type14.vue';
|
||||
import Type15 from '../Form/FiltersType/Type15.vue';
|
||||
import Type16 from '../Form/FiltersType/Type16.vue';
|
||||
import Type17 from '../Form/FiltersType/Type17.vue';
|
||||
import { useFiltersStore } from '@/stores/filters';
|
||||
|
||||
// Dapatkan objek route dari vue-router
|
||||
const route = useRoute()
|
||||
|
||||
// Dapatkan nama rute menggunakan computed property
|
||||
const pageMetaData = computed(() => {
|
||||
let result: string[] = [];
|
||||
|
||||
if (typeof route.name === 'string' && route.name.includes(' | ')) {
|
||||
result = route.name.split(' | ');
|
||||
} else if (typeof route.name === 'string') {
|
||||
result = [route.name]
|
||||
}
|
||||
|
||||
return result
|
||||
});
|
||||
const pageTitle = computed(() => route.name)
|
||||
const filters = useFiltersStore()
|
||||
</script>
|
||||
@ -69,9 +69,8 @@ export const routes: RouteRecordRaw[] = [
|
||||
children: [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1 | sa',
|
||||
name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
|
||||
component: GangguanTable1,
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
|
||||
24
src/stores/filters.ts
Normal file
24
src/stores/filters.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { dispatchNotification } from '@/components/Notification'
|
||||
import { readData, removeData, writeData } from '@/utils/storage'
|
||||
import router from '@/router'
|
||||
|
||||
export const useFiltersStore = defineStore('filters', () => {
|
||||
const config = ref({
|
||||
reportButton: false,
|
||||
type: 'type-1'
|
||||
})
|
||||
|
||||
const setConfig = (test: {reportButton: boolean, type: string}) => {
|
||||
config.value = {
|
||||
reportButton: test.reportButton,
|
||||
type: test.type
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
config,
|
||||
setConfig
|
||||
}
|
||||
})
|
||||
@ -6,8 +6,10 @@ import { routes } from '@/router'
|
||||
import type { MenuItemModel } from '@/types/menu'
|
||||
import { splitRoutePath } from '@/utils/texts'
|
||||
import { useCommandPalattesStore } from '@/stores/command'
|
||||
import { useFiltersStore } from './filters'
|
||||
|
||||
export const useMenuStore = defineStore('menu', () => {
|
||||
const filters = useFiltersStore()
|
||||
const route = useRoute()
|
||||
const navigation = ref<MenuItemModel[]>([])
|
||||
const sidebarOpen = ref(false)
|
||||
@ -56,11 +58,16 @@ export const useMenuStore = defineStore('menu', () => {
|
||||
}
|
||||
} else {
|
||||
collapseAllMenu()
|
||||
|
||||
filters.setConfig({
|
||||
type: '',
|
||||
reportButton: false
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const expandCurrentActiveMenu = (): void => {
|
||||
const menuData = convertRouteToMenu(routes.at(0)?.children || [])
|
||||
const menuData = convertRouteToMenu(routes[0]?.children || [])
|
||||
navigation.value = menuData
|
||||
menuSelected.value = router.currentRoute.value.fullPath
|
||||
|
||||
|
||||
@ -1,12 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container h-full p-5 mx-auto">
|
||||
<Filters :reportButton="true" >
|
||||
<Type1/>
|
||||
</Filters>
|
||||
<div>
|
||||
<fieldset>
|
||||
<div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
|
||||
<div
|
||||
v-for="item in radioItems"
|
||||
:key="item.id"
|
||||
class="flex items-center"
|
||||
>
|
||||
<input
|
||||
:id="item.id"
|
||||
type="radio"
|
||||
name="radio"
|
||||
class="h-4 w-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
|
||||
/>
|
||||
<label
|
||||
:for="item.id"
|
||||
class="ml-3 block text-sm font-medium text-gray-700 peer-checked:text-primary-500"
|
||||
>{{ item.title }}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
radioItems: Object
|
||||
})
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user