@inceptionbg/iui 2.0.5 → 2.0.6

package/src/components/Table/Table.tsx

@@ -0,0 +1,527 @@
+import clsx from 'clsx';
+import { FC, Fragment, useEffect, useState } from 'react';
+import {
+  ITable,
+  ITableColumn,
+  ITableDataItem,
+  ITableSelectedActions,
+} from '../../types/ITable';
+import { Loader } from '../Loader/Loader';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
+import { TableFooter } from './Components/TableFooter';
+import { HeaderTable } from './Components/Header/TableHeader';
+import { TableOptions } from './Components/TableOptions';
+import { useTranslation } from 'react-i18next';
+import { Checkbox } from '../Inputs/Checkbox';
+import { Menu } from '../Menu/Menu';
+import { faEllipsisVertical } from '../../assets/icons/solid/faEllipsisVertical';
+import { MenuItem } from '../Menu/MenuItem';
+import { Button } from '../Button/Button';
+import { useTableKeyboard } from './hooks/useTableKeyboard';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus } from '../../assets/icons/solid/faPlus';
+
+export const Table: FC<ITable> = ({
+  columns,
+  setColumns,
+  withColumnsSearch,
+  customHeader,
+  data: tableData,
+  sumRows,
+  isLoading,
+  headerWrap,
+  serverSidePagination,
+  customPagination,
+  selectedRowUuid,
+  footerAction,
+  hideFooter,
+  noTotalRows,
+  showLastBorder,
+  className,
+  filterData,
+  sortData,
+  printData,
+  customPrintData,
+  templates,
+  additionsalOptions,
+  rowSelect,
+  rowHeight = 'm',
+  maxHeight,
+  editable,
+  keyboard,
+}) => {
+  const [limit, setLimit] = useState(customPagination?.defaultLimit ?? 5);
+  const [offset, setOffset] = useState(0);
+  const [cols, setCols] = useState<ITableColumn[]>([]);
+  const [data, setData] = useState<ITableDataItem[]>([]);
+  const [extendedRow, setExtendedRow] = useState('');
+  const [editableData, setEditableData] = useState<object>({});
+  const [isAdding, setIsAdding] = useState(false);
+  const [selectedActionOpen, setSelectedActionOpen] = useState(false);
+  const [activeSelectOptions, setActiveSelectOptions] = useState<ITableSelectedActions[]>(
+    []
+  );
+
+  const { t } = useTranslation();
+
+  const pagination = {
+    limit: serverSidePagination?.limit || limit,
+    offset: serverSidePagination?.offset || offset,
+    setLimit: serverSidePagination?.setLimit || setLimit,
+    setOffset: serverSidePagination?.setOffset || setOffset,
+    totalRows: serverSidePagination?.totalRows || tableData.length,
+  };
+
+  const focusedRow = useTableKeyboard({
+    enabled: !!keyboard?.enabled,
+    rows: data,
+    selected: {
+      enabled: !!rowSelect && activeSelectOptions.length > 0,
+      rows: rowSelect?.selectedRows ?? new Set<string>(),
+      resetSelected: () => rowSelect?.setSelectedRows(new Set<string>()),
+    },
+    actions: {
+      moveDisabled: !!keyboard?.actions?.moveDisabled || isAdding,
+      ...keyboard?.actions,
+      add: {
+        isAdding,
+        setIsAdding,
+        enabled: !!editable?.EditableRow && !editable.addDisabled,
+      },
+      edit: {
+        item: editable?.selectedItem,
+        setItem: editable?.setSelectedItem!,
+        enabled:
+          !!editable && !!editable!.setSelectedItem && !keyboard?.actions.editDisabled,
+      },
+      additional: additionalProps => [
+        ...(keyboard?.actions?.additional?.(additionalProps) || []),
+        {
+          key: 'PageUp',
+          isActive: !additionalProps.isEditing,
+          onAction: () =>
+            pagination.offset > 0 && pagination.setOffset(pagination.offset - 1),
+        },
+        {
+          key: 'PageDown',
+          isActive: !additionalProps.isEditing,
+          onAction: () => {
+            if (
+              noTotalRows
+                ? pagination.limit <= pagination.totalRows
+                : pagination.offset + 1 <
+                  Math.ceil(pagination.totalRows / pagination.limit)
+            ) {
+              pagination.setOffset(pagination.offset + 1);
+            }
+          },
+        },
+        {
+          key: ' ',
+          isActive: activeSelectOptions.length > 0 && !!focusedRow?.uuid,
+          onAction: () => {
+            const rowUuid = focusedRow?.uuid!;
+            const isRowSelected = rowSelect?.selectedRows.has(rowUuid);
+            rowSelect?.setSelectedRows(oldSet => {
+              const newSet = new Set(oldSet);
+              newSet[isRowSelected ? 'delete' : 'add'](rowUuid);
+              return newSet;
+            });
+          },
+        },
+      ],
+    },
+  });
+
+  // Set Active Select Options
+  useEffect(() => {
+    rowSelect?.actions.length &&
+      setActiveSelectOptions(rowSelect.actions.filter(e => !e.hidden) || []);
+  }, [rowSelect?.actions]);
+
+  useEffect(
+    () => {
+      // Active Column
+      const activeColumns = columns.filter(e => !e.hidden && !e.unavailable);
+
+      // Select Column
+      let selectCol;
+      if (rowSelect && activeSelectOptions.length > 0) {
+        const selectableData = data.filter(e => !e.disableSelect);
+        const selectedSome =
+          !!rowSelect.selectedRows.size &&
+          selectableData.some(e => !rowSelect.selectedRows.has(e.uuid));
+        const selectedAll = !!rowSelect.selectedRows.size && !selectedSome;
+        selectCol = {
+          id: 'select',
+          label: (
+            <Checkbox
+              value={selectedSome ? 'middle' : selectedAll}
+              // label={`${selected.size}`}
+              setValue={() => {
+                selectedAll
+                  ? rowSelect.setSelectedRows(new Set<string>())
+                  : rowSelect.setSelectedRows(oldValue => {
+                      let newSet = new Set(oldValue);
+                      selectableData.forEach(e => newSet.add(e.uuid!));
+                      return newSet;
+                    });
+              }}
+            />
+          ),
+          width: '50px',
+        };
+      }
+
+      let newCols: ITableColumn[] = [];
+
+      selectCol && newCols.push(selectCol);
+      newCols = newCols.concat(activeColumns);
+
+      setCols(newCols);
+    },
+    // eslint-disable-next-line
+    [
+      columns,
+      editable,
+      rowSelect?.selectedRows,
+      activeSelectOptions,
+      serverSidePagination,
+    ]
+  );
+
+  useEffect(() => {
+    // const data = editable
+    //   ? tableData.map((e) => ({
+    //       ...e,
+    //       cells: {
+    //         ...e.cells,
+    //         actions: {
+    //           value: (
+    //             <ItemActionsMenu
+    //               item={e}
+    //               setSelectedItem={editable!.setSelectedItem}
+    //             />
+    //           ),
+    //         },
+    //       },
+    //     }))
+    //   : tableData;
+    const data =
+      serverSidePagination || limit <= 0
+        ? tableData
+        : tableData.slice(offset * limit, offset * limit + limit);
+
+    rowSelect &&
+      activeSelectOptions.length > 0 &&
+      data.map(
+        e =>
+          (e.cells.select = {
+            value: (
+              <Checkbox
+                value={rowSelect.selectedRows.has(e.uuid!)}
+                setValue={checked => {
+                  rowSelect.setSelectedRows(oldSet => {
+                    const newSet = new Set(oldSet);
+                    checked ? newSet.add(e.uuid!) : newSet.delete(e.uuid!);
+                    return newSet;
+                  });
+                }}
+                disabled={e.disableSelect}
+              />
+            ),
+            unclickable: true,
+          })
+      );
+    setData(data);
+  }, [
+    tableData,
+    limit,
+    offset,
+    rowSelect?.selectedRows,
+    activeSelectOptions,
+    serverSidePagination,
+    rowSelect,
+  ]);
+
+  const EditableRow = editable?.EditableRow;
+
+  return (
+    <Loader isLoading={!!isLoading}>
+      <div
+        className={clsx('iui-table', className, {
+          'pb-3': data.length === 0,
+        })}
+      >
+        <div className="flex column gap-2">
+          {(!!filterData ||
+            !!sortData ||
+            !!setColumns ||
+            !!printData ||
+            !!customPrintData) && (
+            <TableOptions
+              columns={cols}
+              columnsData={
+                setColumns
+                  ? { columns, setColumns, withSearch: withColumnsSearch }
+                  : undefined
+              }
+              filterData={filterData}
+              sortData={sortData}
+              printData={printData}
+              customPrintData={customPrintData}
+              templates={templates}
+              additionsalOptions={additionsalOptions}
+            />
+          )}
+          {/* ////// SELECT ////// */}
+          {!!rowSelect && activeSelectOptions.length > 0 && (
+            <div className="flex gap-2 align-center pl-3">
+              <p className="fs-12">{`${t('Selected')}: ${
+                rowSelect.selectedRows.size
+              }`}</p>
+              <Menu
+                isOpen={selectedActionOpen}
+                onClose={() => setSelectedActionOpen(false)}
+                placement="bottom-left"
+                renderButton={ref => (
+                  <Button
+                    ref={ref}
+                    label={t('Actions')}
+                    icon={faEllipsisVertical}
+                    active={selectedActionOpen}
+                    disabled={!rowSelect.selectedRows.size}
+                    onClick={() => setSelectedActionOpen(!selectedActionOpen)}
+                    size="s"
+                  />
+                )}
+              >
+                {activeSelectOptions.map(action => (
+                  <MenuItem
+                    key={action.label}
+                    label={action.label}
+                    disabled={action.disabled}
+                    onClick={() => {
+                      action.onClick!(rowSelect.selectedRows);
+                      setSelectedActionOpen(false);
+                      action.clearSelected &&
+                        rowSelect.setSelectedRows(new Set<string>());
+                    }}
+                  />
+                ))}
+              </Menu>
+            </div>
+          )}
+        </div>
+        <div className="table-container" style={{ maxHeight }}>
+          <ConditionalWrapper
+            condition={!!editable}
+            wrapper={children => (
+              <form
+                onSubmit={e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  editable!.onSubmit(editableData, () => {
+                    !editable?.keepEditOnSubmit &&
+                      editable!.inputFocusRef?.current?.focus();
+                    if (!editable?.selectedItem || !editable?.keepEditOnSubmit) {
+                      setEditableData(editable!.defaultDataValue ?? {});
+                      editable?.setSelectedItem && editable.setSelectedItem(null);
+                    }
+                  });
+                }}
+              >
+                {children}
+              </form>
+            )}
+          >
+            <table className="full-width">
+              <HeaderTable
+                columns={cols}
+                headerWrap={headerWrap}
+                customHeader={customHeader}
+                sticky={!!maxHeight}
+              />
+              <tbody
+                className={clsx({ 'no-last-border': hideFooter && !showLastBorder })}
+              >
+                {data.length ? (
+                  <>
+                    {data.map(row => {
+                      const isExtended =
+                        row.extendable &&
+                        !row.extendable.isLoading &&
+                        extendedRow === row.uuid;
+                      return (
+                        <Fragment key={row.uuid}>
+                          {/* ////// EDITABLE ROW ////// */}
+                          {!!EditableRow &&
+                          row.uuid === editable?.selectedItem?.uuid &&
+                          editable.setSelectedItem ? (
+                            <EditableRow
+                              columns={cols}
+                              data={editableData}
+                              setData={setEditableData}
+                              item={editable.selectedItem}
+                              clearItem={() => editable.setSelectedItem!(null)}
+                              defaultDataValue={editable.defaultDataValue}
+                              inputFocusRef={editable.inputFocusRef}
+                            />
+                          ) : (
+                            ////// REGULAR ROW //////
+                            <tr
+                              data-id={row.uuid}
+                              className={clsx(row.className, {
+                                selected:
+                                  !!selectedRowUuid && selectedRowUuid === row.uuid,
+                                clickable: !!row.onRowClick || !!row.extendable,
+                                focused: !!focusedRow && focusedRow.uuid === row.uuid,
+                                loading: row.extendable?.isLoading,
+                              })}
+                              onClick={e => {
+                                row.onRowClick && row.onRowClick(e);
+                                row.extendable &&
+                                  setExtendedRow(
+                                    extendedRow === row.uuid ? '' : row.uuid
+                                  );
+                              }}
+                            >
+                              {cols.map(column => {
+                                const cell = row.cells[column.id];
+                                return (
+                                  <Tooltip
+                                    key={column.id}
+                                    label={cell?.tooltip!}
+                                    position="top"
+                                    disabled={!cell?.tooltip}
+                                  >
+                                    <td
+                                      data-th={
+                                        column.id === 'select'
+                                          ? t('Selected') + ':'
+                                          : column.label
+                                          ? column.label + ': '
+                                          : '/'
+                                      }
+                                      align={cell?.align || column.align}
+                                      onClick={
+                                        cell?.onClick || cell?.unclickable
+                                          ? e => {
+                                              e.stopPropagation();
+                                              cell?.onClick && cell?.onClick!(e);
+                                            }
+                                          : undefined
+                                      }
+                                      className={clsx(
+                                        column.color,
+                                        cell?.className,
+                                        rowHeight,
+                                        {
+                                          link: cell?.link,
+                                          'p-0': !cell?.value && cell?.value !== 0,
+                                          'clickable-column': cell?.onClick,
+                                          'word-break': column.break,
+                                          'no-border': isExtended,
+                                        }
+                                      )}
+                                      colSpan={cell?.span}
+                                    >
+                                      {cell?.value}
+                                    </td>
+                                  </Tooltip>
+                                );
+                              })}
+                            </tr>
+                          )}
+                          {/* ////// EXTENDABLE ROW ////// */}
+                          {isExtended && (
+                            <tr>
+                              <td colSpan={cols.length} className={rowHeight}>
+                                {row.extendable!.element}
+                              </td>
+                            </tr>
+                          )}
+                        </Fragment>
+                      );
+                    })}
+                  </>
+                ) : (
+                  <tr>
+                    <td className="no-border" colSpan={cols.length}>
+                      {t('NoResults')}
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+              <tfoot
+              // className="sticky-footer"
+              >
+                {!!EditableRow &&
+                  !editable.selectedItem &&
+                  !editable.addDisabled &&
+                  // TO DO -> Remove keyboard condition to enable this for every table
+                  (keyboard?.enabled && !isAdding ? (
+                    ////// NEW ITEM ROW //////
+                    <tr
+                      data-id="add"
+                      className={`clickable${
+                        focusedRow?.uuid === 'add' ? ' focused' : ''
+                      }`}
+                      onClick={() => setIsAdding(true)}
+                    >
+                      <td className={`text-center ${rowHeight}`} colSpan={columns.length}>
+                        <div className="flex center gap-2">
+                          <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
+                          <p>{editable.addLabel || t('AddItem')}</p>
+                        </div>
+                      </td>
+                    </tr>
+                  ) : (
+                    <EditableRow
+                      columns={cols}
+                      data={editableData}
+                      setData={setEditableData}
+                      defaultDataValue={editable.defaultDataValue}
+                      clearItem={() => {
+                        editable.setSelectedItem?.(null);
+                        isAdding && setIsAdding(false);
+                      }}
+                      inputFocusRef={editable.inputFocusRef}
+                    />
+                  ))}
+                {!!sumRows &&
+                  !!data.length &&
+                  sumRows.map(row => (
+                    <tr key={row.uuid}>
+                      {cols.map(({ id: columnId }) => (
+                        <td
+                          key={columnId}
+                          align={row.cells[columnId]?.align || 'right'}
+                          colSpan={row.cells[columnId]?.span}
+                          className={rowHeight}
+                        >
+                          <strong>{row.cells[columnId]?.value}</strong>
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+              </tfoot>
+            </table>
+          </ConditionalWrapper>
+        </div>
+        {!hideFooter &&
+          (!!data.length ||
+            (noTotalRows && (serverSidePagination?.offset || offset) > 0)) && (
+            <TableFooter
+              customLimit={customPagination?.customLimit}
+              pagination={pagination}
+              footerAction={footerAction}
+              noTotalRows={noTotalRows}
+              dataLength={data.length}
+            />
+          )}
+      </div>
+    </Loader>
+  );
+};

package/src/components/Table/hooks/useDefaultTemplate.ts

@@ -0,0 +1,20 @@
+// import { useEffect, useState } from 'react';
+// import { getDefaultReportTemplate } from '../Components/Templates/repo/TemplateRepo';
+// import { IReportTemplate } from '../../../types/ITable';
+
+export const useDefaultTemplate = (identifier?: string) => {
+  //   const [template, setTemplate] = useState<IReportTemplate | null>(null);
+  //   const [isLoading, setIsLoading] = useState(true);
+  //   useEffect(() => {
+  //     if (identifier) {
+  //       getDefaultReportTemplate(identifier)
+  //         .then(setTemplate)
+  //         .catch(() => {})
+  //         .finally(() => setIsLoading(false));
+  //     }
+  //   }, [identifier]);
+  //   return {
+  //     defaultTemplate: template,
+  //     isLoadingDefaultTemplate: !!identifier && isLoading,
+  //   };
+};

package/src/components/Table/hooks/useTableKeyboard.ts

@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react';
+import { ITableDataItem } from '../../../types/ITable';
+import { IKeyboardAction, ITableKeyboardActionsProp } from '../../../types/IKeyboard';
+import { useDialogObserver } from '../../Dialog/hooks/useDialogObserver';
+import { scrollToRow } from '../../../utils/TableUtils';
+
+export const useTableKeyboard = ({
+  enabled,
+  rows,
+  selected,
+  actions,
+}: {
+  enabled: boolean;
+  rows: ITableDataItem[];
+  selected: {
+    enabled: boolean;
+    rows: Set<string>;
+    resetSelected: () => void;
+  };
+  actions: ITableKeyboardActionsProp;
+}) => {
+  const [focusedRow, setFocusedRow] = useState<ITableDataItem | null>(null);
+  const isDialogOpen = useDialogObserver();
+
+  useEffect(() => {
+    if (enabled && !isDialogOpen) {
+      const isEditing = !!actions.edit?.item;
+      const isAdding = !!actions.add?.isAdding;
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        const isControlKeyPressed = event.ctrlKey || event.metaKey;
+        const rowIndex = focusedRow
+          ? rows.findIndex(row => row.uuid === focusedRow.uuid)
+          : -1;
+
+        const allActions: IKeyboardAction[] = [
+          {
+            key: 'ArrowDown',
+            disabled: isEditing || actions.moveDisabled,
+            onAction: () => {
+              // Leave action enabled to prevent default scroll movement
+              const nextRow = rowIndex + 1;
+              if (nextRow < rows.length) {
+                // rowIndex will be -1 if no row is selected so the next row will be 0
+                setFocusedRow(rows[nextRow]);
+                scrollToRow(rows[nextRow].uuid);
+              }
+            },
+          },
+          {
+            key: 'ArrowUp',
+            disabled: isEditing || actions.moveDisabled,
+            onAction: () => {
+              if (rowIndex !== 0) {
+                const prevRow = rowIndex > 0 ? rowIndex - 1 : rows.length - 1;
+                setFocusedRow(rows[prevRow]);
+                scrollToRow(rows[prevRow].uuid);
+              }
+            },
+          },
+          {
+            key: 'e',
+            normalizedKey: true,
+            ctrl: true,
+            disabled: !actions.edit?.enabled || !focusedRow,
+            onAction: () => !isEditing && actions.edit?.setItem(focusedRow?.item ?? null),
+          },
+          {
+            key: 'Enter',
+            disabled: isEditing || isAdding || !focusedRow?.onRowClick,
+            onAction: focusedRow?.onRowClick!,
+          },
+          {
+            key: 'Escape',
+            disabled: !focusedRow && !isAdding,
+            // isActive: !!focusedRow || !!isAdding,
+            onAction: () =>
+              isAdding
+                ? actions.add?.setIsAdding(false)
+                : actions.edit?.item
+                ? actions.edit?.setItem(null)
+                : setFocusedRow(null),
+          },
+          ...['Insert', '+'].map(
+            key =>
+              ({
+                key,
+                disabled: !actions.add?.enabled || isAdding || isEditing,
+                onAction: () => {
+                  actions.add?.setIsAdding(true);
+                  setFocusedRow(null);
+                },
+              } as IKeyboardAction)
+          ),
+          {
+            key: 'Delete',
+            disabled: isEditing || !actions.delete?.enabled || !focusedRow,
+            onAction: () =>
+              actions.delete?.onAction ??
+              actions.delete?.setItemToDeleteUuids(
+                selected.enabled && selected.rows && selected.rows.size > 0
+                  ? Array.from(selected.rows)
+                  : [focusedRow!.uuid]
+              ),
+          },
+          ...(actions?.additional?.({
+            focusedRow,
+            isEditing,
+            isAdding,
+          }) || []),
+        ];
+
+        allActions.forEach(item => {
+          if (
+            !item.disabled &&
+            item.key === (item.normalizedKey ? event.key.toLowerCase() : event.key) &&
+            !!item.ctrl === isControlKeyPressed
+          ) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (item.onBulkAction && selected?.enabled && selected.rows.size > 0) {
+              item.onBulkAction(Array.from(selected.rows));
+            } else {
+              item.onAction();
+            }
+          }
+        });
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [enabled, rows, focusedRow, actions, isDialogOpen, selected.enabled, selected.rows]);
+
+  return focusedRow;
+};

package/src/components/Table/hooks/useTableSelect.ts

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export const useTableSelect = () => {
+  const [selectedRows, setSelectedRows] = useState(new Set<string>());
+
+  return {
+    selectedRows,
+    setSelectedRows,
+    resetSelectedRows: () => setSelectedRows(new Set<string>()),
+  };
+};