@inceptionbg/iui 2.0.7 → 2.0.10

package/idea/{Table2 → Table}/Table.tsx

@@ -15,14 +15,12 @@ import { TableOptions } from './Components/TableOptions';
 import { useTranslation } from 'react-i18next';
 import { Checkbox } from '../Inputs/Checkbox';
 import { Menu } from '../Menu/Menu';
-import { faEllipsisVertical } from '../../icons/solid/faEllipsisVertical';
+import { faEllipsisVertical } from '../../assets/icons/solid/faEllipsisVertical';
 import { MenuItem } from '../Menu/MenuItem';
 import { Button } from '../Button/Button';
 import { useTableKeyboard } from './hooks/useTableKeyboard';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus } from '../../icons/solid/faPlus';
-
-import './table.scss';
+import { faPlus } from '../../assets/icons/solid/faPlus';
 
 export const Table: FC<ITable> = ({
   columns,
@@ -30,7 +28,7 @@ export const Table: FC<ITable> = ({
   withColumnsSearch,
   customHeader,
   data: tableData,
-  totals,
+  sumRows,
   isLoading,
   headerWrap,
   serverSidePagination,
@@ -47,7 +45,8 @@ export const Table: FC<ITable> = ({
   customPrintData,
   templates,
   additionsalOptions,
-  selectedOptions,
+  rowSelect,
+  rowHeight = 'm',
   maxHeight,
   editable,
   keyboard,
@@ -59,7 +58,6 @@ export const Table: FC<ITable> = ({
   const [extendedRow, setExtendedRow] = useState('');
   const [editableData, setEditableData] = useState<object>({});
   const [isAdding, setIsAdding] = useState(false);
-  const [selected, setSelected] = useState(new Set<string>());
   const [selectedActionOpen, setSelectedActionOpen] = useState(false);
   const [activeSelectOptions, setActiveSelectOptions] = useState<ITableSelectedActions[]>(
     []
@@ -68,16 +66,21 @@ export const Table: FC<ITable> = ({
   const { t } = useTranslation();
 
   const pagination = {
-    limit: serverSidePagination?.limit || limit,
-    offset: serverSidePagination?.offset || offset,
-    setLimit: serverSidePagination?.setLimit || setLimit,
-    setOffset: serverSidePagination?.setOffset || setOffset,
-    totalRows: serverSidePagination?.totalRows || tableData.length,
+    limit: serverSidePagination?.limit ?? limit,
+    offset: serverSidePagination?.offset ?? offset,
+    setLimit: serverSidePagination?.setLimit ?? setLimit,
+    setOffset: serverSidePagination?.setOffset ?? setOffset,
+    totalRows: serverSidePagination?.totalRows ?? tableData.length,
   };
 
   const focusedRow = useTableKeyboard({
     enabled: !!keyboard?.enabled,
     rows: data,
+    selected: {
+      enabled: !!rowSelect && activeSelectOptions.length > 0,
+      rows: rowSelect?.selectedRows ?? new Set<string>(),
+      resetSelected: () => rowSelect?.setSelectedRows(new Set<string>()),
+    },
     actions: {
       moveDisabled: !!keyboard?.actions?.moveDisabled || isAdding,
       ...keyboard?.actions,
@@ -114,62 +117,79 @@ export const Table: FC<ITable> = ({
             }
           },
         },
+        {
+          key: ' ',
+          isActive: activeSelectOptions.length > 0 && !!focusedRow?.uuid,
+          onAction: () => {
+            const rowUuid = focusedRow?.uuid!;
+            const isRowSelected = rowSelect?.selectedRows.has(rowUuid);
+            rowSelect?.setSelectedRows(oldSet => {
+              const newSet = new Set(oldSet);
+              newSet[isRowSelected ? 'delete' : 'add'](rowUuid);
+              return newSet;
+            });
+          },
+        },
       ],
     },
   });
 
   // Set Active Select Options
   useEffect(() => {
-    selectedOptions?.actions.length &&
-      setActiveSelectOptions(selectedOptions.actions.filter(e => !e.hidden) || []);
-  }, [selectedOptions?.actions]);
+    rowSelect?.actions.length &&
+      setActiveSelectOptions(rowSelect.actions.filter(e => !e.hidden) || []);
+  }, [rowSelect?.actions]);
 
-  // Reset Selected Rows
-  useEffect(() => {
-    if (selectedOptions?.resetSelect) {
-      setSelected(new Set<string>());
-    }
-  }, [selectedOptions?.resetSelect]);
+  useEffect(
+    () => {
+      // Active Column
+      const activeColumns = columns.filter(e => !e.hidden && !e.unavailable);
 
-  useEffect(() => {
-    // Active Column
-    const activeColumns = columns.filter(e => !e.hidden && !e.unavailable);
-
-    // Select Column
-    let selectCol;
-    if (activeSelectOptions.length) {
-      const selectableData = data.filter(e => !e.disableSelect);
-      const selectedSome =
-        !!selected.size && selectableData.some(e => !selected.has(e.uuid));
-      const selectedAll = !!selected.size && !selectedSome;
-      selectCol = {
-        id: 'select',
-        label: (
-          <Checkbox
-            value={selectedSome ? 'middle' : selectedAll}
-            // label={`${selected.size}`}
-            setValue={e => {
-              selectedAll
-                ? setSelected(new Set())
-                : setSelected(oldValue => {
-                    let newSet = new Set(oldValue);
-                    selectableData.forEach(e => newSet.add(e.uuid!));
-                    return newSet;
-                  });
-            }}
-          />
-        ),
-        width: '50px',
-      };
-    }
+      // Select Column
+      let selectCol;
+      if (rowSelect && activeSelectOptions.length > 0) {
+        const selectableData = data.filter(e => !e.disableSelect);
+        const selectedSome =
+          !!rowSelect.selectedRows.size &&
+          selectableData.some(e => !rowSelect.selectedRows.has(e.uuid));
+        const selectedAll = !!rowSelect.selectedRows.size && !selectedSome;
+        selectCol = {
+          id: 'select',
+          label: (
+            <Checkbox
+              value={selectedSome ? 'middle' : selectedAll}
+              // label={`${selected.size}`}
+              setValue={() => {
+                selectedAll
+                  ? rowSelect.setSelectedRows(new Set<string>())
+                  : rowSelect.setSelectedRows(oldValue => {
+                      let newSet = new Set(oldValue);
+                      selectableData.forEach(e => newSet.add(e.uuid!));
+                      return newSet;
+                    });
+              }}
+            />
+          ),
+          width: '50px',
+        };
+      }
 
-    let newCols: ITableColumn[] = [];
+      let newCols: ITableColumn[] = [];
 
-    selectCol && newCols.push(selectCol);
-    newCols = newCols.concat(activeColumns);
+      selectCol && newCols.push(selectCol);
+      newCols = newCols.concat(activeColumns);
 
-    setCols(newCols);
-  }, [columns, editable, selected, activeSelectOptions, serverSidePagination]);
+      setCols(newCols);
+    },
+    // eslint-disable-next-line
+    [
+      columns,
+      editable,
+      rowSelect?.selectedRows,
+      activeSelectOptions,
+      serverSidePagination,
+    ]
+  );
 
   useEffect(() => {
     // const data = editable
@@ -193,15 +213,16 @@ export const Table: FC<ITable> = ({
         ? tableData
         : tableData.slice(offset * limit, offset * limit + limit);
 
-    activeSelectOptions.length &&
+    rowSelect &&
+      activeSelectOptions.length > 0 &&
       data.map(
         e =>
           (e.cells.select = {
             value: (
               <Checkbox
-                value={selected.has(e.uuid!)}
+                value={rowSelect.selectedRows.has(e.uuid!)}
                 setValue={checked => {
-                  setSelected(oldSet => {
+                  rowSelect.setSelectedRows(oldSet => {
                     const newSet = new Set(oldSet);
                     checked ? newSet.add(e.uuid!) : newSet.delete(e.uuid!);
                     return newSet;
@@ -214,13 +235,25 @@ export const Table: FC<ITable> = ({
           })
       );
     setData(data);
-  }, [tableData, limit, offset, selected, activeSelectOptions, serverSidePagination]);
+  }, [
+    tableData,
+    limit,
+    offset,
+    rowSelect?.selectedRows,
+    activeSelectOptions,
+    serverSidePagination,
+    rowSelect,
+  ]);
 
   const EditableRow = editable?.EditableRow;
 
   return (
     <Loader isLoading={!!isLoading}>
-      <div className={clsx('iui-table', className, { 'pb-3': data.length === 0 })}>
+      <div
+        className={clsx('iui-table', className, {
+          'pb-3': data.length === 0,
+        })}
+      >
         <div className="flex column gap-2">
           {(!!filterData ||
             !!sortData ||
@@ -243,34 +276,37 @@ export const Table: FC<ITable> = ({
             />
           )}
           {/* ////// SELECT ////// */}
-          {!!activeSelectOptions?.length && (
+          {!!rowSelect && activeSelectOptions.length > 0 && (
             <div className="flex gap-2 align-center pl-3">
-              <p className="fs-12">{`${t('Selected')}: ${selected.size}`}</p>
+              <p className="fs-12">{`${t('Selected')}: ${
+                rowSelect.selectedRows.size
+              }`}</p>
               <Menu
                 isOpen={selectedActionOpen}
                 onClose={() => setSelectedActionOpen(false)}
-                placementX="left"
+                placement="bottom-left"
                 renderButton={ref => (
                   <Button
                     ref={ref}
                     label={t('Actions')}
                     icon={faEllipsisVertical}
                     active={selectedActionOpen}
-                    disabled={!selected.size}
+                    disabled={!rowSelect.selectedRows.size}
                     onClick={() => setSelectedActionOpen(!selectedActionOpen)}
                     size="s"
                   />
                 )}
               >
-                {activeSelectOptions?.map(action => (
+                {activeSelectOptions.map(action => (
                   <MenuItem
                     key={action.label}
                     label={action.label}
                     disabled={action.disabled}
                     onClick={() => {
-                      action.onClick!(selected);
+                      action.onClick!(rowSelect.selectedRows);
                       setSelectedActionOpen(false);
-                      action.clearSelected && setSelected(new Set<string>());
+                      action.clearSelected &&
+                        rowSelect.setSelectedRows(new Set<string>());
                     }}
                   />
                 ))}
@@ -278,10 +314,7 @@ export const Table: FC<ITable> = ({
             </div>
           )}
         </div>
-        <div
-          className="table-container"
-          // style={{ maxHeight }}
-        >
+        <div className="table-container" style={{ maxHeight }}>
           <ConditionalWrapper
             condition={!!editable}
             wrapper={children => (
@@ -303,7 +336,7 @@ export const Table: FC<ITable> = ({
               </form>
             )}
           >
-            {/* <table className="full-width">
+            <table className="full-width">
               <HeaderTable
                 columns={cols}
                 headerWrap={headerWrap}
@@ -311,7 +344,7 @@ export const Table: FC<ITable> = ({
                 sticky={!!maxHeight}
               />
               <tbody
-                className={hideFooter && !showLastBorder ? 'no-last-border' : undefined}
+                className={clsx({ 'no-last-border': hideFooter && !showLastBorder })}
               >
                 {data.length ? (
                   <>
@@ -321,9 +354,9 @@ export const Table: FC<ITable> = ({
                         !row.extendable.isLoading &&
                         extendedRow === row.uuid;
                       return (
-                        <Fragment key={row.uuid}> */}
-            {/* ////// EDITABLE ROW ////// */}
-            {/* {!!EditableRow &&
+                        <Fragment key={row.uuid}>
+                          {/* ////// EDITABLE ROW ////// */}
+                          {!!EditableRow &&
                           row.uuid === editable?.selectedItem?.uuid &&
                           editable.setSelectedItem ? (
                             <EditableRow
@@ -380,13 +413,18 @@ export const Table: FC<ITable> = ({
                                             }
                                           : undefined
                                       }
-                                      className={clsx(column.color, cell?.className, {
-                                        link: cell?.link,
-                                        'p-0': !cell?.value && cell?.value !== 0,
-                                        'clickable-column': cell?.onClick,
-                                        'word-break': column.break,
-                                        'no-border': isExtended,
-                                      })}
+                                      className={clsx(
+                                        column.color,
+                                        cell?.className,
+                                        rowHeight,
+                                        {
+                                          link: cell?.link,
+                                          'p-0': !cell?.value && cell?.value !== 0,
+                                          'clickable-column': cell?.onClick,
+                                          'word-break': column.break,
+                                          'no-border': isExtended,
+                                        }
+                                      )}
                                       colSpan={cell?.span}
                                     >
                                       {cell?.value}
@@ -395,11 +433,13 @@ export const Table: FC<ITable> = ({
                                 );
                               })}
                             </tr>
-                          )} */}
-            {/* ////// EXTENDABLE ROW ////// */}
-            {/* {isExtended && (
+                          )}
+                          {/* ////// EXTENDABLE ROW ////// */}
+                          {isExtended && (
                             <tr>
-                              <td colSpan={cols.length}>{row.extendable!.element}</td>
+                              <td colSpan={cols.length} className={rowHeight}>
+                                {row.extendable!.element}
+                              </td>
                             </tr>
                           )}
                         </Fragment>
@@ -413,6 +453,10 @@ export const Table: FC<ITable> = ({
                     </td>
                   </tr>
                 )}
+              </tbody>
+              <tfoot
+              // className="sticky-footer"
+              >
                 {!!EditableRow &&
                   !editable.selectedItem &&
                   !editable.addDisabled &&
@@ -426,8 +470,11 @@ export const Table: FC<ITable> = ({
                       }`}
                       onClick={() => setIsAdding(true)}
                     >
-                      <td className="text-center" colSpan={cols.length}>
-                        <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
+                      <td className={`text-center ${rowHeight}`} colSpan={columns.length}>
+                        <div className="flex center gap-2">
+                          <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
+                          <p>{editable.addLabel || t('AddItem')}</p>
+                        </div>
                       </td>
                     </tr>
                   ) : (
@@ -443,202 +490,24 @@ export const Table: FC<ITable> = ({
                       inputFocusRef={editable.inputFocusRef}
                     />
                   ))}
-                {!!totals && !!data.length && (
-                  <tr>
-                    {cols.map(({ id: columnId }) => (
-                      <td
-                        key={columnId}
-                        align={totals.cells[columnId]?.align || 'right'}
-                        colSpan={totals.cells[columnId]?.span}
-                      >
-                        <strong>{totals.cells[columnId]?.value}</strong>
-                      </td>
-                    ))}
-                  </tr>
-                )}
-              </tbody>
-            </table> */}
-
-            <div className="grid-table">
-              <HeaderTable
-                columns={cols}
-                headerWrap={headerWrap}
-                customHeader={customHeader}
-                // sticky={!!maxHeight}
-              />
-              <div>
-                <tbody
-                  className={clsx({
-                    'no-last-border': hideFooter && !showLastBorder,
-                  })}
-                  style={{ maxHeight }}
-                >
-                  {data.length ? (
-                    <>
-                      {data.map(row => {
-                        const isExtended =
-                          row.extendable &&
-                          !row.extendable.isLoading &&
-                          extendedRow === row.uuid;
-                        return (
-                          <Fragment key={row.uuid}>
-                            {/* ////// EDITABLE ROW ////// */}
-                            {!!EditableRow &&
-                            row.uuid === editable?.selectedItem?.uuid &&
-                            editable.setSelectedItem ? (
-                              <EditableRow
-                                columns={cols}
-                                data={editableData}
-                                setData={setEditableData}
-                                item={editable.selectedItem}
-                                clearItem={() => editable.setSelectedItem!(null)}
-                                defaultDataValue={editable.defaultDataValue}
-                                inputFocusRef={editable.inputFocusRef}
-                              />
-                            ) : (
-                              ////// REGULAR ROW //////
-                              <tr
-                                data-id={row.uuid}
-                                className={clsx('row', row.className, {
-                                  selected:
-                                    !!selectedRowUuid && selectedRowUuid === row.uuid,
-                                  clickable: !!row.onRowClick || !!row.extendable,
-                                  focused: !!focusedRow && focusedRow.uuid === row.uuid,
-                                  loading: row.extendable?.isLoading,
-                                })}
-                                onClick={e => {
-                                  row.onRowClick && row.onRowClick(e);
-                                  row.extendable &&
-                                    setExtendedRow(
-                                      extendedRow === row.uuid ? '' : row.uuid
-                                    );
-                                }}
-                              >
-                                {cols.map(column => {
-                                  const cell = row.cells[column.id];
-                                  return (
-                                    <Tooltip
-                                      key={column.id}
-                                      label={cell?.tooltip!}
-                                      position="top"
-                                      disabled={!cell?.tooltip}
-                                    >
-                                      <td
-                                        data-th={
-                                          column.id === 'select'
-                                            ? t('Selected') + ':'
-                                            : column.label
-                                            ? column.label + ': '
-                                            : '/'
-                                        }
-                                        style={
-                                          column.minWidth
-                                            ? { minWidth: column.minWidth }
-                                            : column.width
-                                            ? { width: column.width }
-                                            : undefined
-                                        }
-                                        align={cell?.align || column.align}
-                                        onClick={
-                                          cell?.onClick || cell?.unclickable
-                                            ? e => {
-                                                e.stopPropagation();
-                                                cell?.onClick && cell?.onClick!(e);
-                                              }
-                                            : undefined
-                                        }
-                                        className={clsx(column.color, cell?.className, {
-                                          link: cell?.link,
-                                          'p-0': !cell?.value && cell?.value !== 0,
-                                          'clickable-column': cell?.onClick,
-                                          'word-break': column.break,
-                                          'no-border': isExtended,
-                                        })}
-                                        colSpan={cell?.span}
-                                      >
-                                        {cell?.value}
-                                      </td>
-                                    </Tooltip>
-                                  );
-                                })}
-                              </tr>
-                            )}
-                            {/* ////// EXTENDABLE ROW ////// */}
-                            {isExtended && (
-                              <tr>
-                                <td colSpan={cols.length}>{row.extendable!.element}</td>
-                              </tr>
-                            )}
-                          </Fragment>
-                        );
-                      })}
-                    </>
-                  ) : (
-                    <tr>
-                      <td className="no-border" colSpan={cols.length}>
-                        {t('NoResults')}
-                      </td>
-                    </tr>
-                  )}
-                  {!!EditableRow &&
-                    !editable.selectedItem &&
-                    !editable.addDisabled &&
-                    // TO DO -> Remove keyboard condition to enable this for every table
-                    (keyboard?.enabled && !isAdding ? (
-                      ////// NEW ITEM ROW //////
-                      <tr
-                        data-id="add"
-                        className={`clickable${
-                          focusedRow?.uuid === 'add' ? ' focused' : ''
-                        }`}
-                        onClick={() => setIsAdding(true)}
-                      >
-                        {/* <td
-                        className="justify-center"
-                        // colSpan={cols.length}
-                        style={{
-                          gridColumn: `span ${cols.length}`,
-                        }}
-                      >
-                        <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
-                      </td> */}
-                      </tr>
-                    ) : (
-                      <EditableRow
-                        columns={cols}
-                        data={editableData}
-                        setData={setEditableData}
-                        defaultDataValue={editable.defaultDataValue}
-                        clearItem={() => {
-                          editable.setSelectedItem?.(null);
-                          isAdding && setIsAdding(false);
-                        }}
-                        inputFocusRef={editable.inputFocusRef}
-                      />
-                    ))}
-                  {!!totals && !!data.length && (
-                    <tr>
-                      {cols.map(({ id: columnId, ...column }) => (
+                {!!sumRows &&
+                  !!data.length &&
+                  sumRows.map(row => (
+                    <tr key={row.uuid}>
+                      {cols.map(({ id: columnId }) => (
                         <td
                           key={columnId}
-                          align={totals.cells[columnId]?.align || 'right'}
-                          colSpan={totals.cells[columnId]?.span}
-                          style={{
-                            minWidth: column.minWidth,
-                            width: column.width,
-                            gridColumn: totals.cells[columnId]?.span
-                              ? `span ${totals.cells[columnId].span}`
-                              : undefined,
-                          }}
+                          align={row.cells[columnId]?.align || 'right'}
+                          colSpan={row.cells[columnId]?.span}
+                          className={rowHeight}
                         >
-                          <strong>{totals.cells[columnId]?.value}</strong>
+                          <strong>{row.cells[columnId]?.value}</strong>
                         </td>
                       ))}
                     </tr>
-                  )}
-                </tbody>
-              </div>
-            </div>
+                  ))}
+              </tfoot>
+            </table>
           </ConditionalWrapper>
         </div>
         {!hideFooter &&
@@ -649,6 +518,7 @@ export const Table: FC<ITable> = ({
               pagination={pagination}
               footerAction={footerAction}
               noTotalRows={noTotalRows}
+              dataLength={data.length}
             />
           )}
       </div>

package/idea/Table/hooks/useDefaultTemplate.ts

@@ -0,0 +1,20 @@
+// import { useEffect, useState } from 'react';
+// import { getDefaultReportTemplate } from '../Components/Templates/repo/TemplateRepo';
+// import { IReportTemplate } from '../../../types/ITable';
+
+export const useDefaultTemplate = (identifier?: string) => {
+  //   const [template, setTemplate] = useState<IReportTemplate | null>(null);
+  //   const [isLoading, setIsLoading] = useState(true);
+  //   useEffect(() => {
+  //     if (identifier) {
+  //       getDefaultReportTemplate(identifier)
+  //         .then(setTemplate)
+  //         .catch(() => {})
+  //         .finally(() => setIsLoading(false));
+  //     }
+  //   }, [identifier]);
+  //   return {
+  //     defaultTemplate: template,
+  //     isLoadingDefaultTemplate: !!identifier && isLoading,
+  //   };
+};

package/{src/components → idea}/Table/hooks/useTableKeyboard.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { ITableDataItem } from '../../../types/ITable';
 import { IKeyboardAction, ITableKeyboardActionsProp } from '../../../types/IKeyboard';
 import { useDialogObserver } from '../../Dialog/hooks/useDialogObserver';
-import { scrollToRow } from '../../../utils/TableUtils';
+import { scrollToRow } from '../../../utils/tableUtils';
 
 export const useTableKeyboard = ({
   enabled,
@@ -73,7 +73,6 @@ export const useTableKeyboard = ({
           {
             key: 'Escape',
             disabled: !focusedRow && !isAdding,
-            // isActive: !!focusedRow || !!isAdding,
             onAction: () =>
               isAdding
                 ? actions.add?.setIsAdding(false)

package/idea/Table/hooks/useTableSelect.ts

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export const useTableSelect = () => {
+  const [selectedRows, setSelectedRows] = useState(new Set<string>());
+
+  return {
+    selectedRows,
+    setSelectedRows,
+    resetSelectedRows: () => setSelectedRows(new Set<string>()),
+  };
+};