@inceptionbg/iui 2.0.8 → 2.0.10

package/src/components/Table/components/filters/TableFilters.tsx

@@ -0,0 +1,125 @@
+import { useMemo, useState, type FC } from 'react';
+import { useTableContext } from '../../contexts/TableContext';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '../../../Button/IconButton';
+import { NotificationBadge } from '../../../Badge/NotificationBadge';
+import {
+  getActiveFilterNumber,
+  getVisibleColumnsIds,
+} from '../../../../utils/tableUtils';
+import { faFilter } from '../../../../assets/icons/light/faFilter';
+import { ITableFilterItem } from '../../../../types/ITable';
+import { Pullover } from '../../../Pullover/Pullover';
+import { FilterItem } from './FilterItem';
+import {
+  deleteEmptyPropsIncludingArray,
+  deleteProps,
+} from '../../../../utils/objectUtils';
+import { faFilterCircleXmark } from '../../../../assets/icons/regular/faFilterCircleXmark';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+
+export const TableFilters: FC = () => {
+  const { controlRef, isOpen, onClose, onOpen } = usePopupControl();
+
+  const [filterSearch, setFilterSearch] = useState('');
+
+  const { t } = useTranslation();
+  const { columns, filterData } = useTableContext();
+
+  const columnIds = getVisibleColumnsIds(columns);
+
+  const {
+    filters,
+    additionalFilters,
+    excludeFromSearch,
+    search = {},
+    searchData = {},
+    setSearchData,
+    defaultSearch = {},
+    onSearch,
+    activeFilterNo,
+    customFilterIdList,
+  } = filterData ?? {};
+
+  const visibleFilters = useMemo(
+    () =>
+      filters
+        ? (customFilterIdList ?? columnIds).reduce(
+            (arr: ITableFilterItem[], col) =>
+              !!filters[col] ? arr.concat(filters[col]) : arr,
+            []
+          )
+        : [],
+    [columnIds, customFilterIdList, filters]
+  );
+
+  const filteredFilters = useMemo(
+    () =>
+      visibleFilters.filter(e =>
+        e?.label.toLowerCase().includes(filterSearch.toLowerCase())
+      ),
+    [visibleFilters, filterSearch]
+  );
+
+  return filterData ? (
+    <>
+      <NotificationBadge number={activeFilterNo ?? getActiveFilterNumber(search)}>
+        <IconButton
+          tooltip={t('Filter')}
+          icon={faFilter}
+          active={isOpen}
+          onClick={onOpen}
+          size="s"
+          variant="outlined"
+        />
+      </NotificationBadge>
+
+      <Pullover
+        controlRef={controlRef}
+        header={{
+          title: t('Filter'),
+          onSearch: visibleFilters.length > 2 ? setFilterSearch : undefined,
+        }}
+        onFormSubmit={() => {
+          const data = deleteEmptyPropsIncludingArray(searchData);
+          onSearch?.(excludeFromSearch ? deleteProps(data, excludeFromSearch) : data);
+          onClose();
+        }}
+        footer={{
+          confirmButton: {
+            label: t('ApplyFilters'),
+            type: 'submit',
+          },
+          additionalButton: {
+            label: t('ResetFilter'),
+            icon: faFilterCircleXmark,
+            onClick: () => {
+              setSearchData?.(defaultSearch);
+              onSearch?.(defaultSearch);
+              onClose();
+            },
+            disabled: defaultSearch
+              ? JSON.stringify(searchData) === JSON.stringify(defaultSearch)
+              : Object.keys(searchData).length === 0,
+          },
+          // onClose,
+        }}
+        contentClassName="iui-filters-list"
+        onCloseCallback={() => setFilterSearch('')}
+        size="w600"
+      >
+        {filteredFilters?.map(item => (
+          <FilterItem key={item.label} item={item} />
+        ))}
+        {additionalFilters && <div className="pb-1">{additionalFilters}</div>}
+
+        {/* {filteredFilters?.map(item => (
+          <FilterItem key={item.label + 1} item={item} />
+        ))}
+        {filteredFilters?.map(item => (
+          <FilterItem key={item.label + 2} item={item} />
+        ))} */}
+      </Pullover>
+    </>
+  ) : null;
+};

package/src/components/Table/components/footer/TableFooter.tsx

@@ -0,0 +1,128 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FC, MouseEventHandler, useEffect, useState } from 'react';
+import { faAngleLeft } from '../../../../assets/icons/solid/faAngleLeft';
+import { faAngleRight } from '../../../../assets/icons/solid/faAngleRight';
+import { faRotateRight } from '../../../../assets/icons/solid/faRotateRight';
+import { IconButton } from '../../../Button/IconButton';
+import { useTranslation } from 'react-i18next';
+import { IPaginationControl, tableStandardLimit } from '../../../../types/ITable';
+import { Select } from '../../../Inputs/Selects/Select';
+import { ISelectData } from '../../../../types/ISelect';
+import { TextInput } from '../../../Inputs/TextInput';
+import { formatCurrencyNoDecimals } from '../../../../utils/numberUtils';
+
+interface Props {
+  pagination: IPaginationControl;
+  noTotalRows?: boolean;
+  dataLength: number;
+  footerAction?: {
+    icon?: IconDefinition;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+  };
+  totalRows?: number;
+  customLimit?: number[];
+}
+
+export const TableFooter: FC<Props> = ({
+  pagination: { limit, offset, setLimit, setOffset },
+  totalRows = 0,
+  noTotalRows,
+  dataLength,
+  footerAction,
+  customLimit,
+}) => {
+  const [tempOffset, setTempOffset] = useState(offset + 1);
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    setTempOffset(offset + 1);
+  }, [offset]);
+
+  const handleChangeLimit = (value: ISelectData) => {
+    const newLimit = Math.floor(+value.value);
+    setLimit(newLimit);
+    setOffset(0);
+  };
+
+  const maxOffset = Math.ceil(totalRows / limit);
+
+  return (
+    <div className={`table-footer ${footerAction ? 'justify-between' : 'justify-right'}`}>
+      {!!footerAction && (
+        <IconButton
+          icon={footerAction.icon || faRotateRight}
+          onClick={footerAction.onClick}
+          tooltip={t('RefreshData')}
+          variant="outlined"
+          size="s"
+        />
+      )}
+      <div className="pagination">
+        <div className="flex align-center gap-2">
+          <p>{t('rowsPerPage')}</p>
+          <Select
+            value={{ label: `${limit}`, value: limit }}
+            size="s"
+            minWidth={20}
+            onChange={handleChangeLimit}
+            options={(customLimit || tableStandardLimit).map(e => ({
+              label: `${e}`,
+              value: e ?? t('allResults'),
+            }))}
+            isClearable={false}
+          />
+          {!noTotalRows && (
+            <p>
+              {limit
+                ? `${offset * limit + 1}-${
+                    offset * limit + limit <= totalRows
+                      ? offset * limit + limit
+                      : totalRows
+                  } ${t('of')} ${formatCurrencyNoDecimals(totalRows)}`
+                : `${t('allResults')} ${t('of')} ${formatCurrencyNoDecimals(totalRows)} `}
+            </p>
+          )}
+        </div>
+        {!noTotalRows && <p>|</p>}
+        <div className="flex gap-1 align-center">
+          <p>{t('page')}:</p>
+          <IconButton
+            disabled={offset < 1}
+            icon={faAngleLeft}
+            onClick={() => setOffset(offset - 1)}
+            className="p-1"
+            size="s"
+          />
+          <TextInput
+            className="offset-input"
+            value={`${tempOffset}`}
+            setValue={e => !isNaN(+e) && setTempOffset(+e)}
+            isClearable={false}
+            inputProps={{
+              onFocus: e => e.target.select(),
+              onBlur: () => setTempOffset(offset + 1),
+              onKeyUp: e => {
+                if (e.key === 'Enter') {
+                  const value = tempOffset;
+                  if (typeof value === 'number' && value >= 0 && value <= maxOffset) {
+                    setOffset(value - 1);
+                  } else {
+                    setTempOffset(offset + 1);
+                  }
+                }
+              },
+            }}
+          />
+          <IconButton
+            disabled={noTotalRows ? limit > dataLength : offset + 1 >= maxOffset}
+            icon={faAngleRight}
+            onClick={() => setOffset(offset + 1)}
+            size="s"
+          />
+          {!noTotalRows && <p>{`${t('of')} ${formatCurrencyNoDecimals(maxOffset)}`}</p>}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Table/components/header/TableHeader.tsx

@@ -0,0 +1,42 @@
+import { FC, Fragment } from 'react';
+import clsx from 'clsx';
+import { TableHeaderRow } from './TableHeaderRow';
+import { useTableContext } from '../../contexts/TableContext';
+
+export const HeaderTable: FC = () => {
+  const { columns, customHeader, headerWrap, maxHeight } = useTableContext();
+  const isSticky = !!maxHeight;
+
+  return (
+    <thead
+      className={clsx({
+        'no-wrap': !headerWrap,
+        'sticky-header': isSticky,
+      })}
+    >
+      <BorderRow span={columns.length} />
+      {customHeader ? (
+        customHeader?.map((row, i) => (
+          // No array manipulation will be performed, so using key 'i' is acceptable.
+          <Fragment key={i}>
+            <TableHeaderRow row={row} />
+            {(isSticky || i + 1 < customHeader.length) && (
+              <BorderRow span={columns.length} />
+            )}
+          </Fragment>
+        ))
+      ) : (
+        <>
+          <TableHeaderRow row={columns} />
+          <BorderRow span={columns.length} />
+        </>
+      )}
+    </thead>
+  );
+};
+
+const BorderRow: FC<{ span?: number }> = ({ span }) => (
+  <tr>
+    <th className="border-row" colSpan={span} />
+  </tr>
+);

package/src/components/Table/components/header/TableHeaderRow.tsx

@@ -0,0 +1,47 @@
+import { FC } from 'react';
+import { ITableColumn } from '../../../../types/ITable';
+import clsx from 'clsx';
+
+interface Props {
+  row: ITableColumn[];
+}
+
+export const TableHeaderRow: FC<Props> = ({ row }) => {
+  // const { sortData } = useTableContext();
+  // const { sort, setSort, sortOptions } = sortData ?? {};
+  // const activeSortOption = sortOptions?.find(e => sort?.startsWith(e.value));
+
+  return (
+    <tr>
+      {row.map(col => (
+        <th
+          key={col.id}
+          colSpan={col.colSpan}
+          rowSpan={col.rowSpan}
+          className={clsx(col.color, col.className)}
+          // onClick={() => {
+          //   const sortValue = sortOptions?.find(e => col.label === e.label)?.value;
+          //   sortValue &&
+          //     setSort?.(sort === sortValue + desc ? sortValue + asc : sortValue + desc);
+          // }}
+          style={
+            col.minWidth
+              ? { minWidth: col.minWidth }
+              : col.width
+                ? { width: col.width }
+                : undefined
+          }
+          hidden={col.hidden}
+        >
+          <div className="flex align-center">
+            {typeof col.label === 'string' ? (
+              <p className={`full-width text-${col.align || 'left'}`}>{col.label}</p>
+            ) : (
+              <div className={`full-width text-${col.align || 'left'}`}>{col.label}</div>
+            )}
+          </div>
+        </th>
+      ))}
+    </tr>
+  );
+};

package/src/components/Table/components/items/TableItemActions.tsx

@@ -0,0 +1,66 @@
+import { type FC } from 'react';
+import { useTableContext } from '../../contexts/TableContext';
+import { IconButton } from '../../../Button/IconButton';
+import { faEllipsisVertical, faPen, faTrashCan } from '../../../../assets/icons';
+import { useIsMenuOpen } from '../../../../hooks/useIsMenuOpen';
+import { Menu } from '../../../Menu/Menu';
+import { ITableDataItem } from '../../../../types/ITable';
+
+export const TableItemActions: FC<{ tableDataItem: ITableDataItem }> = ({
+  tableDataItem,
+}) => {
+  const { isMenuOpen, onMenuClose, onMenuOpen } = useIsMenuOpen();
+
+  const { dataActions, editable } = useTableContext();
+
+  if (!dataActions?.hasItemActions) {
+    return null;
+  }
+
+  return (
+    <div className="table-item-actions">
+      {dataActions.isEditable && (
+        <IconButton
+          icon={faPen}
+          onClick={() => editable?.setSelectedItem(tableDataItem.item ?? null)}
+          size="s"
+        />
+      )}
+      {dataActions.isDeletable && (
+        <IconButton
+          icon={faTrashCan}
+          onClick={() => dataActions.delete?.onClick?.(tableDataItem.uuid)}
+          size="s"
+          color="danger"
+        />
+      )}
+
+      {!!dataActions.actions?.length && (
+        <Menu
+          isOpen={isMenuOpen}
+          onClose={onMenuClose}
+          placement="bottom-right"
+          renderButton={ref => (
+            <IconButton
+              ref={ref}
+              icon={faEllipsisVertical}
+              active={isMenuOpen}
+              onClick={onMenuOpen}
+              size="s"
+            />
+          )}
+          items={
+            dataActions.actions?.map(action => ({
+              label: action.label,
+              hidden: !action.hasAccess,
+              onClick: () => {
+                action.onClick(tableDataItem);
+                onMenuClose();
+              },
+            })) ?? []
+          }
+        />
+      )}
+    </div>
+  );
+};

package/src/components/Table/components/select/TableSelect.tsx

@@ -0,0 +1,49 @@
+import { useState, type FC } from 'react';
+import { useTableContext } from '../../contexts/TableContext';
+import { Menu } from '../../../Menu/Menu';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '../../../Button/IconButton';
+import { faClipboardCheck } from '../../../../assets/icons/light/faClipboardCheck';
+import { NotificationBadge } from '../../../Badge/NotificationBadge';
+import { Tooltip } from '../../../Tooltip/Tooltip';
+
+export const TableSelect: FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { t } = useTranslation();
+  const { rowSelect, selectActions } = useTableContext();
+
+  return !!rowSelect && selectActions.length > 0 ? (
+    <Menu
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      placement="bottom-left"
+      renderButton={ref => (
+        <NotificationBadge number={rowSelect.selectedRows.size}>
+          <Tooltip
+            ref={ref}
+            label={t('TableSelect')}
+            disabled={!rowSelect.selectedRows.size}
+          >
+            <IconButton
+              icon={faClipboardCheck}
+              active={isOpen}
+              onClick={() => setIsOpen(!isOpen)}
+              disabled={!rowSelect.selectedRows.size}
+              variant="outlined"
+              size="s"
+            />
+          </Tooltip>
+        </NotificationBadge>
+      )}
+      items={selectActions.map(action => ({
+        ...action,
+        onClick: () => {
+          action.onClick!(rowSelect.selectedRows);
+          setIsOpen(false);
+          action.clearSelected && rowSelect.setSelectedRows(new Set<string>());
+        },
+      }))}
+    />
+  ) : null;
+};

package/src/components/Table/components/sort/TableSort.tsx

@@ -0,0 +1,52 @@
+import { useState, type FC } from 'react';
+import { Menu } from '../../../Menu/Menu';
+import { Tooltip } from '../../../Tooltip/Tooltip';
+import { IconButton } from '../../../Button/IconButton';
+import { faArrowUpArrowDown } from '../../../../assets/icons/light/faArrowUpArrowDown';
+import { useTableContext } from '../../contexts/TableContext';
+import { useTranslation } from 'react-i18next';
+import { faArrowDownWideShort } from '../../../../assets/icons/light/faArrowDownWideShort';
+import { faArrowDownShortWide } from '../../../../assets/icons/light/faArrowDownShortWide';
+
+export const TableSort: FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { t } = useTranslation();
+  const { sortData } = useTableContext();
+  const { sort, setSort, sortOptions } = sortData ?? {};
+
+  return sortData ? (
+    <Menu
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      renderButton={ref => (
+        <Tooltip label={t('Sort')} ref={ref}>
+          <IconButton
+            icon={faArrowUpArrowDown}
+            active={isOpen}
+            onClick={() => setIsOpen(!isOpen)}
+            size="s"
+            variant="outlined"
+          />
+        </Tooltip>
+      )}
+      size={sortData.menuSize}
+      items={sortOptions?.map(e => {
+        const valueAsc = e.value + '_ASC';
+        const valueDesc = e.value + '_DESC';
+
+        return {
+          label: e.label,
+          onClick: () => setSort?.(sort === valueDesc ? valueAsc : valueDesc),
+          active: sort?.startsWith(e.value),
+          icon:
+            sort === valueDesc
+              ? faArrowDownWideShort
+              : sort === valueAsc
+                ? faArrowDownShortWide
+                : undefined,
+        };
+      })}
+    />
+  ) : null;
+};

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

@@ -0,0 +1,123 @@
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  IPaginationControl,
+  ITable,
+  ITableColumn,
+  ITableEdit,
+  ITableSelectedActions,
+} from '../../../types/ITable';
+import { useLocalTablePagination } from '../hooks/localHooks/useLocalTablePagination';
+import { useLocalTableColumns } from '../hooks/localHooks/useLocalTableColumns';
+import { useLocalTableData } from '../hooks/localHooks/useLocalTableData';
+
+interface ITableContext extends ITable {
+  setColumns: (columns: ITableColumn[]) => void;
+  selectActions: ITableSelectedActions[];
+  dataActions?: ITable['dataActions'] & {
+    hasItemActions: boolean;
+    isEditable: boolean;
+    isDeletable: boolean;
+  };
+  editable?: ITableEdit & {
+    isAdding: boolean;
+    setIsAdding: Dispatch<SetStateAction<boolean>>;
+  };
+  footer?: ITable['footer'] & {
+    paginationControl: IPaginationControl;
+    noTotalRows: boolean;
+  };
+}
+
+const TableContext = createContext<ITableContext>({
+  setColumns: () => {},
+  selectActions: [],
+  data: [],
+  columns: [],
+});
+
+interface Props extends ITable {
+  children: ReactNode;
+}
+
+export const TableProvider = ({
+  columns: initialColumns,
+  data: initialData,
+  dataActions,
+  editable,
+  footer,
+  children,
+  ...rest
+}: Props) => {
+  const [isAdding, setIsAdding] = useState(false);
+
+  const { rowSelect } = rest;
+
+  const selectActions = useMemo(
+    () => rowSelect?.actions.filter(e => !e.hidden) || [],
+    [rowSelect?.actions]
+  );
+  const updatedDataActions = useMemo(() => {
+    const isEditable = Boolean(dataActions?.edit?.hasAccess);
+    const isDeletable = Boolean(dataActions?.delete?.hasAccess);
+    const filteredDataActions = dataActions?.actions?.filter(e => e.hasAccess) ?? [];
+    return {
+      ...dataActions,
+      actions: filteredDataActions,
+      hasItemActions: isEditable || isDeletable || filteredDataActions.length > 0,
+      isEditable,
+      isDeletable,
+    };
+  }, [dataActions]);
+
+  const localPagination = useLocalTablePagination({
+    defaultLimit: footer?.customPagination?.defaultLimit,
+  });
+
+  const { data } = useLocalTableData({
+    initialData,
+    localPagination,
+    controledPagination: !!footer?.paginationControl,
+    dataActions,
+    rowSelect,
+  });
+
+  const { columns, setColumns } = useLocalTableColumns({
+    initialColumns,
+    hasSelect: selectActions.length > 0,
+    data,
+    rowSelect,
+    hasItemActions: updatedDataActions.hasItemActions,
+  });
+
+  const tableContextValue: ITableContext = {
+    ...rest,
+    data,
+    dataActions: updatedDataActions,
+    columns,
+    setColumns,
+    selectActions,
+  };
+
+  if (editable) tableContextValue.editable = { ...editable, isAdding, setIsAdding };
+  if (footer)
+    tableContextValue.footer = {
+      ...footer,
+      paginationControl: footer?.paginationControl ?? localPagination,
+      totalRows: footer?.totalRows ?? initialData.length,
+      noTotalRows: footer?.totalRows === undefined,
+    };
+
+  return (
+    <TableContext.Provider value={tableContextValue}>{children}</TableContext.Provider>
+  );
+};
+
+export const useTableContext = () => useContext(TableContext);