@stoker-platform/web-app 0.5.200 → 0.5.203

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @stoker-platform/web-app
 
+## 0.5.203
+
+### Patch Changes
+
+- feat: add filter condition method
+    - @stoker-platform/node-client@0.5.79
+    - @stoker-platform/utils@0.5.70
+    - @stoker-platform/web-client@0.5.83
+
+## 0.5.202
+
+### Patch Changes
+
+- fix: fix incorrect multipleQueries option
+
+## 0.5.201
+
+### Patch Changes
+
+- feat: improve server side full text search
+- Updated dependencies
+    - @stoker-platform/web-client@0.5.82
+
 ## 0.5.200
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.200",
+    "version": "0.5.203",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -51,9 +51,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-google-maps/api": "^2.20.8",
         "@sentry/react": "^10.56.0",
-        "@stoker-platform/node-client": "0.5.78",
-        "@stoker-platform/utils": "0.5.69",
-        "@stoker-platform/web-client": "0.5.81",
+        "@stoker-platform/node-client": "0.5.79",
+        "@stoker-platform/utils": "0.5.70",
+        "@stoker-platform/web-client": "0.5.83",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Collection.tsx

@@ -492,6 +492,8 @@ function Collection({
                 setIsRouteLoading("+", location.pathname)
             }
 
+            const multipleQueries: QueryConstraint[][] = []
+
             if (
                 fullTextSearch &&
                 !isPreloadCacheEnabled &&
@@ -500,11 +502,6 @@ function Collection({
                 tab !== "map" &&
                 tab !== "calendar"
             ) {
-                const disjunctions = getFilterDisjunctions(collection)
-                const hitsPerPage =
-                    disjunctions === 0
-                        ? Math.min(30, itemsPerPage || 10)
-                        : Math.min(itemsPerPage || 10, Math.max(1, Math.floor(30 / disjunctions)))
                 let latestFilters = filters
                 if (tab === "cards" && prevTabRef.current !== "cards") {
                     latestFilters = [...filters]
@@ -517,10 +514,32 @@ function Collection({
                         }
                     }
                 }
+                const disjunctions = getFilterDisjunctions(collection, {
+                    assignable,
+                    isAssigning: queryIsAssigning,
+                    filters: latestFilters,
+                    relationList,
+                    relationParent,
+                })
+                const searchOptions = customization.admin?.searchOptions
+                const exactPhrase = searchOptions?.fuzzy === false && searchOptions?.prefix === false
+                const batchSize =
+                    disjunctions === 0
+                        ? Math.min(30, itemsPerPage || 10)
+                        : Math.min(itemsPerPage || 10, Math.max(1, Math.floor(30 / disjunctions)))
+                let hitsPerPage = 0
+                if (exactPhrase && !(hasEntityRestrictions.length > 0 || hasEntityParentFilters.length > 0)) {
+                    hitsPerPage = 500
+                } else {
+                    hitsPerPage = batchSize
+                }
                 const constraints = getFilterConstraints(latestFilters, false, true) as [string, "==" | "in", unknown][]
                 const objectIDs = await performFullTextSearch(collection, search, hitsPerPage, constraints)
                 searchResults.current = { ...searchResults.current, [key]: objectIDs }
-                if (objectIDs.length > 0) {
+                if (
+                    objectIDs.length > 0 &&
+                    (!exactPhrase || hasEntityRestrictions.length > 0 || hasEntityParentFilters.length > 0)
+                ) {
                     if (isServerReadOnly) {
                         query.queries = query.queries.map((q) => ({
                             ...q,
@@ -536,6 +555,10 @@ function Collection({
                             constraints: [...q.constraints, where("id", "in", objectIDs)] as QueryConstraint[],
                         }))
                     }
+                } else if (objectIDs.length > 0 && exactPhrase) {
+                    for (let i = 0; i < objectIDs.length; i += batchSize) {
+                        multipleQueries.push([where("id", "in", objectIDs.slice(i, i + batchSize))])
+                    }
                 } else if (search) {
                     setServerList((prev) => ({ ...prev, [key]: [] }))
                     setOptimisticList([], key)
@@ -639,6 +662,27 @@ function Collection({
                             }
                         }
 
+                        const subscribeOptions = {
+                            ...currentQuery.options,
+                            constraints: combineQueryConstraints([
+                                ...(currentQuery.constraints as QueryConstraint[]),
+                                ...(additionalConstraintsRef.current?.map((constraint) =>
+                                    where(constraint[0], constraint[1] as WhereFilterOp, constraint[2]),
+                                ) || []),
+                            ]),
+                            tempCache:
+                                isPreloadCacheEnabled && relationList?.loadAll
+                                    ? {
+                                          label: `${labels.collection}-${relationList?.field}`,
+                                          constraints: [[`${relationList?.field}_Single.id`, "==", relationParent?.id]],
+                                      }
+                                    : undefined,
+                            multipleQueries: multipleQueries.length > 0 ? multipleQueries : undefined,
+                        } as SubscribeManyOptions
+                        if (multipleQueries.length > 0) {
+                            delete subscribeOptions.pagination
+                        }
+
                         // TODO: subcollection support
                         const result = await subscribeMany(
                             [labels.collection],
@@ -663,24 +707,7 @@ function Collection({
                                     window.location.reload()
                                 }
                             },
-                            {
-                                ...currentQuery.options,
-                                constraints: combineQueryConstraints([
-                                    ...(currentQuery.constraints as QueryConstraint[]),
-                                    ...(additionalConstraintsRef.current?.map((constraint) =>
-                                        where(constraint[0], constraint[1] as WhereFilterOp, constraint[2]),
-                                    ) || []),
-                                ]),
-                                tempCache:
-                                    isPreloadCacheEnabled && relationList?.loadAll
-                                        ? {
-                                              label: `${labels.collection}-${relationList?.field}`,
-                                              constraints: [
-                                                  [`${relationList?.field}_Single.id`, "==", relationParent?.id],
-                                              ],
-                                          }
-                                        : undefined,
-                            } as SubscribeManyOptions,
+                            subscribeOptions,
                         )
                         const { unsubscribe: newUnsubscribe, count: newCount, pages: newPages } = result
                         promiseLoaded = true
@@ -2258,6 +2285,8 @@ function Collection({
                                                                 collection={collection}
                                                                 excluded={excludedFilters}
                                                                 relationList={relationList}
+                                                                relationCollection={relationCollection}
+                                                                relationParent={relationParent}
                                                                 assignable={assignable}
                                                                 isAssigning={displayIsAssigning}
                                                             />

package/src/Filters.tsx

@@ -54,11 +54,21 @@ interface FiltersProps {
     collection: CollectionSchema
     excluded: string[]
     relationList?: RelationList
+    relationCollection?: CollectionSchema
+    relationParent?: StokerRecord
     assignable?: Assignable
     isAssigning?: boolean
 }
 
-export function Filters({ collection, excluded, relationList, assignable, isAssigning }: FiltersProps) {
+export function Filters({
+    collection,
+    excluded,
+    relationList,
+    relationCollection,
+    relationParent,
+    assignable,
+    isAssigning,
+}: FiltersProps) {
     const { labels, fields } = collection
     const location = useLocation()
     const schema = getSchema()
@@ -446,6 +456,12 @@ export function Filters({ collection, excluded, relationList, assignable, isAssi
     return (
         <div className="flex flex-col gap-6">
             {filters.map((filter: Filter) => {
+                if (
+                    "condition" in filter &&
+                    filter.condition &&
+                    filter.condition(relationCollection, relationParent, isAssigning) === false
+                )
+                    return null
                 if (filter.type === "relation" && !hasRelationFilterAccess(filter)) return
                 if (filter.type === "status" || filter.type === "range") return
                 const field = getField(fields, filter.field)
@@ -474,7 +490,7 @@ export function Filters({ collection, excluded, relationList, assignable, isAssi
                                 <Label htmlFor={title}>{title}:</Label>
                                 <RadioGroup defaultValue="no_selection" className="mt-2">
                                     {values.map((value: string) => {
-                                        if (filter.condition && filter.condition(value) === false) return null
+                                        if (filter.filterValues && filter.filterValues(value) === false) return null
                                         return (
                                             <div key={value} className="flex items-center space-x-2">
                                                 <RadioGroupItem
@@ -525,7 +541,7 @@ export function Filters({ collection, excluded, relationList, assignable, isAssi
                                 <Label htmlFor={title}>{title}:</Label>
                                 <div className="mt-2 flex flex-col gap-2">
                                     {values.map((value: string) => {
-                                        if (filter.condition && filter.condition(value) === false) return null
+                                        if (filter.filterValues && filter.filterValues(value) === false) return null
                                         return (
                                             <Button
                                                 key={value}
@@ -600,7 +616,7 @@ export function Filters({ collection, excluded, relationList, assignable, isAssi
                                         <SelectContent>
                                             <SelectItem value="no_selection">----</SelectItem>
                                             {values.map((value: string) => {
-                                                if (filter.condition && filter.condition(value) === false) return
+                                                if (filter.filterValues && filter.filterValues(value) === false) return
                                                 return (
                                                     <SelectItem key={value} value={value}>
                                                         {value}

package/src/List.tsx

@@ -677,6 +677,8 @@ export function List({
         return allColumns
     }, [fields, isPreloadCacheEnabled, isServerReadOnly, recordTitleField, connectionStatus])
 
+    const isServerFullTextSearch = !!(search && fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly)
+
     const isSearchRelevanceOrder = !!(search && isPreloadCacheEnabled)
 
     const searchList = useMemo(() => {
@@ -694,6 +696,8 @@ export function List({
         return list || []
     }, [isPreloadCacheEnabled, isServerReadOnly, list, search])
 
+    const tablePageSize = isServerFullTextSearch ? Math.max(searchList.length, 1) : pageSize
+
     const selectedRecords = useMemo(() => {
         const selectedIds = Object.keys(rowSelection)
         if (selectedIds.length === 0) return []
@@ -761,12 +765,13 @@ export function List({
             columnFilters,
             rowSelection,
             pagination: {
-                pageSize,
-                pageIndex,
+                pageSize: tablePageSize,
+                pageIndex: isServerFullTextSearch ? 0 : pageIndex,
             },
         },
         onPaginationChange: (updater) => {
-            const newPagination = typeof updater === "function" ? updater({ pageIndex, pageSize }) : updater
+            const newPagination =
+                typeof updater === "function" ? updater({ pageIndex, pageSize: tablePageSize }) : updater
             if (pageCount && newPagination.pageIndex < pageCount) {
                 setPageIndex(newPagination.pageIndex)
             }
@@ -868,7 +873,7 @@ export function List({
             }
         }, 750)
 
-        if (isInitialized && (isPreloadCacheEnabled || isServerReadOnly)) {
+        if (isInitialized && (isPreloadCacheEnabled || isServerReadOnly || isServerFullTextSearch)) {
             setPageIndex(0)
             setState(`collection-page-number-${labels.collection.toLowerCase()}`, "page", 1)
         }
@@ -1070,12 +1075,15 @@ export function List({
     }, [table, list, pageSize, isLoading, cursor, pageNumber, pageCount, constraints, orderByField, orderByDirection])
 
     const canGetNextPage = useCallback(() => {
+        if (isServerFullTextSearch) {
+            return false
+        }
         if (isPreloadCacheEnabled || isServerReadOnly) {
             return table.getCanNextPage()
         } else {
             return !isLoadingDebounced && pageCount && pageNumber < pageCount && list?.length === pageSize
         }
-    }, [table, isLoadingDebounced, pageNumber, pageCount, list, pageSize])
+    }, [table, isLoadingDebounced, pageNumber, pageCount, list, pageSize, isServerFullTextSearch])
 
     const prevPage = useCallback(() => {
         if (isLoading) return
@@ -1161,12 +1169,15 @@ export function List({
     }, [table, list, pageSize, isLoading, cursor, prevCursor, pageNumber, constraints, orderByField, orderByDirection])
 
     const canGetPrevPage = useCallback(() => {
+        if (isServerFullTextSearch) {
+            return false
+        }
         if (isPreloadCacheEnabled || isServerReadOnly) {
             return table.getCanPreviousPage()
         } else {
             return !isLoadingDebounced && pageNumber > 1
         }
-    }, [table, isLoadingDebounced, pageNumber])
+    }, [table, isLoadingDebounced, pageNumber, isServerFullTextSearch])
 
     const onChangePageNumber = useCallback(
         (event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => {
@@ -2019,7 +2030,12 @@ export function List({
                 </ScrollArea>
             </Card>
             <div className="flex items-center justify-end space-x-2 py-4 print:hidden">
-                {pagesLoaded && (
+                {isServerFullTextSearch && searchList.length > 0 && (
+                    <Badge variant="secondary" className="hidden sm:block">
+                        {searchList.length} {searchList.length === 1 ? "result" : "results"}
+                    </Badge>
+                )}
+                {pagesLoaded && !isServerFullTextSearch && (
                     <Badge variant="secondary" className="hidden sm:block">
                         Page{" "}
                         {isPreloadCacheEnabled || isServerReadOnly
@@ -2046,7 +2062,7 @@ export function List({
                         />
                     </div>
                 )}
-                {!isPreloadCacheEnabled && !isServerReadOnly && (
+                {!isServerFullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly && (
                     <Button
                         type="button"
                         variant="outline"
@@ -2059,19 +2075,28 @@ export function List({
                         Back to start
                     </Button>
                 )}
-                {!(
-                    !isPreloadCacheEnabled &&
-                    !isServerReadOnly &&
-                    typeof sortingField?.sorting === "object" &&
-                    sortingField.sorting.direction
-                ) && (
-                    <Button type="button" variant="outline" size="sm" onClick={prevPage} disabled={!canGetPrevPage()}>
-                        Previous
+                {!isServerFullTextSearch &&
+                    !(
+                        !isPreloadCacheEnabled &&
+                        !isServerReadOnly &&
+                        typeof sortingField?.sorting === "object" &&
+                        sortingField.sorting.direction
+                    ) && (
+                        <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={prevPage}
+                            disabled={!canGetPrevPage()}
+                        >
+                            Previous
+                        </Button>
+                    )}
+                {!isServerFullTextSearch && (
+                    <Button type="button" variant="outline" size="sm" onClick={nextPage} disabled={!canGetNextPage()}>
+                        Next
                     </Button>
                 )}
-                <Button type="button" variant="outline" size="sm" onClick={nextPage} disabled={!canGetNextPage()}>
-                    Next
-                </Button>
             </div>
         </>
     )

package/src/providers/FiltersProvider.tsx

@@ -135,6 +135,9 @@ export const FiltersProvider: React.FC<FiltersProviderProps> = ({
                     }
                     if (filter.type === "select") {
                         const field = getField(fields, filter.field)
+                        const includeValueInFilters = assignable?.includeValueInFilters?.find(
+                            (include) => include.field === filter.field && include.values.includes(filter.value),
+                        )
                         if (field.type === "Boolean") {
                             const fieldCustomization = getFieldCustomization(field, customization)
                             const label = tryFunction(fieldCustomization.admin?.label) || field.name
@@ -145,13 +148,21 @@ export const FiltersProvider: React.FC<FiltersProviderProps> = ({
                         } else if (field.type === "Number") {
                             constraints.push(where(filter.field, "==", Number(filter.value)))
                         } else if (includesAssigned(relationList, relationParent, assignable, isAssigning, filter)) {
+                            const filterValues = [filter.value]
+                            if (includeValueInFilters) {
+                                filterValues.push(includeValueInFilters.includeValue as string | number)
+                            }
                             constraints.push(
                                 or(
-                                    where(filter.field, "==", filter.value),
+                                    where(filter.field, "in", filterValues),
                                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                                     where(`${relationList!.field}_Array`, "array-contains", relationParent!.id),
                                 ) as unknown as QueryConstraint,
                             )
+                        } else if (isAssigning && includeValueInFilters) {
+                            constraints.push(
+                                where(filter.field, "in", [filter.value, includeValueInFilters.includeValue]),
+                            )
                         } else {
                             constraints.push(where(filter.field, "==", filter.value))
                         }
@@ -312,6 +323,9 @@ export const FiltersProvider: React.FC<FiltersProviderProps> = ({
                 }
                 if (filter.type === "select") {
                     const field = getField(fields, filter.field)
+                    const includeValueInFilters = assignable?.includeValueInFilters?.find(
+                        (include) => include.field === filter.field && include.values.includes(filter.value),
+                    )
                     if (field.type === "Boolean") {
                         const fieldCustomization = getFieldCustomization(field, customization)
                         const label = tryFunction(fieldCustomization.admin?.label) || field.name
@@ -327,6 +341,8 @@ export const FiltersProvider: React.FC<FiltersProviderProps> = ({
                             (record[filter.field] === filter.value ||
                                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                                 record[`${relationList!.field}_Array`]?.includes(relationParent!.id))
+                    } else if (isAssigning && includeValueInFilters) {
+                        show = show && [filter.value, includeValueInFilters.includeValue].includes(record[filter.field])
                     } else {
                         show = show && record[filter.field] === filter.value
                     }

package/src/utils/getFilterDisjunctions.ts

@@ -1,8 +1,16 @@
-import { CollectionSchema } from "@stoker-platform/types"
+import { Assignable, CollectionSchema, Filter, RelationList, StokerRecord } from "@stoker-platform/types"
 import { getAttributeRestrictions } from "@stoker-platform/utils"
 import { getCurrentUserPermissions } from "@stoker-platform/web-client"
 
-export const getFilterDisjunctions = (collection: CollectionSchema) => {
+export interface FilterDisjunctionsOptions {
+    assignable?: Assignable
+    isAssigning?: boolean
+    filters?: Filter[]
+    relationList?: RelationList
+    relationParent?: StokerRecord
+}
+
+export const getFilterDisjunctions = (collection: CollectionSchema, options?: FilterDisjunctionsOptions) => {
     const permissions = getCurrentUserPermissions()
     if (!permissions?.Role) throw new Error("PERMISSION_DENIED")
     let disjunctions = 0
@@ -25,5 +33,23 @@ export const getFilterDisjunctions = (collection: CollectionSchema) => {
             }
         }
     }
+    if (
+        options?.isAssigning &&
+        options.relationList &&
+        options.relationParent?.id &&
+        options.assignable?.includeAssignedInFilters?.length &&
+        options.filters
+    ) {
+        const activeOrCount = options.filters.filter(
+            (filter) =>
+                filter.type === "select" &&
+                filter.value &&
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                options.assignable!.includeAssignedInFilters!.includes(filter.field),
+        ).length
+        for (let i = 0; i < activeOrCount; i++) {
+            incrementDisjunctions(2)
+        }
+    }
     return disjunctions
 }