@inceptionbg/iui 2.0.21 → 2.0.23

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

@@ -2,19 +2,15 @@ import { useEffect, type FC } from 'react';
 import { IconButton } from '../../../Button/IconButton';
 import { useTranslation } from 'react-i18next';
 import { useTableContext } from '../../contexts/TableContext';
-import { faBookmark, faBookmarkSlash, faTrashCan } from '../../../../assets/icons';
-import { Pullover } from '../../../Pullover/Pullover';
-import { List } from '../../../List/List';
+import { faBookmark } from '../../../../assets/icons';
 import { setTemplateData } from '../../../../utils/tableUtils';
-import { usePopupControl } from '../../../../hooks/usePopupControl';
-import { CreateTemplateDialog } from './CreateTemplateDialog';
+import { TemplatesPullover } from './TemplatesPullover';
+import { IReportTemplate } from '../../../../types/ITable';
 
 export const TableTemplates: FC = () => {
   const { t } = useTranslation();
   const { templateData, columnData, filterData, sortData } = useTableContext();
 
-  const createTemplatePopupController = usePopupControl();
-
   useEffect(() => {
     if (templateData?.defaultTemplate) {
       setTemplateData({
@@ -42,71 +38,27 @@ export const TableTemplates: FC = () => {
         size="s"
         variant="outlined"
       />
-      <Pullover
-        isLoading={templateData.isLoading}
-        isFetching={templateData.isFetching}
-        control={templateData.popupController.control}
-        header={{
-          title: t('Templates'),
-          onSearch: templateData.setSearch,
+      <TemplatesPullover
+        templateData={templateData}
+        onResetTemplate={() => {
+          columnData?.setColumns?.(columnData.defaultColumns);
+          filterData?.setSearchData(filterData.defaultSearch ?? {});
+          filterData?.onSearch(filterData.defaultSearch ?? {});
+          sortData?.setSort('');
+          templateData.popupController.onClose();
         }}
-        footer={{
-          confirmButton: {
-            label: t('CreateTemplate'),
-            onClick: createTemplatePopupController.onOpen,
-            splitActions: [
-              {
-                label: t('CreateDefaultTemplate'),
-                icon: faBookmark,
-                onClick: templateData.createItem.onCreateDefault,
-              },
-            ],
-          },
-          additionalButton: {
-            label: t('ResetTemplate'),
-            icon: faBookmarkSlash,
-            onClick: () => {
-              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,
+          });
         }}
-        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: () => {
-              setTemplateData({
-                template: item,
-                columnData,
-                setFilters: e => {
-                  filterData?.setSearchData(e);
-                  filterData?.onSearch(e);
-                },
-                setSort: sortData?.setSort,
-              });
-              templateData.popupController.onClose();
-            },
-            actions: [
-              {
-                icon: faTrashCan,
-                onClick: () => templateData.setItemToDeleteUuids([item.uuid]),
-                color: 'danger',
-              },
-            ],
-          }))}
-          noItemsMessage={t('NoTemplatesAvailable')}
-        />
-      </Pullover>
-      <CreateTemplateDialog control={createTemplatePopupController.control} />
-      {templateData.DeleteDialog}
+      />
     </>
   );
 };

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

@@ -0,0 +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}
+    </>
+  );
+};

package/src/index.ts

@@ -3,7 +3,7 @@ import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
-import { ToastContainer } from 'react-toastify';
+import { ToastContainer, toast, type ToastContainerProps } from 'react-toastify';
 
 import type { IFormWrapper } from './components/Wrappers/FormWrapper';
 import type {
@@ -72,6 +72,7 @@ import { Collapse } from './components/Helper/Collapse';
 import { Checkbox } from './components/Inputs/Checkbox';
 import { CurrencyInput } from './components/Inputs/CurrencyInput';
 import { DateInput } from './components/Inputs/DateInput/DateInput';
+import { PhoneInput } from './components/Inputs/PhoneInput/PhoneInput';
 import { TimeInput } from './components/Inputs/TimeInput/TimeInput';
 import { TextAreaInput } from './components/Inputs/TextAreaInput';
 import { NumberInput } from './components/Inputs/NumberInput';
@@ -104,6 +105,7 @@ import { Pullover } from './components/Pullover/Pullover';
 ///// TABLE /////
 import { Table } from './components/Table/Table';
 import { CreateTemplateDialog } from './components/Table/components/templates/CreateTemplateDialog';
+import { TemplatesPullover } from './components/Table/components/templates/TemplatesPullover';
 // import { ItemEditOptionsButtons } from './components/Table/Components/Edit/ItemEditOptionsButtons';
 // import { TableEditRow } from './components/Table/Components/Edit/TableEditRow';
 // import { FilterItem } from './components/Table/Components/FilterItem';
@@ -198,6 +200,7 @@ import { useIsMenuOpen } from './hooks/useIsMenuOpen';
 import { usePopupControl } from './hooks/usePopupControl';
 
 export { Router, type IRoute, type ISidebarItem };
+export { ToastContainer, toast, type ToastContainerProps };
 
 export {
   Accordions,
@@ -226,6 +229,7 @@ export {
   NumberInput,
   PageLayout,
   PasswordInput,
+  PhoneInput,
   ProgressBar,
   Pullover,
   PillBadge,
@@ -240,7 +244,6 @@ export {
   Tabs,
   TextInput,
   TimeInput,
-  ToastContainer,
   Tooltip,
   Tree,
 };
@@ -248,6 +251,7 @@ export {
 export {
   Table,
   CreateTemplateDialog,
+  TemplatesPullover,
   // SetTableFilter,
   // GridTable,
   // TablePrint,

package/src/styles/components/_accordions.scss

@@ -46,5 +46,6 @@
   }
   .iui-accordion-content {
     padding: 8px 24px 16px;
+    border-top: 1px solid var(--neutral-200);
   }
 }

package/src/styles/components/_dialog.scss

@@ -65,8 +65,8 @@ $dialog-sizes: (
     flex-direction: column;
     gap: 8px;
     flex: 1;
-    margin-right: -24px;
-    padding-right: 24px;
+    margin: -24px;
+    padding: 24px;
     &:not(.no-overflow) {
       overflow: auto;
       overscroll-behavior: none;

package/src/styles/components/_input.scss

@@ -156,3 +156,12 @@
   pointer-events: none;
   z-index: -1;
 }
+
+.phone-input {
+  display: flex;
+  align-items: center;
+  .phone-code-input {
+    min-width: 90px;
+    max-width: 90px;
+  }
+}

package/src/styles/components/_page.scss

@@ -61,9 +61,8 @@
   flex-direction: column;
   flex: 1;
   overflow-y: auto;
-  margin-right: -1.5rem;
-  padding-right: 1.5rem;
-  padding-bottom: 1rem;
+  margin: 0 -1.5rem;
+  padding: 0 1.5rem 1rem;
 }
 
 .page-footer {

package/src/types/ITable.ts

@@ -251,6 +251,7 @@ export interface IReportTemplate {
   name: string;
   identifier: string;
   filterValues?: IReportTemplateFilterValue[];
+  options?: { key: string; value?: any }[];
   columns: string[];
   organization?: ISimpleObject;
   subsystem?: string; // IModuleId;
@@ -270,9 +271,10 @@ export interface IReportTemplateFilterValue {
 }
 
 export interface IReportTemplateData {
-  searchData: IAnyObject;
+  searchData?: IAnyObject;
   visibleColumns?: string[];
   sorts?: string[];
+  options?: { key: string; value?: any }[];
 }
 
 export const tableStandardLimit = [5, 10, 25, 50, 100];

package/src/utils/i18n/i18nIUICyrilic.ts

@@ -83,6 +83,9 @@ export const i18nIUICyrilic = {
   CharMin: 'Минималан број карактера: {{from}}',
   CharRange: 'Број карактера од {{from}} до {{-to}}',
   CharNumber: 'Број карактера {{number}}',
+  PhoneValidation: 'Неисправан број телефона',
+  Serbia: 'Србија',
+  Montenegro: 'Црна Гора',
 
   ////// TOAST //////
   Pending: 'У току',

package/src/utils/i18n/i18nIUILatin.ts

@@ -83,6 +83,9 @@ export const i18nIUILatin = {
   CharMin: 'Minimalan broj karaktera: {{from}}',
   CharRange: 'Broj karaktera od {{from}} do {{-to}}',
   CharNumber: 'Broj karaktera {{number}}',
+  PhoneValidation: 'Neispravan broj telefona',
+  Serbia: 'Srbija',
+  Montenegro: 'Crna Gora',
 
   ////// TOAST //////
   Pending: 'U toku',

package/src/utils/i18n/i18nIUIMe.ts

@@ -82,6 +82,9 @@ export const i18nIUIMe = {
   CharMin: 'Minimalan broj karaktera: {{from}}',
   CharRange: 'Broj karaktera od {{from}} do {{-to}}',
   CharNumber: 'Broj karaktera {{number}}',
+  PhoneValidation: 'Neispravan broj telefona',
+  Serbia: 'Srbija',
+  Montenegro: 'Crna Gora',
 
   ////// TOAST //////
   Pending: 'U toku',