Dynamic filter #231

SerVitasik · 2025-06-25T12:05:34Z

No description provided.

…urces

ivictbor

I think if we did not disable poly search and do validating, lets finish it so it will be universal (might happen indeed)

ivictbor · 2025-06-27T07:39:09Z

adminforth/modules/configValidator.ts

+              : [col.foreignResource.searchableFields];
+
+            searchableFields.forEach((fieldName) => {
+              if (typeof fieldName !== 'string') {


@SerVitasik or text at least

ivictbor · 2025-06-27T07:50:05Z

adminforth/modules/configValidator.ts

+                    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) {


so if at least one resource will not have column it will crash. This should be changed to - if there are no resources which have this column then crash.
Probably a little bit implicit but i suggest next behaviour:

if poly has 2 resources:

if res A has column C and res be has no col C - then when searching use column C in where of res A query, but dont use in query of res B (in query for res b use columns which exist)

if both res A and B has col C - use it in both queries (to both resources)

if no of resources has column C - drop this error here and say explicitly - we can't find this column neither in A nor in B.

So when applying poly search (later in code) - extract subset of this searchable fields which exist in resource and use only them in search with disjunction way

ivictbor · 2025-06-27T07:51:03Z

adminforth/modules/restApi.ts

@@ -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) {


I think poly case is not implemented here at all - it should do parallel queries

or probably you can do it on frontend (later) - should be possible also, maybe even better

…pabilities

…lter

ivictbor · 2025-08-01T11:49:41Z

adminforth/spa/src/components/Filters.vue

+        ...acc,
+        [c.name]: debounce((searchTerm) => {
+          searchOptions(c.name, searchTerm);
+        }, c.filterOptions?.debounceTimeMs || 300),


@SerVitasik should not we use https://adminforth.dev/docs/api/Common/interfaces/AdminForthResourceColumnCommon/#debouncetimems ?

c.filterOptions?.debounceTimeMs i am already using this.
You told me that we have constant 300 but i didn't find it

ivictbor · 2025-08-01T11:49:52Z

adminforth/spa/src/components/ResourceForm.vue

+        ...acc,
+        [c.name]: debounce((searchTerm: string) => {
+          searchOptions(c.name, searchTerm);
+        }, 300),


@SerVitasik same here

Here i can't use c.filterOptions?.debounceTimeMs because this is only for filters

…nd Select component

Copilot

Pull Request Overview

This PR introduces dynamic filtering capabilities for foreign resource relationships, enabling search functionality in dropdown components and pagination for large datasets. The implementation adds support for searching within foreign resource fields and handling polymorphic resource relationships.

Adds searchable fields configuration for foreign resources with case sensitivity options
Implements debounced search functionality with pagination support for dropdown components
Refactors existing static foreign resource loading to dynamic loading with scroll-based pagination

Reviewed Changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
dev-demo/resources/clinics.ts	Updates data source reference and enables UUID generation
dev-demo/resources/api_keys.ts	Adds searchable fields configuration to foreign resource
adminforth/types/Common.ts	Defines new type interfaces for searchable fields and case sensitivity
adminforth/spa/src/utils.ts	Implements core utility functions for pagination, search, and debouncing
adminforth/spa/src/components/ResourceForm.vue	Refactors from static to dynamic foreign resource loading
adminforth/spa/src/components/Filters.vue	Updates filter components to support dynamic search and pagination
adminforth/spa/src/components/ColumnValueInputWrapper.vue	Adds unmasked prop passing
adminforth/spa/src/components/ColumnValueInput.vue	Integrates search and pagination functionality
adminforth/spa/src/afcl/Select.vue	Enhances select component with search disable and scroll events
adminforth/modules/restApi.ts	Implements server-side search filtering for foreign resources
adminforth/modules/configValidator.ts	Adds validation for searchable fields configuration
adminforth/documentation/	Updates documentation with searchable fields examples
adminforth/dataConnectors/baseConnector.ts	Adds polymorphic resource field validation handling

Comments suppressed due to low confidence (1)

adminforth/spa/src/utils.ts:10

The 'debounce' package import should be verified. Consider using a more established package like 'lodash.debounce' or implementing a simple debounce function locally to avoid adding external dependencies.

import debounce from 'debounce';

Copilot · 2025-08-01T13:42:15Z

adminforth/spa/src/utils.ts

+      body: {
+        resourceId,
+        column: columnName,
+        limit: 100,


The hardcoded limit value of 100 should use the ITEMS_PER_PAGE_LIMIT constant defined at the top of the file for consistency.

Suggested change

limit: 100,

limit: ITEMS_PER_PAGE_LIMIT,

Copilot · 2025-08-01T13:42:15Z

adminforth/spa/src/utils.ts

+    }
+    columnOptions.value[columnName].push(...list.items);
+
+    columnOffsets[columnName] += 100;


The hardcoded offset increment of 100 should use the ITEMS_PER_PAGE_LIMIT constant for consistency.

Copilot · 2025-08-01T13:42:16Z

adminforth/spa/src/utils.ts

+      body: {
+        resourceId,
+        column: columnName,
+        limit: 100,


The hardcoded limit value of 100 should use the ITEMS_PER_PAGE_LIMIT constant for consistency.

Copilot · 2025-08-01T13:42:16Z

adminforth/spa/src/utils.ts

+      columnOptions.value = {};
+    }
+    columnOptions.value[columnName] = list.items;
+    columnOffsets[columnName] = 100;


The hardcoded offset value of 100 should use the ITEMS_PER_PAGE_LIMIT constant for consistency.

Suggested change

columnOffsets[columnName] = 100;

columnOffsets[columnName] = ITEMS_PER_PAGE_LIMIT;

Copilot · 2025-08-01T13:42:16Z

adminforth/spa/src/components/ResourceForm.vue

 import { computedAsync } from '@vueuse/core';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch, provide } from 'vue';


[nitpick] The import statement is quite long. Consider breaking it into multiple lines for better readability.

Suggested change

import { computed, onMounted, reactive, ref, watch, provide } from 'vue';

import {

computed,

onMounted,

reactive,

ref,

watch,

provide

} from 'vue';

Copilot · 2025-08-01T13:42:17Z

adminforth/spa/src/afcl/Select.vue

@@ -38,8 +38,9 @@
    </div>
    <teleport to="body" v-if="teleportToBody && showDropdown">
      <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop}"
-        class="fixed z-[5] w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground
-          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">
+        class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 


The hardcoded colors 'bg-white' and 'dark:bg-gray-700' replace the original theme-aware classes. This could break theming consistency. Consider preserving the original 'bg-lightDropdownOptionsBackground' and 'dark:bg-darkDropdownOptionsBackground' classes.

Suggested change

class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700

class="fixed z-[5] w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground

Copilot · 2025-08-01T13:42:17Z

adminforth/spa/src/afcl/Select.vue

+      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"


Same theming issue as the teleported dropdown. The hardcoded colors should be replaced with the original theme-aware classes for consistency.

Suggested change

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"

class="absolute z-10 mt-1 w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground

dark:border-darkDropdownOptionsBorder rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"

SerVitasik added 2 commits June 25, 2025 14:51

feat: add searchable fields and search functionality for foreign reso…

82245c8

…urces

fix: handle unexpected API responses in Filters component

186ae54

ivictbor requested changes Jun 27, 2025

View reviewed changes

ivictbor assigned SerVitasik Jul 17, 2025

SerVitasik added 3 commits August 1, 2025 13:54

feat: enhance foreign resource handling with pagination and search ca…

3f67dee

…pabilities

Merge branch 'next' of github.com:devforth/adminforth into dynamic-fi…

9d2fdda

…lter

refactor: change inputClick function to async for improved handling

411e662

ivictbor approved these changes Aug 1, 2025

View reviewed changes

ivictbor requested a review from Copilot August 1, 2025 11:51

This comment was marked as outdated.

Sign in to view

SerVitasik added 2 commits August 1, 2025 15:14

refactor: extract duplicate functions to utils

7d1e8d1

introduce constants for pagination limits and update logic in utils a…

cc6ae1b

…nd Select component

SerVitasik requested a review from ivictbor August 1, 2025 13:04

ivictbor requested a review from Copilot August 1, 2025 13:40

Copilot AI reviewed Aug 1, 2025

View reviewed changes

ivictbor approved these changes Aug 1, 2025

View reviewed changes

ivictbor merged commit 39d7037 into next Aug 1, 2025
1 check passed

	columnOffsets[columnName] = 100;
	columnOffsets[columnName] = ITEMS_PER_PAGE_LIMIT;

	class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700
	class="fixed z-[5] w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground

		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"

Dynamic filter #231

Dynamic filter #231

Uh oh!

Conversation

SerVitasik commented Jun 25, 2025

Uh oh!

ivictbor left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!