@inceptionbg/iui 2.0.8 → 2.0.10

package/src/types/ITable.ts

@@ -1,73 +1,72 @@
-import {
-  Dispatch,
-  FunctionComponent,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  RefObject,
-  SetStateAction,
-} from 'react';
+import { Dispatch, MouseEvent, ReactElement, ReactNode, SetStateAction } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IAnyObject, ISimpleObject } from './IBasic';
 import { ITableKeyboardActionsBase } from './IKeyboard';
 
 export interface ITable {
   columns: ITableColumn[];
-  setColumns?: (data: ITableColumn[]) => void;
-  withColumnsSearch?: boolean;
+  // setColumns?: (data: ITableColumn[]) => void;
+  // withColumnsSearch?: boolean;
   customHeader?: ITableColumn[][];
   data: ITableDataItem[];
+  dataActions?: {
+    edit?: {
+      hasAccess: boolean;
+    };
+    delete?: {
+      onClick: (itemUuid: string) => void;
+      hasAccess: boolean;
+    };
+    actions?: {
+      label: string;
+      onClick: (item: ITableDataItem) => void;
+      hasAccess: boolean;
+    }[];
+  };
   sumRows?: ITableDataItem[];
   isLoading?: boolean;
-  serverSidePagination?: IServerSidePagination;
-  customPagination?: {
-    defaultLimit?: number;
-    customLimit?: number[];
-  };
-  selectedRowUuid?: string;
-  footerAction?: {
-    icon?: IconDefinition;
-    onClick: () => void;
-  };
+
   headerWrap?: boolean;
-  hideFooter?: boolean;
-  noTotalRows?: boolean;
-  showLastBorder?: boolean;
-  filterData?: ITableFilterData;
-  sortData?: ITableSortData;
-  printData?: IPrintData;
-  customPrintData?: ICustomPrintData;
-  additionsalOptions?: ReactNode;
+  selectedRowUuid?: string;
   rowSelect?: {
     selectedRows: Set<string>;
     setSelectedRows: Dispatch<SetStateAction<Set<string>>>;
     actions: ITableSelectedActions[];
   };
-  className?: string;
-  rowHeight?: 'xs' | 's' | 'm';
-  maxHeight?: string;
-  editable?: {
-    selectedItem?: any;
-    setSelectedItem?: (item: any) => void;
-    defaultDataValue?: any;
-    EditableRow?: FunctionComponent<ITableEditRow>;
-    onSubmit: (data: any, onSubmitCallback: () => void) => void;
-    addDisabled?: boolean;
-    addLabel?: string;
-    inputFocusRef?: RefObject<any>;
-    keepEditOnSubmit?: boolean;
-  };
+  filterData?: ITableFilterData;
+  sortData?: ITableSortData;
+  // printData?: IPrintData;
+  // customPrintData?: ICustomPrintData;
+  // additionsalOptions?: ReactNode;
+  editable?: ITableEdit;
   keyboard?: {
     enabled: boolean;
     actions: ITableKeyboardActionsBase;
   };
-  templates?: {
-    identifier: string;
-    data: IReportTemplateData;
-    setTemplateName?: (templateName: string) => void;
-    onClearFilters: () => void;
-    allowPublicCreate?: boolean;
+  footer?: {
+    paginationControl?: IPaginationControl;
+    customPagination?: {
+      defaultLimit?: number;
+      customLimit?: number[];
+    };
+    totalRows?: number;
+    // noTotalRows?: boolean;
+    footerAction?: {
+      icon?: IconDefinition;
+      onClick: () => void;
+    };
   };
+
+  className?: string;
+  rowHeight?: 'xs' | 's' | 'm';
+  maxHeight?: string;
+  // templates?: {
+  //   identifier: string;
+  //   data: IReportTemplateData;
+  //   setTemplateName?: (templateName: string) => void;
+  //   onClearFilters: () => void;
+  //   allowPublicCreate?: boolean;
+  // };
 }
 
 export interface ITableColumn {
@@ -88,7 +87,8 @@ export interface ITableColumn {
     desc: string;
     label: string;
   };
-  code?: string;
+  // code?: string;
+  className?: string;
 }
 
 export interface ITableDataItem {
@@ -97,42 +97,42 @@ export interface ITableDataItem {
   className?: string;
   item?: Record<string, any>;
   disableSelect?: boolean;
-  cells: {
-    [id: string]: {
-      value: any;
-      align?: ITableColumn['align'];
-      className?: string;
-      onClick?: (event?: MouseEvent<HTMLTableCellElement>) => void;
-      link?: boolean;
-      tooltip?: string;
-      span?: number;
-      unclickable?: boolean;
-      printValue?: string;
-    };
-  };
+  cells: ITableDataItemCells;
   extendable?: {
     element: ReactElement;
     isLoading?: boolean;
   };
 }
+export interface ITableDataItemCells {
+  [id: string]: {
+    value: any;
+    align?: ITableColumn['align'];
+    className?: string;
+    onClick?: (event?: MouseEvent<HTMLTableCellElement>) => void;
+    link?: boolean;
+    tooltip?: string;
+    span?: number;
+    unclickable?: boolean;
+    printValue?: string;
+  };
+}
 
 export interface ITableFilterData {
-  columns: string[];
   filters: ITableFilter;
+  customFilterIdList?: string[];
   activeFilterNo?: number;
   additionalFilters?: ReactElement;
+  defaultSearch?: IAnyObject;
   search: IAnyObject;
   searchData: IAnyObject;
   setSearchData: (search: IAnyObject) => void;
-  onSubmit: (search: IAnyObject) => void;
-  resetData?: IAnyObject;
+  onSearch: (search: IAnyObject) => void;
   excludeFromSearch?: string[];
 }
 
 export interface ITableFilterItem {
   label: string;
   field: ReactElement;
-  resetField: () => void;
 }
 export interface ITableFilter {
   [id: string]: ITableFilterItem;
@@ -146,8 +146,7 @@ export interface ITableSortData {
 }
 export interface ITableSort {
   label: string;
-  asc: string;
-  desc: string;
+  value: string;
 }
 
 export interface ITableColumnsData {
@@ -162,6 +161,22 @@ export interface ITableSelectedActions {
   disabled?: boolean;
   clearSelected?: boolean;
 }
+
+///// EDIT /////
+export interface ITableEdit<T = any> {
+  selectedItem: T | null;
+  setSelectedItem: (item: T | null) => void;
+  editData: Partial<T>;
+  setEditData: Dispatch<SetStateAction<Partial<T>>>;
+  onSubmit: (data: T, onSubmitCallback: () => void) => void;
+  cells: ITableDataItemCells;
+  defaultDataValue?: T;
+  addDisabled?: boolean;
+  addLabel?: string;
+  // inputFocusRef?: RefObject<any>;
+  keepEditOnSubmit?: boolean;
+}
+
 ///// PRINT /////
 export interface IBasePrintData {
   label: string;
@@ -194,27 +209,19 @@ export interface IPrintData extends IBasePrintData {
 }
 ///////////////
 
+///// PAGINATION /////
 export interface IPagination {
   limit: number;
   offset: number;
 }
-export interface IServerSidePagination {
+export interface IPaginationControl {
   limit: number;
   offset: number;
   setLimit: Dispatch<SetStateAction<number>>;
   setOffset: Dispatch<SetStateAction<number>>;
-  totalRows: number;
 }
 
-export interface ITableEditRow {
-  columns: ITableColumn[];
-  data: any;
-  setData: (data: any) => void;
-  item?: any;
-  clearItem: () => void;
-  defaultDataValue?: any;
-  inputFocusRef?: RefObject<any>;
-}
+///// REPORT TEMPLATE /////
 
 export interface IReportTemplate {
   uuid: string;

package/src/utils/fileUtils.ts

@@ -1,8 +1,8 @@
 // import i18next from 'i18next';
 import { IBooleanObject } from '../types/IBasic';
-import { lsGet } from './LocalStorageHelper';
-import { convertBooleanObjectToArray } from './ObjectUtils';
-import { toastError } from './Toasts';
+import { lsGet } from './localStorageHelper';
+import { convertBooleanObjectToArray } from './objectUtils';
+import { toastError } from './toasts';
 
 export const sizeInBytesPretty = (bytes?: number) => {
   if (bytes === 0) {

package/src/utils/i18n/i18nIUICyrilic.ts

@@ -1,5 +1,7 @@
 export const i18nIUICyrilic = {
   ////// BASIC //////
+  HomePage: 'Почетна',
+
   // Accept: 'Прихвати',
   Actions: 'Акције',
   Active: 'Активан',
@@ -37,7 +39,9 @@ export const i18nIUICyrilic = {
   Columns: 'Колоне',
   DragDropListsInfo:
     'Одаберите колоне за приказивање превлачењем са једне листе на другу',
+  TableSelect: 'Акције над изабраним елементима',
   Filter: 'Филтери',
+  ApplyFilters: 'Примени филтере',
   HiddenColumns: 'Сакривене колоне',
   NoResults: 'Нема резултата',
   of: 'од',

package/src/utils/i18n/i18nIUILatin.ts

@@ -1,8 +1,8 @@
 export const i18nIUILatin = {
   ////// BASIC //////
-  // Accept: 'Prihvati',
   HomePage: 'Početna',
 
+  // Accept: 'Prihvati',
   Actions: 'Akcije',
   Active: 'Aktivan',
   AddInput: 'Unesi',
@@ -39,7 +39,9 @@ export const i18nIUILatin = {
   Columns: 'Kolone',
   DragDropListsInfo:
     'Odaberite kolone za prikazivanje prevlačenjem sa jedne liste na drugu',
+  TableSelect: 'Akcije nad izabranim elementima',
   Filter: 'Filteri',
+  ApplyFilters: 'Primeni filtere',
   HiddenColumns: 'Sakrivene kolone',
   NoResults: 'Nema rezultata',
   of: 'od',

package/src/utils/i18n/i18nIUIMe.ts

@@ -1,5 +1,7 @@
 export const i18nIUIMe = {
   ////// BASIC //////
+  HomePage: 'Početna',
+
   Actions: 'Akcije',
   Active: 'Aktivan',
   AddInput: 'Unesi',
@@ -35,7 +37,9 @@ export const i18nIUIMe = {
   allResults: 'Svi',
   Columns: 'Kolone',
   DragDropListsInfo: 'Izaberite kolone za prikaz prevlačenjem sa jedne liste na drugu',
+  TableSelect: 'Akcije nad izabranim elementima',
   Filter: 'Filteri',
+  ApplyFilters: 'Primijeni filtere',
   HiddenColumns: 'Skrivene kolone',
   NoResults: 'Nema rezultata',
   of: 'od',

package/src/utils/{ObjectUtils.ts → objectUtils.ts}

@@ -1,5 +1,7 @@
 import { IBooleanObject } from '../types/IBasic';
 
+export const hasValue = (value: any) => ![null, undefined, ''].includes(value);
+
 export const deleteProps = <T extends Record<string, any>>(
   obj: T,
   props: (keyof T)[]
@@ -25,9 +27,7 @@ export const deletePropsThatEndsWith = <T extends Record<string, any>>(
 export const deleteEmptyProps = <T extends Record<string, any>>(obj: T): T =>
   Object.entries(obj).reduce(
     (updatedObj, [key, value]) =>
-      [null, undefined, ''].includes(value)
-        ? updatedObj
-        : ((updatedObj[key as keyof T] = value), updatedObj),
+      hasValue(value) ? ((updatedObj[key as keyof T] = value), updatedObj) : updatedObj,
     {} as T
   );
 
@@ -36,7 +36,7 @@ export const deleteEmptyPropsIncludingArray = <T extends Record<string, any>>(
 ): T =>
   Object.entries(obj).reduce(
     (updatedObj, [key, value]) =>
-      [null, undefined, ''].includes(value) || (Array.isArray(value) && !value.length)
+      !hasValue(value) || (Array.isArray(value) && !value.length)
         ? updatedObj
         : ((updatedObj[key as keyof T] = value), updatedObj),
     {} as T
@@ -69,10 +69,10 @@ export const compareArrayItemsIndex = <T>(
     (comparison === 'greaterThan'
       ? index1 > index2
       : comparison === 'greaterThanOrEqualTo'
-      ? index1 >= index2
-      : comparison === 'lessThan'
-      ? index1 < index2
-      : index1 <= index2)
+        ? index1 >= index2
+        : comparison === 'lessThan'
+          ? index1 < index2
+          : index1 <= index2)
   );
 };
 

package/src/utils/popupUtils.ts

@@ -0,0 +1,82 @@
+import { KeyboardEvent } from 'react';
+import { IKeyboardAction } from '../types/IKeyboard';
+
+export const onPopupKeyDown = (
+  event: KeyboardEvent<HTMLDivElement>,
+  {
+    onClose,
+    enter,
+    search,
+    focusableElements,
+  }: {
+    onClose: () => void;
+    enter?: {
+      onAction: () => void;
+      disabled?: boolean;
+    };
+    search?: {
+      onAction: () => void;
+      disabled?: boolean;
+    };
+    focusableElements?: HTMLElement[];
+  }
+) => {
+  event.stopPropagation();
+  const actions: IKeyboardAction[] = [
+    {
+      code: 'Enter',
+      onAction: () => enter?.onAction(),
+      disabled: !enter || !!enter.disabled,
+    },
+    { code: 'Escape', onAction: onClose },
+    {
+      code: 'KeyF',
+      ctrl: true,
+      onAction: () => {
+        event.preventDefault();
+        search?.onAction();
+      },
+      disabled: !search || !!search.disabled,
+    },
+    {
+      code: 'Tab',
+      onAction: () => {
+        if (focusableElements?.length) {
+          const first = focusableElements[0];
+          const last = focusableElements[focusableElements.length - 1];
+          if (document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+          }
+        }
+      },
+      disabled: !focusableElements?.length,
+    },
+    {
+      code: 'Tab',
+      shift: true,
+      onAction: () => {
+        if (focusableElements?.length) {
+          const first = focusableElements[0];
+          const last = focusableElements[focusableElements.length - 1];
+          if (document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+          }
+        }
+      },
+      disabled: !focusableElements?.length,
+    },
+  ];
+
+  actions.forEach(item => {
+    if (
+      !item.disabled &&
+      item.code === event.code &&
+      !!item.shift === event.shiftKey &&
+      !!item.ctrl === (event.ctrlKey || event.metaKey)
+    ) {
+      item.onAction();
+    }
+  });
+};

package/src/utils/{TableUtils.ts → tableUtils.ts}

@@ -76,10 +76,10 @@ export const convertReportTemplateFilterToSearch = (
             label: template.name,
           }
         : template.type === 'ARRAY'
-        ? JSON.parse(template.value)
-        : template.type === 'BOOLEAN'
-        ? template.value === 'true'
-        : template.value;
+          ? JSON.parse(template.value)
+          : template.type === 'BOOLEAN'
+            ? template.value === 'true'
+            : template.value;
   });
   return search;
 };
@@ -97,7 +97,7 @@ export const setTemplateData = ({
 }) => {
   const newFilters =
     template.filterValues && convertReportTemplateFilterToSearch(template.filterValues);
-  newFilters && setFilters && setFilters(newFilters);
+  newFilters && setFilters?.(newFilters);
   template.columns &&
     columnsData?.setColumns(
       getVisibleColumnsFromList(columnsData.columns, template.columns)

package/src/utils/{Toasts.ts → toasts.ts}

@@ -1,6 +1,6 @@
-import { toast } from 'react-toastify';
-
-export const toastSuccess = (message: string) => toast.success(message);
-export const toastError = (message: string) => toast.error(message, { autoClose: false });
-// export const toastInfo = (message: string) => toast.info(message);
-// export const toastWarn = (message: string) => toast.warn(message);
+import { toast } from 'react-toastify';
+
+export const toastSuccess = (message: string) => toast.success(message);
+export const toastError = (message: string) => toast.error(message, { autoClose: false });
+// export const toastInfo = (message: string) => toast.info(message);
+// export const toastWarn = (message: string) => toast.warn(message);

package/src/utils/{UrlUtils.ts → urlUtils.ts}

@@ -1,4 +1,4 @@
-export const parseUrlSearch = (search: string) => {
-  const urlSearchParams = new URLSearchParams(search);
-  return Object.fromEntries(urlSearchParams.entries());
-};
+export const parseUrlSearch = (search: string) => {
+  const urlSearchParams = new URLSearchParams(search);
+  return Object.fromEntries(urlSearchParams.entries());
+};

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

@@ -1,56 +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 '../../../../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)}>
-              {({ 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/Table2/Components/Columns/SetColumnsList.tsx

@@ -1,107 +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 '../../../../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.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 = () => {
-    setColumns([...visible, ...hidden]);
-    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>
-  );
-};