@stoker-platform/web-app 0.5.203 → 0.5.205

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @stoker-platform/web-app
 
+## 0.5.205
+
+### Patch Changes
+
+- fix: fix filter clearing issue
+
+## 0.5.204
+
+### Patch Changes
+
+- feat: add record sidebar filters
+    - @stoker-platform/node-client@0.5.80
+    - @stoker-platform/utils@0.5.71
+    - @stoker-platform/web-client@0.5.84
+
 ## 0.5.203
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.203",
+    "version": "0.5.205",
     "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.79",
-        "@stoker-platform/utils": "0.5.70",
-        "@stoker-platform/web-client": "0.5.83",
+        "@stoker-platform/node-client": "0.5.80",
+        "@stoker-platform/utils": "0.5.71",
+        "@stoker-platform/web-client": "0.5.84",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Collection.tsx

@@ -1359,6 +1359,9 @@ function Collection({
                     }
                 }
             })
+            if (relationList.showFilters) {
+                excluded.push(...relationList.showFilters)
+            }
         }
         return excluded
     }, [isPreloadCacheEnabled, cardsConfig, statusField, tab, filters])

package/src/Filters.tsx

@@ -58,6 +58,7 @@ interface FiltersProps {
     relationParent?: StokerRecord
     assignable?: Assignable
     isAssigning?: boolean
+    isSidebar?: boolean
 }
 
 export function Filters({
@@ -68,6 +69,7 @@ export function Filters({
     relationParent,
     assignable,
     isAssigning,
+    isSidebar,
 }: FiltersProps) {
     const { labels, fields } = collection
     const location = useLocation()
@@ -830,6 +832,13 @@ export function Filters({
                         filters.forEach((filter) => {
                             if (filter.type === "status" || filter.type === "range") return
                             if (relationList && relationList.field === filter.field) return
+                            if (
+                                "condition" in filter &&
+                                filter.condition &&
+                                !filter.condition(relationCollection, relationParent, isAssigning)
+                            )
+                                return
+                            if (isSidebar && !relationList?.showFilters?.includes(filter.field)) return
                             const field = getField(fields, filter.field)
                             if (!field) return
                             if (filter.type === "select") {

package/src/Record.tsx

@@ -30,6 +30,7 @@ import { serverReadOnly } from "./utils/serverReadOnly"
 import { useRouteLoading } from "./providers/LoadingProvider"
 import { getRelationFields } from "./utils/getRelationFields"
 import { FiltersProvider } from "./providers/FiltersProvider"
+import { SidebarFilters } from "./SidebarFilters"
 import Collection from "./Collection"
 import { Breadcrumbs } from "./Breadcrumbs"
 import { Separator } from "./components/ui/separator"
@@ -82,6 +83,7 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
 
     const [isAssigning, setIsAssigning] = useState<Record<string, boolean>>({})
     const [assignable, setAssignable] = useState<Assignable[] | undefined>(undefined)
+    const [sidebarFiltersContainer, setSidebarFiltersContainer] = useState<HTMLDivElement | null>(null)
 
     useEffect(() => {
         if (id && record && record.id !== id) {
@@ -213,6 +215,7 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                                     customRecordPages={customRecordPages}
                                     isAssigning={isAssigning}
                                     setIsAssigning={setIsAssigning}
+                                    filtersContainerRef={setSidebarFiltersContainer}
                                 />
                                 <Routes>
                                     <Route
@@ -277,6 +280,25 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                                                                     </div>
                                                                 </>
                                                             )}
+                                                            {sidebarFiltersContainer && (
+                                                                <SidebarFilters
+                                                                    key={`${relationList.collection}-sidebar-filters`}
+                                                                    container={sidebarFiltersContainer}
+                                                                    collection={relationCollection}
+                                                                    relationList={relationList}
+                                                                    relationCollection={collection}
+                                                                    relationParent={record}
+                                                                    assignable={assignable?.find(
+                                                                        (item: Assignable) =>
+                                                                            item.collection === relationList.collection,
+                                                                    )}
+                                                                    isAssigning={
+                                                                        isAssigning?.[
+                                                                            relationList.collection.toLowerCase()
+                                                                        ]
+                                                                    }
+                                                                />
+                                                            )}
                                                             <Collection
                                                                 key={`${relationList.collection}-collection`}
                                                                 collection={relationCollection}

package/src/RecordSidebar.tsx

@@ -35,12 +35,14 @@ export const RecordSidebar = ({
     customRecordPages,
     isAssigning,
     setIsAssigning,
+    filtersContainerRef,
 }: {
     record: StokerRecord
     collection: CollectionSchema
     customRecordPages?: CustomRecordPage[]
     isAssigning: Record<string, boolean>
     setIsAssigning: (isAssigning: Record<string, boolean>) => void
+    filtersContainerRef?: (element: HTMLDivElement | null) => void
 }) => {
     const { labels } = collection
     const { path, id } = useParams()
@@ -308,6 +310,7 @@ export const RecordSidebar = ({
                                 )}
                             </div>
                         </SidebarMenu>
+                        <div ref={filtersContainerRef} />
                     </SidebarGroupContent>
                 </SidebarGroup>
             </SidebarContent>

package/src/SidebarFilters.tsx

@@ -0,0 +1,59 @@
+import { Assignable, CollectionSchema, RelationList, StokerRecord } from "@stoker-platform/types"
+import { useMemo } from "react"
+import { createPortal } from "react-dom"
+import { Filters } from "./Filters"
+import { useFilters } from "./providers/FiltersProvider"
+import { Separator } from "./components/ui/separator"
+
+export const SidebarFilters = ({
+    container,
+    collection,
+    relationList,
+    relationCollection,
+    relationParent,
+    assignable,
+    isAssigning,
+}: {
+    container: HTMLElement
+    collection: CollectionSchema
+    relationList: RelationList
+    relationCollection: CollectionSchema
+    relationParent: StokerRecord
+    assignable?: Assignable
+    isAssigning?: boolean
+}) => {
+    const { filters } = useFilters()
+    const showFilters = relationList.showFilters
+
+    const excluded = useMemo(
+        () =>
+            filters
+                .filter((filter) => filter.type !== "status" && filter.type !== "range")
+                .map((filter) => filter.field)
+                .filter((field) => !showFilters?.includes(field)),
+        [filters, showFilters],
+    )
+
+    if (!showFilters?.length) return null
+    const hasFiltersToShow = filters.some(
+        (filter) => filter.type !== "status" && filter.type !== "range" && showFilters.includes(filter.field),
+    )
+    if (!hasFiltersToShow) return null
+
+    return createPortal(
+        <div className="flex flex-col gap-4 px-2 pt-2">
+            <Separator />
+            <Filters
+                collection={collection}
+                excluded={excluded}
+                relationList={relationList}
+                relationCollection={relationCollection}
+                relationParent={relationParent}
+                assignable={assignable}
+                isAssigning={isAssigning}
+                isSidebar={true}
+            />
+        </div>,
+        container,
+    )
+}

package/src/utils/getFilterDisjunctions.ts

@@ -51,5 +51,23 @@ export const getFilterDisjunctions = (collection: CollectionSchema, options?: Fi
             incrementDisjunctions(2)
         }
     }
+    if (
+        options?.isAssigning &&
+        options.relationList &&
+        options.relationParent?.id &&
+        options.assignable?.includeValueInFilters?.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!.includeValueInFilters!.some((item) => item.field === filter.field),
+        ).length
+        for (let i = 0; i < activeOrCount; i++) {
+            incrementDisjunctions(2)
+        }
+    }
     return disjunctions
 }