@c-rex/components 0.3.0-build.35 → 0.3.0-build.36

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

@@ -0,0 +1,444 @@
+"use client";
+
+import { FC, useEffect, useMemo, useRef, useState } from "react"
+import {
+    NavigationMenu,
+    NavigationMenuList,
+    NavigationMenuItem,
+} from "@c-rex/ui/navigation-menu";
+import { RestrictionNavigationItem } from "./restriction-menu-item";
+import { parseAsString, useQueryState, 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 { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@c-rex/ui/command";
+import { Dialog, DialogContent } from "@c-rex/ui/dialog";
+import { Button } from "@c-rex/ui/button";
+import { Check, ChevronDown } from "lucide-react";
+import { useSearchNavigationStore } from "../stores/search-navigation-store";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
+
+type Props = {
+    restrictField: string
+    navigationMenuListClassName?: string
+    items: DomainEntityModel[],
+    enableHierarchy?: boolean,
+    hasMoreItems?: boolean,
+    showAllWhenEmpty?: boolean,
+    onRequestMore?: () => void,
+    stripLabelPrefix?: string,
+    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;
+};
+
+type RestrictionCommandDialogProps = {
+    label: string;
+    items: RestrictionTreeNode[];
+    restrictField: string;
+    selectedRestrictionIds: Set<string>;
+    lang: string;
+    highlighted?: boolean;
+    formatLabel?: (label: string) => string;
+};
+
+const RestrictionCommandDialog: FC<RestrictionCommandDialogProps> = ({
+    label,
+    items,
+    restrictField,
+    selectedRestrictionIds,
+    lang,
+    highlighted = false,
+    formatLabel,
+}) => {
+    const fmt = (raw: string) => formatLabel ? formatLabel(raw) : raw;
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const listRef = useRef<HTMLDivElement>(null);
+    const [restrict, setRestrict] = useQueryState("restrict", { shallow: false, history: "push" });
+    const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const t = useTranslations();
+    const device = useBreakpoint();
+
+    useEffect(() => {
+        if (listRef.current) {
+            listRef.current.scrollTop = 0;
+        }
+    }, [search]);
+
+    const filteredItems = useMemo(() => {
+        if (!search) return items;
+        const lower = search.toLowerCase();
+        return items.flatMap((node) => {
+            const groupLabel = getLabelByLang(node.item.labels, lang) ?? node.item.shortId ?? "";
+            const matchingChildren = node.children.filter((child) => {
+                const childLabel = getLabelByLang(child.item.labels, lang) ?? child.item.shortId ?? "";
+                return childLabel.toLowerCase().includes(lower);
+            });
+            if (groupLabel.toLowerCase().includes(lower)) {
+                return [node];
+            }
+            if (matchingChildren.length > 0) {
+                return [{ ...node, children: matchingChildren }];
+            }
+            return [];
+        });
+    }, [items, search, lang]);
+
+    const handleSelect = (shortId: string, isSelected: boolean) => {
+        startSearchNavigation();
+        if (isSelected) {
+            const restrictionsLength = restrict?.split(",").length ?? 0;
+            if (restrictionsLength <= 1) {
+                setRestrict(null);
+            } else {
+                const updated = restrict!
+                    .replace(shortId, "")
+                    .replace(",,", ",")
+                    .replace(/(^,)|(,$)/g, "");
+                setRestrict(/^[^=]+=$/.test(updated) ? null : updated);
+            }
+        } else {
+            setRestrict(restrict ? `${restrict},${shortId}` : `${restrictField}=${shortId}`);
+        }
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <TooltipProvider delayDuration={300}>
+                <Button
+                    variant={highlighted ? "default" : "outline"}
+                    rounded="full"
+                    onClick={() => setOpen(true)}
+                    className="cursor-pointer gap-1"
+                >
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <span className="items-center gap-2">
+                                {(
+                                    device == DEVICE_OPTIONS.MOBILE && label.length > 15
+                                ) ? `${label.slice(0, 12)}...` : label}
+                                {highlighted && (
+                                    <span aria-hidden="true" className="h-2 w-2 rounded-full bg-primary/55" />
+                                )}
+                            </span>
+                        </TooltipTrigger>
+                        <TooltipContent>{label}</TooltipContent>
+                    </Tooltip>
+                    <ChevronDown className="h-3 w-3 opacity-60" />
+                </Button>
+            </TooltipProvider>
+
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogContent className="overflow-hidden p-0">
+                    <Command shouldFilter={false} className="[&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                        <CommandInput placeholder={t("search")} value={search} onValueChange={setSearch} />
+                        <CommandList ref={listRef}>
+                            <CommandEmpty>{t("results.noResultsTitle")}</CommandEmpty>
+                            {filteredItems.map((node) => {
+                                const groupShortId = node.item.shortId ?? "";
+                                const groupLabel = fmt(getLabelByLang(node.item.labels, lang) ?? groupShortId);
+                                const groupIsSelected = selectedRestrictionIds.has(groupShortId);
+
+                                return (
+                                    <>
+                                        <CommandItem
+                                            key={groupShortId}
+                                            value={groupLabel}
+                                            onSelect={() => handleSelect(groupShortId, groupIsSelected)}
+                                            className="cursor-pointer"
+                                        >
+                                            <span className={cn("flex-1", groupIsSelected && "font-medium")}>{groupLabel}</span>
+                                            {groupIsSelected && <Check className="h-4 w-4 shrink-0 text-primary" />}
+                                        </CommandItem>
+                                        {node.children.map((child) => {
+                                            const shortId = child.item.shortId ?? "";
+                                            const childLabel = fmt(getLabelByLang(child.item.labels, lang) ?? shortId);
+                                            const isSelected = selectedRestrictionIds.has(shortId);
+                                            return (
+                                                <CommandItem
+                                                    key={shortId}
+                                                    value={`${groupLabel}/${childLabel}`}
+                                                    onSelect={() => handleSelect(shortId, isSelected)}
+                                                    className="cursor-pointer !pl-8"
+                                                >
+                                                    <span className={cn("flex-1", isSelected && "font-bold")}>{childLabel}</span>
+                                                    {isSelected && <Check className="h-4 w-4 shrink-0 text-primary" />}
+                                                </CommandItem>
+                                            );
+                                        })}
+                                    </>
+                                );
+                            })}
+                        </CommandList>
+                    </Command>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+export const RestrictionSelectionCommandMenu: FC<Props> = ({
+    items,
+    restrictField,
+    enableHierarchy = false,
+    hasMoreItems = false,
+    showAllWhenEmpty = true,
+    onRequestMore,
+    stripLabelPrefix,
+    navigationMenuListClassName = "items-center justify-between flex-row",
+    itemsByRow = {
+        [DEVICE_OPTIONS.MOBILE]: 2,
+        [DEVICE_OPTIONS.TABLET]: 4,
+        [DEVICE_OPTIONS.DESKTOP]: 7,
+    }
+}) => {
+    const t = useTranslations();
+    const setRestrictionList = useRestrictionStore((state) => state.setRestrictionList);
+    const formatLabel = stripLabelPrefix
+        ? (label: string) => label.replace(new RegExp(`^${stripLabelPrefix}`, "i"), "")
+        : undefined;
+
+    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(() => {
+        return [...items].sort((a, b) => {
+            const aIndex = restrictionValues.indexOf(a.shortId || "");
+            const bIndex = restrictionValues.indexOf(b.shortId || "");
+            if (aIndex === -1 && bIndex === -1) return 0;
+            if (aIndex === -1) return 1;
+            if (bIndex === -1) return -1;
+            return aIndex - bIndex;
+        });
+    }, [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 hasHiddenContent = (enableHierarchy ? hiddenHierarchyRoots.length > 0 : hiddenItems.length > 0) || hasMoreItems;
+
+    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) => {
+                    const rawLabel = getLabelByLang(item.labels, lang);
+                    const label = rawLabel && formatLabel ? formatLabel(rawLabel) : rawLabel;
+                    return (
+                        <RestrictionNavigationItem
+                            key={item.shortId}
+                            shortId={item.shortId!}
+                            restrictField={restrictField}
+                            label={label}
+                            selected={restrictionValues.includes(item.shortId!)}
+                        />
+                    );
+                })}
+
+                {enableHierarchy && visibleHierarchyRoots.map((rootNode) => {
+                    const shortId = rootNode.item.shortId || "";
+                    const hasChildren = rootNode.children.length > 0;
+                    const rawLabel = getLabelByLang(rootNode.item.labels, lang);
+                    const label = rawLabel && formatLabel ? formatLabel(rawLabel) : rawLabel;
+                    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={rootSelected}
+                            />
+                        );
+                    }
+
+                    return (
+                        <NavigationMenuItem key={`root-command-${shortId}`}>
+                            <RestrictionCommandDialog
+                                label={label}
+                                items={rootNode.children}
+                                restrictField={restrictField}
+                                selectedRestrictionIds={selectedRestrictionIds}
+                                lang={lang}
+                                highlighted={shouldHighlightBranch}
+                                formatLabel={formatLabel}
+                            />
+                        </NavigationMenuItem>
+                    );
+                })}
+
+                {hasHiddenContent && (
+                    <NavigationMenuItem>
+                        <RestrictionCommandDialog
+                            label={t('more')}
+                            items={
+                                enableHierarchy
+                                    ? hiddenHierarchyRoots
+                                    : hiddenItems.map((item) => ({ item, children: [] }))
+                            }
+                            restrictField={restrictField}
+                            selectedRestrictionIds={selectedRestrictionIds}
+                            lang={lang}
+                            highlighted={false}
+                            formatLabel={formatLabel}
+                        />
+                    </NavigationMenuItem>
+                )}
+
+            </NavigationMenuList>
+        </NavigationMenu>
+    );
+};

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

@@ -120,7 +120,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
     navigationMenuListClassName = "items-center justify-between flex-row",
     itemsByRow = {
         [DEVICE_OPTIONS.MOBILE]: 2,
-        [DEVICE_OPTIONS.TABLET]: 5,
+        [DEVICE_OPTIONS.TABLET]: 4,
         [DEVICE_OPTIONS.DESKTOP]: 7,
     }
 }) => {
@@ -326,7 +326,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
                                     shouldHighlightBranch && "border border-primary/20 bg-primary/5 text-primary shadow-sm"
                                 )}
                             >
-                                <span className="inline-flex items-center gap-2">
+                                <span className="max-w-40 overflow-hidden text-ellipsis items-center gap-2">
                                     {label}
                                     {shouldHighlightBranch ? (
                                         <span
@@ -378,6 +378,4 @@ export const RestrictionSelectionMenu: FC<Props> = ({
             </NavigationMenuList>
         </NavigationMenu>
     );
-};
-
-export const RestrictionMenu = RestrictionSelectionMenu;
+};

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

@@ -0,0 +1,111 @@
+"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 { RestrictionSelectionCommandMenu } from "./restriction-selection-command-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 TaxonomyRestrictionCommandMenuProps = {
+    restrictField: string;
+    navigationMenuListClassName?: string;
+    itemsToRender?: number;
+    requestType: keyof typeof ComponentOptions;
+    onlyUsedEntries?: boolean;
+    enableHierarchy?: boolean;
+    fetchMode?: RestrictionMenuFetchMode;
+    showAllWhenEmpty?: boolean;
+    queryParams?: GenericQueryParams;
+    stripLabelPrefix?: string;
+};
+
+export const TaxonomyRestrictionCommandMenu: FC<TaxonomyRestrictionCommandMenuProps> = ({
+    queryParams,
+    restrictField,
+    itemsToRender = 7,
+    requestType,
+    onlyUsedEntries = true,
+    enableHierarchy = false,
+    fetchMode = "deferred",
+    showAllWhenEmpty = true,
+    navigationMenuListClassName = "items-center justify-between flex-row",
+    stripLabelPrefix,
+}) => {
+    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 (
+                    <Skeleton className="w-full h-9 rounded-full" />
+                );
+
+                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 (
+                    <RestrictionSelectionCommandMenu
+                        restrictField={restrictField}
+                        items={data.items || []}
+                        enableHierarchy={enableHierarchy}
+                        hasMoreItems={hasMoreItems}
+                        showAllWhenEmpty={showAllWhenEmpty}
+                        onRequestMore={() => {
+                            if (fetchMode === "deferred" && !explicitPageSize) {
+                                setLoadAll(true);
+                            }
+                        }}
+                        navigationMenuListClassName={navigationMenuListClassName}
+                        stripLabelPrefix={stripLabelPrefix}
+                    />
+                );
+            }}
+        </RequestComponent>
+    );
+};

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

@@ -77,13 +77,7 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
         >
             {({ 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>
+                    <Skeleton className="w-full h-9 rounded-full" />
                 );
 
                 if (!data) return null;