@inceptionbg/iui 2.0.24 → 2.0.26

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

@@ -1,58 +1,58 @@
-import type { FC } from 'react';
-import type { ILocalPopupControl } from '../../../../types/IPopup';
-import type { IReportTemplate, ITableTemplateData } from '../../../../types/ITable';
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Dialog } from '../../../Dialog/Dialog';
-import { Checkbox } from '../../../Inputs/Checkbox';
-import { TextInput } from '../../../Inputs/TextInput';
-
-interface Props {
-  control: ILocalPopupControl;
-  createItem: ITableTemplateData['createItem'];
-  title?: string;
-}
-
-export const CreateTemplateDialog: FC<Props> = ({ control, createItem, title }) => {
-  const { t } = useTranslation();
-
-  const [formData, setFormData] = useState<Partial<IReportTemplate>>({});
-  const nameInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (control.isOpen) {
-      nameInputRef.current?.focus();
-    }
-  }, [control.isOpen]);
-
-  return (
-    <Dialog
-      title={title ?? t('CreateTemplateLong')}
-      control={control}
-      onFormSubmit={() => createItem.onCreate(formData)}
-      footer={{
-        confirmButton: {
-          label: t('CreateTemplate'),
-          type: 'submit',
-        },
-      }}
-      classNameContent="pt-2"
-      onCloseCallback={() => setFormData({})}
-    >
-      <TextInput
-        ref={nameInputRef}
-        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>
-  );
-};
+import type { FC } from 'react';
+import type { ILocalPopupControl } from '../../../../types/IPopup';
+import type { IReportTemplate, ITableTemplateData } from '../../../../types/ITable';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../../Dialog/Dialog';
+import { Checkbox } from '../../../Inputs/Checkbox';
+import { TextInput } from '../../../Inputs/TextInput';
+
+interface Props {
+  control: ILocalPopupControl;
+  createItem: ITableTemplateData['createItem'];
+  title?: string;
+}
+
+export const CreateTemplateDialog: FC<Props> = ({ control, createItem, title }) => {
+  const { t } = useTranslation();
+
+  const [formData, setFormData] = useState<Partial<IReportTemplate>>({});
+  const nameInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (control.isOpen) {
+      nameInputRef.current?.focus();
+    }
+  }, [control.isOpen]);
+
+  return (
+    <Dialog
+      title={title ?? t('CreateTemplateLong')}
+      control={control}
+      onFormSubmit={() => createItem.onCreate(formData)}
+      footer={{
+        confirmButton: {
+          label: t('CreateTemplate'),
+          type: 'submit',
+        },
+      }}
+      classNameContent="pt-2"
+      onCloseCallback={() => setFormData({})}
+    >
+      <TextInput
+        ref={nameInputRef}
+        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,65 +1,65 @@
-import type { FC } from 'react';
-import type { IReportTemplate } from '../../../../types/ITable';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { faBookmark } from '../../../../assets/icons';
-import { setTemplateData } from '../../../../utils/tableUtils';
-import { IconButton } from '../../../Button/IconButton';
-import { useTableContext } from '../../contexts/TableContext';
-import { TemplatesPullover } from './TemplatesPullover';
-
-export const TableTemplates: FC = () => {
-  const { t } = useTranslation();
-  const { templateData, columnData, filterData, sortData } = useTableContext();
-
-  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 (
-    <>
-      <IconButton
-        tooltip={t('Templates')}
-        icon={faBookmark}
-        active={templateData.popupController.control.isOpen}
-        onClick={templateData.popupController.onOpen}
-        size="s"
-        variant="outlined"
-      />
-      <TemplatesPullover
-        templateData={templateData}
-        onResetTemplate={() => {
-          columnData?.setColumns?.(columnData.defaultColumns);
-          filterData?.setSearchData(filterData.defaultSearch ?? {});
-          filterData?.onSearch(filterData.defaultSearch ?? {});
-          sortData?.setSort('');
-          templateData.popupController.onClose();
-        }}
-        onItemClick={(item: IReportTemplate) => {
-          setTemplateData({
-            template: item,
-            columnData,
-            setFilters: e => {
-              filterData?.setSearchData(e);
-              filterData?.onSearch(e);
-            },
-            setSort: sortData?.setSort,
-          });
-        }}
-      />
-    </>
-  );
-};
+import type { FC } from 'react';
+import type { IReportTemplate } from '../../../../types/ITable';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { faBookmark } from '../../../../assets/icons';
+import { setTemplateData } from '../../../../utils/tableUtils';
+import { IconButton } from '../../../Button/IconButton';
+import { useTableContext } from '../../contexts/TableContext';
+import { TemplatesPullover } from './TemplatesPullover';
+
+export const TableTemplates: FC = () => {
+  const { t } = useTranslation();
+  const { templateData, columnData, filterData, sortData } = useTableContext();
+
+  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 (
+    <>
+      <IconButton
+        tooltip={t('Templates')}
+        icon={faBookmark}
+        active={templateData.popupController.control.isOpen}
+        onClick={templateData.popupController.onOpen}
+        size="s"
+        variant="outlined"
+      />
+      <TemplatesPullover
+        templateData={templateData}
+        onResetTemplate={() => {
+          columnData?.setColumns?.(columnData.defaultColumns);
+          filterData?.setSearchData(filterData.defaultSearch ?? {});
+          filterData?.onSearch(filterData.defaultSearch ?? {});
+          sortData?.setSort('');
+          templateData.popupController.onClose();
+        }}
+        onItemClick={(item: IReportTemplate) => {
+          setTemplateData({
+            template: item,
+            columnData,
+            setFilters: e => {
+              filterData?.setSearchData(e);
+              filterData?.onSearch(e);
+            },
+            setSort: sortData?.setSort,
+          });
+        }}
+      />
+    </>
+  );
+};

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

@@ -1,88 +1,88 @@
-import type { FC } from 'react';
-import type { IReportTemplate, ITableTemplateData } from '../../../../types/ITable';
-import { useTranslation } from 'react-i18next';
-import { faBookmark, faBookmarkSlash, faTrashCan } from '../../../../assets/icons';
-import { usePopupControl } from '../../../../hooks/usePopupControl';
-import { List } from '../../../List/List';
-import { Pullover } from '../../../Pullover/Pullover';
-import { CreateTemplateDialog } from './CreateTemplateDialog';
-
-interface Props {
-  templateData: ITableTemplateData;
-  onItemClick: (item: IReportTemplate) => void;
-  onResetTemplate?: () => void;
-  createDialogTitle?: string;
-  hideDefaultTemplateOption?: boolean;
-}
-
-export const TemplatesPullover: FC<Props> = ({
-  templateData,
-  onItemClick,
-  onResetTemplate,
-  createDialogTitle,
-  hideDefaultTemplateOption,
-}) => {
-  const { t } = useTranslation();
-  const createTemplatePopupController = usePopupControl();
-
-  return (
-    <>
-      <Pullover
-        isLoading={templateData.isLoading}
-        isFetching={templateData.isFetching}
-        control={templateData.popupController.control}
-        header={{
-          title: t('Templates'),
-          onSearch: templateData.setSearch,
-        }}
-        footer={{
-          confirmButton: {
-            label: t('CreateTemplate'),
-            onClick: createTemplatePopupController.onOpen,
-            splitActions: [
-              {
-                label: t('CreateDefaultTemplate'),
-                icon: faBookmark,
-                onClick: templateData.createItem.onCreateDefault,
-                hidden: hideDefaultTemplateOption,
-              },
-            ],
-          },
-          additionalButton: onResetTemplate && {
-            label: t('ResetTemplate'),
-            icon: faBookmarkSlash,
-            onClick: onResetTemplate,
-          },
-        }}
-        onCloseCallback={() => templateData.setSearch?.('')}
-        size="w600"
-      >
-        <List
-          items={templateData.items.map(item => ({
-            id: item.uuid,
-            label: item.name,
-            desc: item.isPublic ? t('PublicTemplate') : t('PrivateTemplate'),
-            onClick: () => {
-              onItemClick(item);
-              templateData.popupController.onClose();
-            },
-            actions: [
-              {
-                icon: faTrashCan,
-                onClick: () => templateData.setItemToDeleteUuids([item.uuid]),
-                color: 'danger',
-              },
-            ],
-          }))}
-          noItemsMessage={t('NoTemplatesAvailable')}
-        />
-      </Pullover>
-      <CreateTemplateDialog
-        control={createTemplatePopupController.control}
-        createItem={templateData.createItem}
-        title={createDialogTitle}
-      />
-      {templateData.DeleteDialog}
-    </>
-  );
-};
+import type { FC } from 'react';
+import type { IReportTemplate, ITableTemplateData } from '../../../../types/ITable';
+import { useTranslation } from 'react-i18next';
+import { faBookmark, faBookmarkSlash, faTrashCan } from '../../../../assets/icons';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { List } from '../../../List/List';
+import { Pullover } from '../../../Pullover/Pullover';
+import { CreateTemplateDialog } from './CreateTemplateDialog';
+
+interface Props {
+  templateData: ITableTemplateData;
+  onItemClick: (item: IReportTemplate) => void;
+  onResetTemplate?: () => void;
+  createDialogTitle?: string;
+  hideDefaultTemplateOption?: boolean;
+}
+
+export const TemplatesPullover: FC<Props> = ({
+  templateData,
+  onItemClick,
+  onResetTemplate,
+  createDialogTitle,
+  hideDefaultTemplateOption,
+}) => {
+  const { t } = useTranslation();
+  const createTemplatePopupController = usePopupControl();
+
+  return (
+    <>
+      <Pullover
+        isLoading={templateData.isLoading}
+        isFetching={templateData.isFetching}
+        control={templateData.popupController.control}
+        header={{
+          title: t('Templates'),
+          onSearch: templateData.setSearch,
+        }}
+        footer={{
+          confirmButton: {
+            label: t('CreateTemplate'),
+            onClick: createTemplatePopupController.onOpen,
+            splitActions: [
+              {
+                label: t('CreateDefaultTemplate'),
+                icon: faBookmark,
+                onClick: templateData.createItem.onCreateDefault,
+                hidden: hideDefaultTemplateOption,
+              },
+            ],
+          },
+          additionalButton: onResetTemplate && {
+            label: t('ResetTemplate'),
+            icon: faBookmarkSlash,
+            onClick: onResetTemplate,
+          },
+        }}
+        onCloseCallback={() => templateData.setSearch?.('')}
+        size="w600"
+      >
+        <List
+          items={templateData.items.map(item => ({
+            id: item.uuid,
+            label: item.name,
+            desc: item.isPublic ? t('PublicTemplate') : t('PrivateTemplate'),
+            onClick: () => {
+              onItemClick(item);
+              templateData.popupController.onClose();
+            },
+            actions: [
+              {
+                icon: faTrashCan,
+                onClick: () => templateData.setItemToDeleteUuids([item.uuid]),
+                color: 'danger',
+              },
+            ],
+          }))}
+          noItemsMessage={t('NoTemplatesAvailable')}
+        />
+      </Pullover>
+      <CreateTemplateDialog
+        control={createTemplatePopupController.control}
+        createItem={templateData.createItem}
+        title={createDialogTitle}
+      />
+      {templateData.DeleteDialog}
+    </>
+  );
+};

package/src/components/Table/contexts/TableContext.tsx

@@ -1,116 +1,116 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
-import type {
-  IPaginationControl,
-  ITable,
-  ITableColumnsData,
-  ITableDataActions,
-  ITableEdit,
-  ITableSelectedAction,
-} from '../../../types/ITable';
-import { createContext, useContext, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocalTableData } from '../hooks/localHooks/useLocalTableData';
-import { useLocalTablePagination } from '../hooks/localHooks/useLocalTablePagination';
-
-interface ITableContext<T = unknown> extends ITable<T> {
-  columnData: ITableColumnsData;
-  selectActions: ITableSelectedAction[];
-  dataActions?: ITableDataActions<T> & {
-    hasItemActions: boolean;
-    isEditable: boolean;
-    isDeletable: boolean;
-  };
-  editable?: ITableEdit<T> & {
-    isAdding: boolean;
-    setIsAdding: Dispatch<SetStateAction<boolean>>;
-  };
-  footer?: ITable['footer'] & {
-    paginationControl: IPaginationControl;
-    noTotalRows: boolean;
-  };
-}
-
-const TableContext = createContext<ITableContext<any>>({
-  columnData: { columns: [], defaultColumns: [] },
-  data: [],
-  selectActions: [],
-});
-
-export const TableProvider = <T,>({
-  columnData,
-  data: initialData,
-  dataActions,
-  editable,
-  footer,
-  children,
-  rowSelect,
-  ...rest
-}: ITable<T> & { children: ReactNode }) => {
-  const { t } = useTranslation();
-  const [isAdding, setIsAdding] = useState(false);
-
-  const selectActions = useMemo(() => {
-    const actions = (rowSelect?.actions ?? []).filter(e => !e.hidden);
-    if (rest.itemDeleteData?.hasAccess) {
-      actions.push({
-        label: t('Delete'),
-        onClick: e => rest.itemDeleteData!.setItemToDeleteUuids([...e]),
-      });
-    }
-    return actions;
-  }, [rowSelect?.actions, rest.itemDeleteData, t]);
-
-  const updatedDataActions = useMemo(() => {
-    const isEditable = Boolean(dataActions?.hasEditAccess);
-    const isDeletable = Boolean(rest.itemDeleteData?.hasAccess);
-
-    const hasCustomActions = initialData.some(({ item }) => {
-      const actions = dataActions?.actions?.(item).filter(e => e.hasAccess) ?? [];
-      return actions.length > 0;
-    });
-
-    return {
-      hasEditAccess: isEditable,
-      actions: dataActions?.actions,
-      hasItemActions: isEditable || isDeletable || hasCustomActions,
-      isEditable,
-      isDeletable,
-    };
-  }, [dataActions, initialData, rest.itemDeleteData?.hasAccess]);
-
-  const localPagination = useLocalTablePagination({
-    defaultLimit: footer?.customPagination?.defaultLimit,
-  });
-  const data = useLocalTableData<T>({
-    initialData,
-    localPagination,
-    controledPagination: !!footer?.paginationControl,
-    dataActions: updatedDataActions,
-    isDeletable: updatedDataActions.isDeletable,
-    rowSelect,
-  });
-
-  const tableContextValue: ITableContext<T> = {
-    ...rest,
-    data,
-    dataActions: updatedDataActions,
-    columnData,
-    selectActions,
-    rowSelect,
-  };
-
-  if (editable) tableContextValue.editable = { ...editable, isAdding, setIsAdding };
-  if (footer)
-    tableContextValue.footer = {
-      ...footer,
-      paginationControl: footer?.paginationControl ?? localPagination,
-      totalRows: footer?.totalRows ?? initialData?.length ?? 0,
-      noTotalRows: footer?.totalRows === undefined,
-    };
-
-  return (
-    <TableContext.Provider value={tableContextValue}>{children}</TableContext.Provider>
-  );
-};
-
-export const useTableContext = () => useContext(TableContext);
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type {
+  IPaginationControl,
+  ITable,
+  ITableColumnsData,
+  ITableDataActions,
+  ITableEdit,
+  ITableSelectedAction,
+} from '../../../types/ITable';
+import { createContext, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocalTableData } from '../hooks/localHooks/useLocalTableData';
+import { useLocalTablePagination } from '../hooks/localHooks/useLocalTablePagination';
+
+interface ITableContext<T = unknown> extends ITable<T> {
+  columnData: ITableColumnsData;
+  selectActions: ITableSelectedAction[];
+  dataActions?: ITableDataActions<T> & {
+    hasItemActions: boolean;
+    isEditable: boolean;
+    isDeletable: boolean;
+  };
+  editable?: ITableEdit<T> & {
+    isAdding: boolean;
+    setIsAdding: Dispatch<SetStateAction<boolean>>;
+  };
+  footer?: ITable['footer'] & {
+    paginationControl: IPaginationControl;
+    noTotalRows: boolean;
+  };
+}
+
+const TableContext = createContext<ITableContext<any>>({
+  columnData: { columns: [], defaultColumns: [] },
+  data: [],
+  selectActions: [],
+});
+
+export const TableProvider = <T,>({
+  columnData,
+  data: initialData,
+  dataActions,
+  editable,
+  footer,
+  children,
+  rowSelect,
+  ...rest
+}: ITable<T> & { children: ReactNode }) => {
+  const { t } = useTranslation();
+  const [isAdding, setIsAdding] = useState(false);
+
+  const selectActions = useMemo(() => {
+    const actions = (rowSelect?.actions ?? []).filter(e => !e.hidden);
+    if (rest.itemDeleteData?.hasAccess) {
+      actions.push({
+        label: t('Delete'),
+        onClick: e => rest.itemDeleteData!.setItemToDeleteUuids([...e]),
+      });
+    }
+    return actions;
+  }, [rowSelect?.actions, rest.itemDeleteData, t]);
+
+  const updatedDataActions = useMemo(() => {
+    const isEditable = Boolean(dataActions?.hasEditAccess);
+    const isDeletable = Boolean(rest.itemDeleteData?.hasAccess);
+
+    const hasCustomActions = initialData.some(({ item }) => {
+      const actions = dataActions?.actions?.(item).filter(e => e.hasAccess) ?? [];
+      return actions.length > 0;
+    });
+
+    return {
+      hasEditAccess: isEditable,
+      actions: dataActions?.actions,
+      hasItemActions: isEditable || isDeletable || hasCustomActions,
+      isEditable,
+      isDeletable,
+    };
+  }, [dataActions, initialData, rest.itemDeleteData?.hasAccess]);
+
+  const localPagination = useLocalTablePagination({
+    defaultLimit: footer?.customPagination?.defaultLimit,
+  });
+  const data = useLocalTableData<T>({
+    initialData,
+    localPagination,
+    controledPagination: !!footer?.paginationControl,
+    dataActions: updatedDataActions,
+    isDeletable: updatedDataActions.isDeletable,
+    rowSelect,
+  });
+
+  const tableContextValue: ITableContext<T> = {
+    ...rest,
+    data,
+    dataActions: updatedDataActions,
+    columnData,
+    selectActions,
+    rowSelect,
+  };
+
+  if (editable) tableContextValue.editable = { ...editable, isAdding, setIsAdding };
+  if (footer)
+    tableContextValue.footer = {
+      ...footer,
+      paginationControl: footer?.paginationControl ?? localPagination,
+      totalRows: footer?.totalRows ?? initialData?.length ?? 0,
+      noTotalRows: footer?.totalRows === undefined,
+    };
+
+  return (
+    <TableContext.Provider value={tableContextValue}>{children}</TableContext.Provider>
+  );
+};
+
+export const useTableContext = () => useContext(TableContext);