@stoker-platform/web-app 0.5.198 → 0.5.200

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @stoker-platform/web-app
 
+## 0.5.200
+
+### Patch Changes
+
+- fix: improve relation list assign mode
+    - @stoker-platform/node-client@0.5.78
+    - @stoker-platform/utils@0.5.69
+    - @stoker-platform/web-client@0.5.81
+
+## 0.5.199
+
+### Patch Changes
+
+- chore: restore Dashboard reminder sorting improvements
+
 ## 0.5.198
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.198",
+    "version": "0.5.200",
     "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.77",
-        "@stoker-platform/utils": "0.5.68",
-        "@stoker-platform/web-client": "0.5.80",
+        "@stoker-platform/node-client": "0.5.78",
+        "@stoker-platform/utils": "0.5.69",
+        "@stoker-platform/web-client": "0.5.81",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Collection.tsx

@@ -82,6 +82,7 @@ import { ScrollArea } from "./components/ui/scroll-area"
 import { DateRangeSelector } from "./DateRange"
 import { useCache } from "./providers/CacheProvider"
 import { getOrderBy } from "./utils/getOrderBy"
+import { combineQueryConstraints } from "./utils/combineQueryConstraints"
 import { preloadCacheEnabled } from "./utils/preloadCacheEnabled"
 import { localFullTextSearch } from "./utils/localFullTextSearch"
 import { TooltipProvider } from "./components/ui/tooltip"
@@ -252,6 +253,11 @@ function Collection({
     const currentField = currentFieldAll[labels.collection]
     const [backToStartKey, setBackToStartKey] = useState(0)
 
+    const [displayIsAssigning, setDisplayIsAssigning] = useState(isAssigning)
+    const filtersIsAssigningRef = useRef(isAssigning)
+    const assignQueryGenerationRef = useRef(0)
+    const displayedAssignGenerationRef = useRef(0)
+
     const preventChange = isRouteLoadingImmediate.has(location.pathname)
 
     useEffect(() => {
@@ -376,6 +382,7 @@ function Collection({
 
     useEffect(() => {
         if (!relationList || !isInitialized) return
+        filtersIsAssigningRef.current = isAssigning
         setFilters((prev) => {
             let next = prev
                 .filter((filter) => !(filter.type === "relation" && filter.field === relationList.field))
@@ -396,6 +403,12 @@ function Collection({
         })
     }, [isAssigning, isInitialized])
 
+    useEffect(() => {
+        if (!relationList) {
+            setDisplayIsAssigning(isAssigning)
+        }
+    }, [relationList, isAssigning])
+
     // This is to ensure that the optimistic list is set in cases where cached documents exactly match the downloaded server documents
     // In this case, the cache-only snapshot listener does not fire a second time when the cache has loaded because there is no change to the list
     useEffect(() => {
@@ -466,6 +479,15 @@ function Collection({
             const startingTab = tabRef.current
             key ||= "default"
 
+            const queryGeneration = ++assignQueryGenerationRef.current
+            const queryIsAssigning = filtersIsAssigningRef.current
+            const syncDisplayIsAssigning = () => {
+                if (queryGeneration >= displayedAssignGenerationRef.current) {
+                    displayedAssignGenerationRef.current = queryGeneration
+                    setDisplayIsAssigning(queryIsAssigning)
+                }
+            }
+
             if (!isPreloadCacheEnabled || relationList?.loadAll) {
                 setIsRouteLoading("+", location.pathname)
             }
@@ -517,6 +539,7 @@ function Collection({
                 } else if (search) {
                     setServerList((prev) => ({ ...prev, [key]: [] }))
                     setOptimisticList([], key)
+                    syncDisplayIsAssigning()
                     setIsRouteLoading("-", location.pathname)
                     setCursor({})
                     setPages({})
@@ -591,6 +614,7 @@ function Collection({
                                 setServerList((prev) => ({ ...prev, [key]: loadedDocs }))
                                 setOptimisticList(loadedDocs, key)
                             }
+                            syncDisplayIsAssigning()
                             if (!query.infinite || firstLoad) {
                                 setCursor((prev) => ({ ...prev, [key]: newCursor }))
                             }
@@ -641,12 +665,12 @@ function Collection({
                             },
                             {
                                 ...currentQuery.options,
-                                constraints: [
+                                constraints: combineQueryConstraints([
                                     ...(currentQuery.constraints as QueryConstraint[]),
                                     ...(additionalConstraintsRef.current?.map((constraint) =>
                                         where(constraint[0], constraint[1] as WhereFilterOp, constraint[2]),
                                     ) || []),
-                                ],
+                                ]),
                                 tempCache:
                                     isPreloadCacheEnabled && relationList?.loadAll
                                         ? {
@@ -684,6 +708,7 @@ function Collection({
                     })
                     setServerList((prev) => ({ ...prev, [key]: data.records }))
                     setOptimisticList(data.records, key)
+                    syncDisplayIsAssigning()
                     setIsRouteLoading("-", location.pathname)
                     resolve()
                 }
@@ -1444,12 +1469,12 @@ function Collection({
                     ...(additionalConstraints || []),
                 ]
             } else {
-                finalConstraints = [
+                finalConstraints = combineQueryConstraints([
                     ...(constraints as QueryConstraint[]),
                     ...(additionalConstraints?.map((constraint) =>
                         where(constraint[0], constraint[1], constraint[2]),
                     ) || []),
-                ]
+                ])
             }
             // TODO: subcollection support
             const serverData = await getSome(
@@ -2233,6 +2258,8 @@ function Collection({
                                                                 collection={collection}
                                                                 excluded={excludedFilters}
                                                                 relationList={relationList}
+                                                                assignable={assignable}
+                                                                isAssigning={displayIsAssigning}
                                                             />
                                                         </SheetContent>
                                                     </Sheet>
@@ -2602,7 +2629,7 @@ function Collection({
                                                 relationCollection={relationCollection}
                                                 relationParent={relationParent}
                                                 formList={!!formList}
-                                                isAssigning={isAssigning}
+                                                isAssigning={displayIsAssigning}
                                                 assignable={assignable}
                                                 hasBreadcrumbs={hasBreadcrumbs}
                                             />

package/src/DashboardReminder.tsx

@@ -17,6 +17,7 @@ import { Card, CardContent } from "./components/ui/card"
 import { useConnection } from "./providers/ConnectionProvider"
 import { getField, getFieldCustomization, isRelationField, tryFunction } from "@stoker-platform/utils"
 import { getFormattedFieldValue } from "./utils/getFormattedFieldValue"
+import { getSortingValue } from "./utils/getSortingValue"
 
 interface DashboardReminderProps {
     reminder: Reminder
@@ -212,21 +213,55 @@ export const DashboardReminder = ({ reminder, title, collection }: DashboardRemi
                                         .sort((a, b) => {
                                             if (!sorting) return 0
                                             const sortingField = getField(fields, sorting.field)
-                                            const fieldCustomization = getFieldCustomization(
-                                                sortingField,
+                                            const valueA = getSortingValue(
+                                                collectionSchema,
                                                 customization,
+                                                sorting.field,
+                                                a,
                                             )
-                                            let sortA = a[sorting.field]
-                                            let sortB = b[sorting.field]
-                                            if (fieldCustomization.admin?.sort) {
-                                                sortA = tryFunction(fieldCustomization.admin?.sort, [a])
-                                                sortB = tryFunction(fieldCustomization.admin?.sort, [b])
-                                            }
-                                            if (sorting.direction === "asc") {
-                                                return sortA - sortB
+                                            const valueB = getSortingValue(
+                                                collectionSchema,
+                                                customization,
+                                                sorting.field,
+                                                b,
+                                            )
+                                            let result: number
+                                            if (sortingField.type === "String") {
+                                                const rawA = valueA?.toString().toLowerCase() ?? ""
+                                                const rawB = valueB?.toString().toLowerCase() ?? ""
+                                                result = rawA > rawB ? 1 : rawA < rawB ? -1 : 0
+                                            } else if (isRelationField(sortingField)) {
+                                                const titleField = sortingField.titleField
+                                                let rawA: string
+                                                let rawB: string
+                                                if (titleField) {
+                                                    const recordA = Object.values(a[sortingField.name] ?? {})[0] as
+                                                        | StokerRecord
+                                                        | undefined
+                                                    const recordB = Object.values(b[sortingField.name] ?? {})[0] as
+                                                        | StokerRecord
+                                                        | undefined
+                                                    // eslint-disable-next-line security/detect-object-injection
+                                                    rawA = recordA?.[titleField]?.toString().toLowerCase() ?? ""
+                                                    // eslint-disable-next-line security/detect-object-injection
+                                                    rawB = recordB?.[titleField]?.toString().toLowerCase() ?? ""
+                                                } else {
+                                                    rawA = (
+                                                        Object.keys(a[sortingField.name] ?? {})[0] ?? ""
+                                                    ).toLowerCase()
+                                                    rawB = (
+                                                        Object.keys(b[sortingField.name] ?? {})[0] ?? ""
+                                                    ).toLowerCase()
+                                                }
+                                                result = rawA > rawB ? 1 : rawA < rawB ? -1 : 0
+                                            } else if (sortingField.type === "Timestamp") {
+                                                const rawA = Number(valueA?.valueOf() || 0)
+                                                const rawB = Number(valueB?.valueOf() || 0)
+                                                result = rawA > rawB ? 1 : rawA < rawB ? -1 : 0
                                             } else {
-                                                return sortB - sortA
+                                                result = valueA > valueB ? 1 : valueA < valueB ? -1 : 0
                                             }
+                                            return sorting.direction === "asc" ? result : -result
                                         })
                                         .slice(page * pages, (page + 1) * pages)
                                         .map((result: StokerRecord) => (

package/src/Filters.tsx

@@ -1,8 +1,11 @@
 import {
+    Assignable,
     CollectionField,
     CollectionSchema,
     Filter,
+    RelationFilter,
     RelationList,
+    SelectFilter,
     StokerCollection,
     StokerRecord,
 } from "@stoker-platform/types"
@@ -51,9 +54,11 @@ interface FiltersProps {
     collection: CollectionSchema
     excluded: string[]
     relationList?: RelationList
+    assignable?: Assignable
+    isAssigning?: boolean
 }
 
-export function Filters({ collection, excluded, relationList }: FiltersProps) {
+export function Filters({ collection, excluded, relationList, assignable, isAssigning }: FiltersProps) {
     const { labels, fields } = collection
     const location = useLocation()
     const schema = getSchema()
@@ -83,6 +88,25 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
 
     const preventChange = isRouteLoadingImmediate.has(location.pathname)
 
+    const isArrayOrRelationFilter = useCallback(
+        (filter: Filter): filter is SelectFilter | RelationFilter => {
+            if (filter.type === "relation") return true
+            if (filter.type === "select") {
+                const fieldSchema = getField(fields, filter.field)
+                return fieldSchema.type === "Array"
+            }
+            return false
+        },
+        [fields],
+    )
+
+    const isIncludeAssignedActive = useCallback(() => {
+        if (!isAssigning || !assignable?.includeAssignedInFilters?.length) return false
+        return assignable.includeAssignedInFilters.some((field) =>
+            filters.some((filter) => filter.type === "select" && filter.field === field && filter.value),
+        )
+    }, [isAssigning, assignable, filters])
+
     const isMobile = useIsMobile()
     const someFilterOpen = Object.values(open).some(Boolean)
     const { offset: keyboardOffset, viewportHeight } = useKeyboardOffset(isMobile && someFilterOpen)
@@ -112,10 +136,6 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                     const relationCollection = schema.collections[field.collection]
                     const relationCustomization = getCollectionConfigModule(relationCollection.labels.collection)
 
-                    if (!isPreloadCacheEnabled && filter.value) {
-                        setArrayContainsFilterSet(filter.field)
-                    }
-
                     const collectionAdminPath: ["collections", StokerCollection, "admin"] = [
                         "collections",
                         field.collection,
@@ -151,11 +171,6 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                         })
                     }
                 } else if (filter.type === "select") {
-                    const field = getField(fields, filter.field)
-                    if (!isPreloadCacheEnabled && filter.value && field.type === "Array") {
-                        setArrayContainsFilterSet(filter.field)
-                    }
-
                     setValue((prev) => ({
                         ...prev,
                         [filter.field]: filter.value?.toString() || "no_selection",
@@ -166,11 +181,33 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
         initialize()
     }, [])
 
+    useEffect(() => {
+        if (isPreloadCacheEnabled) return
+
+        let arrayOrRelationField: string | undefined
+
+        if (isIncludeAssignedActive()) {
+            const activeField = assignable?.includeAssignedInFilters?.find((field) =>
+                filters.some((filter) => filter.type === "select" && filter.field === field && filter.value),
+            )
+            if (activeField) {
+                arrayOrRelationField = activeField
+            }
+        }
+
+        const arrayOrRelationFilter = filters.find(
+            (filter): filter is SelectFilter | RelationFilter => !!filter.value && isArrayOrRelationFilter(filter),
+        )
+        if (arrayOrRelationFilter) {
+            arrayOrRelationField = arrayOrRelationFilter.field
+        }
+        setArrayContainsFilterSet(arrayOrRelationField)
+    }, [filters, isAssigning, assignable, isPreloadCacheEnabled, isIncludeAssignedActive, isArrayOrRelationFilter])
+
     const handleChange = useCallback(
         (filter: Filter, value: string, type: CollectionField["type"]) => {
             if (preventChange) return
             if (filter.type === "range" || filter.type === "status") return
-            const fieldSchema = getField(fields, filter.field)
             const index = filters
                 .filter((filterItem) => filterItem.type !== "status" && filterItem.type !== "range")
                 .findIndex((filterItem) => filter.field === filterItem.field)
@@ -187,9 +224,6 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                     }
                     return newFilters
                 })
-                if (!isPreloadCacheEnabled && (filter.type === "relation" || fieldSchema.type === "Array")) {
-                    setArrayContainsFilterSet(filter.field)
-                }
             } else {
                 setFilters((filters) => {
                     newFilters = [...filters]
@@ -197,9 +231,6 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                     delete newFilters[index].value
                     return newFilters
                 })
-                if (!isPreloadCacheEnabled && (filter.type === "relation" || fieldSchema.type === "Array")) {
-                    setArrayContainsFilterSet(undefined)
-                }
             }
             const filterParam = newFilters
                 .filter((filter: Filter) => filter.type !== "status" && filter.type !== "range" && filter.value)
@@ -386,15 +417,24 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
     }, [searchValue])
 
     const isFilterDisabled = useCallback(
+        (filter: Filter) => {
+            if (filter.type === "range" || filter.type === "status") return false
+            return isRouteLoading.has(location.pathname)
+        },
+        [isRouteLoading, location.pathname],
+    )
+
+    const isFilterInactive = useCallback(
         (filter: Filter) => {
             if (filter.type === "range" || filter.type === "status") return false
             const fieldSchema = getField(fields, filter.field)
             return !!(
-                isRouteLoading.has(location.pathname) ||
                 (!isPreloadCacheEnabled &&
                     arrayContainsFilterSet &&
                     arrayContainsFilterSet !== filter.field &&
-                    (filter.type === "relation" || fieldSchema.type === "Array")) ||
+                    (filter.type === "relation" ||
+                        fieldSchema.type === "Array" ||
+                        (isAssigning && assignable?.includeAssignedInFilters?.includes(filter.field)))) ||
                 (isRelationField(fieldSchema) &&
                     connectionStatus === "offline" &&
                     !preloadCacheEnabled(schema.collections[fieldSchema.collection]))
@@ -412,7 +452,7 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                 if (!field) return null
                 const fieldCustomization = getFieldCustomization(field, customization)
                 const label = tryFunction(fieldCustomization.admin?.label)
-                const disabled = isFilterDisabled(filter)
+                const disabled = isFilterDisabled(filter) || isFilterInactive(filter)
                 if (excluded.includes(filter.field)) return null
                 if (filter.type === "select") {
                     const title = tryFunction(filter.title) || label || field.name
@@ -501,7 +541,10 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                                                         handleChange(filter, value, field.type)
                                                     })
                                                 }}
-                                                className="disabled:opacity-100"
+                                                className={cn(
+                                                    "disabled:opacity-100",
+                                                    isFilterInactive(filter) && "disabled:opacity-50",
+                                                )}
                                             >
                                                 {value}
                                             </Button>
@@ -520,7 +563,10 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                                                 handleChange(filter, "no_selection", field.type)
                                             })
                                         }}
-                                        className="disabled:opacity-100"
+                                        className={cn(
+                                            "disabled:opacity-100",
+                                            isFilterInactive(filter) && "disabled:opacity-50",
+                                        )}
                                     >
                                         All
                                     </Button>
@@ -765,9 +811,6 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                     variant="outline"
                     disabled={isRouteLoading.has(location.pathname)}
                     onClick={() => {
-                        if (!isPreloadCacheEnabled) {
-                            setArrayContainsFilterSet(undefined)
-                        }
                         filters.forEach((filter) => {
                             if (filter.type === "status" || filter.type === "range") return
                             if (relationList && relationList.field === filter.field) return

package/src/Record.tsx

@@ -253,6 +253,15 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                                                         <FiltersProvider
                                                             key={`${relationList.collection}-filters`}
                                                             collection={relationCollection}
+                                                            relationList={relationList}
+                                                            relationParent={record}
+                                                            assignable={assignable?.find(
+                                                                (item: Assignable) =>
+                                                                    item.collection === relationList.collection,
+                                                            )}
+                                                            isAssigning={
+                                                                isAssigning?.[relationList.collection.toLowerCase()]
+                                                            }
                                                         >
                                                             {hasBreadcrumbs && record && (
                                                                 <>

package/src/providers/FiltersProvider.tsx

@@ -1,12 +1,33 @@
 import { getMaxDate, getMinDate } from "@/utils/getMaxDateRange"
 import { preloadCacheEnabled } from "@/utils/preloadCacheEnabled"
 import { serverReadOnly } from "@/utils/serverReadOnly"
-import { CalendarConfig, CollectionSchema, Filter, StokerCollection, StokerRecord } from "@stoker-platform/types"
+import {
+    Assignable,
+    CalendarConfig,
+    CollectionSchema,
+    Filter,
+    RelationList,
+    StokerCollection,
+    StokerRecord,
+} from "@stoker-platform/types"
 import { getCachedConfigValue, getField, getFieldCustomization, tryFunction } from "@stoker-platform/utils"
 import { getCollectionConfigModule } from "@stoker-platform/web-client"
-import { QueryConstraint, where, WhereFilterOp } from "firebase/firestore"
+import { or, QueryConstraint, where, WhereFilterOp } from "firebase/firestore"
 import { createContext, useCallback, useContext, useEffect, useState } from "react"
 
+const includesAssigned = (
+    relationList: RelationList | undefined,
+    relationParent: StokerRecord | undefined,
+    assignable: Assignable | undefined,
+    isAssigning: boolean | undefined,
+    filter: Filter,
+) => {
+    if (!isAssigning || !relationList || !relationParent?.id) return false
+    if (filter.type !== "select" || !filter.value) return false
+    const includeAssignedInFilters = assignable?.includeAssignedInFilters || []
+    return !!includeAssignedInFilters.includes(filter.field)
+}
+
 export const FiltersContext = createContext<
     | {
           filters: Filter[]
@@ -25,11 +46,22 @@ export const FiltersContext = createContext<
 
 interface FiltersProviderProps {
     collection: CollectionSchema
+    relationList?: RelationList
+    relationParent?: StokerRecord
+    assignable?: Assignable
+    isAssigning?: boolean
     children: React.ReactNode
 }
 
 /* eslint-disable react/prop-types */
-export const FiltersProvider: React.FC<FiltersProviderProps> = ({ collection, children }) => {
+export const FiltersProvider: React.FC<FiltersProviderProps> = ({
+    collection,
+    relationList,
+    relationParent,
+    assignable,
+    isAssigning,
+    children,
+}) => {
     const { labels, fields, softDelete } = collection
     const [filters, setFilters] = useState<Filter[]>([])
     const [order, setOrder] = useState<{ field: string; direction: "asc" | "desc" }>()
@@ -112,6 +144,14 @@ export const FiltersProvider: React.FC<FiltersProviderProps> = ({ collection, ch
                             constraints.push(where(filter.field, "array-contains", filter.value))
                         } else if (field.type === "Number") {
                             constraints.push(where(filter.field, "==", Number(filter.value)))
+                        } else if (includesAssigned(relationList, relationParent, assignable, isAssigning, filter)) {
+                            constraints.push(
+                                or(
+                                    where(filter.field, "==", filter.value),
+                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                    where(`${relationList!.field}_Array`, "array-contains", relationParent!.id),
+                                ) as unknown as QueryConstraint,
+                            )
                         } else {
                             constraints.push(where(filter.field, "==", filter.value))
                         }
@@ -205,7 +245,20 @@ export const FiltersProvider: React.FC<FiltersProviderProps> = ({ collection, ch
                 return constraints
             }
         },
-        [filters, fields, isPreloadCacheEnabled, isServerReadOnly, statusField, softDeleteField],
+        [
+            filters,
+            fields,
+            relationList,
+            relationParent,
+            assignable,
+            isAssigning,
+            isPreloadCacheEnabled,
+            isServerReadOnly,
+            statusField,
+            softDeleteField,
+            calendarConfig,
+            customization,
+        ],
     )
 
     const filterRecord = useCallback(
@@ -268,6 +321,12 @@ export const FiltersProvider: React.FC<FiltersProviderProps> = ({ collection, ch
                         show = show && record[filter.field]?.includes(filter.value)
                     } else if (field.type === "Number") {
                         show = show && record[filter.field] === Number(filter.value)
+                    } else if (includesAssigned(relationList, relationParent, assignable, isAssigning, filter)) {
+                        show =
+                            show &&
+                            (record[filter.field] === filter.value ||
+                                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                record[`${relationList!.field}_Array`]?.includes(relationParent!.id))
                     } else {
                         show = show && record[filter.field] === filter.value
                     }
@@ -279,7 +338,17 @@ export const FiltersProvider: React.FC<FiltersProviderProps> = ({ collection, ch
             })
             return show
         },
-        [filters, statusField, softDeleteField],
+        [
+            filters,
+            fields,
+            relationList,
+            relationParent,
+            assignable,
+            isAssigning,
+            statusField,
+            softDeleteField,
+            customization,
+        ],
     )
 
     return (

package/src/utils/combineQueryConstraints.ts

@@ -0,0 +1,10 @@
+import { and, QueryConstraint, QueryFilterConstraint } from "firebase/firestore"
+
+export const combineQueryConstraints = (constraints: QueryConstraint[]): QueryConstraint[] => {
+    const hasCompositeFilter = constraints.some((constraint) => {
+        const type = (constraint as { type?: string }).type
+        return type === "or" || type === "and"
+    })
+    if (!hasCompositeFilter || constraints.length <= 1) return constraints
+    return [and(...(constraints as unknown as QueryFilterConstraint[])) as unknown as QueryConstraint]
+}