@inceptionbg/iui 2.0.7 → 2.0.10

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'])),
-  },
-});

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

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

package/idea/Table2/_table.scss

@@ -1,300 +0,0 @@
-table {
-  border-spacing: 0px;
-  border-collapse: collapse;
-}
-// .iui-table {
-//   //// Header ////
-//   th {
-//     border-bottom: var(--table-border);
-//     font-size: var(--fs-m);
-//     &:last-child {
-//       .vertical-separator {
-//         display: none;
-//       }
-//     }
-//   }
-//   .table-container {
-//     overflow: auto;
-//     // scroll-snap-type: y mandatory;
-//   }
-//   .sticky-header {
-//     position: sticky;
-//     top: 0;
-//     background-color: white;
-//   }
-//   .vertical-separator {
-//     height: 14px;
-//     width: 2px;
-//     background-color: #00000030;
-//   }
-
-//   //// Body ////
-//   tbody.no-last-border tr:last-child td {
-//     border: none;
-//   }
-//   // Row
-//   tr {
-//     // scroll-snap-align: start;
-//     margin-bottom: 2px;
-//     &.clickable:hover,
-//     &.selected {
-//       background-color: rgba(0, 0, 0, 0.05);
-//     }
-//     &.focused {
-//       background-color: var(--primary-o10);
-//     }
-//     &.loading {
-//       opacity: 0.5;
-//       pointer-events: none;
-//     }
-//   }
-//   // Cell
-//   th,
-//   td {
-//     // Cell colors
-//     &.secondary {
-//       background-color: rgba(0, 0, 0, 0.04);
-//       border-bottom: 1px solid #d3d3d3;
-//     }
-//   }
-//   td {
-//     height: 52px;
-//     padding: 7px 16px;
-//     font-size: var(--fs-m);
-//     box-sizing: border-box;
-//     border-bottom: var(--table-border);
-//   }
-//   .clickable-column:hover {
-//     background-color: var(--primary-o10) !important;
-//   }
-
-//   //// Footer ////
-
-//   .table-footer {
-//     display: flex;
-//     align-items: center;
-//     width: 100%;
-//     height: 52px;
-//     padding: 7px 16px;
-//     font-size: var(--fs-m);
-//     box-sizing: border-box;
-//   }
-//   .pagination {
-//     display: flex;
-//     align-items: center;
-//     color: rgba(0, 0, 0, 0.8);
-//     @media #{$bp-mobile} {
-//       flex-direction: column;
-//       align-items: end;
-//     }
-//     select {
-//       color: rgba(0, 0, 0, 0.8);
-//       background: none;
-//       border: none;
-//       text-align: right;
-//       cursor: pointer;
-//       padding: 0 8px;
-//       user-select: none;
-//       margin-left: 8px;
-//       margin-right: 16px;
-//     }
-//     .offset-input {
-//       width: 30px;
-//       border: none;
-//       border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-//       background: none;
-//       text-align: center;
-//       padding: 5px 0;
-//     }
-//   }
-
-//   @media #{$portrait} {
-//     tbody,
-//     tr {
-//       display: block;
-//     }
-//     tr {
-//       padding: 20px 0;
-//     }
-//     td {
-//       display: flex;
-//       align-items: center;
-//       height: unset !important;
-//       text-align: left;
-//     }
-//     thead {
-//       display: none;
-//     }
-//     tbody tr td {
-//       &:before {
-//         content: attr(data-th);
-//         font-weight: bold;
-//         text-align: left;
-//         padding-right: 10px;
-//       }
-//     }
-//   }
-// }
-
-.iui-table-filter {
-  .iui-dialog-content {
-    padding: 0;
-    margin: 8px 0;
-  }
-  .filters-search {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    .search-input {
-      max-width: 250px;
-    }
-  }
-  .table-filter-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    .label {
-      width: 150px;
-    }
-    .field {
-      display: inline-flex;
-      margin: 0 8px;
-      width: 100%;
-    }
-  }
-}
-
-.dual-list-container {
-  .dual-list-content {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    gap: 12px;
-  }
-  .list-box {
-    border: var(--table-border);
-    border-radius: 16px;
-    padding: 10px;
-    user-select: none;
-    & > .item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px;
-      font-size: 12px;
-      svg {
-        color: rgba(0, 0, 0, 0.6);
-        margin-left: 1rem;
-      }
-      &:hover {
-        background-color: var(--primary-o10);
-      }
-      &:active {
-        background-color: var(--primary-o25);
-      }
-    }
-  }
-  .exchange-icon {
-    display: flex;
-    align-items: center;
-    svg {
-      height: 20px;
-      width: 20px;
-    }
-  }
-}
-
-.edit-row {
-  background: #3d497714;
-}
-.primary-row {
-  background-color: rgba(var(--primary-rgb), 0.15);
-}
-.secondary-row {
-  background-color: #f1f1f1;
-}
-
-.table-options {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 4px;
-  .table-options-btn {
-    background: var(--background-dark);
-    border-radius: 4px;
-    font-weight: 700;
-    &:hover {
-      background-color: #dfe1eb !important;
-    }
-    svg {
-      height: 12px;
-      width: 12px;
-    }
-  }
-}
-
-//
-
-.grid-table {
-  display: grid;
-  // grid-template-rows: auto 1fr; /* Header auto height, body fills */
-  grid-template-columns: repeat(9, auto); /* Adjust based on columns */
-  thead,
-  tbody {
-    display: contents;
-  }
-
-  tbody {
-    max-height: 400px;
-    overflow-y: auto;
-  }
-  // thead {
-  // position: sticky;
-  // top: 0;
-  // background: #f9f9f9;
-  // z-index: 1;
-  // }
-
-  // tbody {
-  //   display: grid;
-  //   grid-template-columns: repeat(3, 1fr); /* Match columns */
-  // }
-
-  tr {
-    display: contents; /* Allows rows to use the grid structure */
-  }
-
-  th,
-  td {
-    box-sizing: border-box;
-    display: flex;
-    padding: 12px;
-    flex-grow: 1;
-    align-items: center;
-    min-height: 20px;
-    border: 1px solid #ddd; /* Apply borders to th and td */
-  }
-
-  // th:first-child,
-  // td:first-child {
-  //   border-left: none; /* Remove left border for the first column */
-  // }
-
-  // tr:last-child .td {
-  //   border-bottom: none; /* Remove bottom border from the last row */
-  // }
-
-  th {
-    background-color: #f4f4f4; /* Light background for the header */
-  }
-
-  tr:hover {
-    outline: 2px solid #007bff;
-    background: #6aa1ce;
-  }
-
-  tr + tr td {
-    border-top: none; /* Remove top border from subsequent rows */
-  }
-}

package/idea/Table2/hooks/useDefaultTemplate.ts

@@ -1,22 +0,0 @@
-import { useEffect, useState } from 'react';
-import { getDefaultReportTemplate } from '../Components/Templates/repo/TemplateRepo';
-import { IReportTemplate } from '../../../types/ITable';
-
-export const useDefaultTemplate = (identifier?: string) => {
-  const [template, setTemplate] = useState<IReportTemplate | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    if (identifier) {
-      getDefaultReportTemplate(identifier)
-        .then(setTemplate)
-        .catch(() => {})
-        .finally(() => setIsLoading(false));
-    }
-  }, [identifier]);
-
-  return {
-    defaultTemplate: template,
-    isLoadingDefaultTemplate: !!identifier && isLoading,
-  };
-};