From eb5bceb5bfcc04d48d0fb30483b8d26b2f9dece8 Mon Sep 17 00:00:00 2001 From: Michael SCHAL Date: Fri, 6 Mar 2026 11:14:56 +0100 Subject: [PATCH] feat: introduce DropdownMenu UI component and create HeatmapGrid file. --- src/components/ui/dropdown-menu.tsx | 20 +++++------ src/features/grid/components/heatmap-grid.tsx | 34 +++++++++++++++++-- 2 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx index ae1fcf6..61060a7 100644 --- a/src/components/ui/dropdown-menu.tsx +++ b/src/components/ui/dropdown-menu.tsx @@ -42,7 +42,7 @@ function DropdownMenuContent({ data-slot="dropdown-menu-content" sideOffset={sideOffset} className={cn( - "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", + "z-50 max-h-[80vh] min-w-[12rem] overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-2 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className )} {...props} @@ -74,7 +74,7 @@ function DropdownMenuItem({ data-inset={inset} data-variant={variant} className={cn( - "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", + "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm focus:outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='w-'])]:w-4 [&_svg:not([class*='h-'])]:h-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className )} {...props} @@ -92,15 +92,15 @@ function DropdownMenuCheckboxItem({ - + - + {children} @@ -128,14 +128,14 @@ function DropdownMenuRadioItem({ - + - + {children} @@ -211,13 +211,13 @@ function DropdownMenuSubTrigger({ data-slot="dropdown-menu-sub-trigger" data-inset={inset} className={cn( - "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", + "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm focus:outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='w-'])]:w-4 [&_svg:not([class*='h-'])]:h-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className )} {...props} > {children} - + ) } diff --git a/src/features/grid/components/heatmap-grid.tsx b/src/features/grid/components/heatmap-grid.tsx index 29e9a49..d2de87f 100644 --- a/src/features/grid/components/heatmap-grid.tsx +++ b/src/features/grid/components/heatmap-grid.tsx @@ -248,7 +248,7 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) { }, { accessorKey: "codein", - header: "Code", + header: "Code interne", size: 90, cell: ({ getValue }) => { const value = getValue(); @@ -266,7 +266,7 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
{value} @@ -282,6 +282,32 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) { ); }, }, + { + accessorKey: "reference", + header: "Référence", + size: 110, + cell: ({ getValue }) => { + const val = getValue(); + return ( + + {val || "-"} + + ); + }, + }, + { + accessorKey: "gtin", + header: "EAN / GTIN", + size: 120, + cell: ({ getValue }) => { + const val = getValue(); + return ( + + {val || "-"} + + ); + }, + }, { accessorKey: "libelle1", header: "Désignation", @@ -432,7 +458,9 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) { const search = String(filterValue).toLowerCase(); const libelle = String(row.original.libelle1 || "").toLowerCase(); const code = String(row.original.codein || "").toLowerCase(); - return libelle.includes(search) || code.includes(search); + const reference = String(row.original.reference || "").toLowerCase(); + const gtin = String(row.original.gtin || "").toLowerCase(); + return libelle.includes(search) || code.includes(search) || reference.includes(search) || gtin.includes(search); }, });