Merge pull request #164 from devforth/filter-singleselect

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

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md

@@ -704,3 +704,29 @@ export default {
 ```
 `debounceTimeMs` field dictates how long (in milliseconds) to wait between inputs to send updated data request. By increasing this value, you can reduce the amount of requests set to backend. Default value for this field is set to 10ms.
 `substringSearch` sets what comparison operator to use for text field. By default this field is set to `true`, which results in using case-insensitive `ILIKE` operator, that will look for records that have filter string anywhere inside field value. Setting this `substringSearch` to `false` will result in using more strict `EQ` operator, that will look for exact full-string matches.
+
+You can also disabled multiselect on filter page for enumerator columns or foreign resource columns by adding `multiselect` field:
+
+```typescript title="./resources/adminuser.ts"
+export default {
+      name: 'adminuser',
+      columns: [
+        ...
+        {
+          name: "parentUserId",
+          foreignResource: {
+            resourceId: "users",
+          },
+//diff-add
+          filterOptions: {
+//diff-add
+            multiselect: false,
+//diff-add
+          },
+        },
+      ],
+    },
+    ...
+  ],
+```
+This way, multiselect field displayed on filter page will be replaced with a default select field allowing only only value to be selected.

adminforth/modules/configValidator.ts

@@ -454,6 +454,9 @@ export default class ConfigValidator implements IConfigValidator {
             debounceTimeMs: 10,
             substringSearch: true,
           };
+          if (col.enum || col.foreignResource) {
+            col.filterOptions.multiselect = true;
+          }
         } else {
           if (col.filterOptions.debounceTimeMs !== undefined) {
             if (typeof col.filterOptions.debounceTimeMs !== 'number') {
@@ -470,6 +473,18 @@ export default class ConfigValidator implements IConfigValidator {
           } else {
             col.filterOptions.substringSearch = true;
           }
+
+          if (col.filterOptions.multiselect !== undefined) {
+            if (typeof col.filterOptions.multiselect !== 'boolean') {
+              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`);
+            }
+          } else if (col.enum || col.foreignResource) {
+            col.filterOptions.multiselect = true;
+          }
         }
 
         col.showIn = this.validateAndNormalizeShowIn(resInput, inCol, errors, warnings);

adminforth/spa/src/components/Filters.vue

@@ -24,11 +24,11 @@
 
             <Select
               v-if="c.foreignResource"
-              multiple
+              :multiple="c.filterOptions.multiselect"
               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.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 || []"
             />
             <Select
               multiple
@@ -44,13 +44,13 @@
               :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
 
-            <Select 
-              multiple
+            <Select
+              :multiple="c.filterOptions.multiselect"
               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.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 || []"
             />
 
             <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.filterOptions.multiselect) {
+          ret[column.name].push({
+            label: t('Unset'),
+            value: '',
+          });
+        }
       }
     })
   );

adminforth/types/Common.ts

@@ -815,6 +815,10 @@ export interface AdminForthResourceColumnInputCommon {
      * If false - will force EQ operator for filter instead of ILIKE.
      */
     substringSearch?: boolean,
+    /**
+     * Boolean value that determines what select input type to display on filter page.
+     */
+    multiselect?: boolean,
   },
 
   /**