From 64a49c4f848984a2658ef8ed80f1f89dc46625db Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Wed, 1 Nov 2023 13:37:11 +0700
Subject: [PATCH] create more filters type

---
 src/assets/css/style.css                  | 27 +++++++++++++
 src/components/DatePicker.vue             | 32 +++++++++++----
 src/components/Form/FiltersType/Type2.vue | 48 ++++++++++++-----------
 src/components/Form/FiltersType/Type3.vue | 34 ++++++++++++++++
 src/components/Form/FiltersType/Type4.vue | 42 ++++++++++++++++++++
 src/components/Form/FiltersType/Type5.vue | 32 +++++++++++++++
 src/components/Form/FiltersType/Type6.vue | 42 ++++++++++++++++++++
 src/components/Form/FiltersType/Type7.vue | 46 ++++++++++++++++++++++
 src/components/Pages/MenuProvider.vue     | 13 +++++-
 src/router/index.ts                       |  2 +-
 10 files changed, 286 insertions(+), 32 deletions(-)
 create mode 100644 src/components/Form/FiltersType/Type3.vue
 create mode 100644 src/components/Form/FiltersType/Type4.vue
 create mode 100644 src/components/Form/FiltersType/Type5.vue
 create mode 100644 src/components/Form/FiltersType/Type6.vue
 create mode 100644 src/components/Form/FiltersType/Type7.vue

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f0089da..8239630 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1450,6 +1450,14 @@ select {
   scroll-padding-bottom: 0.5rem;
 }
 
+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1506,6 +1514,16 @@ select {
   gap: 0.75rem;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -1519,6 +1537,11 @@ select {
   row-gap: 0.125rem;
 }
 
+.gap-x-1\.5 {
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -2036,6 +2059,10 @@ select {
   text-align: start;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 15dceac..14bd28b 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -10,12 +10,28 @@
 </script>
 
 <template>
-  <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 class="flex">
+    <vue-tailwind-datepicker 
+      v-model="dateValue"
+      :formatter="formatter"
+      separator="   s/d   "
+      :shortcuts="false"
+      :auto-apply="false"
+      v-slot="{ value, placeholder }"
+      overlay
+    >
+      <div class="flex">
+        <div class="flex-1">
+          <button
+            type="button"
+            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"
+          >
+            <span class="text-gray-900">
+              {{ value || placeholder }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </vue-tailwind-datepicker>
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 72d45e1..cbb3577 100644
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,38 +1,42 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.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>
+
+    <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>
 
-    <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"
+      >Unit Layanan 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 Layanan Pelanggan</option>
-      </select>
-    </div>
+    <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-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode</label>
+
+    <div class="grid grid-cols-2 gap-x-2">
+      <Select placeholder="Juli" />
+      <Select placeholder="2023" />
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
new file mode 100644
index 0000000..d2fe98f
--- /dev/null
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -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-bold 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"
+      >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-bold 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-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
new file mode 100644
index 0000000..09ab030
--- /dev/null
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -0,0 +1,42 @@
+<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">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"
+      >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-bold 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-bold mb-2 sm:mb-0 block"
+      >Jenis Laporan:</label
+    >
+
+    <Select placeholder="Laporan Berulang Unit" />
+  </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>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
new file mode 100644
index 0000000..1ebc58e
--- /dev/null
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -0,0 +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">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"
+      >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-bold 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>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
new file mode 100644
index 0000000..7fb4f77
--- /dev/null
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -0,0 +1,42 @@
+<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">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"
+      >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-bold 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>
+
+    <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>
+
+    <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>
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
new file mode 100644
index 0000000..a5ea2cd
--- /dev/null
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -0,0 +1,46 @@
+<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">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"
+      >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-bold 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>
+
+    <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>
+
+    <div class="flex flex-column">
+      <Select placeholder="Semua Posko" />
+
+      <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>
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 4146f65..3aa5895 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -7,6 +7,12 @@
         <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>
 
             <slot></slot>
@@ -19,7 +25,12 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import Filters from '../Form/Filters.vue'
 import Type1 from '../Form/FiltersType/Type1.vue';
-
+import Type2 from '../Form/FiltersType/Type2.vue';
+import Type3 from '../Form/FiltersType/Type3.vue';
+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';
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()
diff --git a/src/router/index.ts b/src/router/index.ts
index 514ceca..9de9549 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -69,7 +69,7 @@ export const routes: RouteRecordRaw[] = [
             children: [
               {
                 path: '1',
-                name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1',
+                name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1 | sa',
                 component: GangguanTable1,
                 props: true
               },