@inceptionbg/iui 2.0.12 → 2.0.14

package/src/components/List/ListItem.tsx

@@ -1,24 +1,69 @@
 import clsx from 'clsx';
-import type { FC } from 'react';
+import { useMemo, type FC } from 'react';
+import { IconButton } from '../Button/IconButton';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IButtonColor } from '../Button/Button';
+
+export interface IListItemAction {
+  icon: IconDefinition;
+  onClick: () => void;
+  disabled?: boolean;
+  color?: IButtonColor;
+  hidden?: boolean;
+}
 
 export interface IListItem {
   id?: string;
   label: string;
   desc?: string;
+  actions?: IListItemAction[];
   onClick?: () => void;
   active?: boolean;
   disabled?: boolean;
 }
 
-export const ListItem: FC<IListItem> = ({ label, desc, onClick, active, disabled }) => (
-  <div
-    className={clsx('iui-list-item', { active, disabled })}
-    onClick={e => {
-      e.stopPropagation();
-      onClick?.();
-    }}
-  >
-    <p className="bold">{label}</p>
-    {desc && <div className="iui-list-item-desc">{desc}</div>}
-  </div>
-);
+export const ListItem: FC<IListItem> = ({
+  label,
+  desc,
+  actions,
+  onClick,
+  active,
+  disabled,
+}) => {
+  const filteredActions = useMemo(
+    () => actions?.filter(action => !action.hidden),
+    [actions]
+  );
+
+  return (
+    <div
+      className={clsx('iui-list-item', { active, disabled })}
+      onClick={e => {
+        e.stopPropagation();
+        onClick?.();
+      }}
+    >
+      <div>
+        <p className="bold">{label}</p>
+        {desc && <div className="iui-list-item-desc">{desc}</div>}
+      </div>
+      {filteredActions && filteredActions.length > 0 && (
+        <div className="iui-list-item-actions">
+          {filteredActions.map((action, index) => (
+            <IconButton
+              key={index}
+              icon={action.icon}
+              onClick={e => {
+                e.stopPropagation();
+                action.onClick();
+              }}
+              size="s"
+              color={action.color}
+              disabled={action.disabled}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Menu/Menu.tsx

@@ -46,7 +46,11 @@ export const Menu: FC<Props> = ({
       {renderButton(containerRef)}
       {isOpen
         ? createPortal(
-            <div ref={portalRef} className="portal-background">
+            <div
+              ref={portalRef}
+              className="portal-background"
+              onClick={e => e.stopPropagation()}
+            >
               <div
                 ref={menuRef}
                 className={clsx('iui-menu', className, size)}

package/src/components/Pullover/Pullover.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 import { onPopupKeyDown } from '../../utils/popupUtils';
 import { ILocalPopupControl } from '../../types/IPopup';
 import { Loader } from '../Loader/Loader';
+import { SplitButton } from '../Button/SplitButton';
 
 interface Props {
   id?: string;
@@ -20,8 +21,10 @@ interface Props {
     title: string;
     onSearch?: (search: string) => void;
   };
+  isFetching?: boolean;
   isLoading?: boolean;
   onFormSubmit?: () => void;
+  onContentClick?: () => void;
   onCloseCallback?: () => void;
   footer?: IDialogFooterActions;
   size?: 'vw25' | 'vw50' | 'vw75' | 'vw100' | 'w500' | 'w600';
@@ -34,8 +37,10 @@ export const Pullover: FC<Props> = ({
   id,
   control,
   header,
+  isFetching = false,
   isLoading = false,
   onFormSubmit,
+  onContentClick,
   onCloseCallback,
   footer,
   size = 'vw50',
@@ -47,6 +52,8 @@ export const Pullover: FC<Props> = ({
   const { t } = useTranslation();
   const searchRef = useRef<HTMLInputElement>(null);
 
+  const ConfirmButton = footer?.confirmButton.splitActions ? SplitButton : Button;
+
   const { elementRef, isOpen, onClose } = useLocalPopoverControl({
     control,
     onCloseCallback,
@@ -126,11 +133,18 @@ export const Pullover: FC<Props> = ({
                 )}
               >
                 {/* CONTENT */}
-                <Loader isLoading={isLoading}>
-                  <div className={clsx('pullover-content', contentClassName)}>
-                    {children}
-                  </div>
-                </Loader>
+                {isLoading ? (
+                  <Loader isLoading isFullPage />
+                ) : (
+                  <Loader isLoading={isFetching}>
+                    <div
+                      onClick={onContentClick}
+                      className={clsx('pullover-content', contentClassName)}
+                    >
+                      {children}
+                    </div>
+                  </Loader>
+                )}
 
                 {/* FOOTER */}
                 {footer && (
@@ -138,7 +152,9 @@ export const Pullover: FC<Props> = ({
                     {footer.additionalButton && (
                       <Button
                         {...footer.additionalButton}
-                        disabled={footer.additionalButton.disabled || isLoading}
+                        disabled={
+                          footer.additionalButton.disabled || isFetching || isLoading
+                        }
                         variant="simple"
                         className="mr-auto"
                       />
@@ -147,12 +163,12 @@ export const Pullover: FC<Props> = ({
                       label={t('Cancel')}
                       variant="outlined"
                       onClick={onClose}
-                      disabled={isLoading}
+                      disabled={isFetching || isLoading}
                     />
-                    <Button
+                    <ConfirmButton
                       {...footer.confirmButton}
                       label={footer.confirmButton.label ?? t('Confirm')}
-                      disabled={footer.confirmButton.disabled || isLoading}
+                      disabled={footer.confirmButton.disabled || isFetching || isLoading}
                       type={
                         (footer.confirmButton.type ?? onFormSubmit) ? 'submit' : 'button'
                       }

package/src/components/Sidebar/Sidebar.tsx

@@ -4,13 +4,15 @@ import { SidebarItem } from './SidebarItem';
 import { ISidebarItem } from './types/ISidebar';
 import { faAngleLeft } from '../../assets/icons/solid/faAngleLeft';
 import { IconButton } from '../Button/IconButton';
+import { IOrgLogo, orgLogo } from '../../utils/logoUtils';
 
 export interface ISidebarProps {
   items: ISidebarItem[][];
-  logo?: string;
+  logo?: IOrgLogo;
+  customLogo?: string;
   appVersion?: string;
 }
-export const Sidebar: FC<ISidebarProps> = ({ items, logo, appVersion }) => {
+export const Sidebar: FC<ISidebarProps> = ({ items, logo, customLogo, appVersion }) => {
   const [itemsList, setItemsList] = useState<ISidebarItem[][]>([]);
   const [collapsed, setCollapsed] = useState(false);
   const [openedMenu, setOpenedMenu] = useState('');
@@ -66,11 +68,11 @@ export const Sidebar: FC<ISidebarProps> = ({ items, logo, appVersion }) => {
       </div>
       {/* ////// FOOTER ////// */}
       <div className={clsx('sidebar-footer', { collapsed })}>
-        {logo && (
+        {(logo ?? customLogo) && (
           <img
             className="sidebar-logo"
             // src={!!organization?.reseller ? orgLogo[organization?.reseller] : logo}
-            src={logo}
+            src={customLogo || orgLogo[logo || 'INC']}
             alt="logo"
           />
         )}

package/src/components/Table/Table.tsx

@@ -20,17 +20,14 @@ import { TableTemplates } from './components/templates/TableTemplates';
 
 export const TableContent: FC = () => {
   const {
-    columns,
+    columnData: { columns },
     customHeader,
     headerWrap,
-    // setColumns,
-    // withColumnsSearch,
     data,
     sumRows,
     isLoading,
     selectedRowUuid,
     // customPrintData,
-    // templates,
     // additionsalOptions,
     footer,
     rowHeight = 'm',
@@ -78,7 +75,7 @@ export const TableContent: FC = () => {
           {props.selectActions.length > 0 && <TableSelect />}
           {props.filterData && <TableFilters />}
           {props.sortData && <TableSort />}
-          {props.templates && <TableTemplates />}
+          {props.templateData && <TableTemplates />}
           {props.printData && <TablePrint />}
         </div>
         <div className="table-container" style={{ maxHeight }}>

package/src/components/Table/components/edit/TableEditRow.tsx

@@ -6,7 +6,10 @@ import { useTableContext } from '../../contexts/TableContext';
 import { useGetFocusableElements } from '../../../../hooks/useGetFocusableElements';
 
 export const TableEditRow: FC = () => {
-  const { columns, editable } = useTableContext();
+  const {
+    columnData: { columns },
+    editable,
+  } = useTableContext();
 
   const elementRef = useRef(null);
 

package/src/components/Table/components/filters/TableFilters.tsx

@@ -20,7 +20,10 @@ import { usePopupControl } from '../../../../hooks/usePopupControl';
 
 export const TableFilters: FC = () => {
   const { t } = useTranslation();
-  const { columns, filterData } = useTableContext();
+  const {
+    columnData: { columns },
+    filterData,
+  } = useTableContext();
   const { control, onClose, onOpen } = usePopupControl();
   const columnIds = getVisibleColumnsIds(columns);
 

package/src/components/Table/components/items/TableItemActions.tsx

@@ -22,14 +22,20 @@ export const TableItemActions: FC<{ tableDataItem: ITableDataItem }> = ({
       {dataActions.isEditable && (
         <IconButton
           icon={faPen}
-          onClick={() => editable?.setSelectedItem(tableDataItem.item ?? null)}
+          onClick={e => {
+            e.stopPropagation();
+            editable?.setSelectedItem(tableDataItem.item ?? null);
+          }}
           size="s"
         />
       )}
       {dataActions.isDeletable && (
         <IconButton
           icon={faTrashCan}
-          onClick={() => dataActions.delete?.onClick?.(tableDataItem.uuid)}
+          onClick={e => {
+            e.stopPropagation();
+            dataActions.delete?.onClick?.(tableDataItem.uuid);
+          }}
           size="s"
           color="danger"
         />
@@ -45,7 +51,10 @@ export const TableItemActions: FC<{ tableDataItem: ITableDataItem }> = ({
               ref={ref}
               icon={faEllipsisVertical}
               active={isMenuOpen}
-              onClick={onMenuOpen}
+              onClick={e => {
+                e.stopPropagation();
+                onMenuOpen();
+              }}
               size="s"
             />
           )}

package/src/components/Table/components/print/TablePrint.tsx

@@ -15,7 +15,10 @@ import { ProgressBar } from '../../../Loader/ProgressBar';
 export const TablePrint: FC = () => {
   const { t } = useTranslation();
   useHideZendesk();
-  const { columns, printData } = useTableContext();
+  const {
+    columnData: { columns },
+    printData,
+  } = useTableContext();
 
   const {
     label,

package/src/components/Table/components/sort/TableSort.tsx

@@ -1,4 +1,4 @@
-import { useState, type FC } from 'react';
+import { useEffect, useState, type FC } from 'react';
 import { Menu } from '../../../Menu/Menu';
 import { Tooltip } from '../../../Tooltip/Tooltip';
 import { IconButton } from '../../../Button/IconButton';
@@ -15,6 +15,24 @@ export const TableSort: FC = () => {
   const { sortData } = useTableContext();
   const { sort, setSort, sortOptions } = sortData ?? {};
 
+  useEffect(() => {
+    if (isOpen) {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        event.stopPropagation();
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          setIsOpen(false);
+        }
+      };
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isOpen]);
+
   return sortData ? (
     <Menu
       isOpen={isOpen}

package/src/components/Table/components/templates/TableTemplates.tsx

@@ -1,81 +1,92 @@
-import { useState, type FC } from 'react';
+import { type FC } from 'react';
 import { IconButton } from '../../../Button/IconButton';
 import { useTranslation } from 'react-i18next';
 import { useTableContext } from '../../contexts/TableContext';
-import { faBookmark, faBookmarkSlash } from '../../../../assets/icons';
-import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { faBookmark, faBookmarkSlash, faTrashCan } from '../../../../assets/icons';
 import { Pullover } from '../../../Pullover/Pullover';
+import { List } from '../../../List/List';
+import { setTemplateData } from '../../../../utils/tableUtils';
 
 export const TableTemplates: FC = () => {
   const { t } = useTranslation();
-  const { templates } = useTableContext();
-  const { control, onClose, onOpen } = usePopupControl();
+  const { templateData, columnData, filterData, sortData } = useTableContext();
+
+  if (!templateData) return null;
 
   return (
     <>
       <IconButton
         tooltip={t('Templates')}
         icon={faBookmark}
-        active={control.isOpen}
-        onClick={onOpen}
+        active={templateData.popupController.control.isOpen}
+        onClick={templateData.popupController.onOpen}
         size="s"
         variant="outlined"
       />
-
       <Pullover
-        control={control}
+        isLoading={templateData.isLoading}
+        isFetching={templateData.isFetching}
+        control={templateData.popupController.control}
         header={{
           title: t('Templates'),
-          onSearch: templates?.setSearch,
+          onSearch: templateData.setSearch,
         }}
-        // onFormSubmit={() => {
-        //   const data = deleteEmptyPropsIncludingArray(searchData);
-        //   onSearch?.(excludeFromSearch ? deleteProps(data, excludeFromSearch) : data);
-        //   onClose();
-        // }}
         footer={{
           confirmButton: {
-            label: t('ApplyTemplate'),
-            type: 'submit',
+            label: t('CreateTemplate'),
+            onClick: templateData.initiateCreate,
+            splitActions: [
+              {
+                label: t('CreateDefaultTemplate'),
+                icon: faBookmark,
+                onClick: templateData.initiateCreateDefault,
+              },
+            ],
           },
           additionalButton: {
             label: t('ResetTemplate'),
             icon: faBookmarkSlash,
             onClick: () => {
-              //   setSearchData?.(defaultSearch);
-              //   onSearch?.(defaultSearch);
-              //   onClose();
+              columnData?.setColumns?.(columnData.defaultColumns);
+              filterData?.setSearchData(filterData.defaultSearch ?? {});
+              filterData?.onSearch(filterData.defaultSearch ?? {});
+              sortData?.setSort('');
+              templateData.popupController.onClose();
             },
-            // disabled: defaultSearch
-            //   ? JSON.stringify(searchData) === JSON.stringify(defaultSearch)
-            //   : Object.keys(searchData).length === 0,
           },
         }}
-        // contentClassName="iui-filters-list"
-        onCloseCallback={() => templates?.setSearch?.('')}
+        onCloseCallback={() => templateData.setSearch?.('')}
         size="w600"
       >
-        Templates
-        {templates?.items.map(item => (
-          <div key={item.uuid}>{item.name}</div>
-        ))}
+        <List
+          items={templateData.items.map(item => ({
+            id: item.uuid,
+            label: item.name,
+            desc: item.isPublic ? t('PublicTemplate') : t('PrivateTemplate'),
+            onClick: () => {
+              setTemplateData({
+                template: item,
+                columnData,
+                setFilters: e => {
+                  filterData?.setSearchData(e);
+                  filterData?.onSearch(e);
+                },
+                setSort: sortData?.setSort,
+              });
+              templateData.popupController.onClose();
+            },
+            actions: [
+              {
+                icon: faTrashCan,
+                onClick: () => templateData.setItemToDeleteUuids([item.uuid]),
+                color: 'danger',
+              },
+            ],
+          }))}
+          noItemsMessage={t('NoTemplatesAvailable')}
+        />
       </Pullover>
+      {templateData.TemplateNode}
     </>
-    // <Menu
-    //   isOpen={isMenuOpen}
-    //   onClose={onMenuClose}
-    //   renderButton={ref => (
-    //     <Tooltip label={t('Templates')} ref={ref}>
-    //       <IconButton
-    //         icon={faBookmark}
-    //         active={isMenuOpen}
-    //         onClick={onMenuOpen}
-    //         size="s"
-    //         variant="outlined"
-    //       />
-    //     </Tooltip>
-    //   )}
-    //   items={templates?.menuItems}
-    // />
   );
 };

package/src/components/Table/contexts/TableContext.tsx

@@ -10,17 +10,17 @@ import {
 import {
   IPaginationControl,
   ITable,
-  ITableColumn,
+  ITableColumnsData,
   ITableEdit,
-  ITableSelectedActions,
+  ITableSelectedAction,
 } from '../../../types/ITable';
 import { useLocalTablePagination } from '../hooks/localHooks/useLocalTablePagination';
 import { useLocalTableColumns } from '../hooks/localHooks/useLocalTableColumns';
 import { useLocalTableData } from '../hooks/localHooks/useLocalTableData';
 
 interface ITableContext extends ITable {
-  setColumns: (columns: ITableColumn[]) => void;
-  selectActions: ITableSelectedActions[];
+  columnData: ITableColumnsData;
+  selectActions: ITableSelectedAction[];
   dataActions?: ITable['dataActions'] & {
     hasItemActions: boolean;
     isEditable: boolean;
@@ -37,10 +37,9 @@ interface ITableContext extends ITable {
 }
 
 const TableContext = createContext<ITableContext>({
-  setColumns: () => {},
-  selectActions: [],
+  columnData: { columns: [], defaultColumns: [] },
   data: [],
-  columns: [],
+  selectActions: [],
 });
 
 interface Props extends ITable {
@@ -48,18 +47,17 @@ interface Props extends ITable {
 }
 
 export const TableProvider = ({
-  columns: initialColumns,
+  columnData,
   data: initialData,
   dataActions,
   editable,
   footer,
   children,
+  rowSelect,
   ...rest
 }: Props) => {
   const [isAdding, setIsAdding] = useState(false);
 
-  const { rowSelect } = rest;
-
   const selectActions = useMemo(
     () => rowSelect?.actions.filter(e => !e.hidden) || [],
     [rowSelect?.actions]
@@ -80,17 +78,16 @@ export const TableProvider = ({
   const localPagination = useLocalTablePagination({
     defaultLimit: footer?.customPagination?.defaultLimit,
   });
-
-  const { data } = useLocalTableData({
+  const data = useLocalTableData({
     initialData,
     localPagination,
     controledPagination: !!footer?.paginationControl,
-    dataActions,
+    dataActions: updatedDataActions,
     rowSelect,
   });
 
-  const { columns, setColumns } = useLocalTableColumns({
-    initialColumns,
+  useLocalTableColumns({
+    columnData,
     hasSelect: selectActions.length > 0,
     data,
     rowSelect,
@@ -101,8 +98,7 @@ export const TableProvider = ({
     ...rest,
     data,
     dataActions: updatedDataActions,
-    columns,
-    setColumns,
+    columnData,
     selectActions,
   };
 

package/src/components/Table/hooks/localHooks/useLocalTableColumns.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
-import { ITable, ITableColumn } from '../../../../types/ITable';
+import { useEffect } from 'react';
+import { ITable, ITableColumn, ITableColumnsData } from '../../../../types/ITable';
 import { useTranslation } from 'react-i18next';
 import { Checkbox } from '../../../Inputs/Checkbox';
 
 interface Props {
-  initialColumns: ITableColumn[];
+  columnData: ITableColumnsData;
   hasSelect: boolean;
   data: ITable['data'];
   rowSelect: ITable['rowSelect'];
@@ -12,17 +12,17 @@ interface Props {
 }
 
 export const useLocalTableColumns = ({
-  initialColumns,
+  columnData: { defaultColumns, setColumns },
   hasSelect,
   data,
   rowSelect,
   hasItemActions,
 }: Props) => {
-  const [columns, setColumns] = useState<ITableColumn[]>([]);
   const { t } = useTranslation();
 
   useEffect(() => {
-    const activeColumns = initialColumns.filter(e => !e.hidden && !e.unavailable);
+    const activeColumns = defaultColumns.filter(e => !e.hidden && !e.unavailable);
+    // const activeColumns = defaultColumns.filter(e => !e.unavailable);
 
     let newCols: ITableColumn[] = [];
 
@@ -66,8 +66,6 @@ export const useLocalTableColumns = ({
         className: 'actions-col',
       });
 
-    setColumns(newCols);
-  }, [initialColumns, hasSelect, data, rowSelect, hasItemActions, t]);
-
-  return { columns, setColumns };
+    setColumns?.(newCols);
+  }, [defaultColumns, setColumns, hasSelect, data, rowSelect, hasItemActions, t]);
 };

package/src/components/Table/hooks/localHooks/useLocalTableData.tsx

@@ -74,5 +74,5 @@ export const useLocalTableData = ({
     dataActions,
   ]);
 
-  return { data };
+  return data;
 };

package/src/components/Table/hooks/useTableColumns.ts

@@ -0,0 +1,28 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ITableColumn, ITableColumnsData } from '../../../types/ITable';
+
+export interface ITableColumnsProps {
+  defaultColumns: ITableColumn[];
+  templateColumns?: ITableColumn[];
+}
+
+export const useTableColumns = ({
+  defaultColumns,
+  templateColumns,
+}: ITableColumnsProps): ITableColumnsData => {
+  const [columns, setColumns] = useState<ITableColumn[]>(defaultColumns);
+
+  useEffect(() => {
+    setColumns(defaultColumns);
+  }, [defaultColumns, templateColumns]);
+
+  const columnData = useMemo(
+    () => ({
+      defaultColumns,
+      columns,
+      setColumns,
+    }),
+    [defaultColumns, columns]
+  );
+  return columnData;
+};