David
a0f02ced6e
- Updated DeleteBrandDialog and DeleteCatalogDefinitionDialog to use FormBody and FormActions for better structure. - Replaced DialogFooter with FormActions in various dialogs to standardize button layouts. - Introduced FormSectionTitle in multiple components for consistent section headings. - Adjusted grid layouts to use responsive design with @min-[560px] for better adaptability. - Created SoftwareResourceCreateDialog and SoftwareInstallationEditorDialog for better separation of concerns in software installation management. - Enhanced FormActions to support cancelDisabled prop for better control over button states. - Refined FormSectionTitle to allow for additional HTML elements like "legend" and "span". - Added EntityTableColumnsDialog for managing table column visibility in a more user-friendly manner.
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { Checkbox } from "@repo/shadcn-ui/components/checkbox";
|
|
import type { Table as TableModel } from "@tanstack/react-table";
|
|
import { useId } from "react";
|
|
|
|
import { entityListLabels } from "../lib/entity-list";
|
|
|
|
import { FormDialog } from "./form-dialog";
|
|
|
|
export function EntityTableColumnsDialog<T>({
|
|
table,
|
|
locale,
|
|
open,
|
|
onOpenChange,
|
|
}: {
|
|
table: TableModel<T>;
|
|
locale: string;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
}) {
|
|
const id = useId();
|
|
const labels = entityListLabels(locale);
|
|
|
|
return (
|
|
<FormDialog
|
|
cancelLabel={locale.startsWith("en") ? "Close" : "Cerrar"}
|
|
onOpenChange={onOpenChange}
|
|
open={open}
|
|
title={labels.columns}
|
|
>
|
|
<div className="space-y-3">
|
|
{table.getAllLeafColumns().map((column) => (
|
|
<label
|
|
className="flex items-center gap-2"
|
|
htmlFor={`${id}-column-${column.id}`}
|
|
key={column.id}
|
|
>
|
|
<Checkbox
|
|
checked={column.getIsVisible()}
|
|
disabled={!column.getCanHide()}
|
|
id={`${id}-column-${column.id}`}
|
|
onCheckedChange={(checked) => column.toggleVisibility(checked === true)}
|
|
/>
|
|
{String(column.columnDef.header)}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</FormDialog>
|
|
);
|
|
}
|