@inceptionbg/iui 2.0.16 → 2.0.19

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,35 +68,6 @@ 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;
-    }
-  };
-
   return (
     <InputWrapper
       label={label}
@@ -109,7 +80,26 @@ export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef)
       minWidth={minWidth}
       heightAuto
     >
-      {renderSelect()}
+      {variant === 'async' ? (
+        <AsyncPaginate
+          {...commonProps}
+          loadOptions={props.loadOptions}
+          defaultOptions={props.defaultData ?? false}
+          cacheUniqs={props.refresh}
+        />
+      ) : variant === 'async-creatable' ? (
+        <AsyncCreatableSelect
+          {...commonProps}
+          loadOptions={props.loadOptions}
+          defaultOptions={props.defaultData ?? false}
+          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
@@ -147,34 +152,40 @@ export const Pullover: FC<Props> = ({
                 )}
 
                 {/* FOOTER */}
-                <div className={clsx('pullover-footer no-print', className)}>
-                  {footer?.additionalButton && (
+                {footer && (
+                  <div className={clsx('pullover-footer no-print', className)}>
+                    {footer.additionalButton && (
+                      <Button
+                        {...footer.additionalButton}
+                        disabled={
+                          footer.additionalButton.disabled || isFetching || isLoading
+                        }
+                        variant="simple"
+                        className="mr-auto"
+                      />
+                    )}
                     <Button
-                      {...footer.additionalButton}
-                      disabled={
-                        footer.additionalButton.disabled || isFetching || isLoading
-                      }
-                      variant="simple"
-                      className="mr-auto"
-                    />
-                  )}
-                  <Button
-                    label={t(footer ? 'Cancel' : 'Close')}
-                    variant="outlined"
-                    onClick={onClose}
-                    disabled={isFetching || isLoading}
-                  />
-                  {footer?.confirmButton && (
-                    <ConfirmButton
-                      {...footer.confirmButton}
-                      label={footer.confirmButton.label ?? t('Confirm')}
-                      disabled={footer.confirmButton.disabled || isFetching || isLoading}
-                      type={
-                        (footer.confirmButton.type ?? onFormSubmit) ? 'submit' : 'button'
-                      }
+                      label={t('Cancel')}
+                      variant="outlined"
+                      onClick={onClose}
+                      disabled={isFetching || isLoading}
                     />
-                  )}
-                </div>
+                    {footer.confirmButton && (
+                      <ConfirmButton
+                        {...footer.confirmButton}
+                        label={footer.confirmButton.label ?? t('Confirm')}
+                        disabled={
+                          footer.confirmButton.disabled || isFetching || isLoading
+                        }
+                        type={
+                          (footer.confirmButton.type ?? onFormSubmit)
+                            ? 'submit'
+                            : 'button'
+                        }
+                      />
+                    )}
+                  </div>
+                )}
               </ConditionalWrapper>
             </div>
           </div>

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

@@ -6,12 +6,12 @@ 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 +24,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 +34,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}
     </>
   );
 };