David
fa9d95fa9e
- Implemented `workstationEquipment` to manage workstation asset assignments, including principal and secondary assets. - Created tests for `workstationEquipment` to ensure correct behavior with various scenarios. - Developed `workstationOrganizationalAssignments` to retrieve current assignments for a responsible person in a company. - Added tests for `workstationOrganizationalAssignments` to validate assignment retrieval logic. - Introduced UI components for displaying workstation profile configurations and responsible person details. - Created compact UI components for displaying lists and tables, enhancing the user interface for asset management. - Added utility functions for handling cell content in tables, ensuring proper rendering of data.
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import type { ReactNode } from "react";
|
|
import { useId, useState } from "react";
|
|
|
|
/** Resumen local con ampliación explícita: ningún elemento queda inaccesible. */
|
|
export function CollectionPreview<T>({
|
|
items,
|
|
limit,
|
|
expandLabel,
|
|
collapseLabel,
|
|
children,
|
|
}: {
|
|
items: readonly T[];
|
|
limit: number;
|
|
expandLabel: string;
|
|
collapseLabel: string;
|
|
children: (items: readonly T[]) => ReactNode;
|
|
}) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const id = useId();
|
|
const previewLimit = Number.isSafeInteger(limit) && limit > 0 ? limit : items.length;
|
|
const limited = items.length > previewLimit;
|
|
|
|
return (
|
|
<div className="flex min-w-0 flex-col gap-2" data-slot="collection-preview">
|
|
<div id={id}>{children(limited && !expanded ? items.slice(0, previewLimit) : items)}</div>
|
|
{limited && (
|
|
<Button
|
|
aria-controls={id}
|
|
aria-expanded={expanded}
|
|
className="w-fit"
|
|
onClick={() => setExpanded(!expanded)}
|
|
size="sm"
|
|
type="button"
|
|
variant="ghost"
|
|
>
|
|
{expanded ? collapseLabel : expandLabel}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|