@tsed/react-formio 1.11.1 → 1.13.0

package/src/components/table/table.component.tsx

@@ -1,30 +1,15 @@
 import classnames from "classnames";
 import noop from "lodash/noop";
 import React, { PropsWithChildren } from "react";
-import {
-  CellProps,
-  FilterProps,
-  Renderer,
-  TableOptions,
-  useFilters,
-  useGroupBy,
-  usePagination,
-  useSortBy,
-  useTable
-} from "react-table";
+import { CellProps, FilterProps, Renderer, TableOptions, useFilters, useGroupBy, usePagination, useSortBy, useTable } from "react-table";
 import { OnClickOperation, Operation, QueryOptions } from "../../interfaces";
 import { Pagination as DefaultPagination } from "../pagination/pagination.component";
 import { DefaultArrowSort } from "./components/defaultArrowSort.component";
-import {
-  DefaultCellHeader,
-  DefaultCellHeaderProps
-} from "./components/defaultCellHeader.component";
+import { DefaultCellHeader, DefaultCellHeaderProps } from "./components/defaultCellHeader.component";
 import { DefaultColumnFilter } from "./filters/defaultColumnFilter.component";
 import { useOperations } from "./utils/useOperations.hook";
 
-export interface TableProps<Data extends object = any>
-  extends TableOptions<Data>,
-    Partial<QueryOptions> {
+export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
   className?: string;
   /**
    * Call the listener when a filter / pagination  / sort change.
@@ -93,14 +78,9 @@ export interface TableProps<Data extends object = any>
   i18n?: (f: string) => string;
 }
 
-function getOperationCallback(
-  operations: Operation[],
-  onClick: OnClickOperation
-) {
+function getOperationCallback(operations: Operation[], onClick: OnClickOperation) {
   return (data: any, action: string) => {
-    const operation = operations.find(
-      (operation) => operation.action === action || operation.alias === action
-    );
+    const operation = operations.find((operation) => operation.action === action || operation.alias === action);
     if (operation) {
       onClick(data, operation);
     }
@@ -108,9 +88,7 @@ function getOperationCallback(
 }
 
 function DefaultLoader() {
-  return (
-    <div className={"text-center p-2 pb-4 font-bold"}>Loading in progress</div>
-  );
+  return <div className={"text-center p-2 pb-4 font-bold"}>Loading in progress</div>;
 }
 
 function DefaultEmptyData() {
@@ -119,9 +97,7 @@ function DefaultEmptyData() {
 
 const hooks = [useFilters, useGroupBy, useSortBy, usePagination];
 
-export function Table<Data extends object = any>(
-  props: PropsWithChildren<TableProps<Data>>
-) {
+export function Table<Data extends object = any>(props: PropsWithChildren<TableProps<Data>>) {
   const {
     children,
     className = "",
@@ -177,12 +153,9 @@ export function Table<Data extends object = any>(
         pageSize: controlledPageSize || 10,
         sortBy: controlledSortBy || []
       } as any,
-      manualPagination:
-        props.manualPagination === undefined ? true : props.manualPagination,
-      manualSortBy:
-        props.manualSortBy === undefined ? true : props.manualPagination,
-      manualFilters:
-        props.manualFilters === undefined ? true : props.manualFilters,
+      manualPagination: props.manualPagination === undefined ? true : props.manualPagination,
+      manualSortBy: props.manualSortBy === undefined ? true : props.manualPagination,
+      manualFilters: props.manualFilters === undefined ? true : props.manualFilters,
       disableFilters,
       filterId,
       setFilterId
@@ -216,10 +189,7 @@ export function Table<Data extends object = any>(
       >
         <thead>
           {tableInstance.headerGroups.map((headerGroup, i) => (
-            <tr
-              key={`tableInstance.headerGroups${i}`}
-              {...headerGroup.getHeaderGroupProps()}
-            >
+            <tr key={`tableInstance.headerGroups${i}`} {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
                 <th
                   key={`tableInstance.headers.column.${column.id}`}
@@ -237,24 +207,14 @@ export function Table<Data extends object = any>(
             {tableInstance.page.map((row) => {
               tableInstance.prepareRow(row);
               return (
-                <tr
-                  key={`tableInstance.page.${row.id}`}
-                  onClick={() => _onClick(row.original, "row")}
-                  {...row.getRowProps()}
-                >
+                <tr key={`tableInstance.page.${row.id}`} onClick={() => _onClick(row.original, "row")} {...row.getRowProps()}>
                   {row.cells.map((cell, i) => {
                     const { hidden, colspan } = cell.column as any;
                     if (hidden) {
                       return null;
                     }
                     return (
-                      <td
-                        key={`tableInstance.page.cells.${
-                          cell.value || "value"
-                        }.${i}`}
-                        colSpan={colspan}
-                        {...cell.getCellProps()}
-                      >
+                      <td key={`tableInstance.page.cells.${cell.value || "value"}.${i}`} colSpan={colspan} {...cell.getCellProps()}>
                         {cell.render("Cell")}
                       </td>
                     );

package/src/components/table/table.stories.tsx

@@ -20,7 +20,7 @@ export const Sandbox = (args: any) => {
   const onChange = (obj: any) => {
     setLimit(obj.pageSize);
     setSkip(obj.pageIndex * obj.pageSize);
-    args.onChange(obj);
+    args.onChange && args.onChange(obj);
   };
 
   return (

package/src/components/table/utils/getPageNumbers.ts

@@ -13,23 +13,15 @@ function range(from: number, to: number, step = 1): any[] {
   return range;
 }
 
-export function getPageNumbers({
-  currentPage,
-  pageNeighbours = 1,
-  totalPages
-}: any) {
+export function getPageNumbers({ currentPage, pageNeighbours = 1, totalPages }: any) {
   const totalNumbers = pageNeighbours * 2 + 3;
   const totalBlocks = totalNumbers + 2;
 
   if (totalPages > totalBlocks) {
     const calculatedStartPage = Math.max(2, currentPage - pageNeighbours);
-    const calculatedEndPage = Math.min(
-      totalPages - 1,
-      currentPage + pageNeighbours
-    );
+    const calculatedEndPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
     const startPage = calculatedStartPage === 3 ? 2 : calculatedStartPage;
-    const endPage =
-      calculatedEndPage === totalPages - 2 ? totalPages - 1 : calculatedEndPage;
+    const endPage = calculatedEndPage === totalPages - 2 ? totalPages - 1 : calculatedEndPage;
 
     let pages = range(startPage, endPage);
 

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

@@ -9,32 +9,24 @@ import { SelectColumnFilter } from "../filters/selectColumnFilter.component";
 export function mapFormToColumns(form: FormSchema): Column[] {
   const columns: Column[] = [];
 
-  FormioUtils.eachComponent(
-    form.components,
-    (component: ExtendedComponentSchema) => {
-      if (component.tableView && component.key) {
-        const cmp: any = Components.create(component, null, null, true);
+  FormioUtils.eachComponent(form.components, (component: ExtendedComponentSchema) => {
+    if (component.tableView && component.key) {
+      const cmp: any = Components.create(component, null, null, true);
 
-        const column: Column = {
-          Header: component.label || component.title || component.key,
-          accessor: `data.${component.key}`,
-          Cell: (props: any) => (
-            <DefaultCell
-              {...props}
-              render={(value: any) => cmp.asString(value)}
-            />
-          )
-        };
+      const column: Column = {
+        Header: component.label || component.title || component.key,
+        accessor: `data.${component.key}`,
+        Cell: (props: any) => <DefaultCell {...props} render={(value: any) => cmp.asString(value)} />
+      };
 
-        if (component.type === "select" && component.dataSrc === "values") {
-          column.Filter = SelectColumnFilter;
-          (column as any).choices = component.data.values;
-        }
-
-        columns.push(column);
+      if (component.type === "select" && component.dataSrc === "values") {
+        column.Filter = SelectColumnFilter;
+        (column as any).choices = component.data.values;
       }
+
+      columns.push(column);
     }
-  );
+  });
 
   return columns;
 }

package/src/components/table/utils/useOperations.hook.tsx

@@ -29,18 +29,8 @@ export function useOperations<D extends object = {}>({
         {
           id: "operations",
           groupByBoundary: true,
-          Header: () => (
-            <div className={"text-center"}>{i18n("Operations")}</div>
-          ),
-          Cell: (props: any) => (
-            <CellOperations
-              {...props}
-              operations={operations}
-              onClick={onClick}
-              ctx={ctx}
-              i18n={i18n}
-            />
-          )
+          Header: () => <div className={"text-center"}>{i18n("Operations")}</div>,
+          Cell: (props: any) => <CellOperations {...props} operations={operations} onClick={onClick} ctx={ctx} i18n={i18n} />
         }
       ];
     });

package/src/components/tabs/tabs.component.spec.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import {fireEvent, render, screen} from "@testing-library/react";
+import {Sandbox} from "./tabs.component.stories";
+import {Tabs} from "./tabs.component";
+
+describe("tabs", () => {
+  it("should display the tabs component and children", () => {
+    const items = [
+      {
+        action: "back",
+        exact: true,
+        icon: "chevron-left",
+        back: true
+      },
+      {
+        action: "edit",
+        exact: true,
+        icon: "edit",
+        label: "Edit"
+      }
+    ];
+
+    render(<Sandbox {...Sandbox.args} items={items}/>);
+
+    const tabsComponent = screen.getByTestId("tabs-comp");
+
+    const buttonsTabWrapper = screen.getAllByTitle("button-wrapper");
+    const chevronLeftButtonTabWrapper = buttonsTabWrapper[0];
+    const editButtonTabWrapper = buttonsTabWrapper[1];
+
+    const buttonsTab = screen.getAllByTitle("button-tab");
+    const chevronLeftButtonTab = buttonsTab[0];
+    const editButtonTab = buttonsTab[1];
+
+    const fontAwsomeChevronLeftIcon = "fa fa-chevron-left";
+    const fontAwsomeEditIcon = "fa fa-edit";
+
+    expect(tabsComponent).toBeInTheDocument();
+
+    expect(chevronLeftButtonTabWrapper).toContainElement(chevronLeftButtonTab);
+    expect(chevronLeftButtonTabWrapper).toContainHTML("-back");
+    expect(chevronLeftButtonTab).toBeInTheDocument();
+    expect(chevronLeftButtonTab).toContainHTML(fontAwsomeChevronLeftIcon);
+    expect(chevronLeftButtonTab).toHaveTextContent("");
+
+    expect(editButtonTabWrapper).toContainElement(editButtonTab);
+    expect(editButtonTabWrapper).not.toContainHTML("-back");
+    expect(editButtonTab).toBeInTheDocument();
+    expect(editButtonTab).toContainHTML(fontAwsomeEditIcon);
+    expect(editButtonTab).toHaveTextContent("Edit");
+  });
+
+  it("should call dispatcher when clicking on a button tab", () => {
+    const items = [
+      {
+        action: "back",
+        exact: true,
+        icon: "chevron-left",
+        back: true
+      },
+      {
+        action: "edit",
+        exact: true,
+        icon: "edit",
+        label: "Edit"
+      }
+    ];
+    const onClick = jest.fn();
+
+    render(<Tabs items={items} onClick={onClick}/>);
+
+    const buttonsTab = screen.getAllByTitle("button-tab");
+    const chevronLeftButtonTab = buttonsTab[0];
+    const editButtonTab = buttonsTab[1];
+
+    fireEvent.click(chevronLeftButtonTab);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick).toHaveBeenCalledWith(items[0]);
+
+    fireEvent.click(editButtonTab);
+
+    expect(onClick).toHaveBeenCalledTimes(2);
+    expect(onClick).toHaveBeenCalledWith(items[1]);
+  });
+});

package/src/components/tabs/tabs.component.stories.tsx

@@ -93,9 +93,7 @@ function AddButton({ onCreate }: any) {
 }
 
 function HeaderChildren() {
-  return (
-    <div className={"px-3 bg-gray-100 border-b-1 border-gray-light"}>test</div>
-  );
+  return <div className={"px-3 bg-gray-100 border-b-1 border-gray-light"}>test</div>;
 }
 
 export const WithCloseable = (args: any) => {
@@ -104,12 +102,7 @@ export const WithCloseable = (args: any) => {
 
   return (
     <div className={"border-gray-300 border-1 shadow"}>
-      <Tabs
-        {...tabs}
-        i18n={(f) => f}
-        AddButton={AddButton}
-        HeaderChildren={HeaderChildren}
-      >
+      <Tabs {...tabs} i18n={(f) => f} AddButton={AddButton} HeaderChildren={HeaderChildren}>
         <div className={"p-5"}>{tabs?.current?.action}</div>
       </Tabs>
     </div>

package/src/components/tabs/tabs.component.tsx

@@ -2,51 +2,19 @@ import classnames from "classnames";
 import React, { PropsWithChildren } from "react";
 import { iconClass } from "../../utils/iconClass";
 
-export function ButtonTab({
-  icon,
-  back,
-  onClick,
-  isActive,
-  reverse,
-  children,
-  className,
-  after
-}: PropsWithChildren<any>) {
+export function ButtonTab({ icon, back, onClick, isActive, reverse, children, className, after }: PropsWithChildren<any>) {
   return (
-    <div
-      className={classnames(
-        "tw-tabs__button-wrapper",
-        isActive ? "-active" : "",
-        back ? "-back" : "",
-        className
-      )}
-    >
+    <div title={'button-wrapper'} className={classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)}>
       <button
-        className={classnames(
-          "tw-tabs__button",
-          reverse ? "-reverse" : "",
-          isActive ? "-active" : "",
-          back ? "-back" : ""
-        )}
+        title={'button-tab'}
+        className={classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : "")}
         onClick={onClick}
       >
-        {icon && (
-          <i
-            className={classnames(
-              iconClass(undefined, icon),
-              "tw-tabs__button-icon"
-            )}
-          />
-        )}
+        {icon && <i className={classnames(iconClass(undefined, icon), "tw-tabs__button-icon")} />}
         <span className={"tw-tabs__button-label"}>{children}</span>
         {after}
       </button>
-      <div
-        className={classnames(
-          "tw-tabs__button-border",
-          isActive ? "-active" : ""
-        )}
-      />
+      <div className={classnames("tw-tabs__button-border", isActive ? "-active" : "")} />
     </div>
   );
 }
@@ -83,7 +51,7 @@ export function Tabs({
   ...additionalProps
 }: PropsWithChildren<TabsProps>) {
   return (
-    <div className={`tw-tabs ${className}`} style={style}>
+    <div data-testid={'tabs-comp'} className={`tw-tabs ${className}`} style={style}>
       <div>
         <nav className='tw-tabs__header'>
           <div className='tw-tabs__header-wrapper'>
@@ -110,11 +78,9 @@ export function Tabs({
             {AddButton && <AddButton {...additionalProps} current={current} />}
           </div>
         </nav>
-        {HeaderChildren && (
-          <HeaderChildren {...additionalProps} current={current} />
-        )}
+        {HeaderChildren && <HeaderChildren {...additionalProps} current={current} />}
       </div>
-      <div className={"tw-tabs__body"}>{children}</div>
+      <div title={"tab-body"} className={"tw-tabs__body"}>{children}</div>
     </div>
   );
 }

package/src/interfaces/Operation.ts

@@ -2,10 +2,7 @@ import React from "react";
 import { OperationButtonProps } from "../components/table/components/defaultOperationButton.component";
 
 export type PermissionsResolver<Data = any> = (data: Data, ctx: any) => void;
-export type OnClickOperation<Data = any> = (
-  data: Data,
-  operation: Operation
-) => void;
+export type OnClickOperation<Data = any> = (data: Data, operation: Operation) => void;
 
 export interface Operation<Data = any> {
   /**

package/src/react-table.d.ts

@@ -45,9 +45,7 @@ import {
 } from "react-table";
 
 declare module "react-table" {
-  export interface UseFlexLayoutInstanceProps<
-    D extends Record<string, unknown>
-  > {
+  export interface UseFlexLayoutInstanceProps<D extends Record<string, unknown>> {
     totalColumnsMinWidth: number;
   }
 
@@ -66,17 +64,13 @@ declare module "react-table" {
       UseRowSelectOptions<D>,
       UseSortByOptions<D> {}
 
-  export interface Hooks<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseExpandedHooks<D>,
       UseGroupByHooks<D>,
       UseRowSelectHooks<D>,
       UseSortByHooks<D> {}
 
-  export interface TableInstance<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseColumnOrderInstanceProps<D>,
       UseExpandedInstanceProps<D>,
       UseFiltersInstanceProps<D>,
@@ -88,9 +82,7 @@ declare module "react-table" {
       UsePaginationInstanceProps<D>,
       UseSortByInstanceProps<D> {}
 
-  export interface TableState<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseColumnOrderState<D>,
       UseExpandedState<D>,
       UseFiltersState<D>,
@@ -103,9 +95,7 @@ declare module "react-table" {
     rowCount: number;
   }
 
-  export interface ColumnInterface<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseFiltersColumnOptions<D>,
       UseGroupByColumnOptions<D>,
       UseResizeColumnsColumnOptions<D>,
@@ -113,25 +103,16 @@ declare module "react-table" {
     align?: string;
   }
 
-  export interface ColumnInstance<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseFiltersColumnProps<D>,
       UseGroupByColumnProps<D>,
       UseResizeColumnsColumnProps<D>,
       UseFlexLayoutColumnProps<D>,
       UseSortByColumnProps<D> {}
 
-  export type Cell<
-    D extends Record<string, unknown> = Record<string, unknown>
-  > = UseGroupByCellProps<D>;
+  export type Cell<D extends Record<string, unknown> = Record<string, unknown>> = UseGroupByCellProps<D>;
 
-  export interface Row<D extends object = {}>
-    extends UseExpandedRowProps<D>,
-      UseGroupByRowProps<D>,
-      UseRowSelectRowProps<D> {}
+  export interface Row<D extends object = {}> extends UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D> {}
 }
 
-export type TableMouseEventHandler = (
-  instance: TableInstance<T>
-) => MouseEventHandler;
+export type TableMouseEventHandler = (instance: TableInstance<T>) => MouseEventHandler;

package/src/stores/action/action.actions.ts

@@ -18,45 +18,43 @@ function getFormio(formId: string, id: string) {
   return new Formio(url);
 }
 
-export const getAction = (
-  formId: string,
-  actionId: string,
-  done = noop
-) => async (dispatch: any) => {
-  dispatch(clearActionError(ACTION));
-  dispatch(requestAction(ACTION));
+export const getAction =
+  (formId: string, actionId: string, done = noop) =>
+  async (dispatch: any) => {
+    dispatch(clearActionError(ACTION));
+    dispatch(requestAction(ACTION));
 
-  const formio = getFormio(formId, actionId);
+    const formio = getFormio(formId, actionId);
 
-  try {
-    const action = await formio.loadAction();
+    try {
+      const action = await formio.loadAction();
 
-    dispatch(getActionInfo(formId, action.name));
-    dispatch(receiveAction(ACTION, { action }));
-    done(null, action);
-  } catch (error) {
-    dispatch(failAction(ACTION, { error }));
-    done(error);
-  }
-};
+      dispatch(getActionInfo(formId, action.name));
+      dispatch(receiveAction(ACTION, { action }));
+      done(null, action);
+    } catch (error) {
+      dispatch(failAction(ACTION, { error }));
+      done(error);
+    }
+  };
 
-export const saveAction = (formId: string, action: any, done = noop) => async (
-  dispatch: any
-) => {
-  dispatch(clearActionError(ACTION));
-  dispatch(sendAction(ACTION, { action }));
+export const saveAction =
+  (formId: string, action: any, done = noop) =>
+  async (dispatch: any) => {
+    dispatch(clearActionError(ACTION));
+    dispatch(sendAction(ACTION, { action }));
 
-  const formio = getFormio(formId, get(action, "data._id", ""));
+    const formio = getFormio(formId, get(action, "data._id", ""));
 
-  try {
-    const result = await formio.saveAction(action);
-    dispatch(receiveAction(ACTION, { action: result }));
-    done(null, result);
-  } catch (error) {
-    dispatch(failAction(ACTION, { error }));
-    done(error);
-  }
-};
+    try {
+      const result = await formio.saveAction(action);
+      dispatch(receiveAction(ACTION, { action: result }));
+      done(null, result);
+    } catch (error) {
+      dispatch(failAction(ACTION, { error }));
+      done(error);
+    }
+  };
 
 export const deleteAction = (formId: string, actionId: string, done = noop) => {
   return async (dispatch: any) => {

package/src/stores/action/action.reducers.spec.ts

@@ -1,11 +1,4 @@
-import {
-  clearActionError,
-  failAction,
-  receiveAction,
-  requestAction,
-  resetAction,
-  sendAction
-} from "./action.actions";
+import { clearActionError, failAction, receiveAction, requestAction, resetAction, sendAction } from "./action.actions";
 import { ACTION } from "./action.constant";
 import { actionReducer } from "./action.reducers";
 

package/src/stores/action/action.reducers.ts

@@ -1,14 +1,7 @@
 import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
 import { ActionSchema } from "../../interfaces";
 
-import {
-  clearActionError,
-  failAction,
-  receiveAction,
-  requestAction,
-  resetAction,
-  sendAction
-} from "./action.actions";
+import { clearActionError, failAction, receiveAction, requestAction, resetAction, sendAction } from "./action.actions";
 import { ACTION } from "./action.constant";
 
 export interface ActionState {

package/src/stores/action/action.selectors.ts

@@ -3,5 +3,4 @@ import { selectRoot } from "../root";
 import { ACTION } from "./action.constant";
 import { ActionState } from "./action.reducers";
 
-export const selectAction = (state: Record<string, any>): ActionSchema =>
-  selectRoot<ActionState>(ACTION, state).data;
+export const selectAction = (state: Record<string, any>): ActionSchema => selectRoot<ActionState>(ACTION, state).data;

package/src/stores/action-info/action-info.actions.spec.ts

@@ -1,9 +1,5 @@
 import { Formio } from "formiojs";
-import {
-  getActionInfo,
-  receiveActionInfo,
-  requestActionInfo
-} from "./action-info.actions";
+import { getActionInfo, receiveActionInfo, requestActionInfo } from "./action-info.actions";
 
 jest.mock("formiojs/Formio");