Merge pull request #338 from devforth/AdminForth/809

fix: filters works even when user enters 0

Author: NoOne7135

adminforth/spa/src/components/Filters.vue

@@ -108,24 +108,24 @@
              :min="getFilterMinValue(c.name)"
              :max="getFilterMaxValue(c.name)"
              :valueStart="getFilterItem({ column: c, operator: 'gte' })"
-             @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
+             @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
              :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-             @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event || undefined })"
+             @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
            />
 
            <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
             <Input
               type="number"
               aria-describedby="helper-text-explanation"
               :placeholder="$t('From')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
+              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
               :modelValue="getFilterItem({ column: c, operator: 'gte' })"
             />
             <Input
               type="number"
               aria-describedby="helper-text-explanation"
               :placeholder="$t('To')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event|| undefined })"
+              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
               :modelValue="getFilterItem({ column: c, operator: 'lte' })"
             />
            </div>
@@ -269,7 +269,7 @@ const onSearchInput = computed(() => {
 function setFilterItem({ column, operator, value }) {
 
   const index = filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);
-  if (value === undefined) {
+  if (value === undefined || value === '' || value === null) {
     if (index !== -1) {
       filtersStore.filters.splice(index, 1);
     }
@@ -284,7 +284,8 @@ function setFilterItem({ column, operator, value }) {
 }
 
 function getFilterItem({ column, operator }) {
-  return filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value || '';
+  const filterValue = filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value;
+  return filterValue !== undefined ? filterValue : '';
 }
 
 async function clear() {

adminforth/spa/src/views/ListView.vue

@@ -3,7 +3,8 @@
     <Teleport to="body">
       <Filters
         :columns="coreStore.resource?.columns"
-        :columnsMinMax="columnsMinMax" :show="filtersShow"
+        :columnsMinMax="columnsMinMax" 
+        :show="filtersShow"
         @hide="filtersShow = false"
       />
     </Teleport>
@@ -448,7 +449,7 @@ watch(() => filtersStore.filters, async (to, from) => {
   const query = {};
   const currentQ = currentQuery();
   filtersStore.filters.forEach(f => {
-    if (f.value) {
+    if (f.value !== undefined && f.value !== null && f.value !== '') {
       query[`filter__${f.field}__${f.operator}`] = encodeURIComponent(JSON.stringify(f.value));
     }
   });