fix: components

resources/js/components/AppDateRangeFilter.vue

@@ -10,15 +10,6 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  url: {
-    type: String,
-    required: true,
-  },
-  refreshData: {
-    type: Array,
-    default: [],
-    required: false,
-  },
 })
 
 const initialFilter = computed(() => {
@@ -34,6 +25,14 @@ const initialFilter = computed(() => {
   }
 })
 
+const removeParams = (...params) => {
+  const urlParams = new URLSearchParams(location.search)
+
+  params.forEach((value) => urlParams.delete(value))
+
+  history.replaceState({}, '', `${location.pathname}?${urlParams}`)
+}
+
 const dates = ref(initialFilter.value)
 
 watch(dates, (value) => {
@@ -47,17 +46,14 @@ watch(dates, (value) => {
     var end_date = null
   }
 
-  Inertia.get(
-    props.url,
-    pickBy({
+  removeParams('start_date', 'end_date')
+
+  Inertia.reload({
+    data: pickBy({
       start_date,
       end_date,
     }),
-    {
-      preserveState: true,
-      only: [...props.refreshData],
-    }
-  )
+  })
 })
 </script>
 

resources/js/components/AppDropdown.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 const props = defineProps({
   label: {
     type: String,
-    required: true,
+    required: false,
   },
   labelClass: {
     type: String,
@@ -59,9 +59,11 @@ const ariaDescribedbyLabel = computed(
 )
 
 const selectedDropdownLabel = (value) => {
-  const result = props.options.find(
-    (option) => option[props.optionValue] == value
-  )
+  const result = props.options.find((option) => {
+    if (option !== null) {
+      return option[props.optionValue] == value
+    }
+  })
 
   if (result) {
     return result[props.optionLabel]
@@ -92,14 +94,6 @@ const selectedDropdownLabel = (value) => {
         <div v-if="slotProps.value">
           {{ selectedDropdownLabel(slotProps.value) }}
         </div>
-
-        <div v-else>
-          {{ slotProps.placeholder }}
-        </div>
-      </template>
-
-      <template #option="{ option, index }">
-        <slot name="option" :option="option" :index="index" />
       </template>
     </Dropdown>
 

resources/js/components/AppDropdownFilter.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { pickBy } from 'lodash'
+import AppDropdown from '@/components/AppDropdown.vue'
+
+defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+})
+
+const removeParams = (...params) => {
+  const urlParams = new URLSearchParams(location.search)
+
+  params.forEach((value) => urlParams.delete(value))
+
+  history.replaceState({}, '', `${location.pathname}?${urlParams}`)
+}
+
+const status = ref()
+
+watch(status, (status) => {
+  removeParams('status')
+
+  Inertia.reload({
+    data: pickBy({
+      status,
+    }),
+  })
+})
+</script>
+
+<template>
+  <AppDropdown placeholder="status" :options="options" v-model="status" />
+</template>

resources/js/components/AppSearchFilter.vue

@@ -7,23 +7,23 @@ const props = defineProps({
   initialSearch: {
     required: true,
   },
-  url: {
-    type: String,
-    required: true,
-  },
-  refreshData: {
-    type: Array,
-    default: [],
-    required: false,
-  },
 })
 
+const removeParams = (...params) => {
+  const urlParams = new URLSearchParams(location.search)
+
+  params.forEach((value) => urlParams.delete(value))
+
+  history.replaceState({}, '', `${location.pathname}?${urlParams}`)
+}
+
 const search = ref(props.initialSearch)
 
-watch(search, (value) => {
-  Inertia.get(props.url, pickBy({ search: value }), {
-    preserveState: true,
-    only: [...props.refreshData],
+watch(search, (search) => {
+  removeParams('search')
+
+  Inertia.reload({
+    data: pickBy({ search }),
   })
 })
 </script>