fix: add option to turn enum and foreign resource filter into singleselect

Author: Astaldos

adminforth/modules/configValidator.ts

@@ -664,6 +664,18 @@ export default class ConfigValidator implements IConfigValidator {
           }
         }
 
+        if (col.multiselectFilter !== undefined) {
+          if (typeof col.multiselectFilter !== 'boolean') {
+            errors.push(`Resource "${res.resourceId}" column "${col.name}" has multiselectFilter that is not boolean`);
+          }
+
+          if (!col.enum && !col.foreignResource) {
+            errors.push(`Resource "${res.resourceId}" column "${col.name}" multiselectFilter should be set only for enum or foreign resource columns`);
+          }
+        } else if (col.enum || col.foreignResource) {
+          col.multiselectFilter = true;
+        }
+
         if (inCol.inputPrefix || inCol.inputSuffix) {
           if (![AdminForthDataTypes.DECIMAL, AdminForthDataTypes.FLOAT, AdminForthDataTypes.INTEGER, AdminForthDataTypes.STRING, undefined].includes(col.type)) {
             if (inCol.type === AdminForthDataTypes.JSON) {

adminforth/spa/src/components/Filters.vue

@@ -24,11 +24,11 @@
 
             <Select
               v-if="c.foreignResource"
-              multiple
+              :multiple="c.multiselectFilter"
               class="w-full"
               :options="columnOptions[c.name] || []"
-              @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.multiselectFilter ? 'in' : 'eq', value: c.multiselectFilter ? ($event.length ? $event : undefined) : $event || undefined })"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.multiselectFilter ? 'in' : 'eq'))?.value || []"
             />
             <Select
               multiple
@@ -44,13 +44,13 @@
               :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
 
-            <Select 
-              multiple
+            <Select
+              :multiple="c.multiselectFilter"
               class="w-full"
               v-else-if="c.enum"
               :options="c.enum"
-              @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.multiselectFilter ? 'in' : 'eq', value: c.multiselectFilter ? ($event.length ? $event : undefined) : $event || undefined })"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.multiselectFilter ? 'in' : 'eq'))?.value || []"
             />
 
             <Input
@@ -118,7 +118,8 @@
 </template>
 
 <script setup>
-import { watch, computed } from 'vue'
+import { watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
 import { callAdminForthApi } from '@/utils';
 import { useRouter } from 'vue-router';
@@ -130,6 +131,7 @@ import Select from '@/afcl/Select.vue';
 import debounce from 'debounce';
 
 const filtersStore = useFiltersStore();
+const { t } = useI18n();
 
 
 // props: columns
@@ -163,6 +165,12 @@ const columnOptions = computedAsync(async () => {
           },
         });
         ret[column.name] = list.items;
+        if (!column.multiselectFilter) {
+          ret[column.name].push({
+            label: t('Unset'),
+            value: '',
+          });
+        }
       }
     })
   );

adminforth/types/Common.ts

@@ -803,6 +803,11 @@ export interface AdminForthResourceColumnInputCommon {
    */
   foreignResource?: AdminForthForeignResourceCommon,
 
+  /**
+   * Boolean value that determines what select input type to display on filter page.
+   */
+  multiselectFilter?: boolean,
+
   sortable?: boolean,