@inceptionbg/iui 2.0.5 → 2.0.7

package/src/components/Table/Components/Print/TablePrint.tsx

@@ -0,0 +1,207 @@
+import { FC, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
+import { faPrint } from '../../../../assets/icons/solid/faPrint';
+import { faXmark } from '../../../../assets/icons/solid/faXmark';
+import { IPrintData, ITableColumn, ITableDataItem } from '../../../../types/ITable';
+import { formatDate, getCurrentDateFormatted } from '../../../../utils/DateUtils';
+import { Button } from '../../../Button/Button';
+import { FullScreenLoader } from '../../../Loader/Loader';
+import { useTranslation } from 'react-i18next';
+import { rootDir } from '../../../../utils/RootDir';
+import clsx from 'clsx';
+import { HeaderTable } from '../Header/TableHeader';
+import { useHideZendesk } from '../../../../hooks/useZendesk';
+
+interface Props extends IPrintData {
+  isOpen: boolean;
+  onClose: () => void;
+  columns: ITableColumn[];
+  excludeColumnIds?: string[];
+}
+export const TablePrint: FC<Props> = ({
+  isOpen,
+  onClose,
+  columns,
+  excludeColumnIds = [],
+  customHeader,
+  organization,
+  filters,
+  label,
+  optionalNode,
+  getPrintData,
+  formatPrintData,
+  saveXlsx,
+  totals,
+}) => {
+  const [data, setData] = useState<ITableDataItem[]>([]);
+  const [offset, setOffset] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { t } = useTranslation();
+  useHideZendesk();
+
+  const cols = columns.filter(
+    e => !['actions', 'select', ...excludeColumnIds].includes(e.id)
+  );
+
+  useEffect(() => {
+    rootDir?.classList.add('hidden');
+    return () => {
+      rootDir?.classList.remove('hidden');
+    };
+  }, []);
+
+  useEffect(() => {
+    setIsLoading(true);
+    getPrintData({ limit: 1000, offset })
+      .then(e => {
+        setData(prevState => {
+          const data = !!e.data.length ? formatPrintData(e.data) : [];
+          const newState = [...prevState, ...data];
+          e.totalRows && e.totalRows > newState.length
+            ? setOffset(offset + 1)
+            : setIsLoading(false);
+          return e.totalRows && e.totalRows > prevState.length ? newState : prevState;
+        });
+      })
+      .catch(() => setIsLoading(false));
+  }, [offset, formatPrintData, getPrintData]);
+
+  return isOpen
+    ? createPortal(
+        <div className="iui-print-dialog">
+          <div className="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}
+            {data && (
+              <table width="100%" className="print-table">
+                <HeaderTable columns={cols} customHeader={customHeader} headerWrap />
+                <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>
+          <div className="iui-print-actions no-print">
+            <Button
+              label={t('Cancel')}
+              icon={faXmark}
+              onClick={e => {
+                e.stopPropagation();
+                onClose();
+              }}
+              className="mr-3"
+            />
+            {!!saveXlsx && (
+              <Button
+                label={t('SaveXlsx')}
+                icon={faFileArrowDown}
+                onClick={() => saveXlsx()}
+                className="mr-3"
+              />
+            )}
+            <Button label={t('Print')} icon={faPrint} onClick={() => window.print()} />
+          </div>
+          <FullScreenLoader isLoading={isLoading} />
+        </div>,
+        document.body
+      )
+    : null;
+};

package/src/components/Table/Components/SetSortList.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ITableSort } from '../../../types/ITable';
+import { faArrowDownWideShort } from '../../../assets/icons/light/faArrowDownWideShort';
+import { faArrowDownShortWide } from '../../../assets/icons/light/faArrowDownShortWide';
+import { MenuItem } from '../../Menu/MenuItem';
+
+interface Props {
+  sort: string;
+  setSort: (sort: string) => void;
+  sortOptions: ITableSort[];
+}
+export const SetSortList: FC<Props> = ({ sortOptions, sort, setSort }) => (
+  <>
+    {sortOptions.map(e => (
+      <MenuItem
+        key={e.label}
+        label={e.label}
+        className="menu-item-m"
+        onClick={() => setSort(sort === e.desc ? e.asc : e.desc)}
+        icon={sort === e.desc ? faArrowDownWideShort : faArrowDownShortWide}
+      />
+      // <div className="flex center justify-between full-width">
+      //   {/* <p className="mr-5 mb-0">{e.label}</p> */}
+      //   {sort === e.desc && <FontAwesomeIcon icon={faArrowDownWideShort} />}
+      //   {sort === e.asc && <FontAwesomeIcon icon={faArrowDownShortWide} />}
+      // </div>
+    ))}
+  </>
+);

package/src/components/Table/Components/SetTableFilter.tsx

@@ -0,0 +1,90 @@
+import { FC, useMemo, useState } from 'react';
+import { faFilterCircleXmark } from '../../../assets/icons/regular/faFilterCircleXmark';
+import { faMagnifyingGlass } from '../../../assets/icons/solid/faMagnifyingGlass';
+import { faXmark } from '../../../assets/icons/solid/faXmark';
+import { ITableFilterData, ITableFilterItem } from '../../../types/ITable';
+import { deleteEmptyPropsIncludingArray, deleteProps } from '../../../utils/ObjectUtils';
+import { Dialog } from '../../Dialog/Dialog';
+import { FilterItem } from './FilterItem';
+import { useTranslation } from 'react-i18next';
+import { SearchInput } from '../../Inputs/SearchInput';
+
+interface Props extends ITableFilterData {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const SetTableFilter: FC<Props> = ({
+  columns,
+  filters,
+  additionalFilters,
+  excludeFromSearch,
+  searchData,
+  setSearchData,
+  onSubmit,
+  resetData,
+  isOpen,
+  onClose,
+}) => {
+  const [search, setSearch] = useState('');
+
+  const { t } = useTranslation();
+
+  const visibleFilters = useMemo(
+    () =>
+      columns.reduce(
+        (arr: ITableFilterItem[], col) =>
+          !!filters[col] ? arr.concat(filters[col]) : arr,
+        []
+      ),
+    [columns, filters]
+  );
+
+  const filteredFilters = useMemo(
+    () =>
+      visibleFilters.filter(e => e?.label.toLowerCase().includes(search.toLowerCase())),
+    [visibleFilters, search]
+  );
+
+  return (
+    <Dialog
+      className="iui-table-filter"
+      titleEl={
+        <div className="filters-search">
+          <h1>{t('Filter')}</h1>
+          <SearchInput onSearch={setSearch} className="search-input" />
+        </div>
+      }
+      isOpen={isOpen}
+      onClose={() => {
+        setSearch('');
+        onClose();
+      }}
+      cancelButton={{ icon: faXmark }}
+      additionalButton={{
+        label: t('ResetFilter'),
+        icon: faFilterCircleXmark,
+        onClick: () => {
+          setSearchData(resetData || {});
+          onSubmit(resetData || {});
+        },
+        disabled: resetData
+          ? JSON.stringify(searchData) === JSON.stringify(resetData)
+          : Object.keys(searchData).length === 0,
+      }}
+      confirmButton={{
+        label: t('Search'),
+        icon: faMagnifyingGlass,
+        onFormSubmit: () => {
+          const data = deleteEmptyPropsIncludingArray(searchData);
+          onSubmit(excludeFromSearch ? deleteProps(data, excludeFromSearch) : data);
+        },
+      }}
+    >
+      {filteredFilters?.map(item => (
+        <FilterItem key={item.label} item={item} />
+      ))}
+      {additionalFilters && <div className="pb-1">{additionalFilters}</div>}
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,135 @@
+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 { IServerSidePagination, tableStandardLimit } from '../../../types/ITable';
+import { Select } from '../../Inputs/Selects/Select';
+import { ISelectData } from '../../../types/ISelect';
+import { TextInput } from '../../Inputs/TextInput';
+
+interface Props {
+  pagination: IServerSidePagination;
+  noTotalRows?: boolean;
+  dataLength: number;
+  footerAction?: {
+    icon?: IconDefinition;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+  };
+  customLimit?: number[];
+}
+
+export const TableFooter: FC<Props> = ({
+  pagination: { limit, offset, setLimit, setOffset, totalRows },
+  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')}
+          // 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={60}
+            onChange={handleChangeLimit}
+            options={(customLimit || tableStandardLimit).map(e => ({
+              label: `${e}`,
+              value: e ?? t('allResults'),
+            }))}
+            isClearable={false}
+          />
+          {/* {(customLimit || tableStandardLimit).map(e => (
+              <option key={e} value={e}>
+                {e ? e : t('allResults')}
+              </option>
+            ))}
+          </Select> */}
+          {!noTotalRows && (
+            <p>
+              {limit
+                ? `${offset * limit + 1}-${
+                    offset * limit + limit <= totalRows
+                      ? offset * limit + limit
+                      : totalRows
+                  } ${t('of')} ${totalRows}`
+                : `${t('allResults')} ${t('of')} ${totalRows} `}
+            </p>
+          )}
+        </div>
+        <div className="separator" />
+        {/* <p>|</p> */}
+        <div className="flex gap-1 align-center">
+          <p>{t('page')}:</p>
+          <IconButton
+            disabled={offset < 1}
+            icon={faAngleLeft}
+            onClick={() => setOffset(offset - 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 /* && serverSidePagination */
+                ? limit > dataLength
+                : offset + 1 >= maxOffset
+            }
+            icon={faAngleRight}
+            onClick={() => setOffset(offset + 1)}
+            size="s"
+          />
+          {!noTotalRows && <p>{`${t('of')} ${maxOffset}`}</p>}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Table/Components/TableOptions.tsx

@@ -0,0 +1,226 @@
+import { FC, ReactNode, useState } from 'react';
+import { faPrint } from '../../../assets/icons/solid/faPrint';
+import {
+  ITableSortData,
+  ITableColumn,
+  ITableFilterData,
+  IPrintData,
+  ITableColumnsData,
+  ITable,
+  ICustomPrintData,
+} from '../../../types/ITable';
+import { getActiveFilterNumber, setTemplateData } from '../../../utils/TableUtils';
+import { NotificationBadge } from '../../Badge/NotificationBadge';
+import { TablePrint } from './Print/TablePrint';
+import { SetColumnsList } from './Columns/SetColumnsList';
+import { SetSortList } from './SetSortList';
+import { SetTableFilter } from './SetTableFilter';
+import { useTranslation } from 'react-i18next';
+// import { TemplateList } from './Templates/TemplateList';
+// import { TemplateCreate } from './Templates/TemplateCreate';
+// import { TemplateCreateDefault } from './Templates/TemplateCreateDefault';
+import { MenuItem } from '../../Menu/MenuItem';
+import { maxChar } from '../../../utils/StringUtils';
+import { deletePropsThatEndsWith } from '../../../utils/ObjectUtils';
+import { CustomTablePrint } from './Print/CustomTablePrint';
+import { IconButton } from '../../Button/IconButton';
+import { Tooltip } from '../../Tooltip/Tooltip';
+import { Menu } from '../../Menu/Menu';
+import { faFilter } from '../../../assets/icons/light/faFilter';
+import { faLineColumns } from '../../../assets/icons/light/faLineColumns';
+import { faArrowUpArrowDown } from '../../../assets/icons/light/faArrowUpArrowDown';
+
+interface Props {
+  columns: ITableColumn[];
+  columnsData?: ITableColumnsData;
+  filterData?: ITableFilterData;
+  sortData?: ITableSortData;
+  printData?: IPrintData;
+  customPrintData?: ICustomPrintData;
+  templates?: ITable['templates'];
+  additionsalOptions?: ReactNode;
+}
+export const TableOptions: FC<Props> = ({
+  columns,
+  columnsData,
+  filterData,
+  sortData,
+  printData,
+  customPrintData,
+  templates,
+  additionsalOptions,
+}) => {
+  const [selectedTemplateName, setSelectedTemplateName] = useState('');
+  const [opened, setOpened] = useState<
+    'filter' | 'sort' | 'columns' | 'print' | 'templates' | ''
+  >('');
+
+  const { t } = useTranslation();
+
+  const onClose = () => setOpened('');
+
+  return (
+    <div className="table-options gap-2">
+      <div className="flex align-center gap-3">
+        {filterData && (
+          <>
+            <NotificationBadge number={getActiveFilterNumber(filterData.search)} size="s">
+              <IconButton
+                icon={faFilter}
+                tooltip={t('Filter')}
+                active={opened === 'filter'}
+                onClick={() => setOpened('filter')}
+                size="s"
+                variant="outlined"
+              />
+            </NotificationBadge>
+            <SetTableFilter
+              {...filterData}
+              onSubmit={search => {
+                filterData.onSubmit(search);
+                setSelectedTemplateName('');
+                templates?.setTemplateName?.('');
+              }}
+              isOpen={opened === 'filter'}
+              onClose={onClose}
+            />
+          </>
+        )}
+        {columnsData && (
+          <>
+            <IconButton
+              icon={faLineColumns}
+              tooltip={t('Columns')}
+              active={opened === 'columns'}
+              onClick={() => setOpened('columns')}
+              size="s"
+              variant="outlined"
+            />
+            {opened === 'columns' && (
+              <SetColumnsList
+                columns={columnsData.columns}
+                setColumns={data => {
+                  columnsData.setColumns(data);
+                  setSelectedTemplateName('');
+                  templates?.setTemplateName?.('');
+                }}
+                isOpen={true}
+                onClose={onClose}
+                withSearch={columnsData.withSearch}
+              />
+            )}
+          </>
+        )}
+        {sortData && (
+          <Menu
+            isOpen={opened === 'sort'}
+            onClose={onClose}
+            renderButton={ref => (
+              <Tooltip label={t('Sort')} ref={ref}>
+                <IconButton
+                  icon={faArrowUpArrowDown}
+                  active={opened === 'sort'}
+                  onClick={() => setOpened('sort')}
+                  size="s"
+                  variant="outlined"
+                />
+              </Tooltip>
+            )}
+            size={sortData.menuSize}
+          >
+            <SetSortList
+              {...sortData}
+              setSort={data => {
+                sortData.setSort(data);
+                setSelectedTemplateName('');
+                templates?.setTemplateName?.('');
+              }}
+            />
+          </Menu>
+        )}
+        {/* {templates && (
+          <Menu
+            renderButton={ref => (
+              <Tooltip
+                label={
+                  selectedTemplateName
+                    ? `${t('Templates')} (${maxChar(selectedTemplateName, 30)})`
+                    : t('Templates')
+                }
+                ref={ref}
+              >
+                <IconButton
+                  icon={faPenField}
+                  active={opened === 'templates'}
+                  onClick={() => setOpened('templates')}
+                  size="s"
+                  variant="outlined"
+                />
+              </Tooltip>
+            )}
+            isOpen={opened === 'templates'}
+            onClose={onClose}
+          >
+            <TemplateList
+              identifier={templates.identifier}
+              onSelect={template => {
+                setTemplateData({
+                  template,
+                  columnsData,
+                  setFilters: e => {
+                    filterData?.setSearchData(e);
+                    filterData?.onSubmit(deletePropsThatEndsWith(e, 'Obj'));
+                  },
+                  setSort: sortData?.setSort,
+                });
+                setSelectedTemplateName(template.name);
+                templates.setTemplateName?.(template.name);
+                onClose();
+              }}
+            />
+            <MenuItem
+              label={t('RemoveFiltersAndLook')}
+              onClick={() => {
+                templates.onClearFilters();
+                setSelectedTemplateName('');
+                templates.setTemplateName?.('');
+                onClose();
+              }}
+            />
+            <TemplateCreate
+              identifier={templates.identifier}
+              data={templates.data}
+              onSubmitCallback={onClose}
+              allowPublicCreate={templates.allowPublicCreate}
+            />
+            <TemplateCreateDefault
+              identifier={templates.identifier}
+              data={templates.data}
+              onClose={onClose}
+            />
+          </Menu>
+        )} */}
+        {(printData ?? customPrintData) && (
+          <>
+            <IconButton
+              icon={faPrint}
+              tooltip={t('PrintExport')}
+              onClick={() => setOpened('print')}
+              size="s"
+              variant="solid"
+            />
+            {opened === 'print' &&
+              (printData ? (
+                <TablePrint {...printData} isOpen onClose={onClose} columns={columns} />
+              ) : (
+                customPrintData && (
+                  <CustomTablePrint {...customPrintData} isOpen onClose={onClose} />
+                )
+              ))}
+          </>
+        )}
+        {additionsalOptions}
+      </div>
+    </div>
+  );
+};