Merge pull request #186 from devforth/fix-boolean-filter-singleselect

fix: add support for singleselect filter for boolean fields

Author: ivictbor

adminforth/modules/configValidator.ts

@@ -458,7 +458,7 @@ export default class ConfigValidator implements IConfigValidator {
             debounceTimeMs: 10,
             substringSearch: true,
           };
-          if (col.enum || col.foreignResource) {
+          if (col.enum || col.foreignResource || col.type === AdminForthDataTypes.BOOLEAN) {
             col.filterOptions.multiselect = true;
           }
         } else {
@@ -483,8 +483,8 @@ export default class ConfigValidator implements IConfigValidator {
               errors.push(`Resource "${res.resourceId}" column "${col.name}" has multiselectFilter in filterOptions that is not boolean`);
             }
 
-            if (!col.enum && !col.foreignResource) {
-              errors.push(`Resource "${res.resourceId}" column "${col.name}" multiselectFilter in filterOptions should be set only for enum or foreign resource columns`);
+            if (!col.enum && !col.foreignResource && col.type !== AdminForthDataTypes.BOOLEAN) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" multiselectFilter in filterOptions should be set only for enum, foreign resource or boolean columns`);
             }
           } else if (col.enum || col.foreignResource) {
             col.filterOptions.multiselect = true;

adminforth/spa/src/components/Filters.vue

@@ -28,10 +28,10 @@
               class="w-full"
               :options="columnOptions[c.name] || []"
               @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || []"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
             />
             <Select
-              multiple
+              :multiple="c.filterOptions.multiselect"
               class="w-full"
               v-else-if="c.type === 'boolean'"
               :options="[
@@ -40,8 +40,10 @@
                 // if field is not required, undefined might be there, and user might want to filter by it
                 ...(c.required ? [] : [ { label: $t('Unset'), value: undefined } ])
               ]"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'in', value: $event.length ? $event : undefined  })"
-              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+              @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event })"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value !== undefined
+                ? filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value
+                : (c.filterOptions.multiselect ? [] : '')"
             />
 
             <Select
@@ -50,7 +52,7 @@
               v-else-if="c.enum"
               :options="c.enum"
               @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || []"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
             />
 
             <Input
@@ -165,12 +167,6 @@ const columnOptions = computedAsync(async () => {
           },
         });
         ret[column.name] = list.items;
-        if (!column.filterOptions.multiselect) {
-          ret[column.name].push({
-            label: t('Unset'),
-            value: '',
-          });
-        }
       }
     })
   );