@inceptionbg/iui 2.0.11 → 2.0.13

package/{idea/Table/Components/Print → src/components/Table/components/print}/TablePrint.tsx

@@ -1,77 +1,84 @@
-import { FC, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
-import { faPrint } from '../../../../assets/icons/solid/faPrint';
-import { faXmark } from '../../../../assets/icons/solid/faXmark';
-import { IPrintData, ITableColumn, ITableDataItem } from '../../../../types/ITable';
-import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';
-import { Button } from '../../../Button/Button';
-import { FullScreenLoader } from '../../../Loader/Loader';
+import { useEffect, useMemo, type FC } from 'react';
+import { IconButton } from '../../../Button/IconButton';
+import { faPrint } from '../../../../assets/icons';
 import { useTranslation } from 'react-i18next';
-import { rootDir } from '../../../../utils/rootDir';
-import clsx from 'clsx';
-import { HeaderTable } from '../Header/TableHeader';
+import { Pullover } from '../../../Pullover/Pullover';
+import { useTableContext } from '../../contexts/TableContext';
+import { IPrintData } from '../../../../types/ITable';
 import { useHideZendesk } from '../../../../hooks/useZendesk';
+import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';
+import { HeaderTable } from '../header/TableHeader';
+import clsx from 'clsx';
+import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
+import { ProgressBar } from '../../../Loader/ProgressBar';
 
-interface Props extends IPrintData {
-  isOpen: boolean;
-  onClose: () => void;
-  columns: ITableColumn[];
-  excludeColumnIds?: string[];
-}
-export const TablePrint: FC<Props> = ({
-  isOpen,
-  onClose,
-  columns,
-  excludeColumnIds = [],
-  customHeader,
-  organization,
-  filters,
-  label,
-  optionalNode,
-  getPrintData,
-  formatPrintData,
-  saveXlsx,
-  totals,
-}) => {
-  const [data, setData] = useState<ITableDataItem[]>([]);
-  const [offset, setOffset] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-
+export const TablePrint: FC = () => {
   const { t } = useTranslation();
   useHideZendesk();
+  const { columns, printData } = useTableContext();
+
+  const {
+    label,
+    tableData: data,
+    isLoading,
+    progress,
+    paginationControl,
+    printPopupControl,
+    customHeader,
+    excludeColumnIds,
+    filters,
+    optionalNode,
+    organization,
+    saveXlsx,
+    totals,
+  } = useMemo(() => (printData ?? {}) as IPrintData, [printData]);
+  const { control, onOpen } = printPopupControl;
 
-  const cols = columns.filter(
-    e => !['actions', 'select', ...excludeColumnIds].includes(e.id)
+  const cols = useMemo(
+    () => columns.filter(e => !['actions', 'select', excludeColumnIds].includes(e.id)),
+    [columns, excludeColumnIds]
   );
 
   useEffect(() => {
-    rootDir?.classList.add('hidden');
-    return () => {
-      rootDir?.classList.remove('hidden');
-    };
-  }, []);
+    if (control.isOpen) {
+      paginationControl?.setLimit(1000);
+      paginationControl?.setOffset(0);
+    }
+  }, [paginationControl, control.isOpen]);
 
-  useEffect(() => {
-    setIsLoading(true);
-    getPrintData({ limit: 1000, offset })
-      .then(e => {
-        setData(prevState => {
-          const data = !!e.data.length ? formatPrintData(e.data) : [];
-          const newState = [...prevState, ...data];
-          e.totalRows && e.totalRows > newState.length
-            ? setOffset(offset + 1)
-            : setIsLoading(false);
-          return e.totalRows && e.totalRows > prevState.length ? newState : prevState;
-        });
-      })
-      .catch(() => setIsLoading(false));
-  }, [offset, formatPrintData, getPrintData]);
+  return (
+    printData && (
+      <>
+        <IconButton
+          tooltip={t('PrintExport')}
+          icon={faPrint}
+          onClick={onOpen}
+          size="s"
+          variant="outlined"
+        />
 
-  return isOpen
-    ? createPortal(
-        <div className="iui-print-dialog">
-          <div className="content">
+        <Pullover
+          control={control}
+          header={{ title: t('PrintExport') }}
+          footer={{
+            confirmButton: {
+              label: t('Print'),
+              onClick: window.print,
+              // type: 'submit',
+            },
+            additionalButton: saveXlsx
+              ? {
+                  label: t('SaveXlsx'),
+                  icon: faFileArrowDown,
+                  onClick: saveXlsx,
+                }
+              : undefined,
+          }}
+          contentClassName="iui-print"
+          size="vw100"
+          portalTarget={document.body}
+        >
+          <div className="print-content">
             <div className="flex justify-between">
               {organization ? (
                 <div>
@@ -121,11 +128,18 @@ export const TablePrint: FC<Props> = ({
               </div>
             )}
             {optionalNode?.aboveTable}
-            {data && (
-              <table width="100%" className="print-table">
-                <HeaderTable columns={cols} customHeader={customHeader} headerWrap />
-                <tbody>
-                  <>
+            {isLoading ? (
+              <ProgressBar progress={progress} />
+            ) : (
+              data && (
+                <table width="100%" className="print-table">
+                  <HeaderTable
+                    columns={cols}
+                    customHeader={customHeader}
+                    headerWrap
+                    print
+                  />
+                  <tbody>
                     {data.map(row => {
                       let totalColsSpan = 0;
                       return (
@@ -173,35 +187,14 @@ export const TablePrint: FC<Props> = ({
                         ))}
                       </tr>
                     )}
-                  </>
-                </tbody>
-              </table>
+                  </tbody>
+                </table>
+              )
             )}
             {optionalNode?.bellowTable}
           </div>
-          <div className="iui-print-actions no-print">
-            <Button
-              label={t('Cancel')}
-              icon={faXmark}
-              onClick={e => {
-                e.stopPropagation();
-                onClose();
-              }}
-              className="mr-3"
-            />
-            {!!saveXlsx && (
-              <Button
-                label={t('SaveXlsx')}
-                icon={faFileArrowDown}
-                onClick={() => saveXlsx()}
-                className="mr-3"
-              />
-            )}
-            <Button label={t('Print')} icon={faPrint} onClick={() => window.print()} />
-          </div>
-          <FullScreenLoader isLoading={isLoading} />
-        </div>,
-        document.body
-      )
-    : null;
+        </Pullover>
+      </>
+    )
+  );
 };

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

@@ -1,4 +1,4 @@
-import { useState, type FC } from 'react';
+import { useEffect, useState, type FC } from 'react';
 import { Menu } from '../../../Menu/Menu';
 import { Tooltip } from '../../../Tooltip/Tooltip';
 import { IconButton } from '../../../Button/IconButton';
@@ -15,6 +15,24 @@ export const TableSort: FC = () => {
   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}
@@ -39,6 +57,8 @@ export const TableSort: FC = () => {
           label: e.label,
           onClick: () => setSort?.(sort === valueDesc ? valueAsc : valueDesc),
           active: sort?.startsWith(e.value),
+          className: 'table-sort-item',
+          keepOpen: true,
           icon:
             sort === valueDesc
               ? faArrowDownWideShort

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

@@ -0,0 +1,98 @@
+import { useState, type FC } from 'react';
+import { IconButton } from '../../../Button/IconButton';
+import { useTranslation } from 'react-i18next';
+import { useTableContext } from '../../contexts/TableContext';
+import { faBookmark, faBookmarkSlash, faXmark } from '../../../../assets/icons';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { Pullover } from '../../../Pullover/Pullover';
+import { List } from '../../../List/List';
+import { Dialog } from '../../../Dialog/Dialog';
+import { TextInput } from '../../../Inputs/TextInput';
+import { CreateTemplateDialog } from './components/CreateTemplateDialog';
+
+export const TableTemplates: FC = () => {
+  const { t } = useTranslation();
+  const { templateData: templates } = useTableContext();
+  const { control, onOpen } = usePopupControl();
+  // const { control: dialogControl, onOpen: onDialogOpen } = usePopupControl();
+
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  return (
+    <>
+      <IconButton
+        tooltip={t('Templates')}
+        icon={faBookmark}
+        active={control.isOpen}
+        onClick={onOpen}
+        size="s"
+        variant="outlined"
+      />
+      <Pullover
+        control={control}
+        header={{
+          title: t('Templates'),
+          onSearch: templates?.setSearch,
+        }}
+        onContentClick={() => setSelectedItemId(null)}
+        footer={{
+          confirmButton: {
+            label: t('ApplyTemplate'),
+            type: 'submit',
+            splitActions: [
+              {
+                label: t('CreateTemplateLong'),
+                icon: faBookmark,
+                // onClick: onDialogOpen,
+              },
+              {
+                label: t('CreateDefaultTemplate'),
+                icon: faBookmark,
+                onClick: () => {
+                  // Handle use template action
+                },
+              },
+            ],
+          },
+          additionalButton: selectedItemId
+            ? {
+                label: t('DeleteTemplate'),
+                icon: faXmark,
+                color: 'danger',
+                onClick: () => {
+                  // Handle delete template action
+                },
+              }
+            : {
+                label: t('ResetTemplate'),
+                icon: faBookmarkSlash,
+                onClick: () => {
+                  //   setSearchData?.(defaultSearch);
+                  //   onSearch?.(defaultSearch);
+                  //   onClose();
+                },
+                // disabled: defaultSearch
+                //   ? JSON.stringify(searchData) === JSON.stringify(defaultSearch)
+                //   : Object.keys(searchData).length === 0,
+              },
+        }}
+        onCloseCallback={() => {
+          templates?.setSearch?.('');
+          setSelectedItemId(null);
+        }}
+        size="w600"
+      >
+        <List
+          items={templates?.items.map(item => ({
+            id: item.uuid,
+            label: item.name,
+            active: selectedItemId === item.uuid,
+            // desc: item.isPublic ? t('Public') : t('Private'),
+            onClick: () => setSelectedItemId(item.uuid),
+          }))}
+        />
+        {/* <CreateTemplateDialog control={dialogControl} /> */}
+      </Pullover>
+    </>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { useState, type FC } from 'react';
+import { IPopupControl } from '../../../../../types/IPopup';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../../../Dialog/Dialog';
+import { TextInput } from '../../../../Inputs/TextInput';
+import { Checkbox } from '../../../../Inputs/Checkbox';
+import { IReportTemplate } from '../../../../../types/ITable';
+import { useTableContext } from '../../../contexts/TableContext';
+
+interface Props {
+  control: IPopupControl['control'];
+}
+
+export const CreateTemplateDialog: FC<Props> = ({ control }) => {
+  const { t } = useTranslation();
+  const { templateData } = useTableContext();
+
+  const [formData, setFormData] = useState<Partial<IReportTemplate>>({});
+
+  return (
+    <Dialog
+      title={t('CreateTemplateLong')}
+      control={control}
+      onFormSubmit={() => console.log('Template saved!')}
+      footer={{ confirmButton: { label: t('CreateTemplate'), type: 'submit' } }}
+    >
+      <TextInput
+        label={t('TemplateName')}
+        value={formData.name}
+        setValue={name => setFormData({ ...formData, name })}
+      />
+      {templateData?.allowPublicCreate && (
+        <Checkbox
+          label={t('PublicTemplate')}
+          value={formData.isPublic}
+          setValue={isPublic => setFormData({ ...formData, isPublic })}
+        />
+      )}
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { IGetPrintData, IPrintData } from '../../../types/ITable';
+import { usePopupControl } from '../../../hooks/usePopupControl';
+
+type Props<T> = {
+  getPrintData: IGetPrintData<T>;
+  totalRows?: number;
+};
+
+const limit = 1000;
+const defaultData = { items: [], totalRows: 0 };
+
+export const useTablePrint = <T>({
+  getPrintData,
+  totalRows: initialTotalRows = 0,
+}: Props<T>) => {
+  const printPopupControl = usePopupControl();
+
+  const [data, setData] = useState<{ items: T[]; totalRows: number }>(defaultData);
+  const [offset, setOffset] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (printPopupControl.control.isOpen) {
+      setIsLoading(true);
+      setOffset(0);
+    }
+    return () => {
+      setIsLoading(false);
+      setData(defaultData);
+      setOffset(0);
+    };
+  }, [printPopupControl.control.isOpen]);
+
+  useEffect(() => {
+    if (printPopupControl.control.isOpen) {
+      getPrintData({
+        pagination: { limit, offset },
+        noTotalRows: !!initialTotalRows || offset > 0,
+      })
+        .then(({ items, totalRows: newTotalRows }) => {
+          setData(prevState => {
+            const newData = offset === 0 ? items : prevState.items.concat(items);
+            const totalRows =
+              newTotalRows || initialTotalRows || prevState.totalRows || 0;
+
+            if (items?.length === limit) {
+              setOffset(offset => offset + 1);
+            } else {
+              setIsLoading(false);
+            }
+
+            return { items: newData, totalRows };
+          });
+        })
+        .catch(() => setIsLoading(false));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [printPopupControl.control.isOpen, initialTotalRows, offset]);
+
+  const loaded = data.items.length;
+  const progress = data.totalRows ? (loaded / data.totalRows) * 100 : 0;
+
+  const printData: Pick<
+    IPrintData<T>,
+    'printPopupControl' | 'isLoading' | 'progress' | 'items'
+  > = {
+    printPopupControl,
+    isLoading,
+    progress,
+    items: data.items ?? [],
+  };
+
+  return printData;
+};

package/src/index.ts

@@ -22,6 +22,7 @@ import type { IError } from './types/IError';
 import type { ISelectData } from './types/ISelect';
 import type { ITab } from './types/ITab';
 import type {
+  IGetPrintData,
   IPagination,
   IPaginationControl,
   ITable,
@@ -49,6 +50,7 @@ import { NotificationBadge } from './components/Badge/NotificationBadge';
 import { PillBadge } from './components/Badge/PillBadge';
 import { Button } from './components/Button/Button';
 import { IconButton } from './components/Button/IconButton';
+import { SplitButton } from './components/Button/SplitButton';
 import { Dashboard } from './components/Dashboard/Dashboard';
 import { DashboardWidget } from './components/Dashboard/DashboardWidget';
 import { FastLinksWidget } from './components/Dashboard/FastLinksWidget/FastLinksWidget';
@@ -70,7 +72,9 @@ import {
   SelectCreatable,
 } from './components/Inputs/Selects/Select';
 import { TextInput } from './components/Inputs/TextInput';
+import { List } from './components/List/List';
 import { FullScreenLoader, LazyLoader, Loader } from './components/Loader/Loader';
+import { ProgressBar } from './components/Loader/ProgressBar';
 import { Menu } from './components/Menu/Menu';
 import { MenuItem } from './components/Menu/MenuItem';
 // import { ItemActionsMenu } from './components/Table/Components/Edit/ItemActionsMenu';
@@ -97,6 +101,7 @@ import { useDefaultTemplate } from './components/Table/hooks/useDefaultTemplate'
 import { useTableEdit } from './components/Table/hooks/useTableEdit';
 import { useTableFilterFields } from './components/Table/hooks/useTableFilterFields';
 import { useTablePagination } from './components/Table/hooks/useTablePagination';
+import { useTablePrint } from './components/Table/hooks/useTablePrint';
 import { useTableSearch } from './components/Table/hooks/useTableSearch';
 import { useTableSelect } from './components/Table/hooks/useTableSelect';
 import { useTableSort } from './components/Table/hooks/useTableSort';
@@ -196,12 +201,14 @@ export {
   TextAreaInput,
   LazyLoader,
   Loader,
+  List,
   Menu,
   MenuItem,
   NotificationBadge,
   NumberInput,
   PageLayout,
   PasswordInput,
+  ProgressBar,
   Pullover,
   PillBadge,
   Radio,
@@ -210,6 +217,7 @@ export {
   Select,
   SelectAsyncPaginate,
   SelectCreatable,
+  SplitButton,
   tableCustomLimit1000,
   Tabs,
   TextInput,
@@ -230,6 +238,7 @@ export {
   useTableEdit,
   useTableFilterFields,
   useTablePagination,
+  useTablePrint,
   useTableSearch,
   useTableSelect,
   useTableSort,
@@ -267,6 +276,7 @@ export type {
   ITableFilterData,
   ITableFilterItem,
   ITableSort,
+  IGetPrintData,
   ITreeItem,
   IValueLabel,
   IconDefinition,

package/src/styles/App.scss

@@ -15,6 +15,7 @@
 @use './components/alert';
 @use './components/badge';
 @use './components/button';
+@use './components/buttonSplit';
 @use './components/card';
 // @use './components/menu-v2';
 @use './components/dialog';
@@ -25,11 +26,13 @@
 @use './components/inputDateTime';
 @use './components/inputRadio';
 @use './components/inputSelect';
+@use './components/list';
 @use './components/loader';
 @use './components/menu';
 @use './components/page';
 @use './components/portal';
 @use './components/print';
+@use './components/progressBar';
 @use './components/pullover';
 @use './components/scrollbar';
 @use './components/sidebar';

package/src/styles/common/_animations.scss

@@ -24,20 +24,14 @@
   }
 }
 
-// @keyframes linear-progress {
-//   0% {
-//     background-size: 200% 100%;
-//     background-position: left -31.25% top 0%;
-//   }
-//   50% {
-//     background-size: 800% 100%;
-//     background-position: left -49% top 0%;
-//   }
-//   100% {
-//     background-size: 400% 100%;
-//     background-position: left -102% top 0%;
-//   }
-// }
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
 
 @keyframes auto-fill {
   to {

package/src/styles/common/helpers/_base.scss

@@ -49,7 +49,3 @@ a {
 .hover-neutral:hover {
   background-color: var(--neutral-hover);
 }
-
-.no-border {
-  border: none !important;
-}

package/src/styles/common/maps/_buttonMaps.scss

@@ -0,0 +1,42 @@
+$text-button-sizes: (
+  xs: (
+    font-size: 10px,
+    svg: 12px,
+    padding: 0 10px,
+    height: 24px,
+    gap: 6px,
+  ),
+  s: (
+    font-size: 12px,
+    svg: 14px,
+    padding: 0 12px,
+    height: 30px,
+  ),
+  m: (
+    font-size: 14px,
+    svg: 16px,
+    padding: 0 14px,
+    height: 36px,
+  ),
+  l: (
+    font-size: 16px,
+    svg: 20px,
+    padding: 0 18px,
+    height: 48px,
+  ),
+);
+
+$icon-button-sizes: (
+  s: (
+    size: 32px,
+    svg: 16px,
+  ),
+  m: (
+    size: 40px,
+    svg: 20px,
+  ),
+  l: (
+    size: 44px,
+    svg: 24px,
+  ),
+);