@c-rex/components 0.1.38 → 0.1.39

package/src/restriction-menu/restriction-menu.tsx

@@ -1,156 +1,341 @@
-"use client";
-
-import { FC, useEffect, useMemo, useState } from "react"
-import {
-    NavigationMenu,
-    NavigationMenuList,
-    NavigationMenuItem,
-    NavigationMenuTrigger,
-    NavigationMenuContent,
-} from "@c-rex/ui/navigation-menu";
-import { RestrictionDropdownItem, RestrictionNavigationItem } from "./restriction-menu-item";
-import { parseAsString, useQueryStates } from "nuqs";
-import { InformationSubjectModel } from "@c-rex/interfaces";
-import { useLocale, useTranslations } from 'next-intl'
-import { cn, getLabelByLang } from "@c-rex/utils";
-import { useRestrictionStore } from "../stores/restriction-store";
-import { useBreakpoint } from "@c-rex/ui/hooks";
-import { DEVICE_OPTIONS } from "@c-rex/constants";
-
-
-type Props = {
-    restrictField: string
-    navigationMenuListClassName?: string
-    items: InformationSubjectModel[],
-    itemsByRow?: {
-        [DEVICE_OPTIONS.MOBILE]: number,
-        [DEVICE_OPTIONS.TABLET]: number,
-        [DEVICE_OPTIONS.DESKTOP]: number,
-    }
-}
-
-export const RestrictionMenu: FC<Props> = ({
-    items,
-    restrictField,
-    navigationMenuListClassName = "items-center justify-between flex-row",
-    itemsByRow = {
-        [DEVICE_OPTIONS.MOBILE]: 2,
-        [DEVICE_OPTIONS.TABLET]: 5,
-        [DEVICE_OPTIONS.DESKTOP]: 7,
-    }
-}) => {
-    const t = useTranslations();
-    const setRestrictionList = useRestrictionStore((state) => state.setRestrictionList);
-
-    const [params] = useQueryStates({
-        restrict: parseAsString,
-    }, {
-        history: 'push',
-        shallow: false,
-    });
-
-    const restrictionValues = useMemo(() => params.restrict?.split(`${restrictField}=`)[1]?.split(",") || [], [params.restrict, restrictField]);
-
-    const uiLang = useLocale();
-    const lang = uiLang?.split("-")[0] ?? "";
-
-    useEffect(() => {
-        const map = new Map<string, string>();
-        items.forEach((item) => {
-            const label = getLabelByLang(item.labels, lang);
-            if (item.shortId && label) {
-                map.set(item.shortId, label);
-            }
-        });
-        setRestrictionList(map);
-    }, [items, lang, setRestrictionList]);
-
-    const sortedItems = useMemo(() => {
-        //if shortId it is on the restrictionValues, it should be on top of the list, otherwise keep the original order
-
-        const sorted = [...items].sort((a, b) => {
-            const aShortId = a.shortId || "";
-            const bShortId = b.shortId || "";
-
-            const aIndex = restrictionValues.indexOf(aShortId);
-            const bIndex = restrictionValues.indexOf(bShortId);
-
-            if (aIndex === -1 && bIndex === -1) {
-                return 0; // keep original order if neither is in restrictionValues
-            }
-            if (aIndex === -1) {
-                return 1; // a goes after b
-            }
-            if (bIndex === -1) {
-                return -1; // a goes before b
-            }
-            return aIndex - bIndex; // sort by index in restrictionValues
-        });
-        return sorted;
-    }, [items, restrictionValues]);
-
-    const device = useBreakpoint();
-    const [visibleCount, setVisibleCount] = useState(0);
-    const [visibleItems, setVisibleItems] = useState(sortedItems.slice(0, visibleCount));
-    const [hiddenItems, setHiddenItems] = useState(sortedItems.slice(visibleCount));
-
-    useEffect(() => {
-        if (device == null) return
-        setVisibleCount(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
-
-    }, [device, itemsByRow]);
-
-    useEffect(() => {
-        if (visibleCount == 0) return;
-
-        setVisibleItems(sortedItems.slice(0, visibleCount));
-        setHiddenItems(sortedItems.slice(visibleCount));
-    }, [sortedItems, visibleCount]);
-
-    return (
-        <NavigationMenu viewport={false} className="max-w-full w-full c-rex-restriction-menu">
-            <NavigationMenuList className={cn("w-full", navigationMenuListClassName)}>
-
-
-                <RestrictionNavigationItem
-                    removeRestrictParam
-                    label={t('all')}
-                    selected={restrictionValues.length === 0}
-                />
-
-                {visibleItems.map((item) => (
-                    <RestrictionNavigationItem
-                        key={item.shortId}
-                        shortId={item.shortId!}
-                        restrictField={restrictField as string}
-                        label={getLabelByLang(item.labels, lang)}
-                        selected={restrictionValues.includes(item.shortId!)}
-                    />
-                ))}
-
-                <NavigationMenuItem>
-                    <NavigationMenuTrigger>
-                        {t('more')}
-                    </NavigationMenuTrigger>
-                    <NavigationMenuContent className="w-96 sm:w-[] md:w-[700px] lg:w-[65rem]">
-                        <ul className="grid gap-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
-                            {hiddenItems.map((item) => (
-                                <li
-                                    key={item.shortId}
-                                    className="flex items-center"
-                                >
-                                    <RestrictionDropdownItem
-                                        shortId={item.shortId!}
-                                        restrictField={restrictField as string}
-                                        label={getLabelByLang(item.labels, lang)}
-                                        selected={restrictionValues.includes(item.shortId!)}
-                                    />
-                                </li>
-                            ))}
-                        </ul>
-                    </NavigationMenuContent>
-                </NavigationMenuItem>
-            </NavigationMenuList>
-        </NavigationMenu>
-    );
-};
+"use client";
+
+import { FC, useEffect, useMemo, useState } from "react"
+import {
+    NavigationMenu,
+    NavigationMenuList,
+    NavigationMenuItem,
+    NavigationMenuTrigger,
+    NavigationMenuContent,
+} from "@c-rex/ui/navigation-menu";
+import { RestrictionDropdownItem, RestrictionNavigationItem } from "./restriction-menu-item";
+import { parseAsString, useQueryStates } from "nuqs";
+import { DomainEntityModel, ObjectRefModel } from "@c-rex/interfaces";
+import { useLocale, useTranslations } from 'next-intl'
+import { cn, getLabelByLang } from "@c-rex/utils";
+import { useRestrictionStore } from "../stores/restriction-store";
+import { useBreakpoint } from "@c-rex/ui/hooks";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+
+type Props = {
+    restrictField: string
+    navigationMenuListClassName?: string
+    items: DomainEntityModel[],
+    enableHierarchy?: boolean,
+    hasMoreItems?: boolean,
+    showAllWhenEmpty?: boolean,
+    onRequestMore?: () => void,
+    itemsByRow?: {
+        [DEVICE_OPTIONS.MOBILE]: number,
+        [DEVICE_OPTIONS.TABLET]: number,
+        [DEVICE_OPTIONS.DESKTOP]: number,
+    }
+}
+
+type RestrictionTreeNode = {
+    item: DomainEntityModel;
+    children: RestrictionTreeNode[];
+};
+
+const getNodeKeys = (item: DomainEntityModel): string[] => {
+    const keys = new Set<string>();
+    if (item.shortId) keys.add(`short:${item.shortId}`);
+    if (item.id) keys.add(`id:${item.id}`);
+    return Array.from(keys);
+};
+
+const extractParentKeys = (item: DomainEntityModel): string[] => {
+    const withParents = item as DomainEntityModel & { parents?: ObjectRefModel[] | null };
+    return (withParents.parents || [])
+        .flatMap((parent) => {
+            const keys: string[] = [];
+            if (parent.shortId) keys.push(`short:${parent.shortId}`);
+            if (parent.id) keys.push(`id:${parent.id}`);
+            return keys;
+        });
+};
+
+const buildRestrictionTree = (items: DomainEntityModel[]): RestrictionTreeNode[] => {
+    const nodes = new Map<string, RestrictionTreeNode>();
+    items.forEach((item) => {
+        const keys = getNodeKeys(item);
+        if (keys.length === 0) return;
+        const node: RestrictionTreeNode = { item, children: [] };
+        keys.forEach((key) => nodes.set(key, node));
+    });
+
+    const roots: RestrictionTreeNode[] = [];
+    const linked = new Set<RestrictionTreeNode>();
+    const rootSet = new Set<RestrictionTreeNode>();
+
+    items.forEach((item) => {
+        const [firstKey] = getNodeKeys(item);
+        if (!firstKey) return;
+        const node = nodes.get(firstKey);
+        if (!node) return;
+
+        const parentKeys = extractParentKeys(item);
+        const parentNode = parentKeys
+            .map((parentKey) => nodes.get(parentKey))
+            .find((candidate) => candidate !== undefined);
+
+        if (parentNode) {
+            if (!parentNode.children.includes(node)) {
+                parentNode.children.push(node);
+            }
+            linked.add(node);
+            return;
+        }
+
+        rootSet.add(node);
+    });
+
+    rootSet.forEach((root) => {
+        if (!linked.has(root) || root.item.shortId) {
+            roots.push(root);
+        }
+    });
+
+    return roots;
+};
+
+export const RestrictionMenu: FC<Props> = ({
+    items,
+    restrictField,
+    enableHierarchy = false,
+    hasMoreItems = false,
+    showAllWhenEmpty = true,
+    onRequestMore,
+    navigationMenuListClassName = "items-center justify-between flex-row",
+    itemsByRow = {
+        [DEVICE_OPTIONS.MOBILE]: 2,
+        [DEVICE_OPTIONS.TABLET]: 5,
+        [DEVICE_OPTIONS.DESKTOP]: 7,
+    }
+}) => {
+    const t = useTranslations();
+    const setRestrictionList = useRestrictionStore((state) => state.setRestrictionList);
+
+    const [params] = useQueryStates({
+        restrict: parseAsString,
+    }, {
+        history: 'push',
+        shallow: false,
+    });
+
+    const restrictionValues = useMemo(() => params.restrict?.split(`${restrictField}=`)[1]?.split(",") || [], [params.restrict, restrictField]);
+
+    const uiLang = useLocale();
+    const lang = uiLang?.split("-")[0] ?? "";
+
+    useEffect(() => {
+        const map = new Map<string, string>();
+        items.forEach((item) => {
+            const label = getLabelByLang(item.labels, lang);
+            if (item.shortId && label) {
+                map.set(item.shortId, label);
+            }
+        });
+        setRestrictionList(map);
+    }, [items, lang, setRestrictionList]);
+
+    const sortedItems = useMemo(() => {
+        //if shortId it is on the restrictionValues, it should be on top of the list, otherwise keep the original order
+
+        const sorted = [...items].sort((a, b) => {
+            const aShortId = a.shortId || "";
+            const bShortId = b.shortId || "";
+
+            const aIndex = restrictionValues.indexOf(aShortId);
+            const bIndex = restrictionValues.indexOf(bShortId);
+
+            if (aIndex === -1 && bIndex === -1) {
+                return 0; // keep original order if neither is in restrictionValues
+            }
+            if (aIndex === -1) {
+                return 1; // a goes after b
+            }
+            if (bIndex === -1) {
+                return -1; // a goes before b
+            }
+            return aIndex - bIndex; // sort by index in restrictionValues
+        });
+        return sorted;
+    }, [items, restrictionValues]);
+
+    const hierarchyRoots = useMemo(() => {
+        if (!enableHierarchy) return [];
+        return buildRestrictionTree(sortedItems);
+    }, [enableHierarchy, sortedItems]);
+
+    const device = useBreakpoint();
+    const [visibleCount, setVisibleCount] = useState(0);
+    const [visibleItems, setVisibleItems] = useState(sortedItems.slice(0, visibleCount));
+    const [hiddenItems, setHiddenItems] = useState(sortedItems.slice(visibleCount));
+
+    useEffect(() => {
+        if (device == null) return
+        setVisibleCount(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
+
+    }, [device, itemsByRow]);
+
+    useEffect(() => {
+        if (visibleCount == 0) return;
+
+        if (enableHierarchy) {
+            const roots = hierarchyRoots.map((node) => node.item);
+            setVisibleItems(roots.slice(0, visibleCount));
+            setHiddenItems(roots.slice(visibleCount));
+            return;
+        }
+
+        setVisibleItems(sortedItems.slice(0, visibleCount));
+        setHiddenItems(sortedItems.slice(visibleCount));
+    }, [enableHierarchy, hierarchyRoots, sortedItems, visibleCount]);
+
+    const visibleHierarchyRoots = useMemo(() => {
+        if (!enableHierarchy) return [];
+        const visibleRootShortIds = new Set(visibleItems.map((item) => item.shortId).filter(Boolean));
+        return hierarchyRoots.filter((root) => root.item.shortId && visibleRootShortIds.has(root.item.shortId));
+    }, [enableHierarchy, hierarchyRoots, visibleItems]);
+
+    const hiddenHierarchyRoots = useMemo(() => {
+        if (!enableHierarchy) return [];
+        const hiddenRootShortIds = new Set(hiddenItems.map((item) => item.shortId).filter(Boolean));
+        return hierarchyRoots.filter((root) => root.item.shortId && hiddenRootShortIds.has(root.item.shortId));
+    }, [enableHierarchy, hierarchyRoots, hiddenItems]);
+
+    const [expandedNodes, setExpandedNodes] = useState<Record<string, boolean>>({});
+    const toggleExpanded = (shortId: string) => {
+        setExpandedNodes((prev) => ({ ...prev, [shortId]: !prev[shortId] }));
+    };
+
+    const renderTreeNode = (node: RestrictionTreeNode, depth = 0) => {
+        const shortId = node.item.shortId || "";
+        const hasChildren = node.children.length > 0;
+        const isRootNode = depth === 0;
+        const isExpanded = isRootNode || expandedNodes[shortId] === true;
+
+        return (
+            <li key={`tree-node-${shortId}`} className="flex flex-col w-full">
+                <div className="flex items-center gap-1">
+                    {hasChildren && !isRootNode ? (
+                        <button
+                            type="button"
+                            onClick={() => toggleExpanded(shortId)}
+                            className="shrink-0 rounded p-1 hover:bg-muted"
+                            aria-label={isExpanded ? "Collapse" : "Expand"}
+                        >
+                            {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                        </button>
+                    ) : (
+                        <span className="inline-block w-6" />
+                    )}
+                    <div style={{ marginLeft: depth * 10 }} className="w-full">
+                        <RestrictionDropdownItem
+                            shortId={shortId}
+                            restrictField={restrictField}
+                            label={getLabelByLang(node.item.labels, lang)}
+                            selected={restrictionValues.includes(shortId)}
+                        />
+                    </div>
+                </div>
+                {hasChildren && isExpanded && (
+                    <ul className="pl-2">
+                        {node.children.map((child) => renderTreeNode(child, depth + 1))}
+                    </ul>
+                )}
+            </li>
+        );
+    };
+
+    return (
+        <NavigationMenu viewport={false} className="max-w-full w-full c-rex-restriction-menu">
+            <NavigationMenuList className={cn("w-full", navigationMenuListClassName)}>
+
+
+                {(showAllWhenEmpty || items.length > 0) && (
+                    <RestrictionNavigationItem
+                        removeRestrictParam
+                        label={t('all')}
+                        selected={restrictionValues.length === 0}
+                    />
+                )}
+
+                {!enableHierarchy && visibleItems.map((item) => (
+                    <RestrictionNavigationItem
+                        key={item.shortId}
+                        shortId={item.shortId!}
+                        restrictField={restrictField as string}
+                        label={getLabelByLang(item.labels, lang)}
+                        selected={restrictionValues.includes(item.shortId!)}
+                    />
+                ))}
+
+                {enableHierarchy && visibleHierarchyRoots.map((rootNode) => {
+                    const shortId = rootNode.item.shortId || "";
+                    const hasChildren = rootNode.children.length > 0;
+                    const label = getLabelByLang(rootNode.item.labels, lang);
+
+                    if (!hasChildren) {
+                        return (
+                            <RestrictionNavigationItem
+                                key={shortId}
+                                shortId={shortId}
+                                restrictField={restrictField}
+                                label={label}
+                                selected={restrictionValues.includes(shortId)}
+                            />
+                        );
+                    }
+
+                    return (
+                        <NavigationMenuItem key={`root-dropdown-${shortId}`}>
+                            <NavigationMenuTrigger>
+                                {label}
+                            </NavigationMenuTrigger>
+                            <NavigationMenuContent className="w-96 sm:w-[420px] md:w-[520px]">
+                                <ul className="grid gap-1">
+                                    {renderTreeNode(rootNode, 0)}
+                                </ul>
+                            </NavigationMenuContent>
+                        </NavigationMenuItem>
+                    );
+                })}
+
+                {(enableHierarchy ? hiddenHierarchyRoots.length > 0 : hiddenItems.length > 0) || hasMoreItems ? (
+                    <NavigationMenuItem>
+                        <NavigationMenuTrigger onClick={onRequestMore}>
+                            {t('more')}
+                        </NavigationMenuTrigger>
+                        <NavigationMenuContent className="w-96 sm:w-[] md:w-[700px] lg:w-[65rem]">
+                            {enableHierarchy ? (
+                                <ul className="grid gap-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3">
+                                    {hiddenHierarchyRoots.map((node) => renderTreeNode(node, 0))}
+                                </ul>
+                            ) : (
+                                <ul className="grid gap-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
+                                    {hiddenItems.map((item) => (
+                                        <li
+                                            key={item.shortId}
+                                            className="flex items-center"
+                                        >
+                                            <RestrictionDropdownItem
+                                                shortId={item.shortId!}
+                                                restrictField={restrictField as string}
+                                                label={getLabelByLang(item.labels, lang)}
+                                                selected={restrictionValues.includes(item.shortId!)}
+                                            />
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </NavigationMenuContent>
+                    </NavigationMenuItem>
+                ) : null}
+            </NavigationMenuList>
+        </NavigationMenu>
+    );
+};