metis-desk/packages/rdx-ui/src/components/entity-table-configuration.tsx

import { Button } from "@repo/shadcn-ui/components/button";
import { Checkbox } from "@repo/shadcn-ui/components/checkbox";
import type { Table as TableModel } from "@tanstack/react-table";
import { useId, useState } from "react";

import { entityListLabels } from "../lib/entity-list";

import { FormDialog } from "./form-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(":");

            setSorting(
              column && column !== "initial" ? [{ id: column, desc: direction === "desc" }] : []
            );
            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>{" "}
      <FormDialog
        cancelLabel={locale.startsWith("en") ? "Close" : "Cerrar"}
        onOpenChange={setColumnsOpen}
        open={columnsOpen}
        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>
    </>
  );
}