@inceptionbg/iui 2.0.5 → 2.0.7

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,208 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,90 @@
+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>
+  );
+};