@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/src/molecules/table/components/DefaultCellFooter.tsx

@@ -0,0 +1,16 @@
+import { flexRender, type Header } from "@tanstack/react-table";
+
+import { registerComponent } from "../../../registries/components";
+
+export interface DefaultCellHeaderProps<Data = any> {
+  header: Header<Data, unknown>;
+  i18n?: (f: string) => string;
+}
+
+export function DefaultCellFooter<Data = any>(props: DefaultCellHeaderProps<Data>) {
+  const { header } = props;
+
+  return <>{flexRender(header.column.columnDef.footer, header.getContext())}</>;
+}
+
+registerComponent("CellFooter", DefaultCellFooter);

package/src/molecules/table/components/DefaultCellHeader.tsx

@@ -1,22 +1,42 @@
-import { HeaderGroup } from "react-table";
+import { flexRender, type Header } from "@tanstack/react-table";
+import cx from "classnames";
 
-export interface DefaultCellHeaderProps<Data extends object = any> extends Record<string, unknown> {
-  column: HeaderGroup<Data> & {
-    getSortByToggleProps: () => Record<string, unknown>;
-    canFilter: boolean;
-    render: (key: string) => any;
-  };
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { DefaultArrowSort } from "./DefaultArrowSort";
+import type { DefaultFilter } from "./DefaultFilter";
+
+export interface DefaultCellHeaderProps<Data = any> {
+  header: Header<Data, unknown>;
+  i18n?: (f: string) => string;
 }
 
-export function DefaultCellHeader<Data extends Record<string, unknown> = {}>({ column }: DefaultCellHeaderProps<Data>) {
+export function DefaultCellHeader<Data = any>(props: DefaultCellHeaderProps<Data>) {
+  const { header, i18n } = props;
+
+  const ArrowSort = getComponent<typeof DefaultArrowSort>("ArrowSort");
+  const Filter = getComponent<typeof DefaultFilter>("Filter");
+  const canSort = header.column.getCanSort();
+  const canFilter = header.column.getCanFilter();
+
   return (
-    <div className={"table-cell-header"}>
-      <div className='table-cell-header__label' {...column.getSortByToggleProps()}>
-        <span>{column.render("Header") as any}</span>
+    <div className={cx("table-cell-header", {})}>
+      <div
+        className={cx("table-cell-header__label", {
+          "cursor-pointer select-none": header.column.getCanSort()
+        })}
+        {...(canSort
+          ? {
+              onClick: header.column.getToggleSortingHandler()
+            }
+          : {})}
+      >
+        <span>{flexRender(header.column.columnDef.header, header.getContext())}</span>
 
-        {column.render("ArrowSort") as any}
+        <ArrowSort header={header} />
       </div>
-      {column.canFilter ? <div className='table-cell-header__filter'>{column.render("Filter") as any}</div> : null}
+      {canFilter && <Filter header={header} i18n={i18n} />}
     </div>
   );
 }
+
+registerComponent("CellHeader", DefaultCellHeader);

package/src/molecules/table/components/DefaultCellOperations.tsx

@@ -1,37 +1,48 @@
-import { DefaultOperationButton, OperationButtonProps } from "./DefaultOperationButton";
+import type { CellContext } from "@tanstack/react-table";
 
-export interface DefaultCellOperationsProps {
-  operations: (OperationButtonProps & {
-    OperationButton: typeof DefaultOperationButton;
-    permissionsResolver?(data: unknown, ctx: any): boolean;
-  })[];
-  row: any;
+import type { CellMetadata, JSON, Operation } from "../../../interfaces";
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { DefaultOperationButton } from "./DefaultOperationButton";
 
-  onClick: (data: any, action: string) => void;
-  ctx: any;
+export interface DefaultCellOperationsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
+  info: CellContext<Data, unknown>;
+  operations: Operation<Data>[];
+  metadata?: CellMetadata;
   i18n: (i18n: string) => string;
+  onClick?: (data: any, operation: Operation<Data>) => void;
 }
 
-export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: DefaultCellOperationsProps) {
-  const data = row.original;
-
+export function DefaultCellOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  info,
+  metadata,
+  operations,
+  i18n,
+  onClick
+}: DefaultCellOperationsProps<Data>) {
+  const Button = getComponent<typeof DefaultOperationButton<Data>>("OperationButton");
   return (
     <div className='btn-group'>
       {operations
-        .filter(({ permissionsResolver }) => !permissionsResolver || permissionsResolver(data, ctx))
-        .map(({ OperationButton = DefaultOperationButton, ...operation }, index: number) => {
+        .filter(({ permissionsResolver, ...operation }) => {
+          return !permissionsResolver || permissionsResolver(info.row.original, metadata || {}, operation);
+        })
+        .map((operation) => {
           return (
-            <OperationButton
+            <Button
+              data-testid={`operation-${info.row.id}-${operation.action}`}
               key={operation.action}
-              {...operation}
-              data-testid={`operation-${index}-${operation.action}`}
-              onClick={(action: string) => onClick(data, action)}
-              data={data}
+              operation={operation}
+              metadata={metadata}
+              info={info}
               i18n={i18n}
-              ctx={ctx}
+              onClick={() => {
+                onClick?.(info.row.original, operation);
+              }}
             />
           );
         })}
     </div>
   );
 }
+
+registerComponent("CellOperations", DefaultCellOperations);

package/src/molecules/table/components/DefaultFilter.tsx

@@ -0,0 +1,42 @@
+import "../interfaces/extends";
+
+import { Header } from "@tanstack/react-table";
+import type { ComponentType } from "react";
+
+import { getComponent, registerComponent } from "../../../registries/components";
+
+export interface DefaultFilterProps<Data = any> {
+  header: Header<Data, unknown>;
+  i18n?: (f: string) => string;
+}
+
+export interface FilterProps<Data = any, Opts = Record<string, unknown>> {
+  header: Header<Data, unknown>;
+  options: Opts;
+  i18n?: (f: string) => string;
+}
+
+export function DefaultFilter<Data = any>({ header, i18n }: DefaultFilterProps<Data>) {
+  const {
+    filter = {
+      variant: "text"
+    }
+  } = header.column.columnDef.meta || {};
+
+  const { variant: filterVariant } = filter;
+  const Filter = getComponent<ComponentType<FilterProps>>([`Filter.${header.column.id}`, `Filter.${filterVariant}`, "Filter.text"]);
+
+  if (!Filter) {
+    console.warn("Missing filter for `Filter." + header.column.id + "` or `Filter." + filterVariant + "`");
+
+    return null;
+  }
+
+  return (
+    <div className='table-cell-header__filter'>
+      <Filter header={header} options={filter} i18n={i18n} />
+    </div>
+  );
+}
+
+registerComponent("Filter", DefaultFilter);

package/src/molecules/table/components/DefaultOperationButton.tsx

@@ -1,49 +1,32 @@
-import classnames from "classnames";
+import { CellContext } from "@tanstack/react-table";
+import cx from "classnames";
 import { HTMLAttributes } from "react";
 
+import { type CellMetadata, type JSON, Operation } from "../../../interfaces";
+import { registerComponent } from "../../../registries/components";
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 
-export interface OperationButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
-  buttonType?: string;
-  buttonSize?: string;
-  buttonOutline?: boolean;
-  data: any[];
-  onClick: (action: string) => void;
-  action: string;
-  icon?: string;
-  title?: string;
+export interface OperationButtonProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
+  extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+  operation: Operation<Data>;
+  info: CellContext<Data, unknown>;
+  metadata?: CellMetadata;
+  onClick: () => void;
   i18n?: (i18n: string) => string;
-  ctx?: any;
-  permissionsResolver?: (ctx: any) => boolean;
 }
 
-export function DefaultOperationButton(props: OperationButtonProps) {
-  const {
-    className = "btn",
-    buttonSize = "xs",
-    buttonType = "primary",
-    buttonOutline,
-    onClick,
-    action,
-    icon = "",
-    title = "",
-    i18n = (f: string) => f,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    data,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ctx,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    permissionsResolver,
-    ...otherProps
-  } = props;
+export function DefaultOperationButton<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: OperationButtonProps<Data>) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { i18n = (f: string) => f, onClick, operation, info, ...extraProps } = props;
+  const { className = "btn", buttonSize = "xs", buttonType = "primary", buttonOutline, action, title = "", icon = "" } = operation;
 
   return (
     <button
-      {...otherProps}
+      {...extraProps}
       aria-label={"Operation button: " + (title || action)}
-      className={classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
-      onClick={stopPropagationWrapper(() => onClick(action))}
+      className={cx(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
+      onClick={stopPropagationWrapper(() => onClick())}
     >
       {icon ? (
         <>
@@ -54,3 +37,5 @@ export function DefaultOperationButton(props: OperationButtonProps) {
     </button>
   );
 }
+
+registerComponent("OperationButton", DefaultOperationButton);

package/src/molecules/table/filters/Filters.d.ts

@@ -0,0 +1,31 @@
+import { SelectOptionProps, SelectProps } from "../../forms/select/Select.interface";
+
+export type FilterVariants = "text" | "range" | "select" | "boolean";
+
+export interface FilterBaseOptions extends Record<string, unknown> {
+  variant: string;
+}
+
+export interface FilterTextOptions extends FilterBaseOptions {
+  variant: "text";
+  disableDatalist?: boolean;
+}
+
+export interface FilterRangeOptions extends FilterBaseOptions {
+  variant: "range";
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export interface FilterSelectOptions extends FilterBaseOptions, SelectProps<string> {
+  variant: "select";
+  options?: SelectOptionProps<string>[];
+}
+
+export interface FilterBooleanOptions extends FilterBaseOptions {
+  variant: "boolean";
+  options?: SelectOptionProps<string>[];
+}
+
+export type FilterOptions = FilterTextOptions | FilterRangeOptions | FilterSelectOptions | FilterBooleanOptions;

package/src/molecules/table/filters/RangeFilter.tsx

@@ -0,0 +1,43 @@
+import { getComponent, registerComponent } from "../../../registries/components";
+import { type InputText as DefaultInputText } from "../../forms/input-text/InputText";
+import type { FilterProps } from "../components/DefaultFilter";
+import { FilterRangeOptions } from "./Filters";
+
+export function RangeFilter<Data = any>({ header, options }: FilterProps<Data, FilterRangeOptions>) {
+  const { column } = header;
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const columnFilterValue = header.column.getFilterValue();
+  const min = options.min ?? column.getFacetedMinMaxValues()?.[0];
+  const max = options.max ?? column.getFacetedMinMaxValues()?.[1];
+  const step = options.step ?? 1;
+
+  return (
+    <div>
+      <div className='flex space-x-2'>
+        <div className='w-1/2'>
+          <InputText
+            type='number'
+            size='small'
+            {...{ min, max, step }}
+            value={(columnFilterValue as [number, number])?.[0] ?? ""}
+            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}
+            placeholder={`Min ${min !== undefined ? `(${min})` : ""}`}
+          />
+        </div>
+        <div className='w-1/2'>
+          <InputText
+            type='number'
+            size='small'
+            {...{ min, max, step }}
+            value={(columnFilterValue as [number, number])?.[1] ?? ""}
+            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}
+            placeholder={`Max ${max ? `(${max})` : ""}`}
+          />
+        </div>
+      </div>
+      <div className='h-1' />
+    </div>
+  );
+}
+
+registerComponent("Filter.range", RangeFilter);

package/src/molecules/table/filters/SelectFilter.tsx

@@ -0,0 +1,47 @@
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { Select as DefaultSelect } from "../../forms/select/Select";
+import { SelectOptionProps } from "../../forms/select/Select.interface";
+import type { FilterProps } from "../components/DefaultFilter";
+import { useUniqValues } from "../hooks/useUniqValues";
+import { FilterSelectOptions } from "./Filters";
+
+export function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {
+  const Select = getComponent<typeof DefaultSelect>("Select");
+  const columnFilterValue = header.column.getFilterValue();
+  const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
+
+  const opts =
+    options.layout === "choicesjs"
+      ? {
+          placeholder: undefined
+        }
+      : {
+          placeholder: `Filter by ${header.column.columnDef.header}`
+        };
+
+  const listOptions = (
+    [
+      {
+        label: `Filter by ${header.column.columnDef.header}`,
+        value: ""
+      }
+    ] as SelectOptionProps[]
+  ).concat(options.options || uniqValues.map((value: any) => ({ label: value, value })));
+
+  return (
+    <>
+      <Select<string>
+        size='small'
+        {...(options as any)}
+        {...opts}
+        options={listOptions}
+        name={`filter_${header.column.id}`}
+        data-testid={`filter_${header.column.id}`}
+        value={columnFilterValue as string}
+        onChange={(_, value) => header.column.setFilterValue(value)}
+      />
+    </>
+  );
+}
+
+registerComponent("Filter.select", SelectFilter);

package/src/molecules/table/filters/TextFieldFilter.tsx

@@ -0,0 +1,36 @@
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { InputText as DefaultInputText } from "../../forms/input-text/InputText";
+import type { FilterProps } from "../components/DefaultFilter";
+import { useUniqValues } from "../hooks/useUniqValues";
+import { FilterTextOptions } from "./Filters";
+
+export function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const columnFilterValue = header.column.getFilterValue();
+  const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
+  const datalistId = `data_list_${header.column.id}`;
+
+  return (
+    <>
+      {!options.disableDatalist && (
+        <datalist id={datalistId}>
+          {uniqValues.map((value: any) => (
+            <option value={value} key={value} />
+          ))}
+        </datalist>
+      )}
+      <InputText<string>
+        size='small'
+        placeholder={`Filter by ${header.column.columnDef.header}`}
+        {...options}
+        name={`filter_${header.column.id}`}
+        data-testid={`filter_${header.column.id}`}
+        value={(columnFilterValue ?? "") as string}
+        list={datalistId}
+        onChange={(_, value) => header.column.setFilterValue(value)}
+      />
+    </>
+  );
+}
+
+registerComponent("Filter.text", TextFieldFilter);

package/src/molecules/table/hooks/useTable.tsx

@@ -0,0 +1,76 @@
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type TableOptions,
+  type TableState,
+  useReactTable
+} from "@tanstack/react-table";
+import { useEffect } from "react";
+
+import { useI18n } from "../../../hooks/useI18n.js";
+import { type FormOptions, type JSON, Operation } from "../../../interfaces";
+import { getComponent } from "../../../registries/components";
+import type { DefaultCellOperations } from "../components/DefaultCellOperations";
+
+export interface UseTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
+  extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
+  operations: Operation<Data>[];
+  metadata?: Record<string, unknown>;
+  i18n?: FormOptions["i18n"];
+  onClick?: (data: Data, operation: Operation<Data>) => void;
+  manualFaceted?: boolean;
+  onChange?: (query: TableState) => void;
+  pageSizes?: number[];
+}
+
+export function useTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseTableProps<Data>) {
+  const Operations = getComponent<typeof DefaultCellOperations<Data>>("CellOperations");
+  const { t } = useI18n(props.i18n);
+
+  // const [pagination, setPagination] = useState({
+  //   pageIndex: 0, //initial page index
+  //   pageSize: 10 //default page size
+  // });
+
+  const operations = props.operations.length
+    ? ([
+        {
+          id: "operations",
+          header: t("Operations"),
+          cell: (info) => (
+            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={t} />
+          )
+        }
+      ] satisfies ColumnDef<Data>[])
+    : [];
+
+  const tableInstance = useReactTable({
+    ...props,
+    columns: [...props.columns, ...operations],
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,
+    getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,
+    getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting
+    getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete
+  });
+
+  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =
+    tableInstance.getState();
+
+  useEffect(() => {
+    if (props.onChange) {
+      props.onChange(tableInstance.getState());
+    }
+  }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);
+
+  return {
+    i18n: t,
+    tableInstance
+  };
+}

package/src/molecules/table/hooks/useUniqValues.tsx

@@ -0,0 +1,10 @@
+import type { Header } from "@tanstack/react-table";
+import { useMemo } from "react";
+
+export function useUniqValues<Data = any>({ header, filterVariant }: { header: Header<Data, unknown>; filterVariant: string }) {
+  return useMemo(
+    () => (filterVariant === "range" ? [] : Array.from(header.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5000)),
+
+    [header.column, filterVariant]
+  );
+}

package/src/molecules/table/interfaces/extends.ts

@@ -0,0 +1,18 @@
+import type { RowData } from "@tanstack/react-table";
+import { TdHTMLAttributes } from "react";
+
+import { FilterOptions } from "../filters/Filters";
+
+declare module "@tanstack/react-table" {
+  //allows us to define custom properties for our columns
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    filter?: FilterOptions;
+    sort?: string;
+    cellProps?: TdHTMLAttributes<HTMLTableCellElement>;
+    /**
+     * Hide the cell
+     */
+    hidden?: boolean;
+  }
+}

package/src/molecules/table/utils/mapFormToColumns.tsx

@@ -1,32 +1,75 @@
-import { Components, Utils } from "formiojs";
+import "../interfaces/extends";
+
+import { Components } from "@formio/js";
+import { ColumnDef, ColumnDefResolved, createColumnHelper } from "@tanstack/react-table";
+import cloneDeep from "lodash/cloneDeep";
+import get from "lodash/get";
 
 import type { ComponentType, FormType } from "../../../interfaces";
-import { DefaultCell } from "../components/DefaultCell";
-import { SelectColumnFilter } from "../filters/SelectColumnFilter";
-import { ExtendedColumn } from "../hooks/useCustomTable";
-
-export function mapFormToColumns(form: FormType): ExtendedColumn[] {
-  const columns: ExtendedColumn[] = [];
-
-  Utils.eachComponent(form.components, (component: ComponentType) => {
-    if (component.tableView && component.key) {
-      const cmp: any = Components.create(component, {}, null, true);
-
-      const column: ExtendedColumn = {
-        Header: component.label || component.title || component.key,
-        accessor: `data.${component.key}`,
-        className: "text-center",
-        Cell: (props: any) => <DefaultCell {...props} render={(value: any) => cmp.asString(value)} />
-      };
-
-      if (component.type === "select" && component.dataSrc === "values") {
-        (column as any).Filter = SelectColumnFilter;
-        (column as any).choices = component.data.values;
+import { getComponent } from "../../../registries/components";
+import type { DefaultCell } from "../components/DefaultCell";
+import type { FilterVariants } from "../filters/Filters.js";
+
+const MAP_TYPES: Record<string, FilterVariants> = {
+  number: "range",
+  currency: "range",
+  checkbox: "boolean"
+};
+
+export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): ColumnDef<Data, any>[] {
+  const columnHelper = createColumnHelper<Data>();
+  const columnsToKeep = cloneDeep(columns);
+
+  const Cell = getComponent<typeof DefaultCell>("Cell");
+
+  const columnsFromComponents = form.components
+    .flatMap((component) => {
+      if (component.type === "tabs") {
+        return component.components?.flatMap((subComponent: ComponentType) => subComponent.components);
       }
 
-      columns.push(column);
-    }
-  });
+      return [component];
+    })
+    .filter((component) => component?.tableView)
+    .map((c) => {
+      const component = c as ComponentType;
+      const cmp: any = Components.create(component, {}, null);
+
+      const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {
+        return accessorKey === `data.${component.key}`;
+      });
+
+      let column = columnsToKeep[columnIndex];
+
+      if (column) {
+        columnsToKeep.splice(columnIndex, 1);
+      }
+
+      return columnHelper.accessor(`data.${component.key}` as any, {
+        header: (component.label || component.title || component.key)?.replace(/:/, ""),
+        cell: (info) => {
+          return <Cell value={info.getValue() as Data} render={(value: Data) => cmp.asString(value)} />;
+        },
+        meta: {
+          filter: { variant: MAP_TYPES[component.type!] || "text" },
+          ...(column?.meta || {})
+        },
+        ...(column || {})
+      });
+    });
+
+  const mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).map((column, index) => ({
+    ...column,
+    meta: {
+      ...(column.meta || {}),
+      order: get(column, "meta.order", index * 10)
+    },
+    cell:
+      column.cell ||
+      ((info) => {
+        return <Cell value={info.getValue() as Data} render={(value: Data) => value} />;
+      })
+  }));
 
-  return columns;
+  return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];
 }