@inceptionbg/iui 2.0.35 → 2.0.36

package/idea/Table/Components/SetTableFilter.tsx

@@ -1,91 +0,0 @@
-import type { FC} from 'react';
-import { useMemo, useState } from 'react';
-import { faFilterCircleXmark } from '../../../assets/icons/regular/faFilterCircleXmark';
-import { faMagnifyingGlass } from '../../../assets/icons/solid/faMagnifyingGlass';
-import { faXmark } from '../../../assets/icons/solid/faXmark';
-import type { 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/Table/Components/TableFooter.tsx

@@ -1,137 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { FC, MouseEventHandler} from 'react';
-import { useEffect, useState } from 'react';
-import { faAngleLeft } from '../../../assets/icons/solid/faAngleLeft';
-import { faAngleRight } from '../../../assets/icons/solid/faAngleRight';
-import { faRotateRight } from '../../../assets/icons/solid/faRotateRight';
-import { IconButton } from '../../Button/IconButton';
-import { useTranslation } from 'react-i18next';
-import type { IServerSidePagination} from '../../../types/ITable';
-import { tableStandardLimit } from '../../../types/ITable';
-import { Select } from '../../Inputs/Selects/Select';
-import type { ISelectData } from '../../../types/ISelect';
-import { TextInput } from '../../Inputs/TextInput';
-
-interface Props {
-  pagination: IServerSidePagination;
-  noTotalRows?: boolean;
-  dataLength: number;
-  footerAction?: {
-    icon?: IconDefinition;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-  };
-  customLimit?: number[];
-}
-
-export const TableFooter: FC<Props> = ({
-  pagination: { limit, offset, setLimit, setOffset, totalRows },
-  noTotalRows,
-  dataLength,
-  footerAction,
-  customLimit,
-}) => {
-  const [tempOffset, setTempOffset] = useState(offset + 1);
-
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    setTempOffset(offset + 1);
-  }, [offset]);
-
-  const handleChangeLimit = (value: ISelectData) => {
-    const newLimit = Math.floor(+value.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}
-          tooltip={t('RefreshData')}
-          // outlined
-          size="s"
-        />
-      )}
-      <div className="pagination">
-        <div className="flex align-center gap-2">
-          <p>{t('rowsPerPage')}</p>
-          <Select
-            value={{ label: `${limit}`, value: limit }}
-            // size="s"
-            minWidth={60}
-            onChange={handleChangeLimit}
-            options={(customLimit || tableStandardLimit).map(e => ({
-              label: `${e}`,
-              value: e ?? t('allResults'),
-            }))}
-            isClearable={false}
-          />
-          {/* {(customLimit || tableStandardLimit).map(e => (
-              <option key={e} value={e}>
-                {e ? e : t('allResults')}
-              </option>
-            ))}
-          </Select> */}
-          {!noTotalRows && (
-            <p>
-              {limit
-                ? `${offset * limit + 1}-${
-                    offset * limit + limit <= totalRows
-                      ? offset * limit + limit
-                      : totalRows
-                  } ${t('of')} ${totalRows}`
-                : `${t('allResults')} ${t('of')} ${totalRows} `}
-            </p>
-          )}
-        </div>
-        <div className="separator" />
-        {/* <p>|</p> */}
-        <div className="flex gap-1 align-center">
-          <p>{t('page')}:</p>
-          <IconButton
-            disabled={offset < 1}
-            icon={faAngleLeft}
-            onClick={() => setOffset(offset - 1)}
-            size="s"
-          />
-          <TextInput
-            className="offset-input"
-            value={`${tempOffset}`}
-            setValue={e => !isNaN(+e) && setTempOffset(+e)}
-            isClearable={false}
-            inputProps={{
-              onFocus: e => e.target.select(),
-              onBlur: () => setTempOffset(offset + 1),
-              onKeyUp: e => {
-                if (e.key === 'Enter') {
-                  const value = tempOffset;
-                  if (typeof value === 'number' && value >= 0 && value <= maxOffset) {
-                    setOffset(value - 1);
-                  } else {
-                    setTempOffset(offset + 1);
-                  }
-                }
-              },
-            }}
-          />
-          <IconButton
-            disabled={
-              noTotalRows /* && serverSidePagination */
-                ? limit > dataLength
-                : offset + 1 >= maxOffset
-            }
-            icon={faAngleRight}
-            onClick={() => setOffset(offset + 1)}
-            size="s"
-          />
-          {!noTotalRows && <p>{`${t('of')} ${maxOffset}`}</p>}
-        </div>
-      </div>
-    </div>
-  );
-};

package/idea/Table/Components/TableOptions.tsx

@@ -1,227 +0,0 @@
-import type { FC, ReactNode} from 'react';
-import { useState } from 'react';
-import { faPrint } from '../../../assets/icons/solid/faPrint';
-import type {
-  ITableSortData,
-  ITableColumn,
-  ITableFilterData,
-  IPrintData,
-  ITableColumnsData,
-  ITable,
-  ICustomPrintData,
-} from '../../../types/ITable';
-import { getActiveFilterNumber, setTemplateData } from '../../../utils/tableUtils';
-import { NotificationBadge } from '../../Badge/NotificationBadge';
-import { TablePrint } from './Print/TablePrint';
-import { SetColumnsList } from './Columns/SetColumnsList';
-import { SetSortList } from './SetSortList';
-import { SetTableFilter } from './SetTableFilter';
-import { useTranslation } from 'react-i18next';
-// import { TemplateList } from './Templates/TemplateList';
-// import { TemplateCreate } from './Templates/TemplateCreate';
-// import { TemplateCreateDefault } from './Templates/TemplateCreateDefault';
-import { MenuItem } from '../../Menu/MenuItem';
-import { maxChar } from '../../../utils/stringUtils';
-import { deletePropsThatEndsWith } from '../../../utils/objectUtils';
-import { CustomTablePrint } from './Print/CustomTablePrint';
-import { IconButton } from '../../Button/IconButton';
-import { Tooltip } from '../../Tooltip/Tooltip';
-import { Menu } from '../../Menu/Menu';
-import { faFilter } from '../../../assets/icons/light/faFilter';
-import { faLineColumns } from '../../../assets/icons/light/faLineColumns';
-import { faArrowUpArrowDown } from '../../../assets/icons/light/faArrowUpArrowDown';
-
-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-3">
-        {filterData && (
-          <>
-            <NotificationBadge number={getActiveFilterNumber(filterData.search)}>
-              <IconButton
-                icon={faFilter}
-                tooltip={t('Filter')}
-                active={opened === 'filter'}
-                onClick={() => setOpened('filter')}
-                size="s"
-                variant="outlined"
-              />
-            </NotificationBadge>
-            <SetTableFilter
-              {...filterData}
-              onSubmit={search => {
-                filterData.onSubmit(search);
-                setSelectedTemplateName('');
-                templates?.setTemplateName?.('');
-              }}
-              isOpen={opened === 'filter'}
-              onClose={onClose}
-            />
-          </>
-        )}
-        {columnsData && (
-          <>
-            <IconButton
-              icon={faLineColumns}
-              tooltip={t('Columns')}
-              active={opened === 'columns'}
-              onClick={() => setOpened('columns')}
-              size="s"
-              variant="outlined"
-            />
-            {opened === 'columns' && (
-              <SetColumnsList
-                columns={columnsData.columns}
-                setColumns={data => {
-                  columnsData.setColumns(data);
-                  setSelectedTemplateName('');
-                  templates?.setTemplateName?.('');
-                }}
-                isOpen={true}
-                onClose={onClose}
-                withSearch={columnsData.withSearch}
-              />
-            )}
-          </>
-        )}
-        {sortData && (
-          <Menu
-            isOpen={opened === 'sort'}
-            onClose={onClose}
-            renderButton={ref => (
-              <Tooltip label={t('Sort')} ref={ref}>
-                <IconButton
-                  icon={faArrowUpArrowDown}
-                  active={opened === 'sort'}
-                  onClick={() => setOpened('sort')}
-                  size="s"
-                  variant="outlined"
-                />
-              </Tooltip>
-            )}
-            size={sortData.menuSize}
-          >
-            <SetSortList
-              {...sortData}
-              setSort={data => {
-                sortData.setSort(data);
-                setSelectedTemplateName('');
-                templates?.setTemplateName?.('');
-              }}
-            />
-          </Menu>
-        )}
-        {/* {templates && (
-          <Menu
-            renderButton={ref => (
-              <Tooltip
-                label={
-                  selectedTemplateName
-                    ? `${t('Templates')} (${maxChar(selectedTemplateName, 30)})`
-                    : t('Templates')
-                }
-                ref={ref}
-              >
-                <IconButton
-                  icon={faPenField}
-                  active={opened === 'templates'}
-                  onClick={() => setOpened('templates')}
-                  size="s"
-                  variant="outlined"
-                />
-              </Tooltip>
-            )}
-            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);
-                templates.setTemplateName?.(template.name);
-                onClose();
-              }}
-            />
-            <MenuItem
-              label={t('RemoveFiltersAndLook')}
-              onClick={() => {
-                templates.onClearFilters();
-                setSelectedTemplateName('');
-                templates.setTemplateName?.('');
-                onClose();
-              }}
-            />
-            <TemplateCreate
-              identifier={templates.identifier}
-              data={templates.data}
-              onSubmitCallback={onClose}
-              allowPublicCreate={templates.allowPublicCreate}
-            />
-            <TemplateCreateDefault
-              identifier={templates.identifier}
-              data={templates.data}
-              onClose={onClose}
-            />
-          </Menu>
-        )} */}
-        {(printData ?? customPrintData) && (
-          <>
-            <IconButton
-              icon={faPrint}
-              tooltip={t('PrintExport')}
-              onClick={() => setOpened('print')}
-              size="s"
-              variant="solid"
-            />
-            {opened === 'print' &&
-              (printData ? (
-                <TablePrint {...printData} isOpen onClose={onClose} columns={columns} />
-              ) : (
-                customPrintData && (
-                  <CustomTablePrint {...customPrintData} isOpen onClose={onClose} />
-                )
-              ))}
-          </>
-        )}
-        {additionsalOptions}
-      </div>
-    </div>
-  );
-};

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

@@ -1,80 +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;
-//   allowPublicCreate?: boolean;
-// }
-
-// export const TemplateCreate: FC<Props> = ({
-//   identifier,
-//   data: { searchData, visibleColumns, sorts },
-//   onSubmitCallback,
-//   allowPublicCreate,
-// }) => {
-//   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,
-//       isPublic: formData.isPublic,
-
-//       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 })}
-//           />
-//           {allowPublicCreate && (
-//             <Checkbox
-//               label={t('PublicTemplate')}
-//               value={formData.isPublic}
-//               setValue={isPublic => setFormData({ ...formData, isPublic })}
-//             />
-//           )}
-//         </div>
-//       </Dialog>
-//     </>
-//   );
-// };

package/idea/Table/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,
-//       isPublic: false,
-//       isDefault: true,
-//       filterValues: convertSearchToReportTemplateFilter(searchData),
-//       columns: visibleColumns,
-//       sorts,
-//     });
-
-//     createReportTemplate(data);
-//   };
-
-//   return (
-//     <MenuItem
-//       label={t('CreateDefaultTemplate')}
-//       onClick={() => {
-//         onSubmit();
-//         onClose();
-//       }}
-//     />
-//   );
-// };