@inceptionbg/iui 2.0.4 → 2.0.6

package/src/components/Sidebar/SidebarItem.tsx

@@ -0,0 +1,84 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC } from 'react';
+import { Link, useLocation } from 'react-router';
+import { ISidebarItem } from './types/ISidebar';
+import { AddButton } from './AddButton';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
+import clsx from 'clsx';
+import { faChevronDown } from '../../assets/icons';
+import { Collapse } from '../Helper/Collapse';
+import { Tooltip } from '../Tooltip/Tooltip';
+
+export const SidebarItem: FC<ISidebarItem> = ({ label, icon, to, badge, menu }) => {
+  const { pathname } = useLocation();
+
+  return (
+    <>
+      <ConditionalWrapper
+        condition={!!to}
+        wrapper={children => <Link to={to!}>{children}</Link>}
+      >
+        <div
+          onClick={
+            menu
+              ? () => menu.setOpenedMenu(label !== menu.openedMenu ? label : '')
+              : undefined
+          }
+          className={clsx('iui-sidebar-item item-only clickable', {
+            active:
+              to === pathname ||
+              (menu?.content.find(e => e.to === pathname) && label !== menu?.openedMenu),
+          })}
+        >
+          <FontAwesomeIcon icon={icon!} className="sidebar-item-icon" />
+          <p className="sidebar-item-label">{label}</p>
+          {!!badge && <div className="sidebar-badge">{badge > 99 ? '99+' : badge}</div>}
+          {menu && (
+            <FontAwesomeIcon
+              icon={faChevronDown}
+              className={clsx('sidebar-expand-icon', {
+                rotate: label === menu.openedMenu,
+              })}
+            />
+          )}
+        </div>
+      </ConditionalWrapper>
+
+      {menu && (
+        <Collapse isOpen={menu.openedMenu === label}>
+          {menu.content.map(
+            ({ hidden, label, to, primary, badge, addUrl, tooltip }) =>
+              !hidden && (
+                <ConditionalWrapper
+                  key={label}
+                  condition={!!to}
+                  wrapper={children => <Link to={to!}>{children}</Link>}
+                >
+                  <Tooltip
+                    label={tooltip!}
+                    disabled={!tooltip}
+                    position="right"
+                    singleLine
+                  >
+                    <div
+                      className={clsx('iui-sidebar-item sub-item', {
+                        clickable: !!to,
+                        active: to === pathname,
+                        primary,
+                      })}
+                    >
+                      <p className="sidebar-item-label">{label}</p>
+                      {!!badge && (
+                        <div className="sidebar-badge">{badge > 99 ? '99+' : badge}</div>
+                      )}
+                      {!!addUrl && <AddButton link={addUrl} />}
+                    </div>
+                  </Tooltip>
+                </ConditionalWrapper>
+              )
+          )}
+        </Collapse>
+      )}
+    </>
+  );
+};

package/src/components/Sidebar/types/ISidebar.ts

@@ -0,0 +1,28 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+export interface ISidebarItem {
+  label: string;
+  icon?: IconDefinition;
+  to?: string;
+  content?: ISidebarSubItem[];
+  menu?: {
+    content: ISidebarSubItem[];
+    openedMenu: string;
+    setOpenedMenu: (label: string) => void;
+  };
+  hidden?: boolean;
+  badge?: number;
+  addUrl?: string;
+}
+
+export interface ISidebarSubItem {
+  label: string;
+  to?: string;
+  content?: ISidebarItem[];
+  hidden?: boolean;
+  tooltip?: string;
+  badge?: number;
+  addUrl?: string;
+  primary?: boolean;
+  collapsed?: boolean;
+}

package/src/components/Table/Components/Columns/ColumnsList.tsx

@@ -0,0 +1,61 @@
+import { FC, useEffect, useState } from 'react';
+import { ITableColumn } from '../../../../types/ITable';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGripDotsVertical } from '../../../../assets/icons/solid/faGripDotsVertical';
+
+interface Props {
+  id: 'hidden' | 'visible';
+  items: ITableColumn[];
+  search: string;
+}
+
+export const ColumnsList: FC<Props> = ({ id, items, search }) => {
+  const [filteredItems, setFilteredItems] = useState<ITableColumn[]>([]);
+
+  useEffect(() => {
+    search.length &&
+      setFilteredItems(
+        items.filter(e =>
+          (typeof e.label === 'string' ? e.label : e.labelForFilter ?? '')
+            .toLocaleLowerCase()
+            .includes(search.toLocaleLowerCase())
+        )
+      );
+  }, [search, items]);
+
+  return (
+    <Droppable droppableId={id}>
+      {({ droppableProps, innerRef, placeholder }) => (
+        <div {...droppableProps} ref={innerRef} className="list-box">
+          {(search.length ? filteredItems : items).map(c => (
+            <Draggable
+              key={c.id}
+              draggableId={c.id}
+              index={items.indexOf(c)}
+              isDragDisabled
+            >
+              {({ innerRef, draggableProps, dragHandleProps }) => (
+                <div
+                  className="item"
+                  ref={innerRef}
+                  {...draggableProps}
+                  {...dragHandleProps}
+                  style={{
+                    ...draggableProps.style,
+                    top: 'unset',
+                    left: 'unset',
+                  }}
+                >
+                  {c.label}
+                  <FontAwesomeIcon icon={faGripDotsVertical} />
+                </div>
+              )}
+            </Draggable>
+          ))}
+          {placeholder}
+        </div>
+      )}
+    </Droppable>
+  );
+};

package/src/components/Table/Components/Columns/SetColumnsList.tsx

@@ -0,0 +1,113 @@
+import { FC, useEffect, useState } from 'react';
+import { DragDropContext, OnDragEndResponder } from 'react-beautiful-dnd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ITableColumn } from '../../../../types/ITable';
+import { Dialog } from '../../../Dialog/Dialog';
+import { faArrowRightArrowLeft } from '../../../../assets/icons/regular/faArrowRightArrowLeft';
+import { useTranslation } from 'react-i18next';
+import { ColumnsList } from './ColumnsList';
+import { SearchInput } from '../../../Inputs/SearchInput';
+
+interface Props {
+  columns: ITableColumn[];
+  setColumns: (data: ITableColumn[]) => void;
+  isOpen: boolean;
+  onClose: () => void;
+  withSearch?: boolean;
+}
+export const SetColumnsList: FC<Props> = ({
+  columns,
+  setColumns,
+  isOpen,
+  onClose,
+  withSearch,
+}) => {
+  const [hidden, setHidden] = useState<ITableColumn[]>([]);
+  const [visible, setVisible] = useState<ITableColumn[]>([]);
+  const [searchHidden, setSearchHidden] = useState('');
+  const [searchVisible, setSearchVisible] = useState('');
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (isOpen) {
+      let hiddenCols: ITableColumn[] = [];
+      let visibleCols: ITableColumn[] = [];
+      columns.forEach(
+        col =>
+          col.id !== 'actions' &&
+          !col.unavailable &&
+          (!!col.hidden ? hiddenCols.push(col) : visibleCols.push(col))
+      );
+      setHidden(hiddenCols);
+      setVisible(visibleCols);
+    }
+  }, [isOpen, columns]);
+
+  const onDragEnd: OnDragEndResponder = ({ source, destination }) => {
+    if (!destination) return;
+    const hiddenCols = [...hidden];
+    const visibleCols = [...visible];
+    const destinationIsHidden = destination.droppableId === 'hidden';
+
+    const sourceList = source.droppableId === 'hidden' ? hiddenCols : visibleCols;
+    const destinationList = destinationIsHidden ? hiddenCols : visibleCols;
+
+    const [removed] = sourceList.splice(source.index, 1);
+    destinationList.splice(destination.index, 0, removed);
+    if (source.droppableId !== destination.droppableId) {
+      destinationList[destination.index].hidden = destinationIsHidden;
+      setHidden(hiddenCols);
+      setVisible(visibleCols);
+    } else {
+      destinationIsHidden ? setHidden(hiddenCols) : setVisible(visibleCols);
+    }
+  };
+
+  const onSubmit = () => {
+    const newColumns = [...visible, ...hidden];
+    const lastCol = columns[columns.length - 1];
+    if (lastCol.id === 'actions') {
+      newColumns.push(lastCol);
+    }
+    setColumns(newColumns);
+    onClose();
+  };
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Dialog
+        isOpen={isOpen}
+        onClose={onClose}
+        confirmButton={{
+          label: t('Confirm'),
+          onClick: onSubmit,
+        }}
+        cancelButton={{ label: t('Cancel') }}
+        noBackgroundClick
+      >
+        <div className="dual-list-container">
+          <p className="pb-3">{t('DragDropListsInfo')}</p>
+          <div className="dual-list-content">
+            <p className="bold ml-2">{t('HiddenColumns')}:</p>
+            <div />
+            <p className="bold ml-2">{t('SelectedColumns')}:</p>
+
+            {withSearch && (
+              <>
+                <SearchInput onSearch={setSearchHidden} />
+                <div />
+                <SearchInput onSearch={setSearchVisible} />
+              </>
+            )}
+            <ColumnsList id="hidden" items={hidden} search={searchHidden} />
+            <div className="exchange-icon">
+              <FontAwesomeIcon icon={faArrowRightArrowLeft} />
+            </div>
+            <ColumnsList id="visible" items={visible} search={searchVisible} />
+          </div>
+        </div>
+      </Dialog>
+    </DragDropContext>
+  );
+};

package/src/components/Table/Components/Edit/ItemActionsMenu.tsx

@@ -0,0 +1,84 @@
+import { FC, useState } from 'react';
+import { faEllipsisVertical } from '../../../../assets/icons';
+import { IconButton } from '../../../Button/IconButton';
+import { MenuItem } from '../../../Menu/MenuItem';
+import { useTranslation } from 'react-i18next';
+import { Menu } from '../../../Menu/Menu';
+
+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)}
+      placement="bottom-right"
+      renderButton={ref => (
+        <IconButton
+          ref={ref}
+          icon={faEllipsisVertical}
+          active={menuOpen}
+          onClick={e => {
+            e.stopPropagation();
+            setMenuOpen(!menuOpen);
+          }}
+        />
+      )}
+    >
+      {!!setSelectedItem && (
+        <MenuItem
+          label={t('Edit')}
+          onClick={e => {
+            e.stopPropagation();
+            setSelectedItem(item);
+            setMenuOpen(false);
+          }}
+        />
+      )}
+      {actions?.map(
+        action =>
+          !action.hidden && (
+            <MenuItem
+              key={action.label}
+              label={action.label}
+              disabled={!!action.disabled}
+              onClick={e => {
+                e.stopPropagation();
+                action.onClick(item.uuid);
+                setMenuOpen(false);
+              }}
+            />
+          )
+      )}
+      {!!setItemToDeleteUuid && (
+        <MenuItem
+          label={t('Delete')}
+          onClick={e => {
+            e.stopPropagation();
+            setItemToDeleteUuid(item.uuid);
+            setMenuOpen(false);
+          }}
+        />
+      )}
+    </Menu>
+  );
+};

package/src/components/Table/Components/Edit/ItemEditOptionsButtons.tsx

@@ -0,0 +1,31 @@
+import { FC, RefObject } from 'react';
+import { faCheck, faXmark } from '../../../../assets/icons';
+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/src/components/Table/Components/Edit/TableEditRow.tsx

@@ -0,0 +1,56 @@
+import { FC, 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/src/components/Table/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/src/components/Table/Components/Header/TableHeader.tsx

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

package/src/components/Table/Components/Header/TableHeaderRow.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { ITableColumn } from '../../../../types/ITable';
+
+interface Props {
+  row: ITableColumn[];
+}
+
+export const TableHeaderRow: FC<Props> = ({ row }) => (
+  <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 p-3 text-${col.align || 'left'}`}>{col.label}</p>
+          ) : (
+            <div className={`full-width px-3 text-${col.align || 'left'}`}>
+              {col.label}
+            </div>
+          )}
+        </div>
+      </th>
+    ))}
+  </tr>
+);

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

@@ -0,0 +1,114 @@
+import { FC, useEffect } 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 { 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>
+            <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>
+            )}
+            {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} onClick={() => window.print()} />
+          </div>
+        </div>,
+        document.body
+      )
+    : null;
+};