@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Table/components/sort/TableSort.tsx

@@ -1,72 +1,73 @@
-import { useEffect, useState, type FC } from 'react';
-import { Menu } from '../../../Menu/Menu';
-import { Tooltip } from '../../../Tooltip/Tooltip';
-import { IconButton } from '../../../Button/IconButton';
-import { faArrowUpArrowDown } from '../../../../assets/icons/light/faArrowUpArrowDown';
-import { useTableContext } from '../../contexts/TableContext';
-import { useTranslation } from 'react-i18next';
-import { faArrowDownWideShort } from '../../../../assets/icons/light/faArrowDownWideShort';
-import { faArrowDownShortWide } from '../../../../assets/icons/light/faArrowDownShortWide';
-
-export const TableSort: FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { t } = useTranslation();
-  const { sortData } = useTableContext();
-  const { sort, setSort, sortOptions } = sortData ?? {};
-
-  useEffect(() => {
-    if (isOpen) {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        event.stopPropagation();
-        if (event.key === 'Escape') {
-          event.preventDefault();
-          event.stopPropagation();
-          setIsOpen(false);
-        }
-      };
-
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [isOpen]);
-
-  return sortData ? (
-    <Menu
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      renderButton={ref => (
-        <Tooltip label={t('Sort')} ref={ref}>
-          <IconButton
-            icon={faArrowUpArrowDown}
-            active={isOpen}
-            onClick={() => setIsOpen(!isOpen)}
-            size="s"
-            variant="outlined"
-          />
-        </Tooltip>
-      )}
-      size={sortData.menuSize}
-      items={sortOptions?.map(e => {
-        const valueAsc = e.value + '_ASC';
-        const valueDesc = e.value + '_DESC';
-
-        return {
-          label: e.label,
-          onClick: () => setSort?.(sort === valueDesc ? valueAsc : valueDesc),
-          active: sort?.startsWith(e.value),
-          className: 'table-sort-item',
-          keepOpen: true,
-          icon:
-            sort === valueDesc
-              ? faArrowDownWideShort
-              : sort === valueAsc
-                ? faArrowDownShortWide
-                : undefined,
-        };
-      })}
-    />
-  ) : null;
-};
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { faArrowDownShortWide } from '../../../../assets/icons/light/faArrowDownShortWide';
+import { faArrowDownWideShort } from '../../../../assets/icons/light/faArrowDownWideShort';
+import { faArrowUpArrowDown } from '../../../../assets/icons/light/faArrowUpArrowDown';
+import { IconButton } from '../../../Button/IconButton';
+import { Menu } from '../../../Menu/Menu';
+import { Tooltip } from '../../../Tooltip/Tooltip';
+import { useTableContext } from '../../contexts/TableContext';
+
+export const TableSort: FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { t } = useTranslation();
+  const { sortData } = useTableContext();
+  const { sort, setSort, sortOptions } = sortData ?? {};
+
+  useEffect(() => {
+    if (isOpen) {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        event.stopPropagation();
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          setIsOpen(false);
+        }
+      };
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isOpen]);
+
+  return sortData ? (
+    <Menu
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      renderButton={ref => (
+        <Tooltip label={t('Sort')} ref={ref}>
+          <IconButton
+            icon={faArrowUpArrowDown}
+            active={isOpen}
+            onClick={() => setIsOpen(!isOpen)}
+            size="s"
+            variant="outlined"
+          />
+        </Tooltip>
+      )}
+      size={sortData.menuSize}
+      items={sortOptions?.map(e => {
+        const valueAsc = e.value + '_ASC';
+        const valueDesc = e.value + '_DESC';
+
+        return {
+          label: e.label,
+          onClick: () => setSort?.(sort === valueDesc ? valueAsc : valueDesc),
+          active: sort?.startsWith(e.value),
+          className: 'table-sort-item',
+          keepOpen: true,
+          icon:
+            sort === valueDesc
+              ? faArrowDownWideShort
+              : sort === valueAsc
+                ? faArrowDownShortWide
+                : undefined,
+        };
+      })}
+    />
+  ) : null;
+};

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

@@ -1,57 +1,58 @@
-import { useEffect, useRef, useState, type FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { ILocalPopupControl } from '../../../../types/IPopup';
-import type { IReportTemplate, ITableTemplateData } from '../../../../types/ITable';
-import { Dialog } from '../../../Dialog/Dialog';
-import { TextInput } from '../../../Inputs/TextInput';
-import { Checkbox } from '../../../Inputs/Checkbox';
-
-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,64 +1,65 @@
-import { useEffect, type FC } from 'react';
-import { IconButton } from '../../../Button/IconButton';
-import { useTranslation } from 'react-i18next';
-import { useTableContext } from '../../contexts/TableContext';
-import { faBookmark } from '../../../../assets/icons';
-import { setTemplateData } from '../../../../utils/tableUtils';
-import { TemplatesPullover } from './TemplatesPullover';
-import { IReportTemplate } from '../../../../types/ITable';
-
-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 { IReportTemplate, ITableTemplateData } from '../../../../types/ITable';
-import { Pullover } from '../../../Pullover/Pullover';
-import { List } from '../../../List/List';
-import { useTranslation } from 'react-i18next';
-import { usePopupControl } from '../../../../hooks/usePopupControl';
-import { faBookmark, faBookmarkSlash, faTrashCan } from '../../../../assets/icons';
-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}
+    </>
+  );
+};