@inceptionbg/iui 2.0.13 → 2.0.15

package/src/components/Pullover/Pullover.tsx

@@ -21,6 +21,7 @@ interface Props {
     title: string;
     onSearch?: (search: string) => void;
   };
+  isFetching?: boolean;
   isLoading?: boolean;
   onFormSubmit?: () => void;
   onContentClick?: () => void;
@@ -36,6 +37,7 @@ export const Pullover: FC<Props> = ({
   id,
   control,
   header,
+  isFetching = false,
   isLoading = false,
   onFormSubmit,
   onContentClick,
@@ -50,7 +52,7 @@ export const Pullover: FC<Props> = ({
   const { t } = useTranslation();
   const searchRef = useRef<HTMLInputElement>(null);
 
-  const ConfirmButton = footer?.confirmButton.splitActions ? SplitButton : Button;
+  const ConfirmButton = footer?.confirmButton?.splitActions ? SplitButton : Button;
 
   const { elementRef, isOpen, onClose } = useLocalPopoverControl({
     control,
@@ -77,10 +79,10 @@ export const Pullover: FC<Props> = ({
       onClose,
       enter: {
         onAction: () => {
-          footer?.confirmButton.onClick?.();
-          !footer?.confirmButton.keepOpen && onClose();
+          footer?.confirmButton?.onClick?.();
+          !footer?.confirmButton?.keepOpen && onClose();
         },
-        disabled: !footer?.confirmButton.onClick,
+        disabled: !footer?.confirmButton?.onClick,
       },
       search: {
         onAction: () => searchRef.current?.focus(),
@@ -131,14 +133,18 @@ export const Pullover: FC<Props> = ({
                 )}
               >
                 {/* CONTENT */}
-                <Loader isLoading={isLoading}>
-                  <div
-                    onClick={onContentClick}
-                    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 && (
@@ -146,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"
                       />
@@ -155,16 +163,22 @@ export const Pullover: FC<Props> = ({
                       label={t('Cancel')}
                       variant="outlined"
                       onClick={onClose}
-                      disabled={isLoading}
-                    />
-                    <ConfirmButton
-                      {...footer.confirmButton}
-                      label={footer.confirmButton.label ?? t('Confirm')}
-                      disabled={footer.confirmButton.disabled || isLoading}
-                      type={
-                        (footer.confirmButton.type ?? onFormSubmit) ? 'submit' : 'button'
-                      }
+                      disabled={isFetching || isLoading}
                     />
+                    {footer.confirmButton && (
+                      <ConfirmButton
+                        {...footer.confirmButton}
+                        label={footer.confirmButton.label ?? t('Confirm')}
+                        disabled={
+                          footer.confirmButton.disabled || isFetching || isLoading
+                        }
+                        type={
+                          (footer.confirmButton.type ?? onFormSubmit)
+                            ? 'submit'
+                            : 'button'
+                        }
+                      />
+                    )}
                   </div>
                 )}
               </ConditionalWrapper>

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',

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/templates/TableTemplates.tsx

@@ -1,98 +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, faXmark } 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 { Dialog } from '../../../Dialog/Dialog';
-import { TextInput } from '../../../Inputs/TextInput';
-import { CreateTemplateDialog } from './components/CreateTemplateDialog';
+import { setTemplateData } from '../../../../utils/tableUtils';
 
 export const TableTemplates: FC = () => {
   const { t } = useTranslation();
-  const { templateData: templates } = useTableContext();
-  const { control, onOpen } = usePopupControl();
-  // const { control: dialogControl, onOpen: onDialogOpen } = usePopupControl();
+  const { templateData, columnData, filterData, sortData } = useTableContext();
 
-  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+  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,
         }}
-        onContentClick={() => setSelectedItemId(null)}
         footer={{
           confirmButton: {
-            label: t('ApplyTemplate'),
-            type: 'submit',
+            label: t('CreateTemplate'),
+            onClick: templateData.initiateCreate,
             splitActions: [
-              {
-                label: t('CreateTemplateLong'),
-                icon: faBookmark,
-                // onClick: onDialogOpen,
-              },
               {
                 label: t('CreateDefaultTemplate'),
                 icon: faBookmark,
-                onClick: () => {
-                  // Handle use template action
-                },
+                onClick: templateData.initiateCreateDefault,
               },
             ],
           },
-          additionalButton: selectedItemId
-            ? {
-                label: t('DeleteTemplate'),
-                icon: faXmark,
-                color: 'danger',
-                onClick: () => {
-                  // Handle delete template action
-                },
-              }
-            : {
-                label: t('ResetTemplate'),
-                icon: faBookmarkSlash,
-                onClick: () => {
-                  //   setSearchData?.(defaultSearch);
-                  //   onSearch?.(defaultSearch);
-                  //   onClose();
-                },
-                // disabled: defaultSearch
-                //   ? JSON.stringify(searchData) === JSON.stringify(defaultSearch)
-                //   : Object.keys(searchData).length === 0,
-              },
-        }}
-        onCloseCallback={() => {
-          templates?.setSearch?.('');
-          setSelectedItemId(null);
+          additionalButton: {
+            label: t('ResetTemplate'),
+            icon: faBookmarkSlash,
+            onClick: () => {
+              columnData?.setColumns?.(columnData.defaultColumns);
+              filterData?.setSearchData(filterData.defaultSearch ?? {});
+              filterData?.onSearch(filterData.defaultSearch ?? {});
+              sortData?.setSort('');
+              templateData.popupController.onClose();
+            },
+          },
         }}
+        onCloseCallback={() => templateData.setSearch?.('')}
         size="w600"
       >
         <List
-          items={templates?.items.map(item => ({
+          items={templateData.items.map(item => ({
             id: item.uuid,
             label: item.name,
-            active: selectedItemId === item.uuid,
-            // desc: item.isPublic ? t('Public') : t('Private'),
-            onClick: () => setSelectedItemId(item.uuid),
+            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')}
         />
-        {/* <CreateTemplateDialog control={dialogControl} /> */}
       </Pullover>
+      {templateData.TemplateNode}
     </>
   );
 };

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;
+};

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

@@ -1,16 +1,19 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { IPagination, IPaginationControl } from '../../../types/ITable';
 
 export const useTablePagination = (defaultLimit: number = 5) => {
   const [limit, setLimit] = useState(defaultLimit);
   const [offset, setOffset] = useState(0);
 
-  const pagination: IPagination = { limit, offset };
-  const paginationControl: IPaginationControl = {
-    ...pagination,
-    setLimit,
-    setOffset,
-  };
+  const pagination: IPagination = useMemo(() => ({ limit, offset }), [limit, offset]);
+  const paginationControl: IPaginationControl = useMemo(
+    () => ({
+      ...pagination,
+      setLimit,
+      setOffset,
+    }),
+    [pagination]
+  );
 
   return { pagination, paginationControl };
 };

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

@@ -1,11 +1,19 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { ITableSelectedAction } from '../../../types/ITable';
 
-export const useTableSelect = () => {
+export const useTableSelect = ({ actions }: { actions: ITableSelectedAction[] }) => {
   const [selectedRows, setSelectedRows] = useState(new Set<string>());
 
-  return {
-    selectedRows,
-    setSelectedRows,
-    resetSelectedRows: () => setSelectedRows(new Set<string>()),
-  };
+  const rowSelect = useMemo(
+    () => ({
+      selectedRows,
+      setSelectedRows,
+      resetSelectedRows: () => setSelectedRows(new Set<string>()),
+      actions,
+    }),
+    // eslint-disable-next-line
+    [selectedRows]
+  );
+
+  return rowSelect;
 };

package/src/index.ts

@@ -27,6 +27,7 @@ import type {
   IPaginationControl,
   ITable,
   ITableColumn,
+  ITableDataActions,
   ITableDataItem,
   ITableDataItemCells,
   ITableEdit,
@@ -34,6 +35,10 @@ import type {
   ITableFilterData,
   ITableFilterItem,
   ITableSort,
+  ITableTemplateData,
+  IReportTemplate,
+  IReportTemplateData,
+  IReportTemplateFilterValue,
 } from './types/ITable';
 import type { ITreeItem } from './types/ITree';
 import type { IHeaderAction, IHeaderUserMenuProps } from './types/IHeader';
@@ -97,7 +102,7 @@ import { Table } from './components/Table/Table';
 // import { TableFooter } from './components/Table/Components/TableFooter';
 // import { GridTable } from '../idea/GridTable/GridTable';
 // import { TablePrint } from './components/Table/Components/Print/TablePrint';
-import { useDefaultTemplate } from './components/Table/hooks/useDefaultTemplate';
+import { useTableColumns } from './components/Table/hooks/useTableColumns';
 import { useTableEdit } from './components/Table/hooks/useTableEdit';
 import { useTableFilterFields } from './components/Table/hooks/useTableFilterFields';
 import { useTablePagination } from './components/Table/hooks/useTablePagination';
@@ -234,7 +239,7 @@ export {
   // TablePrint,
   // TableEditRow,
   // TableFooter,
-  useDefaultTemplate,
+  useTableColumns,
   useTableEdit,
   useTableFilterFields,
   useTablePagination,
@@ -269,6 +274,7 @@ export type {
   ITab,
   ITable,
   ITableColumn,
+  ITableDataActions,
   ITableDataItem,
   ITableDataItemCells,
   ITableEdit,
@@ -276,6 +282,10 @@ export type {
   ITableFilterData,
   ITableFilterItem,
   ITableSort,
+  ITableTemplateData,
+  IReportTemplate,
+  IReportTemplateData,
+  IReportTemplateFilterValue,
   IGetPrintData,
   ITreeItem,
   IValueLabel,