@inceptionbg/iui 2.0.16 → 2.0.17

package/src/types/ITable.ts

@@ -6,23 +6,24 @@ import { IPopupControl } from './IPopup';
 export interface ITable<T = unknown> {
   id?: string;
   columnData: ITableColumnsData;
-  data: ITableDataItem[];
-  dataActions?: ITableDataActions;
+  data: ITableDataItem<T>[];
+  dataActions?: ITableDataActions<T>;
   rowSelect?: {
     selectedRows: Set<string>;
     setSelectedRows: Dispatch<SetStateAction<Set<string>>>;
-    actions: ITableSelectedAction[];
+    actions?: ITableSelectedAction[];
   };
   filterData?: ITableFilterData;
   sortData?: ITableSortData;
   templateData?: ITableTemplateData;
   printData?: IPrintData<T>;
-  sumRows?: ITableDataItem[];
-  editable?: ITableEdit;
+  sumRows?: ITableDataItem<T>[];
+  editable?: ITableEdit<T>;
   selectedRowUuid?: string;
+  itemDeleteData?: ITableItemDeleteData;
   keyboard?: {
     enabled: boolean;
-    actions: ITableKeyboardActionsBase;
+    actions?: ITableKeyboardActionsBase;
   };
   headerWrap?: boolean;
   customHeader?: ITableColumn[][];
@@ -49,14 +50,16 @@ export interface ITableColumn {
   label?: string | ReactElement;
   labelForFilter?: string;
   align?: 'center' | 'left' | 'right' | 'justify' | undefined;
-  hidden?: boolean;
   unavailable?: boolean;
+  hidden?: boolean;
+  printHidden?: boolean;
   width?: string;
   minWidth?: string;
   colSpan?: number;
   rowSpan?: number;
   break?: boolean;
   color?: 'secondary';
+  sticky?: boolean;
   sortOptions?: {
     asc: string;
     desc: string;
@@ -67,11 +70,11 @@ export interface ITableColumn {
   className?: string;
 }
 
-export interface ITableDataItem {
+export interface ITableDataItem<T = unknown> {
   uuid: string;
   onRowClick?: (event?: MouseEvent<HTMLTableRowElement>) => void;
   className?: string;
-  item?: Record<string, any>;
+  item?: T;
   disableSelect?: boolean;
   cells: ITableDataItemCells;
   extendable?: {
@@ -93,18 +96,13 @@ export interface ITableDataItemCells {
   };
 }
 
-export interface ITableDataActions {
-  edit?: {
-    hasAccess: boolean;
-  };
-  delete?: {
-    onClick: (itemUuid: string) => void;
-    hasAccess: boolean;
-  };
-  actions?: {
+export interface ITableDataActions<T = unknown> {
+  hasEditAccess: boolean;
+  actions?: (item?: T) => {
     label: string;
-    onClick: (item: ITableDataItem) => void;
+    onClick: () => void;
     hasAccess: boolean;
+    disabled?: boolean;
   }[];
 }
 export interface ITableFilterData {
@@ -156,25 +154,23 @@ export interface ITableSelectedAction {
 export interface ITableTemplateData {
   identifier: string;
   popupController: IPopupControl;
+  defaultTemplate?: IReportTemplate;
   items: IReportTemplate[];
   isLoading?: boolean;
   isFetching?: boolean;
   setSearch?: (search: string) => void;
-  initiateCreate: () => void;
-  initiateCreateDefault: () => void;
   setItemToDeleteUuids: (itemUuids: string[]) => void;
-
-  // data: IReportTemplateData;
-  // setTemplateName?: (templateName: string) => void;
-  // onClearFilters: () => void;
-
-  allowPublicCreate?: boolean;
-  TemplateNode: ReactNode;
+  DeleteDialog: ReactNode;
+  createItem: {
+    allowPublicCreate?: boolean;
+    onCreate: (data: Partial<IReportTemplate>) => void;
+    onCreateDefault: () => void;
+  };
 }
 ///// EDIT /////
-export interface ITableEdit<T = any> {
-  selectedItem: T | null;
-  setSelectedItem: (item: T | null) => void;
+export interface ITableEdit<T = unknown> {
+  selectedItem: ITableDataItem<T> | null;
+  setSelectedItem: (item: ITableDataItem<T> | null) => void;
   editData: Partial<T>;
   setEditData: Dispatch<SetStateAction<Partial<T>>>;
   onSubmit: (data: T, onSubmitCallback: () => void) => void;
@@ -186,6 +182,14 @@ export interface ITableEdit<T = any> {
   keepEditOnSubmit?: boolean;
 }
 
+///// DELETE /////
+export interface ITableItemDeleteData {
+  hasAccess: boolean;
+  itemToDeleteUuids: string[];
+  setItemToDeleteUuids: Dispatch<SetStateAction<string[]>>;
+  DeleteDialog: ReactNode;
+}
+
 ///// PRINT /////
 export interface IBasePrintData {
   label: string;
@@ -211,7 +215,6 @@ export type IGetPrintData<T> = (props: {
 export interface IPrintData<T = unknown> extends IBasePrintData {
   printPopupControl: IPopupControl;
   customHeader?: ITableColumn[][];
-  excludeColumnIds?: string[];
   isLoading?: boolean;
   progress?: number;
   tableData?: ITableDataItem[];

package/src/utils/i18n/i18nIUICyrilic.ts

@@ -91,6 +91,18 @@ export const i18nIUICyrilic = {
   ErrorMessage: 'Дошло је до грешке!',
   TryAgain: 'Покушај поново',
 
+  ////// NOTIFICATIONS //////
+  InApp: 'U aplikaciji',
+  MarkAllAsRead: 'Означи све као прочитано',
+  NoNewNotifications: 'Немате нове нотификације',
+  Notifications: 'Нотификације',
+  NotificationsAll: 'Све',
+  NotificationsUnread: 'Непрочитане',
+  NotificationsRead: 'Прочитане',
+  NotificationSound: 'Звук нотификације',
+  // NTitleADD_DOC: 'Додат је документ на платформу',
+  // NContentADD_DOC: 'Документ са бројем <documentNumber>{{- documentNumber}}</documentNumber> је додат на платформу',
+
   ////// PAGES //////
   ReturnToHomepage: 'Повратак на почетну страну',
   FooterText: `Инцептион ЦА је акредитовано сертификационо тело за квалификовану електронску доставу,

package/src/utils/i18n/i18nIUILatin.ts

@@ -91,6 +91,19 @@ export const i18nIUILatin = {
   ErrorMessage: 'Došlo je do greške!',
   TryAgain: 'Pokušaj ponovo',
 
+  ////// NOTIFICATIONS //////
+  InApp: 'In-app',
+  // MarkAsRead: 'Označi kao pročitano',
+  MarkAllAsRead: 'Označi sve kao pročitano',
+  NoNewNotifications: 'Nemate nove notifikacije',
+  Notifications: 'Notifikacije',
+  NotificationsAll: 'Sve',
+  NotificationsUnread: 'Nepročitane',
+  NotificationsRead: 'Pročitane',
+  NotificationSound: 'Zvuk notifikacije',
+  // NTitleADD_DOC: 'Dodat je dokument na platformu',
+  // NContentADD_DOC: 'Dokument sa brojem <documentNumber>{{- documentNumber}}</documentNumber> je dodat na platformu',
+
   ////// PAGES //////
   ReturnToHomepage: 'Povratak na početnu stranu',
   FooterText: `Inception CA je akreditovano sertifikaciono telo za kvalifikovanu elektronsku dostavu,

package/src/utils/i18n/i18nIUIMe.ts

@@ -90,6 +90,18 @@ export const i18nIUIMe = {
   ErrorMessage: 'Došlo je do greške!',
   TryAgain: 'Pokušajte ponovo',
 
+  ////// NOTIFICATIONS //////
+  InApp: 'In-app',
+  MarkAllAsRead: 'Označi sve kao pročitano',
+  NoNewNotifications: 'Nemate nove notifikacije',
+  Notifications: 'Notifikacije',
+  NotificationsAll: 'Sve',
+  NotificationsUnread: 'Nepročitane',
+  NotificationsRead: 'Pročitane',
+  NotificationSound: 'Zvuk notifikacije',
+  // NTitleADD_DOC: 'Dodat je dokument na platformu',
+  // NContentADD_DOC: 'Dokument sa brojem <documentNumber>{{- documentNumber}}</documentNumber> je dodat na platformu',
+
   ////// PAGES //////
   ReturnToHomepage: 'Povratak na početnu stranicu',
   FooterText: '',

package/src/utils/objectUtils.ts

@@ -1,4 +1,7 @@
+import { TFunction } from 'i18next';
 import { IBooleanObject } from '../types/IBasic';
+import { formatDate, formatDateAndTime } from './dateUtils';
+import { INotification } from '../types/INotifications';
 
 export const hasValue = (value: any) => ![null, undefined, ''].includes(value);
 
@@ -83,3 +86,19 @@ export const intersectArrays = <T>(
   const set2 = new Set(arr2);
   return (arr1 as T[]).filter(item => set2.has(item));
 };
+
+export const getNotificationValues = (
+  t: TFunction,
+  notificationValues?: INotification['values']
+) =>
+  notificationValues?.reduce((obj, item) => {
+    let processedValue = item.value;
+    if (item.format === 'TRANSLATE') {
+      processedValue = t(processedValue);
+    } else if (item.format === 'DATE') {
+      processedValue = formatDate(processedValue);
+    } else if (item.format === 'DATE_TIME') {
+      processedValue = formatDateAndTime(processedValue);
+    }
+    return { ...obj, [item.key]: processedValue };
+  }, {});

package/src/utils/tableUtils.ts

@@ -100,7 +100,7 @@ export const setTemplateData = ({
   newFilters && setFilters?.(newFilters);
   columnData &&
     columnData.setColumns?.(
-      getVisibleColumnsFromList(columnData.columns, template.columns)
+      getVisibleColumnsFromList(columnData.defaultColumns, template.columns)
     );
   template.sorts && setSort && setSort(template.sorts[0]);
 };

package/idea/Notifications.tsx

@@ -1,245 +0,0 @@
-import {
-  FontAwesomeIcon,
-  ISelectData,
-  IconButton,
-  Menu,
-  MenuItem,
-  SearchInput,
-  Trans,
-  clsx,
-  formatDate,
-  formatDateAndTime,
-  getActiveOrgUuid,
-  useTranslation,
-} from '@inceptionbg/iui';
-import { FC, useCallback, useContext, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { faBell } from '../../InceptionMain/src/assets/icons/duotone/faBell';
-import { faBell as faBellLight } from '../../InceptionMain/src/assets/icons/light/faBell';
-import { faEnvelope } from '../../InceptionMain/src/assets/icons/light/faEnvelope';
-import { faCaretDown } from '../../InceptionMain/src/assets/icons/solid/faCaretDown';
-import { faEnvelopeDot } from '../../InceptionMain/src/assets/icons/solid/faEnvelopeDot';
-import notification from '../../../assets/sound/notification.mp3';
-import { UserOrgContext } from '../../InceptionMain/src/context/UserOrgContext';
-import {
-  getNewNotificationCount,
-  getNotifications,
-  markAllNotificationsAsSeen,
-  markNotificationAsSeen,
-} from '../../InceptionMain/src/repo/NotificationsRepository';
-import { INotification } from '../../InceptionMain/src/types/INotifications';
-import { ControledMenu } from '../src/components/ControledMenu/ControledMenu';
-
-const sound = new Audio(notification);
-
-export const Notifications: FC = () => {
-  const [notificationCount, setNotificationCount] = useState(0);
-  const [notifications, setNotifications] = useState<INotification[]>([]);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isActionsOpen, setIsActionsOpen] = useState(false);
-  const [seen, setSeen] = useState<boolean | null>(null);
-
-  const { t } = useTranslation();
-  const { userSettings } = useContext(UserOrgContext);
-
-  const handleGetNotificationsCount = useCallback(
-    (withSound?: boolean) => {
-      getNewNotificationCount()
-        .then(newCount => {
-          setNotificationCount(count => {
-            userSettings.notificationsSound &&
-              withSound &&
-              newCount > count &&
-              sound.play();
-            return newCount;
-          });
-        })
-        .catch(() => {});
-    },
-    [userSettings.notificationsSound]
-  );
-
-  const handleGetNotifications = useCallback(() => {
-    if (isOpen) {
-      getNotifications(100, seen)
-        .then(data => setNotifications(data.notifications || []))
-        .catch(() => {});
-    }
-  }, [isOpen, seen]);
-
-  useEffect(() => {
-    if (getActiveOrgUuid()) {
-      handleGetNotificationsCount();
-
-      const notificationIntervalId = setInterval(() => {
-        handleGetNotificationsCount(true);
-      }, 50000);
-      return () => {
-        clearInterval(notificationIntervalId!);
-      };
-    }
-  }, [handleGetNotificationsCount]);
-
-  useEffect(handleGetNotifications, [handleGetNotifications]);
-
-  const seenOptions: ISelectData[] = [
-    { label: t('NotificationsAll'), value: null },
-    { label: t('NotificationsUnread'), value: false },
-    { label: t('NotificationsRead'), value: true },
-  ];
-
-  return (
-    <ControledMenu
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      placementY="bottom"
-      placementX="right"
-      size="l"
-      renderButton={ref => (
-        <div
-          ref={ref}
-          className="header-button notification-counter"
-          onClick={() => setIsOpen(true)}
-        >
-          <div className="bell">
-            <FontAwesomeIcon
-              className="icon24"
-              icon={!!notificationCount ? faBell : faBellLight}
-            />
-          </div>
-          {!!notificationCount && (
-            <div className="count">
-              {notificationCount > 99 ? '99+' : notificationCount}
-            </div>
-          )}
-        </div>
-      )}
-    >
-      <div>
-        <div className="flex gap-5 justify-between align-center px-3 py-2">
-          <h1>Notifikacije</h1>
-          <SearchInput onSearch={() => {}} />
-        </div>
-        <div className="flex justify-between px-3 py-2">
-          <div className="flex gap-2">
-            {seenOptions.map(({ label, value }) => (
-              <div
-                key={label}
-                className={clsx('link fs-13', {
-                  inactive: seen !== value,
-                })}
-                onClick={() => setSeen(value)}
-              >
-                {label}
-              </div>
-            ))}
-          </div>
-          {!!notifications.length && (
-            <Menu
-              isOpen={isActionsOpen}
-              onClose={() => setIsActionsOpen(false)}
-              placementX="right"
-              className="user-box-menu"
-              renderButton={ref => (
-                <p
-                  ref={ref}
-                  className="link fs-10"
-                  onClick={() => setIsActionsOpen(true)}
-                >
-                  {t('Actions')}
-                  <FontAwesomeIcon className="ml-1" icon={faCaretDown} />
-                </p>
-              )}
-            >
-              <MenuItem
-                label={t('MarkAllAsRead')}
-                onClick={() => {
-                  markAllNotificationsAsSeen()
-                    .then(() => {
-                      handleGetNotificationsCount();
-                      handleGetNotifications();
-                    })
-                    .catch(() => {});
-                }}
-              />
-            </Menu>
-          )}
-        </div>
-        <div className="notifications-container">
-          {!!notifications.length ? (
-            notifications.map(notification => (
-              <div
-                key={notification.uuid}
-                className={clsx('notification', { seen: notification.seen })}
-              >
-                <div className="header">
-                  <div>
-                    <p className="title">{t(`NTitle${notification.event}`)}</p>
-                    <p className="date">{formatDateAndTime(notification.createdAt)}</p>
-                  </div>
-                  <IconButton
-                    icon={notification.seen ? faEnvelope : faEnvelopeDot}
-                    className={notification.seen ? 'disabled' : 'unread-icon'}
-                    disabled={notification.seen}
-                    onClick={() =>
-                      markNotificationAsSeen(notification.uuid).then(() => {
-                        handleGetNotificationsCount();
-                        handleGetNotifications();
-                      })
-                    }
-                  />
-                </div>
-                <p className="desc">
-                  <Trans
-                    i18nKey={`NContent${notification.event}`}
-                    values={notification.values?.reduce((obj, e) => {
-                      let value = e.value;
-                      if (e.format === 'TRANSLATE') {
-                        value = t(value);
-                      } else if (e.format === 'DATE') {
-                        value = formatDate(value);
-                      } else if (e.format === 'DATE_TIME') {
-                        value = formatDateAndTime(value);
-                      }
-
-                      return {
-                        ...obj,
-                        [e.key]: value,
-                      };
-                    }, {})}
-                    t={t}
-                    components={notification.values?.reduce(
-                      (obj, e) =>
-                        e.url
-                          ? {
-                              ...obj,
-                              [e.key]: (
-                                <Link
-                                  to={e.url}
-                                  className="link"
-                                  onClick={() => {
-                                    !notification.seen &&
-                                      markNotificationAsSeen(notification.uuid).then(
-                                        handleGetNotifications
-                                      );
-                                  }}
-                                />
-                              ),
-                            }
-                          : obj,
-                      {
-                        bold: <span className="bold" />,
-                      }
-                    )}
-                  />
-                </p>
-              </div>
-            ))
-          ) : (
-            <p className="text-center fs-13 pt-2">{t('NoNewNotifications')}</p>
-          )}
-        </div>
-      </div>
-    </ControledMenu>
-  );
-};

package/idea/Table/Components/Columns/ColumnsList.tsx

@@ -1,61 +0,0 @@
-import { FC, useEffect, useState } from 'react';
-import { ITableColumn } from '../../../../types/ITable';
-import { Draggable, Droppable } from 'react-beautiful-dnd';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGripDotsVertical } from '../../../../assets/icons/solid/faGripDotsVertical';
-
-interface Props {
-  id: 'hidden' | 'visible';
-  items: ITableColumn[];
-  search: string;
-}
-
-export const ColumnsList: FC<Props> = ({ id, items, search }) => {
-  const [filteredItems, setFilteredItems] = useState<ITableColumn[]>([]);
-
-  useEffect(() => {
-    search.length &&
-      setFilteredItems(
-        items.filter(e =>
-          (typeof e.label === 'string' ? e.label : e.labelForFilter ?? '')
-            .toLocaleLowerCase()
-            .includes(search.toLocaleLowerCase())
-        )
-      );
-  }, [search, items]);
-
-  return (
-    <Droppable droppableId={id}>
-      {({ droppableProps, innerRef, placeholder }) => (
-        <div {...droppableProps} ref={innerRef} className="list-box">
-          {(search.length ? filteredItems : items).map(c => (
-            <Draggable
-              key={c.id}
-              draggableId={c.id}
-              index={items.indexOf(c)}
-              isDragDisabled
-            >
-              {({ innerRef, draggableProps, dragHandleProps }) => (
-                <div
-                  className="item"
-                  ref={innerRef}
-                  {...draggableProps}
-                  {...dragHandleProps}
-                  style={{
-                    ...draggableProps.style,
-                    top: 'unset',
-                    left: 'unset',
-                  }}
-                >
-                  {c.label}
-                  <FontAwesomeIcon icon={faGripDotsVertical} />
-                </div>
-              )}
-            </Draggable>
-          ))}
-          {placeholder}
-        </div>
-      )}
-    </Droppable>
-  );
-};

package/idea/Table/Components/Columns/SetColumnsList.tsx

@@ -1,113 +0,0 @@
-import { FC, useEffect, useState } from 'react';
-import { DragDropContext, OnDragEndResponder } from 'react-beautiful-dnd';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ITableColumn } from '../../../../types/ITable';
-import { Dialog } from '../../../Dialog/Dialog';
-import { faArrowRightArrowLeft } from '../../../../assets/icons/regular/faArrowRightArrowLeft';
-import { useTranslation } from 'react-i18next';
-import { ColumnsList } from './ColumnsList';
-import { SearchInput } from '../../../Inputs/SearchInput';
-
-interface Props {
-  columns: ITableColumn[];
-  setColumns: (data: ITableColumn[]) => void;
-  isOpen: boolean;
-  onClose: () => void;
-  withSearch?: boolean;
-}
-export const SetColumnsList: FC<Props> = ({
-  columns,
-  setColumns,
-  isOpen,
-  onClose,
-  withSearch,
-}) => {
-  const [hidden, setHidden] = useState<ITableColumn[]>([]);
-  const [visible, setVisible] = useState<ITableColumn[]>([]);
-  const [searchHidden, setSearchHidden] = useState('');
-  const [searchVisible, setSearchVisible] = useState('');
-
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    if (isOpen) {
-      let hiddenCols: ITableColumn[] = [];
-      let visibleCols: ITableColumn[] = [];
-      columns.forEach(
-        col =>
-          col.id !== 'actions' &&
-          !col.unavailable &&
-          (!!col.hidden ? hiddenCols.push(col) : visibleCols.push(col))
-      );
-      setHidden(hiddenCols);
-      setVisible(visibleCols);
-    }
-  }, [isOpen, columns]);
-
-  const onDragEnd: OnDragEndResponder = ({ source, destination }) => {
-    if (!destination) return;
-    const hiddenCols = [...hidden];
-    const visibleCols = [...visible];
-    const destinationIsHidden = destination.droppableId === 'hidden';
-
-    const sourceList = source.droppableId === 'hidden' ? hiddenCols : visibleCols;
-    const destinationList = destinationIsHidden ? hiddenCols : visibleCols;
-
-    const [removed] = sourceList.splice(source.index, 1);
-    destinationList.splice(destination.index, 0, removed);
-    if (source.droppableId !== destination.droppableId) {
-      destinationList[destination.index].hidden = destinationIsHidden;
-      setHidden(hiddenCols);
-      setVisible(visibleCols);
-    } else {
-      destinationIsHidden ? setHidden(hiddenCols) : setVisible(visibleCols);
-    }
-  };
-
-  const onSubmit = () => {
-    const newColumns = [...visible, ...hidden];
-    const lastCol = columns[columns.length - 1];
-    if (lastCol.id === 'actions') {
-      newColumns.push(lastCol);
-    }
-    setColumns(newColumns);
-    onClose();
-  };
-
-  return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <Dialog
-        isOpen={isOpen}
-        onClose={onClose}
-        confirmButton={{
-          label: t('Confirm'),
-          onClick: onSubmit,
-        }}
-        cancelButton={{ label: t('Cancel') }}
-        noBackgroundClick
-      >
-        <div className="dual-list-container">
-          <p className="pb-3">{t('DragDropListsInfo')}</p>
-          <div className="dual-list-content">
-            <p className="bold ml-2">{t('HiddenColumns')}:</p>
-            <div />
-            <p className="bold ml-2">{t('SelectedColumns')}:</p>
-
-            {withSearch && (
-              <>
-                <SearchInput onSearch={setSearchHidden} />
-                <div />
-                <SearchInput onSearch={setSearchVisible} />
-              </>
-            )}
-            <ColumnsList id="hidden" items={hidden} search={searchHidden} />
-            <div className="exchange-icon">
-              <FontAwesomeIcon icon={faArrowRightArrowLeft} />
-            </div>
-            <ColumnsList id="visible" items={visible} search={searchVisible} />
-          </div>
-        </div>
-      </Dialog>
-    </DragDropContext>
-  );
-};