feat: add searchable fields and search functionality for foreign resources

Author: SerVitasik

adminforth/documentation/docs/tutorial/001-gettingStarted.md

@@ -292,6 +292,7 @@ export default {
       name: 'realtor_id',
       foreignResource: {
         resourceId: 'adminuser',
+        searchableFields: ["id", "email"], // fields available for search in filter
       }
     }
   ],

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

@@ -640,6 +640,31 @@ export default {
   ],
 ```
 
+### Searchable fields 
+
+Enable search in filter dropdown by specifying which fields to search:
+
+```typescript title="./resources/apartments.ts"
+export default {
+      name: 'apartments',
+      columns: [
+        ...
+        {
+          name: "realtor_id",
+          foreignResource: {
+            resourceId: 'adminuser',
+//diff-add
+            searchableFields: ["id", "email"], 
+//diff-add
+            searchIsCaseSensitive: true, // default false
+          },
+        },
+      ],
+    },
+    ...
+  ],
+```
+
 ### Polymorphic foreign resources
 
 Sometimes it is needed for one column to be a foreign key for multiple tables. For example, given the following schema:

adminforth/modules/configValidator.ts

@@ -658,6 +658,44 @@ export default class ConfigValidator implements IConfigValidator {
             }
           }
 
+          if (col.foreignResource.searchableFields) {
+            const searchableFields = Array.isArray(col.foreignResource.searchableFields) 
+              ? col.foreignResource.searchableFields 
+              : [col.foreignResource.searchableFields];
+
+            searchableFields.forEach((fieldName) => {
+              if (typeof fieldName !== 'string') {
+                errors.push(`Resource "${res.resourceId}" column "${col.name}" foreignResource.searchableFields must contain only strings`);
+                return;
+              }
+
+              if (col.foreignResource.resourceId) {
+                const targetResource = this.inputConfig.resources.find((r) => r.resourceId === col.foreignResource.resourceId || r.table === col.foreignResource.resourceId);
+                if (targetResource) {
+                  const targetColumn = targetResource.columns.find((targetCol) => targetCol.name === fieldName);
+                  if (!targetColumn) {
+                    const similar = suggestIfTypo(targetResource.columns.map((c) => c.name), fieldName);
+                    errors.push(`Resource "${res.resourceId}" column "${col.name}" foreignResource.searchableFields contains field "${fieldName}" which does not exist in target resource "${targetResource.resourceId || targetResource.table}". ${similar ? `Did you mean "${similar}"?` : ''}`);
+                  }
+                }
+              } else if (col.foreignResource.polymorphicResources) {
+                // For polymorphic resources, check all possible target resources
+                for (const pr of col.foreignResource.polymorphicResources) {
+                  if (pr.resourceId) {
+                    const targetResource = this.inputConfig.resources.find((r) => r.resourceId === pr.resourceId || r.table === pr.resourceId);
+                    if (targetResource) {
+                      const hasField = targetResource.columns.some((targetCol) => targetCol.name === fieldName);
+                      if (!hasField) {
+                        const similar = suggestIfTypo(targetResource.columns.map((c) => c.name), fieldName);
+                        errors.push(`Resource "${res.resourceId}" column "${col.name}" foreignResource.searchableFields contains field "${fieldName}" which does not exist in polymorphic target resource "${pr.resourceId}". ${similar ? `Did you mean "${similar}"?` : ''}`);
+                      }
+                    }
+                  }
+                }
+              }
+            });
+          }
+
           if (col.foreignResource.unsetLabel) {
             if (typeof col.foreignResource.unsetLabel !== 'string') {
               errors.push(`Resource "${res.resourceId}" column "${col.name}" has foreignResource unsetLabel which is not a string`);
@@ -666,6 +704,12 @@ export default class ConfigValidator implements IConfigValidator {
             // set default unset label
             col.foreignResource.unsetLabel = 'Unset';
           }
+
+          // Set default searchIsCaseSensitive
+          if (col.foreignResource.searchIsCaseSensitive === undefined) {
+            col.foreignResource.searchIsCaseSensitive = false;
+          }
+
           const befHook = col.foreignResource.hooks?.dropdownList?.beforeDatasourceRequest;
           if (befHook) {
             if (!Array.isArray(befHook)) {

adminforth/modules/restApi.ts

@@ -834,7 +834,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
       method: 'POST',
       path: '/get_resource_foreign_data',
       handler: async ({ body, adminUser, headers, query, cookies, requestUrl }) => {
-        const { resourceId, column } = body;
+        const { resourceId, column, search } = body;
         if (!this.adminforth.statuses.dbDiscover) {
           return { error: 'Database discovery not started' };
         }
@@ -905,6 +905,34 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
                   throw new Error(`Wrong filter object value: ${JSON.stringify(filters)}`);
                 }
               }
+
+              if (search && search.trim() && columnConfig.foreignResource.searchableFields) {
+                const searchableFields = Array.isArray(columnConfig.foreignResource.searchableFields) 
+                  ? columnConfig.foreignResource.searchableFields 
+                  : [columnConfig.foreignResource.searchableFields];
+
+                const searchOperator = columnConfig.foreignResource.searchIsCaseSensitive 
+                  ? AdminForthFilterOperators.LIKE 
+                  : AdminForthFilterOperators.ILIKE;
+
+                const searchFilters = searchableFields.map((fieldName) => {
+                  const filter = {
+                  field: fieldName,
+                  operator: searchOperator,
+                  value: `%${search.trim()}%`,
+                  };
+                  return filter;
+                });
+
+                if (searchFilters.length > 1) {
+                  normalizedFilters.subFilters.push({
+                    operator: AdminForthFilterOperators.OR,
+                    subFilters: searchFilters,
+                  });
+                } else if (searchFilters.length === 1) {
+                  normalizedFilters.subFilters.push(searchFilters[0]);
+                }
+              }
               const dbDataItems = await this.adminforth.connectors[targetResource.dataSource].getData({
                 resource: targetResource,
                 limit,

adminforth/spa/src/afcl/Select.vue

@@ -6,7 +6,7 @@
       <input
         ref="inputEl"
         type="text"
-        :readonly="readonly"
+        :readonly="readonly || searchDisabled"
         v-model="search"
         @click="inputClick"
         @input="inputInput"
@@ -37,7 +37,8 @@
     <teleport to="body" v-if="teleportToBody && showDropdown">
       <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop}"
         class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
-          dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
+          dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
+        @scroll="handleDropdownScroll">
         <div
           v-for="item in filteredItems"
           :key="item.value"
@@ -60,7 +61,8 @@
 
     <div v-if="!teleportToBody && showDropdown" ref="dropdownEl" :style="dropdownStyle" :class="{'shadow-none': isTop}"
       class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
-        dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
+        dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
+      @scroll="handleDropdownScroll">
       <div
         v-for="item in filteredItems"
         :key="item.value"
@@ -132,13 +134,17 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  searchDisabled: {
+    type: Boolean,
+    default: false,
+  },
   teleportToBody: {
     type: Boolean,
     default: false,
   },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'scroll-near-end', 'search']);
 
 const search = ref('');
 const showDropdown = ref(false);
@@ -159,6 +165,9 @@ function inputInput() {
     selectedItems.value = [];
     emit('update:modelValue', null);
   }
+  if (!props.searchDisabled) {
+    emit('search', search.value);
+  }
 }
 
 function updateFromProps() {
@@ -177,7 +186,7 @@ function updateFromProps() {
 }
 
 function inputClick() {
-  if (props.readonly) return;
+  if (props.readonly && !props.searchDisabled) return;
   // Toggle local dropdown
   showDropdown.value = !showDropdown.value;
   // If the dropdown is about to close, reset the search
@@ -221,6 +230,15 @@ const handleScroll = () => {
   }
 };
 
+const handleDropdownScroll = (event: Event) => {
+  const target = event.target as HTMLElement;
+  const threshold = 10; // pixels from bottom
+  
+  if (target.scrollTop + target.clientHeight >= target.scrollHeight - threshold) {
+    emit('scroll-near-end');
+  }
+};
+
 onMounted(() => {
   updateFromProps();
 
@@ -241,7 +259,12 @@ onMounted(() => {
 });
 
 const filteredItems = computed(() => {
-  return props.options.filter(item =>
+
+  if (!props.searchDisabled) {
+    return props.options || [];
+  }
+  
+  return (props.options || []).filter((item: any) =>
     item.label.toLowerCase().includes(search.value.toLowerCase())
   );
 });