From 91e01ca8de3f7ddfb74f9549cd2cbb0a0fc895d1 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Fri, 1 Mar 2024 15:08:42 +0700
Subject: [PATCH] Refactor filters and input validation

---
 src/components/Form/FiltersType/Type7.vue     |  67 +++++--
 src/components/Form/InputWithSuffix.vue       |  15 +-
 src/components/InputText.vue                  |  32 +++-
 src/components/Navigation/Header.vue          | 181 ++++++++++--------
 .../Daftar/DGangguan_RecoveryTime.vue         |  18 +-
 5 files changed, 201 insertions(+), 112 deletions(-)

diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index 187548a..43efe42 100755
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -1,4 +1,11 @@
 <script setup lang="ts">
+interface SlaOption {
+  id: number
+  name: string
+  min: string
+  max: string
+}
+
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithSuffix from '../InputWithSuffix.vue'
@@ -13,6 +20,32 @@ import {
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
 
+const props = defineProps({
+  slaOptions: {
+    type: Array as () => SlaOption[],
+    default: [
+      {
+        id: 1,
+        name: 'Dibawah  / Sesuai SLA (<= 45 menit)',
+        min: '1',
+        max: '45'
+      },
+      {
+        id: 2,
+        name: 'Melebihi SLA (> 45 menit)',
+        min: '1',
+        max: `${99999 * 60 * 24}`
+      }
+    ]
+  }
+})
+
+const sla = props.slaOptions.map((item: any) => {
+  return {
+    id: item.id,
+    name: item.name
+  }
+})
 const emit = defineEmits(['update:filters'])
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -20,6 +53,7 @@ const poskoPlaceholder = 'Semua Posko'
 const up3 = ref({ id: 0, name: up3Placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
 const posko = ref({ id: 0, name: poskoPlaceholder })
+const isHidden = ref(false)
 const totalMin = ref('1 Menit')
 const totalMax = ref('5 Menit')
 
@@ -56,16 +90,6 @@ const setPosko = (value: any) => {
   selectedPosko(value)
   data.value.posko = value
 }
-const sla = [
-  {
-    id: 1,
-    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
-  },
-  {
-    id: 2,
-    name: 'Melebihi SLA (> 45 menit)'
-  }
-]
 
 const setMin = (value: any) => {
   console.log(value)
@@ -81,18 +105,21 @@ const changeDuration = (value: any) => {
   if (value.id === 0) {
     setMin('1')
     setMax('5')
-    console.log('Durasi Menit')
+
     triggerInput.value = false
+    isHidden.value = false
   } else if (value.id === 1) {
-    setMin('1')
-    setMax('45')
-    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    setMin(props.slaOptions[0].min)
+    setMax(props.slaOptions[0].max)
+
     triggerInput.value = true
+    isHidden.value = true
   } else {
-    setMin('45')
-    setMax(99999 * 60 * 24)
+    setMin(props.slaOptions[1].min)
+    setMax(props.slaOptions[1].max)
+
     triggerInput.value = true
-    console.log('Melebihi SLA (> 45 menit)')
+    isHidden.value = true
   }
 }
 watch(data, (newValue) => {
@@ -150,10 +177,10 @@ onMounted(() => {
     <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`" />
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5" :class="[isHidden ? 'hidden' : '']">
+        <InputWithSuffix :value="`${data.minTime} Menit`" @update:text="setMin($event)" />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix :value="`${data.maxTime} Menit`" />
+        <InputWithSuffix :value="`${data.maxTime} Menit`" @update:text="setMax($event)" />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
index 6c85be8..2a6ad8c 100755
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue'
+
 const props = defineProps({
   placeholder: {
     type: String,
@@ -29,12 +31,23 @@ const handleBlur = (e: any) => {
 const handleFocus = (e: any) => {
   e.target.value = e.target.value.replace(/[^0-9.]/g, '')
 }
+
+const emit = defineEmits(['update:text'])
+const text = ref(props.value)
+
+watch(text, (val) => {
+  const validatedText = val.replace(/[^0-9.]/g, '')
+
+  if (parseInt(validatedText)) {
+    emit('update:text', validatedText)
+  }
+})
 </script>
 
 <template>
   <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
-      :value="props.value"
+      v-model="text"
       autocomplete="off"
       type="text"
       :placeholder="placeholder"
diff --git a/src/components/InputText.vue b/src/components/InputText.vue
index d1ecbd8..daacb06 100755
--- a/src/components/InputText.vue
+++ b/src/components/InputText.vue
@@ -43,16 +43,32 @@ const switchInputType = () => {
 
 <template>
   <div :class="['relative w-full overflow-hidden rounded-lg bg-gray-200 ', className]">
-    <input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" @input="updateValue($event)"
-      :disabled="disabled" :readonly="readonly" :class="[
+    <input
+      autocomplete="off"
+      :type="inputType"
+      :placeholder="placeholder"
+      :value="value"
+      @input="updateValue($event)"
+      :disabled="disabled"
+      :readonly="readonly"
+      :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 @click="switchInputType" v-if="type == 'password'"
-      class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
-      <svg width="20" height="20" viewBox="0 0 20 20"
-        :class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
+      ]"
+    />
+    <span
+      @click="switchInputType"
+      v-if="type == 'password'"
+      class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit"
+    >
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        :class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']"
+      >
         <path
-          d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
+          d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z"
+        />
       </svg>
     </span>
   </div>
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
index 3c4052c..dbd7386 100755
--- a/src/components/Navigation/Header.vue
+++ b/src/components/Navigation/Header.vue
@@ -1,15 +1,9 @@
-
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/auth'
 import { useUserStore } from '@/stores/user'
 import { useCommandPalattesStore } from '@/stores/command'
 import { useMenuStore } from '@/stores/menu'
-import {
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-} from '@headlessui/vue'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
 import PictureInitial from '@/components/PictureInitial.vue'
 import { useDialogStore } from '@/stores/dialog'
@@ -25,85 +19,108 @@ const dialog = useDialogStore()
 const openSideBar = () => menu.toggleSidebar()
 
 const showDialogLogout = () => {
-    dialog.type = 'error'
-    dialog.title = 'Logout dari akun?'
-    dialog.content = 'Apakah Anda sudah yakin akan logout dari akun ini?'
-    dialog.cancelText = 'Batalkan'
-    dialog.confirmText = 'Ya, logout'
-    dialog.showCancelButton = true
-    dialog.onConfirm = () => {
-        auth.logout()
-        window.location.href = '/login'
-    }
-    dialog.open = true
+  dialog.type = 'error'
+  dialog.title = 'Logout dari akun?'
+  dialog.content = 'Apakah Anda sudah yakin akan logout dari akun ini?'
+  dialog.cancelText = 'Batalkan'
+  dialog.confirmText = 'Ya, logout'
+  dialog.showCancelButton = true
+  dialog.onConfirm = () => {
+    auth.logout()
+    window.location.href = '/login'
+  }
+  dialog.open = true
 }
 </script>
 
-
 <template>
-    <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 md:ml-80">
-        <button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 md:hidden" @click="openSideBar">
-            <span class="sr-only">Open sidebar</span>
-            <IconBars3 class="w-6 h-6 fill-gray-600" />
+  <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 md:ml-80">
+    <button
+      type="button"
+      class="px-4 text-gray-500 focus:outline-none focus:ring-0 md:hidden"
+      @click="openSideBar"
+    >
+      <span class="sr-only">Open sidebar</span>
+      <IconBars3 class="w-6 h-6 fill-gray-600" />
+    </button>
+    <RouterLink to="/home" class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
+      <img class="w-auto h-11" :src="IconApp" alt="PLN" />
+    </RouterLink>
+    <div class="flex justify-end w-full px-4">
+      <div class="flex items-center ml-4 md:ml-6">
+        <button
+          @click="command.showCommandPalettes"
+          type="button"
+          class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0"
+        >
+          <span class="sr-only">Search</span>
+          <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
+          <span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md"
+            >Cari menu</span
+          >
         </button>
-        <RouterLink to="/home" class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
-            <img class="w-auto h-11" :src="IconApp" alt="PLN" />
-        </RouterLink>
-        <div class="flex justify-end w-full px-4">
-            <div class="flex items-center ml-4 md:ml-6">
-                <button @click="command.showCommandPalettes" type="button"
-                    class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
-                    <span class="sr-only">Search</span>
-                    <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
-                    <span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span>
+
+        <!-- Profile dropdown -->
+        <Menu as="div" class="relative ml-1">
+          <div>
+            <MenuButton
+              class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1"
+            >
+              <span class="sr-only">Open user menu</span>
+              <PictureInitial
+                size-class="w-8 h-8"
+                background-class="bg-secondary-100"
+                font-class="text-xs font-bold text-primary-500"
+                :name="user.user_name"
+              />
+              <span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
+                {{ user.user_name }}
+              </span>
+            </MenuButton>
+          </div>
+          <transition
+            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="transform scale-95 opacity-0"
+            enter-to-class="transform scale-100 opacity-100"
+            leave-active-class="transition duration-75 ease-in"
+            leave-from-class="transform scale-100 opacity-100"
+            leave-to-class="transform scale-95 opacity-0"
+          >
+            <MenuItems class="container-menu-item">
+              <div class="container-menu-profile group">
+                <div class="flex items-center">
+                  <div>
+                    <PictureInitial
+                      class-name="inline-block"
+                      size-class="w-9 h-9"
+                      background-class="bg-secondary-100"
+                      font-class="text-xs font-normal font-semibold text-primary-500"
+                      :name="user.user_name"
+                    />
+                  </div>
+                  <div class="ml-3 space-y-1">
+                    <p class="text-sm font-medium text-primary-50">
+                      {{ user.user_name }}
+                    </p>
+                    <p class="text-xs font-normal text-primary-50">
+                      {{ user.user_access }}
+                    </p>
+                    <p class="text-xs font-normal text-primary-50">UID Jakarta Raya</p>
+                  </div>
+                </div>
+              </div>
+              <MenuItem v-slot="{ active }">
+                <button
+                  @click="showDialogLogout"
+                  :class="[active ? 'menu-item-active' : 'menu-item']"
+                >
+                  Log out
                 </button>
-
-                <!-- Profile dropdown -->
-                <Menu as="div" class="relative ml-1">
-                    <div>
-                        <MenuButton
-                            class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1">
-                            <span class="sr-only">Open user menu</span>
-                            <PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
-                                font-class="text-xs font-bold text-primary-500" :name="user.user_name" />
-                            <span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
-                                {{ user.user_name }}
-                            </span>
-                        </MenuButton>
-                    </div>
-                    <transition enter-active-class="transition duration-100 ease-out"
-                        enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
-                        leave-active-class="transition duration-75 ease-in"
-                        leave-from-class="transform scale-100 opacity-100" leave-to-class="transform scale-95 opacity-0">
-
-                        <MenuItems class="container-menu-item">
-                            <div class="container-menu-profile group">
-                                <div class="flex items-center">
-                                    <div>
-                                        <PictureInitial class-name="inline-block" size-class="w-9 h-9"
-                                            background-class="bg-secondary-100"
-                                            font-class="text-xs font-normal font-semibold text-primary-500"
-                                            :name="user.user_name" />
-                                    </div>
-                                    <div class="ml-3 space-y-1">
-                                        <p class="text-sm font-medium text-primary-50 ">
-                                            {{ user.user_name }}
-                                        </p>
-                                        <p class="text-xs font-normal text-primary-50">
-                                            {{ user.user_access }}
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <MenuItem v-slot="{ active }">
-                            <button @click="showDialogLogout" :class="[active ? 'menu-item-active' : 'menu-item']">
-                                Log out
-                            </button>
-                            </MenuItem>
-                        </MenuItems>
-                    </transition>
-                </Menu>
-            </div>
-        </div>
+              </MenuItem>
+            </MenuItems>
+          </transition>
+        </Menu>
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index 55af736..d9d22e1 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -1,6 +1,22 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type7 @update:filters="(value) => (filters = value)" />
+    <Type7
+      @update:filters="(value) => (filters = value)"
+      :sla-options="[
+        {
+          id: 1,
+          name: 'Dibawah  / Sesuai SLA (<= 3 Jam)',
+          min: '1',
+          max: '180'
+        },
+        {
+          id: 2,
+          name: 'Melebihi SLA (> 3 Jam)',
+          min: '1',
+          max: `${99999 * 60 * 24}`
+        }
+      ]"
+    />
   </Filters>
 
   <div id="data">