@inceptionbg/iui 2.0.15 → 2.0.17

package/src/components/Table/Table.tsx

@@ -17,10 +17,12 @@ import { TableFilters } from './components/filters/TableFilters';
 import { TableEditRow } from './components/edit/TableEditRow';
 import { TablePrint } from './components/print/TablePrint';
 import { TableTemplates } from './components/templates/TableTemplates';
+import { TableColumnsEdit } from './components/columns/TableColumnsEdit';
+import { useLocalTableColumns } from './hooks/localHooks/useLocalTableColumns';
 
 export const TableContent: FC = () => {
   const {
-    columnData: { columns },
+    columnData,
     customHeader,
     headerWrap,
     data,
@@ -39,12 +41,15 @@ export const TableContent: FC = () => {
   const [extendedRow, setExtendedRow] = useState('');
 
   const { t } = useTranslation();
+  const { visibleColumns } = useLocalTableColumns();
   const { focusedRow } = useLocalTableKeyboard();
+
   const noTotalRows = footer?.totalRows === undefined;
 
   return (
     <Loader isLoading={!!isLoading}>
       <div
+        id={props.id}
         // onKeyDown={handleKeyDown}
         className={clsx('iui-table', props.className, {
           'pb-3': data.length === 0,
@@ -52,28 +57,9 @@ export const TableContent: FC = () => {
         // tabIndex={-1}
       >
         <div className="iui-table-header-actions">
-          {/* {(!!filterData ||
-            !!sortData ||
-            !!setColumns ||
-            !!printData ||
-            !!customPrintData) && (
-            <TableOptions
-              columns={cols}
-              columnsData={
-                setColumns
-                  ? { columns, setColumns, withSearch: withColumnsSearch }
-                  : undefined
-              }
-              filterData={filterData}
-              sortData={sortData}
-              printData={printData}
-              customPrintData={customPrintData}
-              templates={templates}
-              additionsalOptions={additionsalOptions}
-            />
-          )} */}
           {props.selectActions.length > 0 && <TableSelect />}
           {props.filterData && <TableFilters />}
+          {!!columnData.setColumns && <TableColumnsEdit />}
           {props.sortData && <TableSort />}
           {props.templateData && <TableTemplates />}
           {props.printData && <TablePrint />}
@@ -100,7 +86,7 @@ export const TableContent: FC = () => {
           >
             <table className="full-width">
               <HeaderTable
-                columns={columns}
+                columns={visibleColumns}
                 customHeader={customHeader}
                 headerWrap={headerWrap}
                 maxHeight={maxHeight}
@@ -117,7 +103,7 @@ export const TableContent: FC = () => {
                         <Fragment key={row.uuid}>
                           {/* ////// EDITABLE ROW ////// */}
                           {!!editable && row.uuid === editable.selectedItem?.uuid ? (
-                            <TableEditRow />
+                            <TableEditRow columns={visibleColumns} />
                           ) : (
                             ////// REGULAR ROW //////
                             <tr
@@ -137,7 +123,7 @@ export const TableContent: FC = () => {
                                   );
                               }}
                             >
-                              {columns.map(column => {
+                              {visibleColumns.map(column => {
                                 const cell = row.cells[column.id];
                                 return (
                                   <Tooltip
@@ -169,8 +155,9 @@ export const TableContent: FC = () => {
                                         cell?.className,
                                         rowHeight,
                                         {
+                                          'sticky-column': column.sticky,
                                           link: cell?.link,
-                                          'clickable-column': cell?.onClick,
+                                          'clickable-cell': cell?.onClick,
                                           'word-break': column.break,
                                         }
                                       )}
@@ -186,7 +173,7 @@ export const TableContent: FC = () => {
                           {/* ////// EXTENDABLE ROW ////// */}
                           {isExtended && (
                             <tr>
-                              <td colSpan={columns.length} className={rowHeight}>
+                              <td colSpan={visibleColumns.length} className={rowHeight}>
                                 {row.extendable!.element}
                               </td>
                             </tr>
@@ -197,7 +184,7 @@ export const TableContent: FC = () => {
                   </>
                 ) : (
                   <tr>
-                    <td colSpan={columns.length}>{t('NoResults')}</td>
+                    <td colSpan={visibleColumns.length}>{t('NoResults')}</td>
                   </tr>
                 )}
               </tbody>
@@ -214,7 +201,10 @@ export const TableContent: FC = () => {
                       })}
                       onClick={() => editable.setIsAdding(true)}
                     >
-                      <td className={`text-center ${rowHeight}`} colSpan={columns.length}>
+                      <td
+                        className={`text-center ${rowHeight}`}
+                        colSpan={visibleColumns.length}
+                      >
                         <div className="flex center gap-2">
                           <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
                           <p>{editable.addLabel || t('AddItem')}</p>
@@ -222,13 +212,13 @@ export const TableContent: FC = () => {
                       </td>
                     </tr>
                   ) : (
-                    <TableEditRow />
+                    <TableEditRow columns={visibleColumns} />
                   ))}
                 {!!sumRows &&
                   !!data.length &&
                   sumRows.map(row => (
                     <tr key={row.uuid}>
-                      {columns.map(({ id: columnId }) => (
+                      {visibleColumns.map(({ id: columnId }) => (
                         <td
                           key={columnId}
                           align={row.cells[columnId]?.align || 'right'}
@@ -260,8 +250,9 @@ export const TableContent: FC = () => {
   );
 };
 
-export const Table: FC<ITable> = props => (
-  <TableProvider {...props}>
+export const Table = <T,>(props: ITable<T>) => (
+  <TableProvider<T> {...props}>
     <TableContent />
+    {props.itemDeleteData?.DeleteDialog}
   </TableProvider>
 );

package/{idea/Table/Components/Columns → src/components/Table/components/columns}/ColumnsList.tsx

@@ -1,7 +1,7 @@
-import { FC, useEffect, useState } from 'react';
-import { ITableColumn } from '../../../../types/ITable';
-import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { useEffect, useState, type FC } from 'react';
+import { Draggable, Droppable } from '@hello-pangea/dnd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ITableColumn } from '../../../../types/ITable';
 import { faGripDotsVertical } from '../../../../assets/icons/solid/faGripDotsVertical';
 
 interface Props {
@@ -14,30 +14,28 @@ export const ColumnsList: FC<Props> = ({ id, items, search }) => {
   const [filteredItems, setFilteredItems] = useState<ITableColumn[]>([]);
 
   useEffect(() => {
-    search.length &&
+    if (search.length) {
       setFilteredItems(
         items.filter(e =>
-          (typeof e.label === 'string' ? e.label : e.labelForFilter ?? '')
+          (typeof e.label === 'string' ? e.label : (e.labelForFilter ?? ''))
             .toLocaleLowerCase()
             .includes(search.toLocaleLowerCase())
         )
       );
+    }
   }, [search, items]);
 
+  const list = search.length ? filteredItems : 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 }) => (
+          {list.map(c => (
+            <Draggable key={c.id} draggableId={c.id} index={items.indexOf(c)}>
+              {({ innerRef, draggableProps, dragHandleProps }, snapshot) => (
                 <div
-                  className="item"
+                  className={`item ${snapshot.isDragging ? 'dragging' : ''}`}
                   ref={innerRef}
                   {...draggableProps}
                   {...dragHandleProps}

package/src/components/Table/components/columns/TableColumnsEdit.tsx

@@ -0,0 +1,112 @@
+import { FC, useEffect, useState } from 'react';
+import { DragDropContext, DropResult } from '@hello-pangea/dnd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ITableColumn } from '../../../../types/ITable';
+import { faArrowRightArrowLeft } from '../../../../assets/icons/regular/faArrowRightArrowLeft';
+import { useTranslation } from 'react-i18next';
+import { ColumnsList } from './ColumnsList';
+import { SearchInput } from '../../../Inputs/SearchInput';
+import { Pullover } from '../../../Pullover/Pullover';
+import { useTableContext } from '../../contexts/TableContext';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { IconButton } from '../../../Button/IconButton';
+import { faLineColumns } from '../../../../assets/icons/light/faLineColumns';
+
+export const TableColumnsEdit: FC = () => {
+  const [hidden, setHidden] = useState<ITableColumn[]>([]);
+  const [visible, setVisible] = useState<ITableColumn[]>([]);
+  const [searchHidden, setSearchHidden] = useState('');
+  const [searchVisible, setSearchVisible] = useState('');
+
+  const { t } = useTranslation();
+  const {
+    columnData: { columns, setColumns },
+  } = useTableContext();
+  const { control, onClose, onOpen } = usePopupControl();
+
+  useEffect(() => {
+    if (control.isOpen) {
+      let hiddenCols: ITableColumn[] = [];
+      let visibleCols: ITableColumn[] = [];
+      columns.forEach(col =>
+        !!col.hidden ? hiddenCols.push(col) : visibleCols.push(col)
+      );
+      setHidden(hiddenCols);
+      setVisible(visibleCols);
+    }
+  }, [control.isOpen, columns]);
+
+  const onDragEnd = ({ source, destination }: DropResult) => {
+    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 = () => {
+    if (setColumns) {
+      const newColumns = [...visible, ...hidden];
+      setColumns(newColumns);
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <IconButton
+        tooltip={t('Columns')}
+        icon={faLineColumns}
+        active={control.isOpen}
+        onClick={onOpen}
+        size="s"
+        variant="outlined"
+      />
+
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Pullover
+          control={control}
+          header={{ title: t('Columns') }}
+          className="column-pullover"
+          footer={{
+            confirmButton: {
+              label: t('Confirm'),
+              onClick: onSubmit,
+            },
+          }}
+        >
+          <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>
+
+              <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>
+        </Pullover>
+      </DragDropContext>
+    </>
+  );
+};

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

@@ -1,15 +1,13 @@
 import { FC, useEffect, useRef } from 'react';
-import { ITableDataItem } from '../../../../types/ITable';
+import { ITableColumn, ITableDataItem } from '../../../../types/ITable';
 import { IconButton } from '../../../Button/IconButton';
 import { faCheck, faXmark } from '../../../../assets/icons';
 import { useTableContext } from '../../contexts/TableContext';
 import { useGetFocusableElements } from '../../../../hooks/useGetFocusableElements';
+import clsx from 'clsx';
 
-export const TableEditRow: FC = () => {
-  const {
-    columnData: { columns },
-    editable,
-  } = useTableContext();
+export const TableEditRow: FC<{ columns: ITableColumn[] }> = ({ columns }) => {
+  const { editable } = useTableContext();
 
   const elementRef = useRef(null);
 
@@ -23,7 +21,9 @@ export const TableEditRow: FC = () => {
   }, [focusableElements]);
 
   useEffect(() => {
-    editable!.setEditData(editable!.selectedItem ?? editable!.defaultDataValue ?? {});
+    editable!.setEditData(
+      editable!.selectedItem?.item ?? editable!.defaultDataValue ?? {}
+    );
     // eslint-disable-next-line
   }, [editable?.setEditData, editable?.selectedItem, editable?.defaultDataValue]);
 
@@ -50,23 +50,28 @@ export const TableEditRow: FC = () => {
     },
   };
 
-  const rowData: ITableDataItem = { uuid: editable?.selectedItem?.uuid, cells: rowCells };
+  const rowData: ITableDataItem = {
+    uuid: editable?.selectedItem?.uuid as string,
+    cells: rowCells,
+  };
 
   return (
     <tr ref={elementRef} 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>
-          )
-      )}
+      {columns.map(column => {
+        const item = rowData.cells[column.id];
+        return (
+          <td
+            key={column.id}
+            align={column.align}
+            colSpan={item?.span}
+            className={clsx(item?.className, {
+              editable: typeof item?.value === 'object',
+            })}
+          >
+            {item?.value ?? ''}
+          </td>
+        );
+      })}
     </tr>
   );
 };

package/src/components/Table/components/header/TableHeaderRow.tsx

@@ -23,6 +23,7 @@ export const TableHeaderRow: FC<Props> = ({ row, print }) => {
             print
               ? undefined
               : clsx(col.color, col.className, {
+                  'sticky-column': col.sticky,
                   'not-first-cell': col.notFirstCell,
                 })
           }
@@ -40,7 +41,7 @@ export const TableHeaderRow: FC<Props> = ({ row, print }) => {
                   ? { width: col.width }
                   : undefined
           }
-          hidden={col.hidden}
+          // hidden={col.hidden}
         >
           <div className="flex align-center">
             {typeof col.label === 'string' ? (

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

@@ -2,16 +2,20 @@ import { type FC } from 'react';
 import { useTableContext } from '../../contexts/TableContext';
 import { IconButton } from '../../../Button/IconButton';
 import { faEllipsisVertical, faPen, faTrashCan } from '../../../../assets/icons';
+// TO CONSIDER
+// import { faPen } from '../../../../assets/icons/duotone/faPen';
+// import { faTrashCan } from '../../../../assets/icons/duotone/faTrashCan';
+// import { faEllipsisVertical } from '../../../../assets/icons/regular/faEllipsisVertical';
 import { useIsMenuOpen } from '../../../../hooks/useIsMenuOpen';
 import { Menu } from '../../../Menu/Menu';
 import { ITableDataItem } from '../../../../types/ITable';
 
-export const TableItemActions: FC<{ tableDataItem: ITableDataItem }> = ({
+export const TableItemActions: FC<{ tableDataItem: ITableDataItem<any> }> = ({
   tableDataItem,
 }) => {
-  const { isMenuOpen, onMenuClose, onMenuOpen } = useIsMenuOpen();
+  const { isOpen, onClose, onOpen } = useIsMenuOpen();
 
-  const { dataActions, editable } = useTableContext();
+  const { dataActions, itemDeleteData, editable } = useTableContext();
 
   if (!dataActions?.hasItemActions) {
     return null;
@@ -24,7 +28,7 @@ export const TableItemActions: FC<{ tableDataItem: ITableDataItem }> = ({
           icon={faPen}
           onClick={e => {
             e.stopPropagation();
-            editable?.setSelectedItem(tableDataItem.item ?? null);
+            editable?.setSelectedItem(tableDataItem);
           }}
           size="s"
         />
@@ -34,37 +38,38 @@ export const TableItemActions: FC<{ tableDataItem: ITableDataItem }> = ({
           icon={faTrashCan}
           onClick={e => {
             e.stopPropagation();
-            dataActions.delete?.onClick?.(tableDataItem.uuid);
+            itemDeleteData?.setItemToDeleteUuids([tableDataItem.uuid]);
           }}
           size="s"
           color="danger"
         />
       )}
 
-      {!!dataActions.actions?.length && (
+      {!!dataActions.filteredActions?.length && (
         <Menu
-          isOpen={isMenuOpen}
-          onClose={onMenuClose}
+          isOpen={isOpen}
+          onClose={onClose}
           placement="bottom-right"
           renderButton={ref => (
             <IconButton
               ref={ref}
               icon={faEllipsisVertical}
-              active={isMenuOpen}
+              active={isOpen}
               onClick={e => {
                 e.stopPropagation();
-                onMenuOpen();
+                onOpen();
               }}
               size="s"
             />
           )}
           items={
-            dataActions.actions?.map(action => ({
+            dataActions.actions?.(tableDataItem.item)?.map(action => ({
               label: action.label,
               hidden: !action.hasAccess,
+              disabled: action.disabled,
               onClick: () => {
-                action.onClick(tableDataItem);
-                onMenuClose();
+                action.onClick();
+                onClose();
               },
             })) ?? []
           }

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

@@ -28,7 +28,6 @@ export const TablePrint: FC = () => {
     paginationControl,
     printPopupControl,
     customHeader,
-    excludeColumnIds,
     filters,
     optionalNode,
     organization,
@@ -37,10 +36,7 @@ export const TablePrint: FC = () => {
   } = useMemo(() => (printData ?? {}) as IPrintData, [printData]);
   const { control, onOpen } = printPopupControl;
 
-  const cols = useMemo(
-    () => columns.filter(e => !['actions', 'select', excludeColumnIds].includes(e.id)),
-    [columns, excludeColumnIds]
-  );
+  const cols = useMemo(() => columns.filter(e => !e.hidden && !e.printHidden), [columns]);
 
   useEffect(() => {
     if (control.isOpen) {

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

@@ -0,0 +1,48 @@
+import { useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ILocalPopupControl } from '../../../../types/IPopup';
+import type { IReportTemplate } from '../../../../types/ITable';
+import { Dialog } from '../../../Dialog/Dialog';
+import { TextInput } from '../../../Inputs/TextInput';
+import { Checkbox } from '../../../Inputs/Checkbox';
+import { useTableContext } from '../../contexts/TableContext';
+
+interface Props {
+  control: ILocalPopupControl;
+}
+
+export const CreateTemplateDialog: FC<Props> = ({ control }) => {
+  const { t } = useTranslation();
+  const { templateData: { createItem } = {} } = useTableContext();
+
+  const [formData, setFormData] = useState<Partial<IReportTemplate>>({});
+
+  return (
+    <Dialog
+      title={t('CreateTemplateLong')}
+      control={control}
+      onFormSubmit={() => createItem?.onCreate(formData)}
+      footer={{
+        confirmButton: {
+          label: t('CreateTemplate'),
+          type: 'submit',
+        },
+      }}
+      onCloseCallback={() => setFormData({})}
+    >
+      <TextInput
+        label={t('TemplateName')}
+        required
+        value={formData.name}
+        setValue={name => setFormData({ ...formData, name })}
+      />
+      {createItem?.allowPublicCreate && (
+        <Checkbox
+          label={t('PublicTemplate')}
+          value={formData.isPublic}
+          setValue={isPublic => setFormData({ ...formData, isPublic })}
+        />
+      )}
+    </Dialog>
+  );
+};

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

@@ -1,4 +1,4 @@
-import { type FC } from 'react';
+import { useEffect, type FC } from 'react';
 import { IconButton } from '../../../Button/IconButton';
 import { useTranslation } from 'react-i18next';
 import { useTableContext } from '../../contexts/TableContext';
@@ -6,11 +6,30 @@ import { faBookmark, faBookmarkSlash, faTrashCan } from '../../../../assets/icon
 import { Pullover } from '../../../Pullover/Pullover';
 import { List } from '../../../List/List';
 import { setTemplateData } from '../../../../utils/tableUtils';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { CreateTemplateDialog } from './CreateTemplateDialog';
 
 export const TableTemplates: FC = () => {
   const { t } = useTranslation();
   const { templateData, columnData, filterData, sortData } = useTableContext();
 
+  const createTemplatePopupController = usePopupControl();
+
+  useEffect(() => {
+    if (templateData?.defaultTemplate) {
+      setTemplateData({
+        template: templateData.defaultTemplate,
+        columnData,
+        setFilters: e => {
+          filterData?.setSearchData(e);
+          filterData?.onSearch(e);
+        },
+        setSort: sortData?.setSort,
+      });
+    }
+    // eslint-disable-next-line
+  }, [templateData?.defaultTemplate]);
+
   if (!templateData) return null;
 
   return (
@@ -34,12 +53,12 @@ export const TableTemplates: FC = () => {
         footer={{
           confirmButton: {
             label: t('CreateTemplate'),
-            onClick: templateData.initiateCreate,
+            onClick: createTemplatePopupController.onOpen,
             splitActions: [
               {
                 label: t('CreateDefaultTemplate'),
                 icon: faBookmark,
-                onClick: templateData.initiateCreateDefault,
+                onClick: templateData.createItem.onCreateDefault,
               },
             ],
           },
@@ -86,7 +105,8 @@ export const TableTemplates: FC = () => {
           noItemsMessage={t('NoTemplatesAvailable')}
         />
       </Pullover>
-      {templateData.TemplateNode}
+      <CreateTemplateDialog control={createTemplatePopupController.control} />
+      {templateData.DeleteDialog}
     </>
   );
 };