slimmer category filtering

helsingborg-stad · Feb 20, 2025 · d853d37 · d853d37
1 parent 972ea3a
commit d853d37
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 22 deletions.
diff --git 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}
                             />
                         )}
-                        <CategoriesFilter
+                        <CategoriesFilter2
                             selected={categories}
                             onCategoriesChanged={setCategories}
                         />
+                        {
+                            // disable previous version of category filter
+                            false && (
+                                <CategoriesFilter
+                                    selected={categories}
+                                    onCategoriesChanged={setCategories}
+                                />
+                            )
+                        }
                         {model.tags.length > 0 && (
                             <StringArrayFilter
                                 label={phrase('TERMS_FIELD_TAGS', 'Taggar')}

diff --git a/src/adverts/components/filter/filters/experimental/CategoriesFilter2.tsx b/src/adverts/components/filter/filters/experimental/CategoriesFilter2.tsx
@@ -2,6 +2,7 @@ import { FC, Fragment, useContext, useState } from 'react'
 import { CategoriesContext } from 'categories'
 import useAsync from 'hooks/use-async'
 import { Category } from 'categories/types'
+import { Typography } from '@mui/material'
 import { TreeSelect } from './TreeSelect'
 
 // Take a list of categories and recursively trim list to only contain
@@ -66,11 +67,16 @@ export const CategoriesFilter2: FC<{
         pending: () => <Fragment key="pending" />,
         rejected: () => <Fragment key="rejected" />,
         resolved: (categories) => (
-            <CategoriesTree
-                categories={categories}
-                selected={selected}
-                onCategoriesChanged={onCategoriesChanged}
-            />
+            <>
+                <Typography variant="subtitle1" gutterBottom>
+                    Kategorier
+                </Typography>
+                <CategoriesTree
+                    categories={categories}
+                    selected={selected}
+                    onCategoriesChanged={onCategoriesChanged}
+                />
+            </>
         ),
     })
 }
diff --git 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<T>({
         value: T
         selected: boolean
         pselected: boolean
+        cselected: boolean
         expanded: boolean
         children: Node[]
         canExpand: boolean
@@ -40,21 +41,32 @@ export function TreeSelect<T>({
     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) => (
         <Fragment key={getKey(node.value)}>
             <Grid container spacing={0} key={getKey(node.value)}>
@@ -91,7 +103,9 @@ export function TreeSelect<T>({
                     <Checkbox
                         checked={node.selected}
                         indeterminate={
-                            node.pselected && !node.selected ? true : undefined
+                            (node.cselected || node.pselected) && !node.selected
+                                ? true
+                                : undefined
                         }
                         onChange={() =>
                             onSelected(
@@ -104,7 +118,7 @@ export function TreeSelect<T>({
                         }
                     />
                 </Grid>
-                <Grid item flex={16 - level} alignContent="center">
+                <Grid item flex={flexCells - level} alignContent="center">
                     <Box>{node.label}</Box>
                 </Grid>
             </Grid>