@inceptionbg/iui 2.0.14 → 2.0.16

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
@@ -186,7 +172,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 +183,7 @@ export const TableContent: FC = () => {
                   </>
                 ) : (
                   <tr>
-                    <td colSpan={columns.length}>{t('NoResults')}</td>
+                    <td colSpan={visibleColumns.length}>{t('NoResults')}</td>
                   </tr>
                 )}
               </tbody>
@@ -214,7 +200,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 +211,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'}

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

@@ -0,0 +1,59 @@
+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 {
+  id: 'hidden' | 'visible';
+  items: ITableColumn[];
+  search: string;
+}
+
+export const ColumnsList: FC<Props> = ({ id, items, search }) => {
+  const [filteredItems, setFilteredItems] = useState<ITableColumn[]>([]);
+
+  useEffect(() => {
+    if (search.length) {
+      setFilteredItems(
+        items.filter(e =>
+          (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">
+          {list.map(c => (
+            <Draggable key={c.id} draggableId={c.id} index={items.indexOf(c)}>
+              {({ innerRef, draggableProps, dragHandleProps }, snapshot) => (
+                <div
+                  className={`item ${snapshot.isDragging ? 'dragging' : ''}`}
+                  ref={innerRef}
+                  {...draggableProps}
+                  {...dragHandleProps}
+                  style={{
+                    ...draggableProps.style,
+                    top: 'unset',
+                    left: 'unset',
+                  }}
+                >
+                  {c.label}
+                  <FontAwesomeIcon icon={faGripDotsVertical} />
+                </div>
+              )}
+            </Draggable>
+          ))}
+          {placeholder}
+        </div>
+      )}
+    </Droppable>
+  );
+};

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

@@ -0,0 +1,116 @@
+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: { defaultColumns, setColumns },
+  } = useTableContext();
+  const { control, onClose, onOpen } = usePopupControl();
+
+  useEffect(() => {
+    if (control.isOpen) {
+      let hiddenCols: ITableColumn[] = [];
+      let visibleCols: ITableColumn[] = [];
+      defaultColumns.forEach(col =>
+        !!col.hidden ? hiddenCols.push(col) : visibleCols.push(col)
+      );
+      setHidden(hiddenCols);
+      setVisible(visibleCols);
+    }
+  }, [control.isOpen, defaultColumns]);
+
+  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') }}
+          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>
+
+              {/* {withSearch && (
+                <> */}
+              <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,12 @@
 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';
 
-export const TableEditRow: FC = () => {
-  const {
-    columnData: { columns },
-    editable,
-  } = useTableContext();
+export const TableEditRow: FC<{ columns: ITableColumn[] }> = ({ columns }) => {
+  const { editable } = useTableContext();
 
   const elementRef = useRef(null);
 
@@ -54,19 +51,16 @@ export const TableEditRow: FC = () => {
 
   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 => (
+        <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>
+      ))}
     </tr>
   );
 };

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

@@ -40,7 +40,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/contexts/TableContext.tsx

@@ -15,7 +15,6 @@ import {
   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 {
@@ -86,20 +85,13 @@ export const TableProvider = ({
     rowSelect,
   });
 
-  useLocalTableColumns({
-    columnData,
-    hasSelect: selectActions.length > 0,
-    data,
-    rowSelect,
-    hasItemActions: updatedDataActions.hasItemActions,
-  });
-
   const tableContextValue: ITableContext = {
     ...rest,
     data,
     dataActions: updatedDataActions,
     columnData,
     selectActions,
+    rowSelect,
   };
 
   if (editable) tableContextValue.editable = { ...editable, isAdding, setIsAdding };

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

@@ -1,33 +1,28 @@
-import { useEffect } from 'react';
-import { ITable, ITableColumn, ITableColumnsData } from '../../../../types/ITable';
+import { useMemo } from 'react';
+import { ITableColumn } from '../../../../types/ITable';
 import { useTranslation } from 'react-i18next';
 import { Checkbox } from '../../../Inputs/Checkbox';
+import { useTableContext } from '../../contexts/TableContext';
 
-interface Props {
-  columnData: ITableColumnsData;
-  hasSelect: boolean;
-  data: ITable['data'];
-  rowSelect: ITable['rowSelect'];
-  hasItemActions?: boolean;
-}
-
-export const useLocalTableColumns = ({
-  columnData: { defaultColumns, setColumns },
-  hasSelect,
-  data,
-  rowSelect,
-  hasItemActions,
-}: Props) => {
+export const useLocalTableColumns = () => {
   const { t } = useTranslation();
 
-  useEffect(() => {
-    const activeColumns = defaultColumns.filter(e => !e.hidden && !e.unavailable);
-    // const activeColumns = defaultColumns.filter(e => !e.unavailable);
+  const {
+    columnData: { columns },
+    selectActions,
+    data,
+    rowSelect,
+    dataActions: { hasItemActions } = {},
+  } = useTableContext();
+
+  const visibleColumns = useMemo(() => {
+    const hasSelect = rowSelect && selectActions.length > 0;
+    const filteredColumns = columns.filter(column => !column.hidden);
 
     let newCols: ITableColumn[] = [];
 
     // Select Column
-    if (hasSelect && rowSelect) {
+    if (hasSelect) {
       const selectableData = data.filter(e => !e.disableSelect);
       const selectedSome =
         !!rowSelect.selectedRows.size &&
@@ -57,7 +52,7 @@ export const useLocalTableColumns = ({
       newCols.push(selectColumn);
     }
 
-    newCols = newCols.concat(activeColumns);
+    newCols = newCols.concat(filteredColumns);
     hasItemActions &&
       newCols.push({
         id: 'actions',
@@ -66,6 +61,8 @@ export const useLocalTableColumns = ({
         className: 'actions-col',
       });
 
-    setColumns?.(newCols);
-  }, [defaultColumns, setColumns, hasSelect, data, rowSelect, hasItemActions, t]);
+    return newCols;
+  }, [columns, selectActions.length, data, rowSelect, hasItemActions, t]);
+
+  return { visibleColumns };
 };

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

@@ -1,28 +1,36 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useLayoutEffect, useMemo, useState } from 'react';
 import { ITableColumn, ITableColumnsData } from '../../../types/ITable';
 
 export interface ITableColumnsProps {
   defaultColumns: ITableColumn[];
   templateColumns?: ITableColumn[];
+  enableEdit?: boolean;
 }
 
 export const useTableColumns = ({
   defaultColumns,
   templateColumns,
+  enableEdit,
 }: ITableColumnsProps): ITableColumnsData => {
-  const [columns, setColumns] = useState<ITableColumn[]>(defaultColumns);
+  const [columns, setColumns] = useState<ITableColumn[]>([]);
 
-  useEffect(() => {
-    setColumns(defaultColumns);
-  }, [defaultColumns, templateColumns]);
+  const availableColumns = useMemo(
+    () => defaultColumns.filter(e => !e.unavailable),
+    [defaultColumns]
+  );
+
+  useLayoutEffect(() => {
+    setColumns(availableColumns);
+  }, [availableColumns, templateColumns]);
 
   const columnData = useMemo(
     () => ({
-      defaultColumns,
+      defaultColumns: availableColumns,
       columns,
-      setColumns,
+      setColumns: enableEdit ? setColumns : undefined,
     }),
-    [defaultColumns, columns]
+    [availableColumns, columns, enableEdit]
   );
+
   return columnData;
 };

package/src/components/Tabs/Tabs.tsx

@@ -36,6 +36,7 @@ export const Tabs: FC<Props> = ({
       <div className="iui-tabs">
         {filteredTabs.map(tab => (
           <div
+            id={tab.value}
             key={tab.value}
             className={clsx('iui-tab clickable', {
               selected: (control?.value || selected) === tab.value,

package/src/index.ts

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { ToastContainer } from 'react-toastify';
 
 import type { IFormWrapper } from './components/Wrappers/FormWrapper';

package/src/styles/components/_badge.scss

@@ -15,7 +15,7 @@
   padding: 0 4px;
   &.primary {
     color: var(--text-inverse);
-    border: 2px solid white;
+    border: 2px solid var(--background);
     background-color: var(--primary);
   }
   // SIZES

package/src/styles/components/_header.scss

@@ -118,13 +118,10 @@
       text-overflow: ellipsis;
     }
   }
-  .user-badge {
-    min-height: 10px;
-    max-height: 10px;
-    min-width: 10px;
-    max-width: 10px;
-    background: var(--danger);
-    border-radius: 50px;
+  .user-notif-badge {
+    border: 1px solid var(--primary);
+    background-color: var(--danger);
+    right: -5px;
   }
 }
 .header-user-menu {

package/src/styles/components/_list.scss

@@ -35,7 +35,7 @@
       cursor: default;
       opacity: 0.5;
     }
-    &:not(.disabled) {
+    &.clickable:not(.disabled) {
       cursor: pointer;
       &:hover {
         background-color: var(--neutral-hover);