@inceptionbg/iui 2.0.13 → 2.0.14

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,

package/src/styles/components/_header.scss

@@ -1,8 +1,9 @@
 @use '../variables/bp';
 
 .iui-header {
-  border-bottom: var(--border);
-  background: var(--background);
+  box-shadow: var(--container-shadow);
+  background: var(--primary);
+  color: var(--text-inverse);
   height: var(--header-height);
   width: 100dvw;
   display: flex;
@@ -10,13 +11,21 @@
   justify-content: space-between;
   padding: 0 24px 0 8px;
   box-sizing: border-box;
+  z-index: 2;
   .header-button {
     height: 40px;
     width: 40px;
     padding: 8px;
     border-radius: 50px;
-    &:hover {
+    circle {
+      fill: var(--white);
+    }
+    &:hover,
+    &.active {
       background-color: var(--neutral-hover);
+      circle {
+        fill: var(--primary);
+      }
     }
   }
 }
@@ -31,12 +40,17 @@
   user-select: none;
   &:hover {
     background-color: var(--neutral-hover);
+    color: var(--primary);
   }
 }
 .modules-menu {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   padding: 8px !important;
+  top: var(--header-height) !important;
+  left: 0 !important;
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
   @media #{bp.$mobile} {
     grid-template-columns: 1fr;
   }
@@ -81,7 +95,7 @@
   user-select: none;
   -webkit-user-drag: none;
   .user-icon {
-    color: var(--primary);
+    color: var(--white);
     height: 36px;
     width: 36px;
   }
@@ -96,7 +110,7 @@
     }
     .org-name {
       font-size: 12px;
-      color: var(--neutral-500);
+      color: var(--neutral-200);
     }
     p {
       line-height: 1.5;
@@ -113,6 +127,13 @@
     border-radius: 50px;
   }
 }
+.header-user-menu {
+  top: var(--header-height) !important;
+  right: 0 !important;
+  left: auto !important;
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+}
 
 @media #{bp.$mobile} {
   .user-info {

package/src/styles/components/_list.scss

@@ -4,9 +4,15 @@
   flex-direction: column;
   gap: 8px;
   .iui-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     border: var(--border);
     border-radius: 8px;
     padding: 12px 16px;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
     p {
       font-size: 14px;
       line-height: 20px;
@@ -20,6 +26,11 @@
       margin-top: 4px;
       white-space: pre-line;
     }
+    .iui-list-item-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
     &.disabled {
       cursor: default;
       opacity: 0.5;
@@ -29,12 +40,18 @@
       &:hover {
         background-color: var(--neutral-hover);
       }
+      &:has(.iui-icon-btn:hover) {
+        background-color: transparent;
+      }
       &.active {
-        background-color: var(--primary);
+        background-color: var(--primary) !important;
         color: var(--text-inverse);
         .iui-list-item-desc {
           color: var(--neutral-300);
         }
+        .iui-list-item-actions .iui-icon-btn:not(:hover) {
+          background-color: var(--background);
+        }
       }
     }
   }

package/src/styles/components/_page.scss

@@ -47,7 +47,7 @@
   padding: 0 1.5rem;
   min-height: 55px;
   max-height: 55px;
-  border-bottom: var(--border);
+  box-shadow: var(--container-shadow);
 
   @media #{bp.$mobileTablet} {
     .breadcrumbs {
@@ -60,4 +60,5 @@
   text-align: center;
   padding: 16px;
   font-size: 12px;
+  white-space: pre-line;
 }

package/src/styles/components/_sidebar.scss

@@ -6,7 +6,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  border-right: var(--border);
+  box-shadow: var(--container-shadow);
   height: calc(100dvh - var(--header-height));
   width: var(--sidebar-width);
   transition: width var(--animation);
@@ -190,7 +190,7 @@
     .item-only {
       padding-left: 15px;
       .sidebar-item-label {
-        padding-left: 6px;
+        padding-left: 8px;
       }
     }
     .sidebar-footer p {