@inceptionbg/iui 2.0.4 → 2.0.6

package/idea/Table2/Components/TableFooter.tsx

@@ -0,0 +1,107 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ChangeEvent, FC, MouseEventHandler } from 'react';
+import { faAngleLeft } from '../../../icons/solid/faAngleLeft';
+import { faAngleRight } from '../../../icons/solid/faAngleRight';
+import { faRotateRight } from '../../../icons/solid/faRotateRight';
+import { IconButton } from '../../Button/IconButton';
+import { useTranslation } from 'react-i18next';
+import { IServerSidePagination } from '../../../types/ITable';
+
+interface Props {
+  pagination: IServerSidePagination;
+  noTotalRows?: boolean;
+  footerAction?: {
+    icon?: IconDefinition;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+  };
+  customLimit?: number[];
+}
+
+export const TableFooter: FC<Props> = ({
+  pagination: { limit, offset, setLimit, setOffset, totalRows },
+  noTotalRows,
+  footerAction,
+  customLimit,
+}) => {
+  const { t } = useTranslation();
+
+  const handleChangeLimit = (event: ChangeEvent<HTMLSelectElement>) => {
+    const newLimit = Math.floor(+event.target.value);
+    setLimit(newLimit);
+    setOffset(0);
+  };
+
+  const maxOffset = Math.ceil(totalRows / limit);
+
+  return (
+    <div className={`table-footer ${footerAction ? 'justify-between' : 'justify-right'}`}>
+      {!!footerAction && (
+        <IconButton
+          icon={footerAction.icon || faRotateRight}
+          onClick={footerAction.onClick}
+        />
+      )}
+      <div className="pagination">
+        <div className="flex align-center">
+          <p>{t('rowsPerPage')}</p>
+
+          <select value={limit} onChange={handleChangeLimit}>
+            {(customLimit || [5, 10, 25, 50, 100]).map(e => (
+              <option key={e} value={e}>
+                {e ? e : t('allResults')}
+              </option>
+            ))}
+          </select>
+          {!noTotalRows && (
+            <p className="mr-4">
+              {limit
+                ? `${offset * limit + 1}-${
+                    offset * limit + limit <= totalRows
+                      ? offset * limit + limit
+                      : totalRows
+                  } ${t('of')} ${totalRows}`
+                : `${t('allResults')} ${t('of')} ${totalRows} `}
+            </p>
+          )}
+        </div>
+        <div className="flex gap-1 align-center">
+          {noTotalRows ? (
+            <p>{`${t('page')}: ${offset + 1}`}</p>
+          ) : (
+            <p>{`${t('page')}: ${offset + 1}/${maxOffset}`}</p>
+          )}
+          <IconButton
+            disabled={offset < 1}
+            icon={faAngleLeft}
+            onClick={() => setOffset(offset - 1)}
+            size="s"
+          />
+          {!noTotalRows && (
+            <input
+              className="offset-input"
+              placeholder={`1-${maxOffset}`}
+              onKeyUp={e => {
+                if (e.key === 'Enter') {
+                  const value = +(e.target as HTMLInputElement).value;
+                  if (typeof value === 'number' && value >= 0 && value <= maxOffset)
+                    setOffset(value - 1);
+                  (e.target as HTMLInputElement).value = '';
+                }
+              }}
+            />
+          )}
+          <IconButton
+            disabled={
+              noTotalRows /* && serverSidePagination */
+                ? limit > totalRows
+                : offset + 1 >= maxOffset
+            }
+            icon={faAngleRight}
+            onClick={() => setOffset(offset + 1)}
+            size="s"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/idea/Table2/Components/TableOptions.tsx

@@ -0,0 +1,211 @@
+import { FC, ReactNode, useState } from 'react';
+import { faPrint } from '../../../icons/solid/faPrint';
+import {
+  ITableSortData,
+  ITableColumn,
+  ITableFilterData,
+  IPrintData,
+  ITableColumnsData,
+  ITable,
+  ICustomPrintData,
+} from '../../../types/ITable';
+import { getActiveFilterNumber, setTemplateData } from '../../../utils/TableUtils';
+import { NotificationBadge } from '../../Badge/NotificationBadge';
+import { Button } from '../../Button/Button';
+import { Menu } from '../../Menu/Menu';
+import { TablePrint } from './Print/TablePrint';
+import { SetColumnsList } from './Columns/SetColumnsList';
+import { SetSortList } from './SetSortList';
+import { SetTableFilter } from './SetTableFilter';
+import { faCaretDown } from '../../../icons/solid/faCaretDown';
+import { useTranslation } from 'react-i18next';
+import { TemplateList } from './Templates/TemplateList';
+import { MenuItem } from '../../Menu/MenuItem';
+import { TemplateCreate } from './Templates/TemplateCreate';
+import { maxChar } from '../../../utils/StringUtils';
+import { TemplateCreateDefault } from './Templates/TemplateCreateDefault';
+import { deletePropsThatEndsWith } from '../../../utils/ObjectUtils';
+import { CustomTablePrint } from './Print/CustomTablePrint';
+
+interface Props {
+  columns: ITableColumn[];
+  columnsData?: ITableColumnsData;
+  filterData?: ITableFilterData;
+  sortData?: ITableSortData;
+  printData?: IPrintData;
+  customPrintData?: ICustomPrintData;
+  templates?: ITable['templates'];
+  additionsalOptions?: ReactNode;
+}
+export const TableOptions: FC<Props> = ({
+  columns,
+  columnsData,
+  filterData,
+  sortData,
+  printData,
+  customPrintData,
+  templates,
+  additionsalOptions,
+}) => {
+  const [selectedTemplateName, setSelectedTemplateName] = useState('');
+  const [opened, setOpened] = useState<
+    'filter' | 'sort' | 'columns' | 'print' | 'templates' | ''
+  >('');
+
+  const { t } = useTranslation();
+
+  const onClose = () => setOpened('');
+
+  return (
+    <div className="table-options gap-2">
+      <div className="flex align-center gap-2">
+        {filterData && (
+          <>
+            <NotificationBadge number={getActiveFilterNumber(filterData.search)} small>
+              <Button
+                label={t('Filter')}
+                active={opened === 'filter'}
+                onClick={() => setOpened('filter')}
+                className="table-options-btn"
+                size="s"
+              />
+            </NotificationBadge>
+            <SetTableFilter
+              {...filterData}
+              onSubmit={search => {
+                filterData.onSubmit(search);
+                setSelectedTemplateName('');
+              }}
+              isOpen={opened === 'filter'}
+              onClose={onClose}
+            />
+          </>
+        )}
+        {columnsData && (
+          <>
+            <Button
+              label={t('Columns')}
+              active={opened === 'columns'}
+              onClick={() => setOpened('columns')}
+              className="table-options-btn"
+              size="s"
+            />
+            {opened === 'columns' && (
+              <SetColumnsList
+                columns={columnsData.columns}
+                setColumns={data => {
+                  columnsData.setColumns(data);
+                  setSelectedTemplateName('');
+                }}
+                isOpen={true}
+                onClose={onClose}
+                withSearch={columnsData.withSearch}
+              />
+            )}
+          </>
+        )}
+        {sortData && (
+          <Menu
+            renderButton={ref => (
+              <Button
+                label={t('Sort')}
+                iconEnd={faCaretDown}
+                active={opened === 'sort'}
+                onClick={() => setOpened('sort')}
+                ref={ref}
+                className="table-options-btn"
+                size="s"
+              />
+            )}
+            isOpen={opened === 'sort'}
+            onClose={onClose}
+            size={sortData.menuSize}
+          >
+            <SetSortList
+              {...sortData}
+              setSort={data => {
+                sortData.setSort(data);
+                setSelectedTemplateName('');
+              }}
+            />
+          </Menu>
+        )}
+        {templates && (
+          <Menu
+            renderButton={ref => (
+              <Button
+                label={
+                  selectedTemplateName
+                    ? `${t('Templates')} (${maxChar(selectedTemplateName, 30)})`
+                    : t('Templates')
+                }
+                iconEnd={faCaretDown}
+                active={opened === 'templates'}
+                onClick={() => setOpened('templates')}
+                ref={ref}
+                className="table-options-btn"
+                size="s"
+              />
+            )}
+            isOpen={opened === 'templates'}
+            onClose={onClose}
+          >
+            <TemplateList
+              identifier={templates.identifier}
+              onSelect={template => {
+                setTemplateData({
+                  template,
+                  columnsData,
+                  setFilters: e => {
+                    filterData?.setSearchData(e);
+                    filterData?.onSubmit(deletePropsThatEndsWith(e, 'Obj'));
+                  },
+                  setSort: sortData?.setSort,
+                });
+                setSelectedTemplateName(template.name);
+                onClose();
+              }}
+            />
+            <MenuItem
+              label={t('RemoveFiltersAndLook')}
+              onClick={() => {
+                templates.onClearFilters();
+                setSelectedTemplateName('');
+                onClose();
+              }}
+            />
+            <TemplateCreate
+              identifier={templates.identifier}
+              data={templates.data}
+              onSubmitCallback={onClose}
+            />
+            <TemplateCreateDefault
+              identifier={templates.identifier}
+              data={templates.data}
+              onClose={onClose}
+            />
+          </Menu>
+        )}
+        {additionsalOptions}
+      </div>
+      {(printData ?? customPrintData) && (
+        <>
+          <Button
+            label={t('PrintExport')}
+            icon={faPrint}
+            onClick={() => setOpened('print')}
+            size="s"
+          />
+          {opened === 'print' &&
+            (printData ? (
+              <TablePrint {...printData} isOpen onClose={onClose} columns={columns} />
+            ) : (
+              customPrintData && (
+                <CustomTablePrint {...customPrintData} isOpen onClose={onClose} />
+              )
+            ))}
+        </>
+      )}
+    </div>
+  );
+};

package/idea/Table2/Components/Templates/TemplateCreate.tsx

@@ -0,0 +1,75 @@
+import { FC, useState } from 'react';
+import { MenuItem } from '../../../Menu/MenuItem';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../../Dialog/Dialog';
+import { createReportTemplate } from './repo/TemplateRepo';
+import { IReportTemplate, IReportTemplateData } from '../../../../types/ITable';
+import { deleteEmptyProps } from '../../../../utils/ObjectUtils';
+import { TextInput } from '../../../Inputs/TextInput';
+import { Checkbox } from '../../../Inputs/Checkbox';
+import { convertSearchToReportTemplateFilter } from '../../../../utils/TableUtils';
+
+interface Props {
+  identifier: string;
+  data: IReportTemplateData;
+  onSubmitCallback: () => void;
+}
+
+export const TemplateCreate: FC<Props> = ({
+  identifier,
+  data: { searchData, visibleColumns, sorts },
+  onSubmitCallback,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [formData, setFormData] = useState<Partial<IReportTemplate>>({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { t } = useTranslation();
+
+  const onFormSubmit = () => {
+    setIsLoading(true);
+    const data = deleteEmptyProps({
+      identifier,
+      name: formData.name,
+      isPrivate: formData.isPrivate,
+      filterValues: convertSearchToReportTemplateFilter(searchData),
+      columns: visibleColumns,
+      sorts,
+    }) as Partial<IReportTemplate>;
+
+    createReportTemplate(data)
+      .then(() => {
+        setIsOpen(false);
+        onSubmitCallback();
+      })
+      .catch(() => {})
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <>
+      <MenuItem label={t('CreateTemplateLong')} onClick={() => setIsOpen(true)} />
+      <Dialog
+        title={t('CreateTemplate')}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        size="l"
+        isLoading={isLoading}
+        confirmButton={{ onFormSubmit, keepOpen: true }}
+      >
+        <div className="flex column gap-3">
+          <TextInput
+            label={t('Name')}
+            value={formData.name}
+            setValue={name => setFormData({ ...formData, name })}
+          />
+          <Checkbox
+            label={t('PrivateTemplate')}
+            value={formData.isPrivate}
+            setValue={isPrivate => setFormData({ ...formData, isPrivate })}
+          />
+        </div>
+      </Dialog>
+    </>
+  );
+};

package/idea/Table2/Components/Templates/TemplateCreateDefault.tsx

@@ -0,0 +1,45 @@
+import { FC } from 'react';
+import { MenuItem } from '../../../Menu/MenuItem';
+import { useTranslation } from 'react-i18next';
+import { createReportTemplate } from './repo/TemplateRepo';
+import { IReportTemplate, IReportTemplateData } from '../../../../types/ITable';
+import { deleteEmptyProps } from '../../../../utils/ObjectUtils';
+import { convertSearchToReportTemplateFilter } from '../../../../utils/TableUtils';
+
+interface Props {
+  identifier: string;
+  data: IReportTemplateData;
+  onClose: () => void;
+}
+
+export const TemplateCreateDefault: FC<Props> = ({
+  identifier,
+  data: { searchData, visibleColumns, sorts },
+  onClose,
+}) => {
+  const { t } = useTranslation();
+
+  const onSubmit = () => {
+    const data: Partial<IReportTemplate> = deleteEmptyProps({
+      identifier,
+      name: identifier,
+      isPrivate: true,
+      isDefault: true,
+      filterValues: convertSearchToReportTemplateFilter(searchData),
+      columns: visibleColumns,
+      sorts,
+    });
+
+    createReportTemplate(data);
+  };
+
+  return (
+    <MenuItem
+      label={t('CreateDefaultTemplate')}
+      onClick={() => {
+        onSubmit();
+        onClose();
+      }}
+    />
+  );
+};

package/idea/Table2/Components/Templates/TemplateList.tsx

@@ -0,0 +1,167 @@
+import { FC, useCallback, useEffect, useState } from 'react';
+import { MenuItem } from '../../../Menu/MenuItem';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../../Dialog/Dialog';
+import {
+  IReportTemplate,
+  ITableColumn,
+  ITableDataItem,
+  ITableFilter,
+} from '../../../../types/ITable';
+import { Table } from '../../Table';
+import { deleteReportTemplate, getReportTemplates } from './repo/TemplateRepo';
+import { ItemActionsMenu } from '../Edit/ItemActionsMenu';
+import { deleteEmptyProps, deleteProps } from '../../../../utils/ObjectUtils';
+import { DeleteItemDialog } from '../../../Dialog/DeleteItemDialog';
+import { IAnyObject } from '../../../../types/IBasic';
+import { TextInput } from '../../../Inputs/TextInput';
+import { Select } from '../../../Inputs/Selects/Select';
+import {
+  getActiveFilterNumber,
+  getVisibleColumnsIds,
+} from '../../../../utils/TableUtils';
+
+interface Props {
+  identifier: string;
+  onSelect: (template: IReportTemplate) => void;
+}
+
+export const TemplateList: FC<Props> = ({ identifier, onSelect }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [data, setData] = useState<ITableDataItem[]>([]);
+  const [limit, setLimit] = useState(5);
+  const [offset, setOffset] = useState(0);
+  const [totalRows, setTotalRows] = useState(0);
+  const [search, setSearch] = useState<{ nameLike?: string }>({});
+  const [searchData, setSearchData] = useState<{ nameLike?: string }>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [itemToDeleteUuid, setItemToDeleteUuid] = useState('');
+
+  const { t } = useTranslation();
+
+  const columns: ITableColumn[] = [
+    { id: 'name', label: t('Name') },
+    { id: 'private', label: t('PrivateTemplate') },
+    { id: 'actions', label: t('Actions'), width: '70px' },
+  ];
+
+  const handleGetTemplates = useCallback(() => {
+    if (isOpen) {
+      setIsLoading(true);
+      getReportTemplates({ limit, offset }, { identifier, ...deleteEmptyProps(search) }, [
+        'FILTER_VALUES',
+      ])
+        .then(({ templates, totalRows }) => {
+          setData(
+            templates.map(
+              e =>
+                ({
+                  uuid: e.uuid,
+                  onRowClick: () => {
+                    onSelect(e);
+                    setIsOpen(false);
+                  },
+                  cells: {
+                    name: { value: e.name },
+                    private: { value: t(e.isPrivate ? 'Yes' : 'No') },
+                    actions: {
+                      value: (
+                        <ItemActionsMenu
+                          item={e}
+                          //   setSelectedItem={e => setSelectedItem(e)}
+                          setItemToDeleteUuid={() => setItemToDeleteUuid(e.uuid)}
+                        />
+                      ),
+                      unclickable: true,
+                    },
+                  },
+                } as ITableDataItem)
+            )
+          );
+          setTotalRows(totalRows);
+        })
+        .catch(() => {})
+        .finally(() => setIsLoading(false));
+    }
+  }, [isOpen, limit, offset, identifier, search]);
+
+  useEffect(handleGetTemplates, [handleGetTemplates]);
+
+  return (
+    <>
+      <MenuItem label={t('SelectTemplate')} onClick={() => setIsOpen(true)} />
+      <Dialog
+        title={t('TemplateList')}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        size="l"
+      >
+        <Table
+          columns={columns}
+          data={data}
+          isLoading={isLoading}
+          serverSidePagination={{ limit, offset, setLimit, setOffset, totalRows }}
+          filterData={{
+            activeFilterNo: getActiveFilterNumber(search),
+            columns: getVisibleColumnsIds(columns),
+            filters: filters(searchData, setSearchData, t),
+            search,
+            searchData,
+            setSearchData,
+            onSubmit: (search: IAnyObject) => {
+              setOffset(0);
+              setSearch(search);
+            },
+          }}
+        />
+      </Dialog>
+      <DeleteItemDialog
+        itemUuid={itemToDeleteUuid}
+        setItemUuid={setItemToDeleteUuid}
+        textId="Template"
+        deleteItemFunction={deleteReportTemplate}
+        reloadItems={handleGetTemplates}
+      />
+    </>
+  );
+};
+
+const filters: (
+  search: IAnyObject,
+  setSearch: (search: IAnyObject) => void,
+  t: any
+) => ITableFilter = (search, setSearch, t) => ({
+  name: {
+    label: t('Name'),
+    field: (
+      <TextInput
+        placeholder={t('AddInput') + '...'}
+        value={search.nameLike}
+        setValue={nameLike => setSearch({ ...search, nameLike })}
+      />
+    ),
+    resetField: () => setSearch(deleteProps(search, ['nameLike'])),
+  },
+  private: {
+    label: t('PrivateTemplate'),
+    field: (
+      <Select
+        label={t('Choose')}
+        value={
+          search.isPrivate !== undefined
+            ? {
+                value: search.isPrivate,
+                label: t(search.isPrivate ? 'Yes' : 'No'),
+              }
+            : null
+        }
+        options={[
+          { value: true, label: t(`Yes`) },
+          { value: false, label: t(`No`) },
+        ]}
+        onChange={e => setSearch({ ...search, isPrivate: e.value })}
+      />
+    ),
+    resetField: () => setSearch(deleteProps(search, ['isPrivate'])),
+  },
+});

package/idea/Table2/Components/Templates/repo/TemplateRepo.ts

@@ -0,0 +1,51 @@
+import { IPagination, IReportTemplate } from '../../../../../types/ITable';
+import { getActiveOrgUuid } from '../../../../../utils/LocalStorageHelper';
+
+const baseUrl =
+  window.location.host.includes("test.inception.rs") || window.location.host.includes("localhost:")
+    ? 'https://report-templates.api.test.inception.rs'
+    : 'https://report-templates.api.inception.rs';
+
+export const getReportTemplates = (
+  pagination: IPagination,
+  search: { identifier: string; nameLike?: string; onlyLoggedInUserTemplates?: boolean },
+  fetchOptions?: ('SORT' | 'FILTER_VALUES' | 'COLUMNS' | 'CREATED_BY' | 'ORGANIZATION')[]
+) =>
+  axiosInstance
+    .get('/report-templates', {
+      params: {
+        ...pagination,
+        ...search,
+        fetchOptions,
+        organizationUuid: getActiveOrgUuid(),
+        subsystem: moduleId,
+      },
+      headers: { baseUrl },
+    })
+    .then(({ data }) => ({
+      templates: data.reportTemplates as IReportTemplate[],
+      totalRows: data.pagination.totalRows as number,
+    }));
+
+export const getDefaultReportTemplate = (identifier: string) =>
+  axiosInstance
+    .get(`/report-templates/${identifier}/default`, {
+      params: { organizationUuid: getActiveOrgUuid() },
+      headers: { baseUrl },
+    })
+    .then(({ data }) => data as IReportTemplate);
+
+export const createReportTemplate = (data: Partial<IReportTemplate>) =>
+  axiosInstance.post(
+    `/report-template`,
+    {
+      ...data,
+      organization: { uuid: getActiveOrgUuid() },
+      subsystem: moduleId,
+    },
+    { headers: { baseUrl } }
+  );
+export const deleteReportTemplate = (templateUuid: string) =>
+  axiosInstance.delete(`/report-templates/${templateUuid}`, {
+    headers: { baseUrl },
+  });