@inceptionbg/iui 2.0.16 → 2.0.17

package/src/components/Header/Components/Notifications.tsx

@@ -0,0 +1,208 @@
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+  type FC,
+} from 'react';
+import { INotification } from '../../../types/INotifications';
+import { Menu } from '../../Menu/Menu';
+import { useIsMenuOpen } from '../../../hooks/useIsMenuOpen';
+import { IconButton } from '../../Button/IconButton';
+import { NotificationBadge } from '../../Badge/NotificationBadge';
+import { faBell } from '../../../assets/icons/duotone/faBell';
+import { faBell as faBellLight } from '../../../assets/icons/light/faBell';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import clsx from 'clsx';
+import { formatDateAndTime } from '../../../utils/dateUtils';
+import { faEnvelope } from '../../../assets/icons/light/faEnvelope';
+import { faEnvelopeDot } from '../../../assets/icons/solid/faEnvelopeDot';
+import { SearchInput } from '../../Inputs/SearchInput';
+import { Loader } from '../../Loader/Loader';
+import { ISelectData } from '../../../types/ISelect';
+import { faEllipsisVertical } from '../../../assets/icons';
+import { getNotificationValues } from '../../../utils/objectUtils';
+
+export interface INotificationsProps {
+  notificationCount: number;
+  notifications: INotification[];
+  isLoading: boolean;
+  menuControl: { isOpen: boolean; onClose: () => void; onOpen: () => void };
+  seen: boolean | null;
+  setSeen: Dispatch<SetStateAction<boolean | null>>;
+  markAsSeen: (uuid: string) => void;
+  markAllAsSeen: () => void;
+}
+
+export const Notifications: FC<INotificationsProps> = ({
+  notificationCount,
+  notifications = [],
+  isLoading,
+  menuControl,
+  seen,
+  setSeen,
+  markAsSeen,
+  markAllAsSeen,
+}) => {
+  const { t } = useTranslation();
+  const { isOpen, onClose, onOpen } = menuControl;
+  const {
+    isOpen: isOpenOptions,
+    onClose: onCloseOptions,
+    onOpen: onOpenOptions,
+  } = useIsMenuOpen();
+
+  const seenOptions: ISelectData[] = [
+    { label: t('NotificationsAll'), value: null },
+    { label: t('NotificationsUnread'), value: false },
+    { label: t('NotificationsRead'), value: true },
+  ];
+
+  const [filteredNotifications, setFilteredNotifications] = useState<INotification[]>([]);
+
+  useEffect(() => {
+    setFilteredNotifications(notifications);
+  }, [notifications]);
+
+  const onSearch = useCallback(
+    (e: string) =>
+      setFilteredNotifications(
+        !e
+          ? notifications
+          : notifications.filter(notification => {
+              const title = t(`NTitle${notification.event}`);
+              const description = t(`NContent${notification.event}`, {
+                ...getNotificationValues(t, notification.values),
+              });
+
+              const searchContent = `${title} ${description}`.toLowerCase();
+              const searchWords = e.toLowerCase().trim().split(/\s+/);
+
+              return searchWords.every(word => searchContent.includes(word));
+            })
+      ),
+    [notifications, t]
+  );
+
+  return (
+    <Menu
+      isOpen={isOpen}
+      onClose={onClose}
+      placement="bottom-right"
+      size="m"
+      className="header-user-menu"
+      renderButton={ref => (
+        <NotificationBadge
+          number={notificationCount}
+          className="header-btn-badge"
+          size="s"
+        >
+          <IconButton
+            ref={ref}
+            icon={!!notificationCount ? faBell : faBellLight}
+            onClick={onOpen}
+            className="header-button notification-button"
+            active={isOpen}
+            variant="solid"
+          />
+        </NotificationBadge>
+      )}
+    >
+      <div className="notifications">
+        <div className="notifications-content-header">
+          <h3>{t('Notifications')}</h3>
+          <SearchInput onSearch={onSearch} />
+        </div>
+        <div className="notifications-options">
+          <div className="flex gap-2">
+            {seenOptions.map(({ label, value }) => (
+              <div
+                key={label}
+                className={clsx('link fs-13', {
+                  inactive: seen !== value,
+                })}
+                onClick={() => setSeen(value)}
+              >
+                {label}
+              </div>
+            ))}
+          </div>
+          <Menu
+            isOpen={isOpenOptions}
+            onClose={onCloseOptions}
+            placement="bottom-right"
+            size="m"
+            renderButton={ref => (
+              <IconButton
+                ref={ref}
+                icon={faEllipsisVertical}
+                onClick={onOpenOptions}
+                className="header-button notification-button"
+                active={isOpenOptions}
+                size="s"
+              />
+            )}
+            items={[{ label: t('MarkAllAsRead'), onClick: markAllAsSeen }]}
+          />
+        </div>
+        <Loader isLoading={isLoading}>
+          <div className="notifications-container">
+            {!!filteredNotifications.length ? (
+              filteredNotifications.map(notification => (
+                <div
+                  key={notification.uuid}
+                  className={clsx('notification', { seen: notification.seen })}
+                >
+                  <div className="notification-header">
+                    <div>
+                      <p className="title">{t(`NTitle${notification.event}`)}</p>
+                      <p className="date">{formatDateAndTime(notification.createdAt)}</p>
+                    </div>
+                    <IconButton
+                      // tooltip={t('MarkAsRead')}
+                      icon={notification.seen ? faEnvelope : faEnvelopeDot}
+                      disabled={notification.seen}
+                      onClick={() => markAsSeen(notification.uuid)}
+                      size="s"
+                    />
+                  </div>
+                  <p className="desc">
+                    <Trans
+                      i18nKey={`NContent${notification.event}`}
+                      values={getNotificationValues(t, notification.values)}
+                      t={t}
+                      components={notification.values?.reduce(
+                        (obj, e) =>
+                          e.url
+                            ? {
+                                ...obj,
+                                [e.key]: (
+                                  <Link
+                                    to={e.url}
+                                    className="link"
+                                    onClick={() =>
+                                      !notification.seen && markAsSeen(notification.uuid)
+                                    }
+                                  />
+                                ),
+                              }
+                            : obj,
+                        {
+                          bold: <span className="bold" />,
+                        }
+                      )}
+                    />
+                  </p>
+                </div>
+              ))
+            ) : (
+              <p className="text-center fs-13 pt-2">{t('NoNewNotifications')}</p>
+            )}
+          </div>
+        </Loader>
+      </div>
+    </Menu>
+  );
+};

package/src/components/Header/Header.tsx

@@ -2,14 +2,14 @@ import { ComponentProps, FC, ReactNode } from 'react';
 import { UserMenu } from './Components/UserMenu';
 import { ModuleSelect } from './Components/ModuleSelect';
 import { IHeaderUserMenuProps } from '../../types/IHeader';
+import { INotificationsProps, Notifications } from './Components/Notifications';
 
 interface Props {
   customTitle?: string;
   modulesProps?: ComponentProps<typeof ModuleSelect>;
-  // actions: {
-  //   icon: IconDefinition;
-  // };
+  // actions: { icon: IconDefinition };
   userMenuProps: IHeaderUserMenuProps;
+  notificationsProps?: INotificationsProps;
   children?: ReactNode;
 }
 
@@ -17,6 +17,7 @@ export const Header: FC<Props> = ({
   customTitle,
   modulesProps,
   userMenuProps,
+  notificationsProps,
   children,
 }) => (
   <div className="iui-header">
@@ -24,7 +25,7 @@ export const Header: FC<Props> = ({
     {customTitle && <h3 className="ml-3">{customTitle}</h3>}
     <div className="flex gap-2 align-center">
       {children}
-      {/* {!hideNotifications && <Notifications />} */}
+      {notificationsProps && <Notifications {...notificationsProps} />}
       <UserMenu {...userMenuProps} />
     </div>
   </div>

package/src/components/Inputs/NumberInput.tsx

@@ -11,6 +11,7 @@ export interface INumberInputProps {
   placeholder?: string;
   endText?: string;
   isClearable?: boolean;
+  onClear?: () => void;
   helperText?: string;
   errorText?: string;
   error?: boolean;
@@ -32,6 +33,7 @@ export const NumberInput: FC<INumberInputProps> = ({
   placeholder,
   endText,
   isClearable,
+  onClear,
   helperText,
   errorText,
   error,
@@ -64,6 +66,7 @@ export const NumberInput: FC<INumberInputProps> = ({
       disabled={disabled}
       endText={endText}
       isClearable={isClearable}
+      onClear={onClear}
       placeholder={
         placeholder ? placeholder : decimalPlaces ? `0.${'0'.repeat(decimalPlaces)}` : '0'
       }

package/src/components/Inputs/Selects/components/SelectWrapper.tsx

@@ -68,34 +68,34 @@ export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef)
     formatOptionLabel,
   };
 
-  const renderSelect = () => {
-    switch (variant) {
-      case 'basic':
-        return <ReactSelect {...commonProps} options={props.options} />;
-      case 'async':
-        return (
-          <AsyncPaginate
-            {...commonProps}
-            loadOptions={props.loadOptions}
-            defaultOptions={props.defaultData ?? true}
-          />
-        );
-      case 'async-creatable':
-        return (
-          <AsyncCreatableSelect
-            {...commonProps}
-            loadOptions={props.loadOptions}
-            defaultOptions={props.defaultData ?? true}
-            onCreateOption={props.onCreate}
-            formatCreateLabel={(inputValue: string) => (
-              <p>{`${t('FreeText')} "${inputValue}"`}</p>
-            )}
-          />
-        );
-      default:
-        return null;
-    }
-  };
+  // const renderSelect = () => {
+  //   switch (variant) {
+  //     case 'basic':
+  //       return <ReactSelect {...commonProps} options={props.options} />;
+  //     case 'async':
+  //       return (
+  //         <AsyncPaginate
+  //           {...commonProps}
+  //           loadOptions={props.loadOptions}
+  //           defaultOptions={props.defaultData ?? true}
+  //         />
+  //       );
+  //     case 'async-creatable':
+  //       return (
+  //         <AsyncCreatableSelect
+  //           {...commonProps}
+  //           loadOptions={props.loadOptions}
+  //           defaultOptions={props.defaultData ?? true}
+  //           onCreateOption={props.onCreate}
+  //           formatCreateLabel={(inputValue: string) => (
+  //             <p>{`${t('FreeText')} "${inputValue}"`}</p>
+  //           )}
+  //         />
+  //       );
+  //     default:
+  //       return null;
+  //   }
+  // };
 
   return (
     <InputWrapper
@@ -109,7 +109,26 @@ export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef)
       minWidth={minWidth}
       heightAuto
     >
-      {renderSelect()}
+      {/* {renderSelect()} */}
+      {variant === 'async' ? (
+        <AsyncPaginate
+          {...commonProps}
+          loadOptions={props.loadOptions}
+          defaultOptions={props.defaultData ?? true}
+        />
+      ) : variant === 'async-creatable' ? (
+        <AsyncCreatableSelect
+          {...commonProps}
+          loadOptions={props.loadOptions}
+          defaultOptions={props.defaultData ?? true}
+          onCreateOption={props.onCreate}
+          formatCreateLabel={(inputValue: string) => (
+            <p>{`${t('FreeText')} "${inputValue}"`}</p>
+          )}
+        />
+      ) : (
+        <ReactSelect {...commonProps} options={props.options} />
+      )}
       {required && !disabled && (
         <input
           className="fake-input"

package/src/components/Loader/ProgressBar.tsx

@@ -27,7 +27,7 @@ export const ProgressBar: FC<Props> = ({ progress, label }) => {
           {
             '--progress-clip': `${now}%`,
             '--progress-text': `'${now}%'`,
-          } as CSSProperties
+          } as CSSProperties & { [key: string]: string }
         }
       >
         <div

package/src/components/Pullover/Pullover.tsx

@@ -13,6 +13,8 @@ import { onPopupKeyDown } from '../../utils/popupUtils';
 import { ILocalPopupControl } from '../../types/IPopup';
 import { Loader } from '../Loader/Loader';
 import { SplitButton } from '../Button/SplitButton';
+import { IconButton } from '../Button/IconButton';
+import { faXmark } from '../../assets/icons';
 
 interface Props {
   id?: string;
@@ -108,13 +110,16 @@ export const Pullover: FC<Props> = ({
               {header && (
                 <div className="pullover-header no-print">
                   <h3>{header.title}</h3>
-                  {header.onSearch && (
-                    <SearchInput
-                      ref={searchRef}
-                      onSearch={header.onSearch}
-                      className="search-input"
-                    />
-                  )}
+                  <div className="flex gap-2">
+                    {header.onSearch && (
+                      <SearchInput
+                        ref={searchRef}
+                        onSearch={header.onSearch}
+                        className="search-input"
+                      />
+                    )}
+                    <IconButton icon={faXmark} onClick={onClose} color="neutral" />
+                  </div>
                 </div>
               )}
               <ConditionalWrapper

package/src/components/Table/Table.tsx

@@ -155,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,
                                         }
                                       )}
@@ -249,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/src/components/Table/components/columns/TableColumnsEdit.tsx

@@ -20,7 +20,7 @@ export const TableColumnsEdit: FC = () => {
 
   const { t } = useTranslation();
   const {
-    columnData: { defaultColumns, setColumns },
+    columnData: { columns, setColumns },
   } = useTableContext();
   const { control, onClose, onOpen } = usePopupControl();
 
@@ -28,13 +28,13 @@ export const TableColumnsEdit: FC = () => {
     if (control.isOpen) {
       let hiddenCols: ITableColumn[] = [];
       let visibleCols: ITableColumn[] = [];
-      defaultColumns.forEach(col =>
+      columns.forEach(col =>
         !!col.hidden ? hiddenCols.push(col) : visibleCols.push(col)
       );
       setHidden(hiddenCols);
       setVisible(visibleCols);
     }
-  }, [control.isOpen, defaultColumns]);
+  }, [control.isOpen, columns]);
 
   const onDragEnd = ({ source, destination }: DropResult) => {
     if (!destination) return;
@@ -79,6 +79,7 @@ export const TableColumnsEdit: FC = () => {
         <Pullover
           control={control}
           header={{ title: t('Columns') }}
+          className="column-pullover"
           footer={{
             confirmButton: {
               label: t('Confirm'),
@@ -93,19 +94,14 @@ export const TableColumnsEdit: FC = () => {
               <div />
               <p className="bold ml-2">{t('SelectedColumns')}:</p>
 
-              {/* {withSearch && (
-                <> */}
               <SearchInput onSearch={setSearchHidden} />
               <div />
               <SearchInput onSearch={setSearchVisible} />
-              {/* </>
-              )} */}
-              <ColumnsList id="hidden" items={hidden} search={searchHidden} />
 
+              <ColumnsList id="hidden" items={hidden} search={searchHidden} />
               <div className="exchange-icon">
                 <FontAwesomeIcon icon={faArrowRightArrowLeft} />
               </div>
-
               <ColumnsList id="visible" items={visible} search={searchVisible} />
             </div>
           </div>

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

@@ -4,6 +4,7 @@ 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<{ columns: ITableColumn[] }> = ({ columns }) => {
   const { editable } = useTableContext();
@@ -20,7 +21,9 @@ export const TableEditRow: FC<{ columns: ITableColumn[] }> = ({ columns }) => {
   }, [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]);
 
@@ -47,20 +50,28 @@ export const TableEditRow: FC<{ columns: ITableColumn[] }> = ({ columns }) => {
     },
   };
 
-  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 => (
-        <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,
                 })
           }

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) {