diff --git a/src/adverts/components/filter/filters/FilterDialog.tsx b/src/adverts/components/filter/filters/FilterDialog.tsx
index c9992b3..f916db1 100644
--- a/src/adverts/components/filter/filters/FilterDialog.tsx
+++ b/src/adverts/components/filter/filters/FilterDialog.tsx
@@ -20,6 +20,7 @@ import { TagsContext } from 'tags'
import { AuthContext } from 'auth'
import { CategoriesFilter } from './CategoriesFilter'
import { StringArrayFilter } from './StringArrayFilter'
+import { CategoriesFilter2 } from './experimental/CategoriesFilter2'
export interface SelectedFilters {
categories: string[]
@@ -119,10 +120,19 @@ export const FilterDialog: FC<{
onChange={setSizes}
/>
)}
-
+ {
+ // disable previous version of category filter
+ false && (
+
+ )
+ }
{model.tags.length > 0 && (
,
rejected: () => ,
resolved: (categories) => (
-
+ <>
+
+ Kategorier
+
+
+ >
),
})
}
diff --git a/src/adverts/components/filter/filters/experimental/TreeSelect.tsx b/src/adverts/components/filter/filters/experimental/TreeSelect.tsx
index d8d629c..cb8d434 100644
--- a/src/adverts/components/filter/filters/experimental/TreeSelect.tsx
+++ b/src/adverts/components/filter/filters/experimental/TreeSelect.tsx
@@ -31,6 +31,7 @@ export function TreeSelect({
value: T
selected: boolean
pselected: boolean
+ cselected: boolean
expanded: boolean
children: Node[]
canExpand: boolean
@@ -40,21 +41,32 @@ export function TreeSelect({
const selectedSet = new Set(selected)
const expandedSet = new Set(expanded)
- const buildNode = (item: T, pselected: boolean): Node => ({
- label: getLabel(item),
- value: item,
- selected: selectedSet.has(getKey(item)),
- expanded: expandedSet.has(getKey(item)),
- canExpand:
- !expandedSet.has(getKey(item)) && getChildren(item).length > 0,
- canCollapse:
- expandedSet.has(getKey(item)) && getChildren(item).length > 0,
- pselected,
- children: getChildren(item).map((child) =>
- buildNode(child, pselected || selectedSet.has(getKey(item)))
- ),
- })
+ // From input items, construct display nodes that can feed ourr recursive rendering
+ const buildNode = (item: T, pselected: boolean): Node =>
+ ((n: Node) => ({
+ ...n,
+ cselected: n.children.some((c) => c.selected || c.cselected),
+ }))({
+ label: getLabel(item),
+ value: item,
+ selected: selectedSet.has(getKey(item)),
+ pselected,
+ cselected: false,
+ expanded: expandedSet.has(getKey(item)),
+ canExpand:
+ !expandedSet.has(getKey(item)) && getChildren(item).length > 0,
+ canCollapse:
+ expandedSet.has(getKey(item)) && getChildren(item).length > 0,
+ children: getChildren(item).map((child) =>
+ buildNode(child, pselected || selectedSet.has(getKey(item)))
+ ),
+ })
+ const flexCells = 16
+ // Render a node using some neat flex trix
+ // - indentation is done by flex={level}
+ // - buttons and checkboxes have flex={1}
+ // - content fills out with flex={flexCells - level}
const renderNode = (node: Node, level: number) => (
@@ -91,7 +103,9 @@ export function TreeSelect({
onSelected(
@@ -104,7 +118,7 @@ export function TreeSelect({
}
/>
-
+
{node.label}