Refactor filters and input validation

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>

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"