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.
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import type { Table as TableModel } from "@tanstack/react-table";
|
|
import { useId, useState } from "react";
|
|
|
|
import { entityListLabels } from "../lib/entity-list";
|
|
|
|
import { EntityTableColumnsDialog } from "./entity-table-columns-dialog";
|
|
import { SelectWithAction } from "./select-with-action";
|
|
|
|
export function EntityTableConfiguration<T>({
|
|
table,
|
|
locale,
|
|
onSort,
|
|
}: {
|
|
table: TableModel<T>;
|
|
locale: string;
|
|
onSort: () => void;
|
|
}) {
|
|
const id = useId();
|
|
const labels = entityListLabels(locale);
|
|
const [columnsOpen, setColumnsOpen] = useState(false);
|
|
const sorting = table.getState().sorting;
|
|
const columns = table.getAllLeafColumns().map((column) => ({
|
|
id: column.id,
|
|
label: String(column.columnDef.header),
|
|
value: column.getCanSort(),
|
|
}));
|
|
const setSorting = table.setSorting;
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button onClick={() => setColumnsOpen(true)} size="sm" variant="outline">
|
|
{labels.columns}
|
|
</Button>
|
|
<SelectWithAction
|
|
id={`${id}-sort`}
|
|
label={labels.sort}
|
|
onValueChange={(value) => {
|
|
const [column, direction] = value.split(":");
|
|
|
|
if (column && column !== "initial") {
|
|
setSorting([{ id: column, desc: direction === "desc" }]);
|
|
} else {
|
|
table.resetSorting();
|
|
}
|
|
onSort();
|
|
}}
|
|
options={[
|
|
{ value: "initial", label: labels.initial },
|
|
...columns
|
|
.filter((column) => column.value)
|
|
.flatMap((column) => [
|
|
{ value: `${column.id}:asc`, label: `${column.label} · ${labels.ascending}` },
|
|
{ value: `${column.id}:desc`, label: `${column.label} · ${labels.descending}` },
|
|
]),
|
|
]}
|
|
placeholder={labels.sort}
|
|
value={sorting[0] ? `${sorting[0].id}:${sorting[0].desc ? "desc" : "asc"}` : "initial"}
|
|
/>
|
|
</div>{" "}
|
|
<EntityTableColumnsDialog
|
|
locale={locale}
|
|
onOpenChange={setColumnsOpen}
|
|
open={columnsOpen}
|
|
table={table}
|
|
/>
|
|
</>
|
|
);
|
|
}
|