@c-rex/components 0.3.0-build.28 → 0.3.0-build.30

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

@@ -0,0 +1,383 @@
+"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 hasSelectedDescendant = (node: RestrictionTreeNode, selectedShortIds: Set<string>): boolean => {
+    const shortId = node.item.shortId;
+    if (shortId && selectedShortIds.has(shortId)) {
+        return true;
+    }
+
+    return node.children.some((child) => hasSelectedDescendant(child, selectedShortIds));
+};
+
+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 RestrictionSelectionMenu: 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 selectedRestrictionIds = useMemo(() => new Set(restrictionValues), [restrictionValues]);
+
+    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;
+        const isSelected = restrictionValues.includes(shortId);
+        const hasActiveDescendant = hasChildren && node.children.some((child) => hasSelectedDescendant(child, selectedRestrictionIds));
+        const shouldHighlightBranch = hasActiveDescendant && !isSelected;
+
+        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 * 12 }}
+                        className={cn(
+                            "w-full rounded-xl transition-colors",
+                            shouldHighlightBranch && "bg-primary/5 ring-1 ring-primary/10"
+                        )}
+                    >
+                        <RestrictionDropdownItem
+                            shortId={shortId}
+                            restrictField={restrictField}
+                            label={getLabelByLang(node.item.labels, lang)}
+                            selected={isSelected}
+                        />
+                    </div>
+                    {shouldHighlightBranch ? (
+                        <span
+                            aria-hidden="true"
+                            className="ml-1 h-2.5 w-2.5 shrink-0 rounded-full bg-primary/55"
+                        />
+                    ) : null}
+                </div>
+                {hasChildren && isExpanded && (
+                    <ul className="pl-3">
+                        {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);
+                    const rootSelected = restrictionValues.includes(shortId);
+                    const hasActiveDescendant = hasChildren && hasSelectedDescendant(rootNode, selectedRestrictionIds);
+                    const shouldHighlightBranch = hasActiveDescendant && !rootSelected;
+
+                    if (!hasChildren) {
+                        return (
+                            <RestrictionNavigationItem
+                                key={shortId}
+                                shortId={shortId}
+                                restrictField={restrictField}
+                                label={label}
+                                selected={restrictionValues.includes(shortId)}
+                            />
+                        );
+                    }
+
+                    return (
+                        <NavigationMenuItem key={`root-dropdown-${shortId}`}>
+                            <NavigationMenuTrigger
+                                className={cn(
+                                    shouldHighlightBranch && "border border-primary/20 bg-primary/5 text-primary shadow-sm"
+                                )}
+                            >
+                                <span className="inline-flex items-center gap-2">
+                                    {label}
+                                    {shouldHighlightBranch ? (
+                                        <span
+                                            aria-hidden="true"
+                                            className="h-2 w-2 rounded-full bg-primary/55"
+                                        />
+                                    ) : null}
+                                </span>
+                            </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>
+    );
+};
+
+export const RestrictionMenu = RestrictionSelectionMenu;

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

@@ -0,0 +1,114 @@
+"use client";
+
+import { DomainEntityModel } from "@c-rex/interfaces";
+import { FC, ReactNode, useMemo, useState } from "react";
+import * as ComponentOptions from "../generated/client-components";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { RestrictionSelectionMenu } from "./restriction-selection-menu";
+
+type GenericRequestData = {
+    items?: DomainEntityModel[];
+    pageInfo?: {
+        totalItemCount?: number;
+    };
+} | null | undefined;
+type GenericQueryParams = Record<string, unknown> & { Restrict?: string[]; PageSize?: number; Fields?: string[] };
+type GenericRequestProps = {
+    queryParams?: GenericQueryParams;
+    children: (props: { data?: GenericRequestData; isLoading?: boolean }) => ReactNode;
+};
+type RestrictionMenuFetchMode = "all" | "deferred";
+
+export type TaxonomyRestrictionMenuProps = {
+    restrictField: string;
+    navigationMenuListClassName?: string;
+    itemsToRender?: number;
+    requestType: keyof typeof ComponentOptions;
+    onlyUsedEntries?: boolean;
+    enableHierarchy?: boolean;
+    fetchMode?: RestrictionMenuFetchMode;
+    showAllWhenEmpty?: boolean;
+    queryParams?: GenericQueryParams;
+};
+
+export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
+    queryParams,
+    restrictField,
+    itemsToRender = 7,
+    requestType,
+    onlyUsedEntries = true,
+    enableHierarchy = false,
+    fetchMode = "deferred",
+    showAllWhenEmpty = true,
+    navigationMenuListClassName = "items-center justify-between flex-row",
+}) => {
+    const [loadAll, setLoadAll] = useState(false);
+    const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
+    const queryRestrict = queryParams?.Restrict || [];
+    const restrict = onlyUsedEntries ? ["hasInformationUnits=true", ...queryRestrict] : queryRestrict;
+    const explicitPageSize =
+        Number.isFinite(Number(queryParams?.PageSize)) && Number(queryParams?.PageSize) > 0
+            ? Number(queryParams?.PageSize)
+            : undefined;
+    const resolvedPageSize = useMemo(() => {
+        if (explicitPageSize) return explicitPageSize;
+        if (fetchMode === "deferred" && !loadAll) return Math.max(itemsToRender, 1);
+        return 100;
+    }, [explicitPageSize, fetchMode, itemsToRender, loadAll]);
+    const requestedFields = Array.isArray(queryParams?.Fields) ? queryParams.Fields : undefined;
+    const resolvedFields = useMemo(() => {
+        const baseFields = requestedFields && requestedFields.length > 0 ? requestedFields : ["labels"];
+        if (!enableHierarchy) return baseFields;
+        const withParents = new Set(baseFields);
+        withParents.add("parents");
+        return Array.from(withParents);
+    }, [enableHierarchy, requestedFields]);
+
+    return (
+        <RequestComponent
+            queryParams={{
+                ...queryParams,
+                Fields: resolvedFields,
+                Links: true,
+                Sort: ["labels.value"],
+                PageSize: resolvedPageSize,
+                Restrict: restrict,
+            }}
+        >
+            {({ data, isLoading }) => {
+                if (isLoading) return (
+                    <div className="flex justify-between">
+                        <Skeleton className="w-12 h-9 rounded-full" />
+                        {Array(itemsToRender).fill(0).map((_, index) => (
+                            <Skeleton key={`skeleton-${index}`} className="w-28 h-9 rounded-full" />
+                        ))}
+                        <Skeleton className="w-20 h-9 rounded-full" />
+                    </div>
+                );
+
+                if (!data) return null;
+
+                const itemCount = data.items?.length || 0;
+                const totalItemCount = data.pageInfo?.totalItemCount;
+                const hasMoreFromServer = typeof totalItemCount === "number" ? totalItemCount > itemCount : false;
+                const hasMoreItems = hasMoreFromServer || (explicitPageSize ? false : (fetchMode === "deferred" && !loadAll && itemCount >= resolvedPageSize));
+
+                return (
+                    <RestrictionSelectionMenu
+                        restrictField={restrictField}
+                        items={data.items || []}
+                        enableHierarchy={enableHierarchy}
+                        hasMoreItems={hasMoreItems}
+                        showAllWhenEmpty={showAllWhenEmpty}
+                        onRequestMore={() => {
+                            if (fetchMode === "deferred" && !explicitPageSize) {
+                                setLoadAll(true);
+                            }
+                        }}
+                        navigationMenuListClassName={navigationMenuListClassName}
+                    />
+                );
+            }}
+        </RequestComponent>
+    );
+};