@inceptionbg/iui 2.0.35 → 2.0.37

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

@@ -1,126 +0,0 @@
-import type { FC, MouseEventHandler } from 'react';
-import type { ISelectData } from '../../../../types/ISelect';
-import type { IPaginationControl } from '../../../../types/ITable';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { faAngleLeft } from '../../../../assets/icons/solid/faAngleLeft';
-import { faAngleRight } from '../../../../assets/icons/solid/faAngleRight';
-import { faRotateRight } from '../../../../assets/icons/solid/faRotateRight';
-import { tableStandardLimit } from '../../../../types/ITable';
-import { formatCurrencyNoDecimals } from '../../../../utils/numberUtils';
-import { IconButton } from '../../../Button/IconButton';
-import { Select } from '../../../Inputs/Selects/Select';
-import { TextInput } from '../../../Inputs/TextInput';
-
-interface Props {
-  pagination: IPaginationControl;
-  noTotalRows?: boolean;
-  dataLength: number;
-  refetch?: MouseEventHandler<HTMLButtonElement>;
-  totalRows?: number;
-  customLimit?: number[];
-}
-
-export const TableFooter: FC<Props> = ({
-  pagination: { limit, offset, setLimit, setOffset },
-  totalRows = 0,
-  noTotalRows,
-  dataLength,
-  refetch,
-  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 ${refetch ? 'justify-between' : 'justify-right'}`}>
-      {!!refetch && (
-        <IconButton
-          icon={faRotateRight}
-          onClick={refetch}
-          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

@@ -1,40 +0,0 @@
-import type { FC } from 'react';
-import type { ITableColumn } from '../../../../types/ITable';
-import clsx from 'clsx';
-import { TableHeaderRow } from './TableHeaderRow';
-
-type Props = {
-  columns: ITableColumn[];
-  customHeader?: ITableColumn[][];
-  headerWrap?: boolean;
-  maxHeight?: number | string;
-  print?: boolean;
-};
-
-export const HeaderTable: FC<Props> = ({
-  columns,
-  customHeader,
-  headerWrap,
-  maxHeight,
-  print,
-}) => {
-  const isSticky = !print && !!maxHeight;
-
-  return (
-    <thead
-      className={clsx({
-        'no-wrap': !headerWrap,
-        'sticky-header': isSticky,
-      })}
-    >
-      {customHeader ? (
-        customHeader.map((row, i) => (
-          // No array manipulation will be performed, so using key 'i' is fine.
-          <TableHeaderRow key={i} row={row} print={print} />
-        ))
-      ) : (
-        <TableHeaderRow row={columns} print={print} />
-      )}
-    </thead>
-  );
-};

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

@@ -1,57 +0,0 @@
-import type { FC } from 'react';
-import type { ITableColumn } from '../../../../types/ITable';
-import clsx from 'clsx';
-
-interface Props {
-  row: ITableColumn[];
-  print?: boolean;
-}
-
-export const TableHeaderRow: FC<Props> = ({ row, print }) => {
-  // 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={
-            print
-              ? undefined
-              : clsx(col.color, col.className, {
-                  'sticky-column': col.sticky,
-                  'not-first-cell': col.notFirstCell,
-                })
-          }
-          // onClick={() => {
-          //   const sortValue = sortOptions?.find(e => col.label === e.label)?.value;
-          //   sortValue &&
-          //     setSort?.(sort === sortValue + desc ? sortValue + asc : sortValue + desc);
-          // }}
-          style={
-            print
-              ? undefined
-              : 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

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

package/src/components/Table/components/print/TablePrint.tsx

@@ -1,200 +0,0 @@
-import type { FC } from 'react';
-import type { IPrintData } from '../../../../types/ITable';
-import { useEffect, useMemo } from 'react';
-import { faPrint } from '@inceptionbg/icons';
-import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
-import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
-import { useHideZendesk } from '../../../../hooks/useZendesk';
-import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';
-import { IconButton } from '../../../Button/IconButton';
-import { ProgressBar } from '../../../Loader/ProgressBar';
-import { Pullover } from '../../../Pullover/Pullover';
-import { useTableContext } from '../../contexts/TableContext';
-import { HeaderTable } from '../header/TableHeader';
-
-export const TablePrint: FC = () => {
-  const { t } = useTranslation();
-  useHideZendesk();
-  const {
-    columnData: { columns },
-    printData,
-  } = useTableContext();
-
-  const {
-    label,
-    tableData: data,
-    isLoading,
-    progress,
-    paginationControl,
-    printPopupControl,
-    customHeader,
-    filters,
-    optionalNode,
-    organization,
-    saveXlsx,
-    totals,
-  } = useMemo(() => (printData ?? {}) as IPrintData, [printData]);
-  const { control, onOpen } = printPopupControl;
-
-  const cols = useMemo(() => columns.filter(e => !e.hidden && !e.printHidden), [columns]);
-
-  useEffect(() => {
-    if (control.isOpen) {
-      paginationControl?.setLimit(1000);
-      paginationControl?.setOffset(0);
-    }
-  }, [paginationControl, control.isOpen]);
-
-  return (
-    printData && (
-      <>
-        <IconButton
-          tooltip={t('PrintExport')}
-          icon={faPrint}
-          onClick={onOpen}
-          size="s"
-          variant="outlined"
-        />
-
-        <Pullover
-          control={control}
-          header={{ title: t('PrintExport') }}
-          footer={{
-            confirmButton: {
-              label: t('Print'),
-              onClick: window.print,
-              // type: 'submit',
-            },
-            additionalButton: saveXlsx
-              ? {
-                  label: t('SaveXlsx'),
-                  icon: faFileArrowDown,
-                  onClick: saveXlsx,
-                }
-              : undefined,
-          }}
-          contentClassName="iui-print"
-          size="vw100"
-          portalTarget={document.body}
-        >
-          <div className="print-content">
-            <div className="flex justify-between">
-              {organization ? (
-                <div>
-                  <p className="name">{organization.name}</p>
-                  {organization.taxId && <p>{`${t('TaxId')}: ${organization.taxId}`}</p>}
-                  {organization.registrationNumber && (
-                    <p>{`${t('BusinessCode')}: ${organization.registrationNumber}`}</p>
-                  )}
-                  {organization.jbkjs && <p>JBKJS: {organization.jbkjs}</p>}
-                  {organization.email && <p>Email: {organization.email}</p>}
-                </div>
-              ) : (
-                <div />
-              )}
-              <div className="text-right">
-                <p>{`${t('PrintDate')}: ${getCurrentDateFormatted()}`}</p>
-              </div>
-            </div>
-            <h3 className="my-3 text-center">{label}</h3>
-            {filters && (
-              <div className="flex justify-between">
-                <div>
-                  {filters.basic?.map(
-                    e =>
-                      !!e.value && (
-                        <div key={e.value} className="mb-2">
-                          <p>{`${e.label}: ${e.value}`}</p>
-                        </div>
-                      )
-                  )}
-                </div>
-                {filters.date && (
-                  <div>
-                    {filters.date.map(
-                      e =>
-                        (!!e.from || !!e.to) && (
-                          <div key={e.label} className="mb-2 text-right">
-                            <p>
-                              {e.label} {!!e.from && `${t('from')} ${formatDate(e.from)}`}{' '}
-                              {`${t('to')} ${formatDate(e.to || new Date().toString())}`}
-                            </p>
-                          </div>
-                        )
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-            {optionalNode?.aboveTable}
-            {isLoading ? (
-              <ProgressBar progress={progress} />
-            ) : (
-              data && (
-                <table width="100%" className="print-table">
-                  <HeaderTable
-                    columns={cols}
-                    customHeader={customHeader}
-                    headerWrap
-                    print
-                  />
-                  <tbody>
-                    {data.map(row => {
-                      let totalColsSpan = 0;
-                      return (
-                        <tr key={row.uuid} className={row.className}>
-                          {cols.map(column => {
-                            const cell = row.cells[column.id];
-
-                            totalColsSpan += cell?.span
-                              ? // If span is -1 or larger then the number of columns
-                                cell.span === -1 || cell.span > cols.length
-                                ? // ...fill the rest of the table
-                                  cols.length - totalColsSpan
-                                : cell.span
-                              : 1;
-
-                            return (
-                              cols.length >= totalColsSpan && (
-                                <td
-                                  key={column.id}
-                                  align={cell?.align || column.align}
-                                  className={clsx(column.color, cell?.className, {
-                                    'word-break': column.break,
-                                  })}
-                                  colSpan={cell?.span === -1 ? cols.length : cell?.span}
-                                >
-                                  {cell?.printValue ?? cell?.value}
-                                </td>
-                              )
-                            );
-                          })}
-                        </tr>
-                      );
-                    })}
-                    {!!totals && (
-                      <tr>
-                        {cols.map(({ id: columnId }) => (
-                          <td
-                            key={columnId}
-                            align={totals.cells[columnId]?.align || 'right'}
-                            colSpan={totals.cells[columnId]?.span}
-                            className="py-3"
-                          >
-                            <strong>{totals.cells[columnId]?.value}</strong>
-                          </td>
-                        ))}
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
-              )
-            )}
-            {optionalNode?.bellowTable}
-          </div>
-        </Pullover>
-      </>
-    )
-  );
-};

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

@@ -1,50 +0,0 @@
-import type { FC } from 'react';
-import { useState } from 'react';
-import { faClipboardCheck } from '@inceptionbg/icons';
-import { useTranslation } from 'react-i18next';
-import { NotificationBadge } from '../../../Badge/NotificationBadge';
-import { IconButton } from '../../../Button/IconButton';
-import { Menu } from '../../../Menu/Menu';
-import { Tooltip } from '../../../Tooltip/Tooltip';
-import { useTableContext } from '../../contexts/TableContext';
-
-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

@@ -1,75 +0,0 @@
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
-import {
-  faArrowDownShortWide,
-  faArrowDownWideShort,
-  faArrowUpArrowDown,
-} from '@inceptionbg/icons';
-import { useTranslation } from 'react-i18next';
-import { IconButton } from '../../../Button/IconButton';
-import { Menu } from '../../../Menu/Menu';
-import { Tooltip } from '../../../Tooltip/Tooltip';
-import { useTableContext } from '../../contexts/TableContext';
-
-export const TableSort: FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { t } = useTranslation();
-  const { sortData } = useTableContext();
-  const { sort, setSort, sortOptions } = sortData ?? {};
-
-  useEffect(() => {
-    if (isOpen) {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        event.stopPropagation();
-        if (event.key === 'Escape') {
-          event.preventDefault();
-          event.stopPropagation();
-          setIsOpen(false);
-        }
-      };
-
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [isOpen]);
-
-  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),
-          className: 'table-sort-item',
-          keepOpen: true,
-          icon:
-            sort === valueDesc
-              ? faArrowDownWideShort
-              : sort === valueAsc
-                ? faArrowDownShortWide
-                : undefined,
-        };
-      })}
-    />
-  ) : null;
-};

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

@@ -1,58 +0,0 @@
-import type { FC } from 'react';
-import type { ILocalPopupControl } from '../../../../types/IPopup';
-import type { IReportTemplate, ITableTemplateData } from '../../../../types/ITable';
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Dialog } from '../../../Dialog/Dialog';
-import { Checkbox } from '../../../Inputs/Checkbox';
-import { TextInput } from '../../../Inputs/TextInput';
-
-interface Props {
-  control: ILocalPopupControl;
-  createItem: ITableTemplateData['createItem'];
-  title?: string;
-}
-
-export const CreateTemplateDialog: FC<Props> = ({ control, createItem, title }) => {
-  const { t } = useTranslation();
-
-  const [formData, setFormData] = useState<Partial<IReportTemplate>>({});
-  const nameInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (control.isOpen) {
-      nameInputRef.current?.focus();
-    }
-  }, [control.isOpen]);
-
-  return (
-    <Dialog
-      title={title ?? t('CreateTemplateLong')}
-      control={control}
-      onFormSubmit={() => createItem.onCreate(formData)}
-      footer={{
-        confirmButton: {
-          label: t('CreateTemplate'),
-          type: 'submit',
-        },
-      }}
-      classNameContent="pt-2"
-      onCloseCallback={() => setFormData({})}
-    >
-      <TextInput
-        ref={nameInputRef}
-        label={t('TemplateName')}
-        required
-        value={formData.name}
-        setValue={name => setFormData({ ...formData, name })}
-      />
-      {createItem.allowPublicCreate && (
-        <Checkbox
-          label={t('PublicTemplate')}
-          value={formData.isPublic}
-          setValue={isPublic => setFormData({ ...formData, isPublic })}
-        />
-      )}
-    </Dialog>
-  );
-};