@inceptionbg/iui 2.0.35 → 2.0.36

package/src/components/Table/components/templates/TableTemplates.tsx

@@ -1,65 +0,0 @@
-import type { FC } from 'react';
-import type { IReportTemplate } from '../../../../types/ITable';
-import { useEffect } from 'react';
-import { faBookmark } from '@inceptionbg/icons';
-import { useTranslation } from 'react-i18next';
-import { setTemplateData } from '../../../../utils/tableUtils';
-import { IconButton } from '../../../Button/IconButton';
-import { useTableContext } from '../../contexts/TableContext';
-import { TemplatesPullover } from './TemplatesPullover';
-
-export const TableTemplates: FC = () => {
-  const { t } = useTranslation();
-  const { templateData, columnData, filterData, sortData } = useTableContext();
-
-  useEffect(() => {
-    if (templateData?.defaultTemplate) {
-      setTemplateData({
-        template: templateData.defaultTemplate,
-        columnData,
-        setFilters: e => {
-          filterData?.setSearchData(e);
-          filterData?.onSearch(e);
-        },
-        setSort: sortData?.setSort,
-      });
-    }
-    // eslint-disable-next-line
-  }, [templateData?.defaultTemplate]);
-
-  if (!templateData) return null;
-
-  return (
-    <>
-      <IconButton
-        tooltip={t('Templates')}
-        icon={faBookmark}
-        active={templateData.popupController.control.isOpen}
-        onClick={templateData.popupController.onOpen}
-        size="s"
-        variant="outlined"
-      />
-      <TemplatesPullover
-        templateData={templateData}
-        onResetTemplate={() => {
-          columnData?.setColumns?.(columnData.defaultColumns);
-          filterData?.setSearchData(filterData.defaultSearch ?? {});
-          filterData?.onSearch(filterData.defaultSearch ?? {});
-          sortData?.setSort('');
-          templateData.popupController.onClose();
-        }}
-        onItemClick={(item: IReportTemplate) => {
-          setTemplateData({
-            template: item,
-            columnData,
-            setFilters: e => {
-              filterData?.setSearchData(e);
-              filterData?.onSearch(e);
-            },
-            setSort: sortData?.setSort,
-          });
-        }}
-      />
-    </>
-  );
-};

package/src/components/Table/components/templates/TemplatesPullover.tsx

@@ -1,88 +0,0 @@
-import type { FC } from 'react';
-import type { IReportTemplate, ITableTemplateData } from '../../../../types/ITable';
-import { faBookmark, faBookmarkSlash, faTrashCan } from '@inceptionbg/icons';
-import { useTranslation } from 'react-i18next';
-import { usePopupControl } from '../../../../hooks/usePopupControl';
-import { List } from '../../../List/List';
-import { Pullover } from '../../../Pullover/Pullover';
-import { CreateTemplateDialog } from './CreateTemplateDialog';
-
-interface Props {
-  templateData: ITableTemplateData;
-  onItemClick: (item: IReportTemplate) => void;
-  onResetTemplate?: () => void;
-  createDialogTitle?: string;
-  hideDefaultTemplateOption?: boolean;
-}
-
-export const TemplatesPullover: FC<Props> = ({
-  templateData,
-  onItemClick,
-  onResetTemplate,
-  createDialogTitle,
-  hideDefaultTemplateOption,
-}) => {
-  const { t } = useTranslation();
-  const createTemplatePopupController = usePopupControl();
-
-  return (
-    <>
-      <Pullover
-        isLoading={templateData.isLoading}
-        isFetching={templateData.isFetching}
-        control={templateData.popupController.control}
-        header={{
-          title: t('Templates'),
-          onSearch: templateData.setSearch,
-        }}
-        footer={{
-          confirmButton: {
-            label: t('CreateTemplate'),
-            onClick: createTemplatePopupController.onOpen,
-            splitActions: [
-              {
-                label: t('CreateDefaultTemplate'),
-                icon: faBookmark,
-                onClick: templateData.createItem.onCreateDefault,
-                hidden: hideDefaultTemplateOption,
-              },
-            ],
-          },
-          additionalButton: onResetTemplate && {
-            label: t('ResetTemplate'),
-            icon: faBookmarkSlash,
-            onClick: onResetTemplate,
-          },
-        }}
-        onCloseCallback={() => templateData.setSearch?.('')}
-        size="w600"
-      >
-        <List
-          items={templateData.items.map(item => ({
-            id: item.uuid,
-            label: item.name,
-            desc: item.isPublic ? t('PublicTemplate') : t('PrivateTemplate'),
-            onClick: () => {
-              onItemClick(item);
-              templateData.popupController.onClose();
-            },
-            actions: [
-              {
-                icon: faTrashCan,
-                onClick: () => templateData.setItemToDeleteUuids([item.uuid]),
-                color: 'danger',
-              },
-            ],
-          }))}
-          noItemsMessage={t('NoTemplatesAvailable')}
-        />
-      </Pullover>
-      <CreateTemplateDialog
-        control={createTemplatePopupController.control}
-        createItem={templateData.createItem}
-        title={createDialogTitle}
-      />
-      {templateData.DeleteDialog}
-    </>
-  );
-};

package/src/components/Table/contexts/TableContext.tsx

@@ -1,117 +0,0 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
-import type {
-  IPaginationControl,
-  ITable,
-  ITableColumnsData,
-  ITableDataActions,
-  ITableEdit,
-  ITableSelectedAction,
-} from '../../../types/ITable';
-import { createContext, useContext, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocalTableData } from '../hooks/localHooks/useLocalTableData';
-import { useLocalTablePagination } from '../hooks/localHooks/useLocalTablePagination';
-
-interface ITableContext<T = unknown> extends ITable<T> {
-  columnData: ITableColumnsData;
-  selectActions: ITableSelectedAction[];
-  dataActions?: ITableDataActions<T> & {
-    hasItemActions: boolean;
-    isEditable: boolean;
-    isDeletable: boolean;
-  };
-  editable?: ITableEdit<T> & {
-    isAdding: boolean;
-    setIsAdding: Dispatch<SetStateAction<boolean>>;
-  };
-  footer?: ITable['footer'] & {
-    paginationControl: IPaginationControl;
-    noTotalRows: boolean;
-  };
-}
-
-const TableContext = createContext<ITableContext<any>>({
-  columnData: { columns: [], defaultColumns: [] },
-  data: [],
-  selectActions: [],
-});
-
-export const TableProvider = <T,>({
-  columnData,
-  data: initialData,
-  dataActions,
-  editable,
-  footer,
-  children,
-  rowSelect,
-  ...rest
-}: ITable<T> & { children: ReactNode }) => {
-  const { t } = useTranslation();
-  const [isAdding, setIsAdding] = useState(false);
-
-  const selectActions = useMemo(() => {
-    const actions = (rowSelect?.actions ?? []).filter(e => !e.hidden);
-    if (rest.itemDeleteData?.hasAccess) {
-      actions.push({
-        label: t('Delete'),
-        onClick: e => rest.itemDeleteData!.setItemToDeleteUuids([...e]),
-      });
-    }
-    return actions;
-  }, [rowSelect?.actions, rest.itemDeleteData, t]);
-
-  const updatedDataActions = useMemo(() => {
-    const isEditable = Boolean(dataActions?.hasEditAccess);
-    const isDeletable = Boolean(rest.itemDeleteData?.hasAccess);
-
-    const hasCustomActions = initialData.some(({ item }) => {
-      const actions = dataActions?.actions?.(item).filter(e => e.hasAccess) ?? [];
-      return actions.length > 0;
-    });
-
-    return {
-      hasEditAccess: isEditable,
-      actions: dataActions?.actions,
-      hasItemActions: isEditable || isDeletable || hasCustomActions,
-      isEditable,
-      isDeletable,
-    };
-  }, [dataActions, initialData, rest.itemDeleteData?.hasAccess]);
-
-  const localPagination = useLocalTablePagination({
-    defaultLimit: footer?.customPagination?.defaultLimit,
-  });
-  const data = useLocalTableData<T>({
-    initialData,
-    noPagination: !footer || !!footer.hidden,
-    controledPagination: !!footer?.paginationControl,
-    localPagination,
-    dataActions: updatedDataActions,
-    isDeletable: updatedDataActions.isDeletable,
-    rowSelect,
-  });
-
-  const tableContextValue: ITableContext<T> = {
-    ...rest,
-    data,
-    dataActions: updatedDataActions,
-    columnData,
-    selectActions,
-    rowSelect,
-  };
-
-  if (editable) tableContextValue.editable = { ...editable, isAdding, setIsAdding };
-  if (footer)
-    tableContextValue.footer = {
-      ...footer,
-      paginationControl: footer?.paginationControl ?? localPagination,
-      totalRows: footer?.totalRows ?? initialData?.length ?? 0,
-      noTotalRows: footer?.totalRows === undefined,
-    };
-
-  return (
-    <TableContext.Provider value={tableContextValue}>{children}</TableContext.Provider>
-  );
-};
-
-export const useTableContext = () => useContext(TableContext);

package/src/components/Table/hooks/localHooks/useLocalTableColumns.tsx

@@ -1,70 +0,0 @@
-import type { ITableColumn } from '../../../../types/ITable';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Checkbox } from '../../../Inputs/Checkbox';
-import { useTableContext } from '../../contexts/TableContext';
-
-export const useLocalTableColumns = () => {
-  const { t } = useTranslation();
-
-  const {
-    columnData: { columns },
-    selectActions,
-    data,
-    rowSelect,
-    dataActions: { hasItemActions } = {},
-  } = useTableContext();
-
-  const visibleColumns = useMemo(() => {
-    const hasSelect = rowSelect && selectActions.length > 0;
-    const filteredColumns = columns.filter(column => !column.hidden);
-
-    let newCols: ITableColumn[] = [];
-
-    // Select Column
-    if (hasSelect) {
-      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;
-
-      const selectColumn: ITableColumn = {
-        id: 'select',
-        label: (
-          <Checkbox
-            value={selectedSome ? 'middle' : selectedAll}
-            setValue={() => {
-              selectedAll
-                ? rowSelect.setSelectedRows(new Set<string>())
-                : rowSelect?.setSelectedRows(oldValue => {
-                    let newSet = new Set(oldValue);
-                    selectableData.forEach(e => newSet.add(e.uuid!));
-                    return newSet;
-                  });
-            }}
-          />
-        ),
-        align: 'center',
-        className: 'select-col',
-      };
-
-      newCols.push(selectColumn);
-    }
-
-    newCols = newCols.concat(filteredColumns);
-    // Actions Column
-    if (hasItemActions) {
-      newCols.push({
-        id: 'actions',
-        label: t('Actions'),
-        align: 'center',
-        className: 'actions-col',
-      });
-    }
-
-    return newCols;
-  }, [columns, selectActions.length, data, rowSelect, hasItemActions, t]);
-
-  return { visibleColumns };
-};

package/src/components/Table/hooks/localHooks/useLocalTableData.tsx

@@ -1,82 +0,0 @@
-import type {
-  IPaginationControl,
-  ITable,
-  ITableDataActions,
-  ITableDataItem,
-} from '../../../../types/ITable';
-import { useMemo } from 'react';
-import { Checkbox } from '../../../Inputs/Checkbox';
-import { TableItemActions } from '../../components/items/TableItemActions';
-
-interface Props<T> {
-  initialData: ITableDataItem<T>[];
-  noPagination: boolean;
-  controledPagination: boolean;
-  localPagination: IPaginationControl;
-  dataActions?: ITableDataActions<T>;
-  isDeletable: boolean;
-  rowSelect: ITable['rowSelect'];
-}
-
-export const useLocalTableData = <T,>({
-  initialData,
-  noPagination,
-  controledPagination,
-  localPagination,
-  dataActions,
-  isDeletable,
-  rowSelect,
-}: Props<T>) =>
-  useMemo(() => {
-    const newData =
-      noPagination || controledPagination || localPagination.limit <= 0
-        ? initialData
-        : initialData.slice(
-            localPagination.offset * localPagination.limit,
-            localPagination.offset * localPagination.limit + localPagination.limit
-          );
-
-    const additionalDataActions = dataActions?.actions?.() ?? [];
-    const withActions = Boolean(
-      dataActions?.hasEditAccess || isDeletable || additionalDataActions.length
-    );
-
-    const withAdditionalColumns = Boolean(rowSelect || withActions);
-    const finalData = !withAdditionalColumns
-      ? newData
-      : newData.map(e => {
-          if (rowSelect) {
-            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,
-            };
-          }
-          if (dataActions) {
-            e.cells.actions = { value: <TableItemActions tableDataItem={e} /> };
-          }
-          return e;
-        });
-
-    return finalData;
-  }, [
-    initialData,
-    noPagination,
-    controledPagination,
-    localPagination.limit,
-    localPagination.offset,
-    rowSelect,
-    isDeletable,
-    dataActions,
-  ]);

package/src/components/Table/hooks/localHooks/useLocalTableKeyboard.ts

@@ -1,175 +0,0 @@
-import type { IKeyboardAction } from '../../../../types/IKeyboard';
-import type { ITableDataItem } from '../../../../types/ITable';
-import { useEffect, useState } from 'react';
-import { scrollToRow } from '../../../../utils/tableUtils';
-import { useTableContext } from '../../contexts/TableContext';
-
-export const useLocalTableKeyboard = () => {
-  const [focusedRow, setFocusedRow] = useState<ITableDataItem | null>(null);
-
-  const { keyboard, data, editable, itemDeleteData, dataActions, rowSelect, footer } =
-    useTableContext();
-
-  useEffect(() => {
-    if (keyboard?.enabled) {
-      const isEditing = !!editable?.selectedItem;
-      const isAdding = !!editable?.isAdding;
-      const isEditDisabled = !editable || keyboard?.actions?.editDisabled;
-      const isAddDisabled = !!editable?.addDisabled;
-      const isMoveDisabled = !!keyboard?.actions?.moveDisabled;
-      const isBulkAction =
-        dataActions?.hasItemActions &&
-        rowSelect?.selectedRows &&
-        rowSelect.selectedRows.size > 0;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        const rowIndex = focusedRow
-          ? data.findIndex(row => row.uuid === focusedRow.uuid)
-          : -1;
-
-        const allActions: IKeyboardAction[] = [
-          {
-            code: 'ArrowDown',
-            disabled: isEditing || isAdding || isMoveDisabled,
-            onAction: () => {
-              const nextRow = rowIndex + 1;
-              if (nextRow < data.length) {
-                // rowIndex will be -1 if no row is selected so the next row will be 0
-                setFocusedRow(data[nextRow]);
-                scrollToRow(data[nextRow].uuid);
-              }
-            },
-          },
-          {
-            code: 'ArrowUp',
-            disabled: isEditing || isAdding || isMoveDisabled,
-            onAction: () => {
-              if (rowIndex !== 0) {
-                const prevRow = rowIndex > 0 ? rowIndex - 1 : data.length - 1;
-                setFocusedRow(data[prevRow]);
-                scrollToRow(data[prevRow].uuid);
-              }
-            },
-          },
-          {
-            code: 'KeyE',
-            ctrl: true,
-            disabled: isEditing || isEditDisabled || !focusedRow,
-            onAction: () => {
-              editable?.setSelectedItem(focusedRow);
-            },
-          },
-          {
-            code: 'Enter',
-            disabled: isEditing || isAdding || !focusedRow?.onRowClick,
-            onAction: focusedRow?.onRowClick!,
-          },
-          {
-            code: 'Escape',
-            disabled: !focusedRow && !isAdding && !isEditing,
-            onAction: () =>
-              isAdding
-                ? editable?.setIsAdding(false)
-                : editable?.selectedItem
-                  ? editable?.setSelectedItem?.(null)
-                  : setFocusedRow(null),
-          },
-          {
-            code: 'Insert',
-            disabled: isAddDisabled || isAdding || isEditing,
-            onAction: () => {
-              editable?.setIsAdding(true);
-              setFocusedRow(null);
-            },
-          },
-          {
-            code: 'Delete',
-            disabled: !dataActions?.isDeletable || isEditing || !focusedRow,
-            onAction: () =>
-              itemDeleteData?.setItemToDeleteUuids(
-                isBulkAction ? Array.from(rowSelect.selectedRows) : [focusedRow!.uuid]
-              ),
-          },
-          {
-            code: 'ArrowLeft',
-            ctrl: true,
-            disabled: isEditing || isAdding || !footer || footer.hidden,
-            onAction: () =>
-              footer?.paginationControl &&
-              footer.paginationControl.setOffset(offset => (offset > 0 ? offset - 1 : 0)),
-          },
-          {
-            code: 'ArrowRight',
-            ctrl: true,
-            disabled: isEditing || isAdding || !footer || footer.hidden,
-            onAction: () => {
-              if (
-                footer?.paginationControl &&
-                (footer.noTotalRows
-                  ? footer.paginationControl.limit <= data.length
-                  : footer.paginationControl.offset + 1 <
-                    Math.ceil(footer.totalRows! / footer.paginationControl.limit))
-              ) {
-                footer.paginationControl.setOffset(offset => offset + 1);
-              }
-            },
-          },
-          {
-            code: 'Space',
-            disabled:
-              !dataActions?.hasItemActions || !focusedRow?.uuid || isEditing || isAdding,
-            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;
-              });
-            },
-          },
-        ];
-
-        allActions.forEach(action => {
-          if (
-            !action.disabled &&
-            action.code === event.code &&
-            !!action.ctrl === (event.ctrlKey || event.metaKey)
-          ) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (
-              action.onBulkAction &&
-              dataActions?.hasItemActions &&
-              rowSelect?.selectedRows &&
-              rowSelect.selectedRows.size > 0
-            ) {
-              action.onBulkAction(Array.from(rowSelect.selectedRows));
-            } else {
-              action.onAction();
-            }
-          }
-        });
-      };
-
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [
-    data,
-    editable,
-    keyboard,
-    dataActions?.hasItemActions,
-    dataActions?.isDeletable,
-    itemDeleteData,
-    focusedRow,
-    footer,
-    rowSelect,
-  ]);
-  return {
-    focusedRow,
-    // handleKeyDown,
-  };
-};

package/src/components/Table/hooks/localHooks/useLocalTablePagination.ts

@@ -1,12 +0,0 @@
-import { useState } from 'react';
-
-interface Props {
-  defaultLimit?: number;
-}
-
-export const useLocalTablePagination = ({ defaultLimit }: Props) => {
-  const [limit, setLimit] = useState(defaultLimit ?? 5);
-  const [offset, setOffset] = useState(0);
-
-  return { limit, offset, setLimit, setOffset };
-};

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

@@ -1,34 +0,0 @@
-import type { ITableColumn, ITableColumnsData } from '../../../types/ITable';
-import { useLayoutEffect, useMemo, useState } from 'react';
-
-export interface ITableColumnsProps {
-  defaultColumns: ITableColumn[];
-  enableEdit?: boolean;
-}
-
-export const useTableColumns = ({
-  defaultColumns,
-  enableEdit,
-}: ITableColumnsProps): ITableColumnsData => {
-  const [columns, setColumns] = useState<ITableColumn[]>([]);
-
-  const availableColumns = useMemo(
-    () => defaultColumns.filter(e => !e.unavailable),
-    [defaultColumns]
-  );
-
-  useLayoutEffect(() => {
-    setColumns(availableColumns);
-  }, [availableColumns]);
-
-  const columnData = useMemo(
-    () => ({
-      defaultColumns: availableColumns,
-      columns,
-      setColumns: enableEdit ? setColumns : undefined,
-    }),
-    [availableColumns, columns, enableEdit]
-  );
-
-  return columnData;
-};