@inceptionbg/iui 2.0.8 → 2.0.10

package/idea/Table2/Components/Edit/ItemActionsMenu.tsx

@@ -1,87 +0,0 @@
-import { FC, useState } from 'react';
-import { faEllipsisVertical } from '../../../../icons/light/faEllipsisVertical';
-import { IconButton } from '../../../Button/IconButton';
-import { Menu } from '../../../Menu/Menu';
-import { MenuItem } from '../../../Menu/MenuItem';
-import { useTranslation } from 'react-i18next';
-
-interface Props {
-  item: any;
-  setSelectedItem?: (item: any) => void;
-  setItemToDeleteUuid?: (uuid: string) => void;
-  actions?: {
-    label: string;
-    onClick: (uuid: string) => void;
-    hidden?: boolean;
-    disabled?: boolean;
-  }[];
-}
-
-export const ItemActionsMenu: FC<Props> = ({
-  item,
-  setSelectedItem,
-  setItemToDeleteUuid,
-  actions,
-}) => {
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  const { t } = useTranslation();
-
-  return (
-    <Menu
-      isOpen={menuOpen}
-      onClose={() => setMenuOpen(false)}
-      placementX="right"
-      renderButton={ref => (
-        <IconButton
-          ref={ref}
-          icon={faEllipsisVertical}
-          active={menuOpen}
-          onClick={e => {
-            e.stopPropagation();
-            setMenuOpen(!menuOpen);
-          }}
-        />
-      )}
-    >
-      {!!setSelectedItem && (
-        <MenuItem
-          onClick={e => {
-            e.stopPropagation();
-            setSelectedItem(item);
-            setMenuOpen(false);
-          }}
-        >
-          <p>{t('Edit')}</p>
-        </MenuItem>
-      )}
-      {actions?.map(
-        action =>
-          !action.hidden && (
-            <MenuItem
-              key={action.label}
-              disabled={!!action.disabled}
-              onClick={e => {
-                e.stopPropagation();
-                action.onClick(item.uuid);
-                setMenuOpen(false);
-              }}
-            >
-              <p>{action.label}</p>
-            </MenuItem>
-          )
-      )}
-      {!!setItemToDeleteUuid && (
-        <MenuItem
-          onClick={e => {
-            e.stopPropagation();
-            setItemToDeleteUuid(item.uuid);
-            setMenuOpen(false);
-          }}
-        >
-          <p>{t('Delete')}</p>
-        </MenuItem>
-      )}
-    </Menu>
-  );
-};

package/idea/Table2/Components/Edit/ItemEditOptionsButtons.tsx

@@ -1,32 +0,0 @@
-import { FC, RefObject } from 'react';
-import { faCheck } from '../../../../icons/light/faCheck';
-import { faXmark } from '../../../../icons/light/faXmark';
-import { IconButton } from '../../../Button/IconButton';
-
-interface Props {
-  setData: (item: any) => void;
-  clearItem: () => void;
-  inputFocusRef?: RefObject<any>;
-  defaultDataValue?: any;
-}
-export const ItemEditOptionsButtons: FC<Props> = ({
-  setData,
-  clearItem,
-  inputFocusRef,
-  defaultDataValue,
-}) => {
-  return (
-    <div className="flex center gap-1">
-      <IconButton icon={faCheck} className="p-1" />
-      <IconButton
-        icon={faXmark}
-        className="p-1"
-        onClick={() => {
-          setData(defaultDataValue || {});
-          inputFocusRef?.current?.focus();
-          clearItem();
-        }}
-      />
-    </div>
-  );
-};

package/idea/Table2/Components/Edit/TableEditRow.tsx

@@ -1,56 +0,0 @@
-import { FC, isValidElement, useEffect } from 'react';
-import { ITableDataItem, ITableEditRow } from '../../../../types/ITable';
-import { ItemEditOptionsButtons } from './ItemEditOptionsButtons';
-
-export const TableEditRow: FC<ITableEditRow> = ({
-  columns,
-  defaultDataValue,
-  data,
-  setData,
-  item,
-  clearItem,
-  inputFocusRef,
-}) => {
-  useEffect(() => {
-    inputFocusRef?.current?.focus();
-    setData(item ?? defaultDataValue ?? {});
-  }, [item, defaultDataValue, inputFocusRef, setData]);
-
-  let cells = {
-    ...data,
-    actions: {
-      value: (
-        <ItemEditOptionsButtons
-          setData={setData}
-          clearItem={clearItem}
-          defaultDataValue={defaultDataValue}
-          inputFocusRef={inputFocusRef}
-        />
-      ),
-    },
-  };
-
-  Object.keys(cells).forEach(key => {
-    isValidElement(cells[key].value) && (cells[key].className = 'p-1');
-  });
-
-  const rowData: ITableDataItem = { uuid: item?.uuid, cells };
-
-  return (
-    <tr data-id={rowData.uuid} className="edit-row">
-      {columns.map(
-        column =>
-          !column.hidden && (
-            <td
-              key={column.id}
-              align={column.align}
-              colSpan={rowData.cells[column.id]?.span}
-              className={rowData.cells[column.id]?.className}
-            >
-              {rowData.cells[column.id]?.value}
-            </td>
-          )
-      )}
-    </tr>
-  );
-};

package/idea/Table2/Components/FilterItem.tsx

@@ -1,20 +0,0 @@
-import { FC } from 'react';
-import { ITableFilterItem } from '../../../types/ITable';
-import { Button } from '../../Button/Button';
-import { useTranslation } from 'react-i18next';
-
-interface Props {
-  item: ITableFilterItem;
-}
-export const FilterItem: FC<Props> = ({ item }) => {
-  const { t } = useTranslation();
-  return (
-    <div key={item.label} className="table-filter-item">
-      {/* Added zero-width non-breaking space symbol (&#8288;)
-          because of losing focus from input field when first letter of the label is pressed. */}
-      <p className="label">&#8288;{item.label}</p>
-      <div className="field">{item.field}</div>
-      <Button label={t('Delete')} onClick={() => item.resetField()} size="m" />
-    </div>
-  );
-};

package/idea/Table2/Components/Header/TableHeader.tsx

@@ -1,35 +0,0 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { ITableColumn } from '../../../../types/ITable';
-import { TableHeaderRow } from './TableHeaderRow';
-
-interface Props {
-  columns: ITableColumn[];
-  customHeader?: ITableColumn[][];
-  headerWrap?: boolean;
-  printTable?: boolean;
-  sticky?: boolean;
-}
-export const HeaderTable: FC<Props> = ({
-  columns,
-  customHeader,
-  headerWrap,
-  printTable,
-  sticky,
-}) => (
-  <thead
-    className={clsx({
-      'no-wrap': !headerWrap,
-      'sticky-header': sticky,
-    })}
-  >
-    {customHeader ? (
-      customHeader?.map((row, i) => (
-        // No array manipulation will be performed, so using key 'i' is acceptable.
-        <TableHeaderRow key={i} row={row} printTable={printTable} />
-      ))
-    ) : (
-      <TableHeaderRow row={columns} printTable={printTable} />
-    )}
-  </thead>
-);

package/idea/Table2/Components/Header/TableHeaderRow.tsx

@@ -1,37 +0,0 @@
-import { FC } from 'react';
-import { ITableColumn } from '../../../../types/ITable';
-
-interface Props {
-  row: ITableColumn[];
-  printTable?: boolean;
-}
-
-export const TableHeaderRow: FC<Props> = ({ row, printTable }) => (
-  <tr>
-    {row.map(col => (
-      <th
-        key={col.id}
-        colSpan={col.colSpan}
-        rowSpan={col.rowSpan}
-        className={col.color}
-        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>
-          )}
-          {/* {!printTable && <div className="vertical-separator" />} */}
-        </div>
-      </th>
-    ))}
-  </tr>
-);

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

@@ -1,119 +0,0 @@
-import { FC, useEffect } 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 { ICustomPrintData } from '../../../../types/ITable';
-import { formatDate, getCurrentDateFormatted } from '../../../../utils/DateUtils';
-import { Button } from '../../../Button/Button';
-import { useTranslation } from 'react-i18next';
-import { rootDir } from '../../../../utils/RootDir';
-import { useHideZendesk } from '../../../../hooks/useZendesk';
-
-interface Props extends ICustomPrintData {
-  isOpen: boolean;
-  onClose: () => void;
-}
-export const CustomTablePrint: FC<Props> = ({
-  isOpen,
-  onClose,
-  label,
-  organization,
-  filters,
-  content,
-  saveXlsx,
-}) => {
-  const { t } = useTranslation();
-  useHideZendesk();
-
-  useEffect(() => {
-    rootDir?.classList.add('hidden');
-    return () => {
-      rootDir?.classList.remove('hidden');
-    };
-  }, []);
-
-  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>
-            )}
-            {content}
-          </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>
-        </div>,
-        document.body
-      )
-    : null;
-};

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>
-      ))}
-    </>
-  );
-};