@inceptionbg/iui 2.0.8 → 2.0.10

package/idea/Table2/Components/SetTableFilter.tsx

@@ -1,90 +0,0 @@
-import { FC, useMemo, useState } from 'react';
-import { faFilterCircleXmark } from '../../../icons/regular/faFilterCircleXmark';
-import { faMagnifyingGlass } from '../../../icons/solid/faMagnifyingGlass';
-import { faXmark } from '../../../icons/solid/faXmark';
-import { ITableFilterData, ITableFilterItem } from '../../../types/ITable';
-import { deleteEmptyPropsIncludingArray, deleteProps } from '../../../utils/ObjectUtils';
-import { Dialog } from '../../Dialog/Dialog';
-import { FilterItem } from './FilterItem';
-import { useTranslation } from 'react-i18next';
-import { SearchInput } from '../../Inputs/SearchInput';
-
-interface Props extends ITableFilterData {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export const SetTableFilter: FC<Props> = ({
-  columns,
-  filters,
-  additionalFilters,
-  excludeFromSearch,
-  searchData,
-  setSearchData,
-  onSubmit,
-  resetData,
-  isOpen,
-  onClose,
-}) => {
-  const [search, setSearch] = useState('');
-
-  const { t } = useTranslation();
-
-  const visibleFilters = useMemo(
-    () =>
-      columns.reduce(
-        (arr: ITableFilterItem[], col) =>
-          !!filters[col] ? arr.concat(filters[col]) : arr,
-        []
-      ),
-    [columns, filters]
-  );
-
-  const filteredFilters = useMemo(
-    () =>
-      visibleFilters.filter(e => e?.label.toLowerCase().includes(search.toLowerCase())),
-    [visibleFilters, search]
-  );
-
-  return (
-    <Dialog
-      className="iui-table-filter"
-      titleEl={
-        <div className="filters-search">
-          <h1>{t('Filter')}</h1>
-          <SearchInput onSearch={setSearch} className="search-input" />
-        </div>
-      }
-      isOpen={isOpen}
-      onClose={() => {
-        setSearch('');
-        onClose();
-      }}
-      cancelButton={{ icon: faXmark }}
-      additionalButton={{
-        label: t('ResetFilter'),
-        icon: faFilterCircleXmark,
-        onClick: () => {
-          setSearchData(resetData || {});
-          onSubmit(resetData || {});
-        },
-        disabled: resetData
-          ? JSON.stringify(searchData) === JSON.stringify(resetData)
-          : Object.keys(searchData).length === 0,
-      }}
-      confirmButton={{
-        label: t('Search'),
-        icon: faMagnifyingGlass,
-        onFormSubmit: () => {
-          const data = deleteEmptyPropsIncludingArray(searchData);
-          onSubmit(excludeFromSearch ? deleteProps(data, excludeFromSearch) : data);
-        },
-      }}
-    >
-      {filteredFilters?.map(item => (
-        <FilterItem key={item.label} item={item} />
-      ))}
-      {additionalFilters && <div className="pb-1">{additionalFilters}</div>}
-    </Dialog>
-  );
-};

package/idea/Table2/Components/TableFooter.tsx

@@ -1,107 +0,0 @@
-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

@@ -1,211 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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'])),
-  },
-});