@inceptionbg/iui 2.0.7 → 2.0.10

package/idea/Table2/Components/Print/TablePrint.tsx

@@ -1,208 +0,0 @@
-import { FC, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { faFileArrowDown } from '../../../../icons/regular/faFileArrowDown';
-import { faPrint } from '../../../../icons/solid/faPrint';
-import { faXmark } from '../../../../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[];
-}
-export const TablePrint: FC<Props> = ({
-  isOpen,
-  onClose,
-  columns,
-  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 => e.id !== 'actions');
-
-  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>
-            <h4 className="my-3 text-center">{label}</h4>
-            {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}
-              solid
-              onClick={() => window.print()}
-            />
-          </div>
-          <FullScreenLoader isLoading={isLoading} />
-        </div>,
-        document.body
-      )
-    : null;
-};

package/idea/Table2/Components/SetSortList.tsx

@@ -1,33 +0,0 @@
-import { FC } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ITableSort } from '../../../types/ITable';
-import { faArrowDownWideShort } from '../../../icons/light/faArrowDownWideShort';
-import { faArrowDownShortWide } from '../../../icons/light/faArrowDownShortWide';
-import { MenuItem } from '../../Menu/MenuItem';
-import { useTranslation } from 'react-i18next';
-
-interface Props {
-  sort: string;
-  setSort: (sort: string) => void;
-  sortOptions: ITableSort[];
-}
-export const SetSortList: FC<Props> = ({ sortOptions, sort, setSort }) => {
-  const { t } = useTranslation();
-  return (
-    <>
-      {sortOptions.map(e => (
-        <MenuItem
-          key={e.label}
-          className="menu-item-m"
-          onClick={() => setSort(sort === e.desc ? e.asc : e.desc)}
-        >
-          <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>
-        </MenuItem>
-      ))}
-    </>
-  );
-};

package/idea/Table2/Components/SetTableFilter.tsx

@@ -1,90 +0,0 @@
-import { FC, useMemo, useState } from 'react';
-import { faFilterCircleXmark } from '../../../icons/regular/faFilterCircleXmark';
-import { faMagnifyingGlass } from '../../../icons/solid/faMagnifyingGlass';
-import { faXmark } from '../../../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/idea/Table2/Components/TableFooter.tsx

@@ -1,107 +0,0 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { ChangeEvent, FC, MouseEventHandler } from 'react';
-import { faAngleLeft } from '../../../icons/solid/faAngleLeft';
-import { faAngleRight } from '../../../icons/solid/faAngleRight';
-import { faRotateRight } from '../../../icons/solid/faRotateRight';
-import { IconButton } from '../../Button/IconButton';
-import { useTranslation } from 'react-i18next';
-import { IServerSidePagination } from '../../../types/ITable';
-
-interface Props {
-  pagination: IServerSidePagination;
-  noTotalRows?: boolean;
-  footerAction?: {
-    icon?: IconDefinition;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-  };
-  customLimit?: number[];
-}
-
-export const TableFooter: FC<Props> = ({
-  pagination: { limit, offset, setLimit, setOffset, totalRows },
-  noTotalRows,
-  footerAction,
-  customLimit,
-}) => {
-  const { t } = useTranslation();
-
-  const handleChangeLimit = (event: ChangeEvent<HTMLSelectElement>) => {
-    const newLimit = Math.floor(+event.target.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}
-        />
-      )}
-      <div className="pagination">
-        <div className="flex align-center">
-          <p>{t('rowsPerPage')}</p>
-
-          <select value={limit} onChange={handleChangeLimit}>
-            {(customLimit || [5, 10, 25, 50, 100]).map(e => (
-              <option key={e} value={e}>
-                {e ? e : t('allResults')}
-              </option>
-            ))}
-          </select>
-          {!noTotalRows && (
-            <p className="mr-4">
-              {limit
-                ? `${offset * limit + 1}-${
-                    offset * limit + limit <= totalRows
-                      ? offset * limit + limit
-                      : totalRows
-                  } ${t('of')} ${totalRows}`
-                : `${t('allResults')} ${t('of')} ${totalRows} `}
-            </p>
-          )}
-        </div>
-        <div className="flex gap-1 align-center">
-          {noTotalRows ? (
-            <p>{`${t('page')}: ${offset + 1}`}</p>
-          ) : (
-            <p>{`${t('page')}: ${offset + 1}/${maxOffset}`}</p>
-          )}
-          <IconButton
-            disabled={offset < 1}
-            icon={faAngleLeft}
-            onClick={() => setOffset(offset - 1)}
-            size="s"
-          />
-          {!noTotalRows && (
-            <input
-              className="offset-input"
-              placeholder={`1-${maxOffset}`}
-              onKeyUp={e => {
-                if (e.key === 'Enter') {
-                  const value = +(e.target as HTMLInputElement).value;
-                  if (typeof value === 'number' && value >= 0 && value <= maxOffset)
-                    setOffset(value - 1);
-                  (e.target as HTMLInputElement).value = '';
-                }
-              }}
-            />
-          )}
-          <IconButton
-            disabled={
-              noTotalRows /* && serverSidePagination */
-                ? limit > totalRows
-                : offset + 1 >= maxOffset
-            }
-            icon={faAngleRight}
-            onClick={() => setOffset(offset + 1)}
-            size="s"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

package/idea/Table2/Components/TableOptions.tsx

@@ -1,211 +0,0 @@
-import { FC, ReactNode, useState } from 'react';
-import { faPrint } from '../../../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 { Button } from '../../Button/Button';
-import { Menu } from '../../Menu/Menu';
-import { TablePrint } from './Print/TablePrint';
-import { SetColumnsList } from './Columns/SetColumnsList';
-import { SetSortList } from './SetSortList';
-import { SetTableFilter } from './SetTableFilter';
-import { faCaretDown } from '../../../icons/solid/faCaretDown';
-import { useTranslation } from 'react-i18next';
-import { TemplateList } from './Templates/TemplateList';
-import { MenuItem } from '../../Menu/MenuItem';
-import { TemplateCreate } from './Templates/TemplateCreate';
-import { maxChar } from '../../../utils/StringUtils';
-import { TemplateCreateDefault } from './Templates/TemplateCreateDefault';
-import { deletePropsThatEndsWith } from '../../../utils/ObjectUtils';
-import { CustomTablePrint } from './Print/CustomTablePrint';
-
-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-2">
-        {filterData && (
-          <>
-            <NotificationBadge number={getActiveFilterNumber(filterData.search)} small>
-              <Button
-                label={t('Filter')}
-                active={opened === 'filter'}
-                onClick={() => setOpened('filter')}
-                className="table-options-btn"
-                size="s"
-              />
-            </NotificationBadge>
-            <SetTableFilter
-              {...filterData}
-              onSubmit={search => {
-                filterData.onSubmit(search);
-                setSelectedTemplateName('');
-              }}
-              isOpen={opened === 'filter'}
-              onClose={onClose}
-            />
-          </>
-        )}
-        {columnsData && (
-          <>
-            <Button
-              label={t('Columns')}
-              active={opened === 'columns'}
-              onClick={() => setOpened('columns')}
-              className="table-options-btn"
-              size="s"
-            />
-            {opened === 'columns' && (
-              <SetColumnsList
-                columns={columnsData.columns}
-                setColumns={data => {
-                  columnsData.setColumns(data);
-                  setSelectedTemplateName('');
-                }}
-                isOpen={true}
-                onClose={onClose}
-                withSearch={columnsData.withSearch}
-              />
-            )}
-          </>
-        )}
-        {sortData && (
-          <Menu
-            renderButton={ref => (
-              <Button
-                label={t('Sort')}
-                iconEnd={faCaretDown}
-                active={opened === 'sort'}
-                onClick={() => setOpened('sort')}
-                ref={ref}
-                className="table-options-btn"
-                size="s"
-              />
-            )}
-            isOpen={opened === 'sort'}
-            onClose={onClose}
-            size={sortData.menuSize}
-          >
-            <SetSortList
-              {...sortData}
-              setSort={data => {
-                sortData.setSort(data);
-                setSelectedTemplateName('');
-              }}
-            />
-          </Menu>
-        )}
-        {templates && (
-          <Menu
-            renderButton={ref => (
-              <Button
-                label={
-                  selectedTemplateName
-                    ? `${t('Templates')} (${maxChar(selectedTemplateName, 30)})`
-                    : t('Templates')
-                }
-                iconEnd={faCaretDown}
-                active={opened === 'templates'}
-                onClick={() => setOpened('templates')}
-                ref={ref}
-                className="table-options-btn"
-                size="s"
-              />
-            )}
-            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);
-                onClose();
-              }}
-            />
-            <MenuItem
-              label={t('RemoveFiltersAndLook')}
-              onClick={() => {
-                templates.onClearFilters();
-                setSelectedTemplateName('');
-                onClose();
-              }}
-            />
-            <TemplateCreate
-              identifier={templates.identifier}
-              data={templates.data}
-              onSubmitCallback={onClose}
-            />
-            <TemplateCreateDefault
-              identifier={templates.identifier}
-              data={templates.data}
-              onClose={onClose}
-            />
-          </Menu>
-        )}
-        {additionsalOptions}
-      </div>
-      {(printData ?? customPrintData) && (
-        <>
-          <Button
-            label={t('PrintExport')}
-            icon={faPrint}
-            onClick={() => setOpened('print')}
-            size="s"
-          />
-          {opened === 'print' &&
-            (printData ? (
-              <TablePrint {...printData} isOpen onClose={onClose} columns={columns} />
-            ) : (
-              customPrintData && (
-                <CustomTablePrint {...customPrintData} isOpen onClose={onClose} />
-              )
-            ))}
-        </>
-      )}
-    </div>
-  );
-};