@inceptionbg/iui 2.0.8 → 2.0.10

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,
-  };
-};

package/idea/Table2/hooks/useTableKeyboard.ts

@@ -1,115 +0,0 @@
-import { useEffect, useState } from 'react';
-import { ITableDataItem } from '../../../types/ITable';
-import { IKeyboardAction, ITableKeyboardActionsProp } from '../../../types/IKeyboard';
-import { useDialogObserver } from '../../Dialog/hooks/useDialogObserver';
-import { scrollToRow } from '../../../utils/TableUtils';
-
-export const useTableKeyboard = ({
-  enabled,
-  rows,
-  actions,
-}: {
-  enabled: boolean;
-  rows: ITableDataItem[];
-  actions: ITableKeyboardActionsProp;
-}) => {
-  const [focusedRow, setFocusedRow] = useState<ITableDataItem | null>(null);
-  const isDialogOpen = useDialogObserver();
-
-  useEffect(() => {
-    if (enabled && !isDialogOpen) {
-      const isEditing = !!actions.edit?.item;
-      const isAdding = !!actions.add?.isAdding;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        const isControlKeyPressed = event.ctrlKey || event.metaKey;
-        const rowIndex = focusedRow
-          ? rows.findIndex(row => row.uuid === focusedRow.uuid)
-          : -1;
-
-        const allActions: IKeyboardAction[] = [
-          {
-            key: 'ArrowDown',
-            isActive: !isEditing && !actions.moveDisabled,
-            onAction: () => {
-              // Leave action enabled to prevent default scroll movement
-              const nextRow = rowIndex + 1;
-              if (nextRow < rows.length) {
-                // rowIndex will be -1 if no row is selected so the next row will be 0
-                setFocusedRow(rows[nextRow]);
-                scrollToRow(rows[nextRow].uuid);
-              }
-            },
-          },
-          {
-            key: 'ArrowUp',
-            isActive: !isEditing && !actions.moveDisabled,
-            onAction: () => {
-              if (rowIndex !== 0) {
-                const prevRow = rowIndex > 0 ? rowIndex - 1 : rows.length - 1;
-                setFocusedRow(rows[prevRow]);
-                scrollToRow(rows[prevRow].uuid);
-              }
-            },
-          },
-          {
-            key: 'e',
-            normalizedKey: true,
-            ctrl: true,
-            isActive: !!actions.edit?.enabled && !!focusedRow,
-            onAction: () => !isEditing && actions.edit?.setItem(focusedRow?.item ?? null),
-          },
-          {
-            key: 'Enter',
-            isActive: !isEditing && !isAdding && !!focusedRow?.onRowClick,
-            onAction: focusedRow?.onRowClick!,
-          },
-          {
-            key: 'Escape',
-            isActive: !!focusedRow || !!isAdding,
-            onAction: () =>
-              isAdding
-                ? actions.add?.setIsAdding(false)
-                : actions.edit?.item
-                ? actions.edit?.setItem(null)
-                : setFocusedRow(null),
-          },
-          {
-            key: 'Insert',
-            isActive: !!actions.add?.enabled && !isAdding,
-            onAction: () => {
-              actions.add?.setIsAdding(true);
-              setFocusedRow(null);
-            },
-          },
-          {
-            key: 'Delete',
-            isActive: !isEditing && !!actions.delete?.enabled && !!focusedRow,
-            onAction: () =>
-              actions.delete?.onAction ?? actions.delete?.setItemUuid(focusedRow!.uuid),
-          },
-          ...(actions?.additional?.({ focusedRow, isEditing, isAdding }) || []),
-        ];
-
-        allActions.forEach(item => {
-          if (
-            item.isActive &&
-            item.key === (item.normalizedKey ? event.key.toLowerCase() : event.key) &&
-            !!item.ctrl === isControlKeyPressed
-          ) {
-            event.preventDefault();
-            event.stopPropagation();
-            item.onAction();
-          }
-        });
-      };
-
-      window.addEventListener('keydown', handleKeyDown);
-      return () => {
-        window.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [enabled, rows, focusedRow, actions, isDialogOpen]);
-
-  return focusedRow;
-};

package/src/assets/icons/light/faPenField.ts

@@ -1,15 +0,0 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-
-const prefix = "fal";
-const iconName = "pen-field";
-const width = 640;
-const height = 512;
-const unicode = "e211";
-const svgPathData =
-  "M560 256C551.2 256 544 263.2 544 272V448c0 17.67-14.33 32-32 32H64c-17.67 0-32-14.33-32-32V192c0-17.67 14.33-32 32-32h240C312.8 160 320 152.8 320 144S312.8 128 304 128H63.1C28.65 128 0 156.7 0 192v256c0 35.35 28.65 64 63.1 64h447.1c35.35 0 63.1-28.65 63.1-63.1L576 272C576 263.2 568.8 256 560 256zM640 76.14c0-12.28-4.686-24.57-14.06-33.94l-28.13-28.14C588.4 4.688 576.2 0 563.9 0s-24.57 4.688-33.94 14.06l-207.5 207.5C313.5 230.5 307.4 241.9 304.9 254.3l-16.66 83.35c-.162 .8104-.2393 1.612-.2393 2.396C288 346.6 293.4 352 299.1 352c.7852 0 1.586-.0781 2.398-.2402l83.35-16.67c12.39-2.479 23.77-8.566 32.7-17.5l207.5-207.5C635.3 100.7 640 88.42 640 76.14zM395.8 294.1c-4.48 4.48-10.13 7.506-16.35 8.748L325.5 314.5l10.78-53.93c1.244-6.219 4.27-11.88 8.754-16.36l146.3-146.3l50.76 50.76L395.8 294.1zM603.3 87.45l-38.62 38.62l-50.76-50.76l38.62-38.62C556.6 32.61 561.4 32 563.9 32s7.236 .6094 11.31 4.686l28.13 28.14C607.4 68.9 608 73.66 608 76.14C608 78.61 607.4 83.38 603.3 87.45zM104 320c0 13.25 10.75 24 24 24S152 333.3 152 320c0-13.26-10.75-24-24-24S104 306.7 104 320zM200 320c0 13.25 10.75 24 24 24S248 333.3 248 320c0-13.26-10.75-24-24-24S200 306.7 200 320z";
-
-export const faPenField: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};

package/src/assets/icons/solid/faMagnifyingGlass.ts

@@ -1,15 +0,0 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-
-const prefix = 'fas';
-const iconName = 'magnifying-glass';
-const width = 512;
-const height = 512;
-const unicode = 'f002';
-const svgPathData =
-  'M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z';
-
-export const faMagnifyingGlass: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, [], unicode, svgPathData],
-};

package/src/components/Dialog/DeleteItemDialog.tsx

@@ -1,52 +0,0 @@
-import { Dispatch, FC, SetStateAction, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Dialog } from './Dialog';
-import { faTrashCan } from '../../assets/icons';
-
-interface Props {
-  textId: string;
-  itemUuid: string;
-  setItemUuid: Dispatch<SetStateAction<string>>;
-  reloadItems: () => void;
-  deleteItemFunction: (itemUuid: string) => Promise<any>;
-}
-
-export const DeleteItemDialog: FC<Props> = ({
-  textId,
-  itemUuid,
-  setItemUuid,
-  reloadItems,
-  deleteItemFunction,
-}) => {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const { t } = useTranslation();
-
-  const handOnDelete = () => {
-    setIsLoading(true);
-    deleteItemFunction(itemUuid)
-      .then(() => {
-        reloadItems();
-        setItemUuid('');
-      })
-      .catch(() => {})
-      .finally(() => setIsLoading(false));
-  };
-
-  return (
-    <Dialog
-      isOpen={!!itemUuid}
-      onClose={() => setItemUuid('')}
-      title={t(`Delete${textId}Title`)}
-      desc={t(`Delete${textId}Desc`)}
-      isLoading={isLoading}
-      type="info"
-      confirmButton={{
-        label: t('Delete'),
-        icon: faTrashCan,
-        keepOpen: true,
-        onClick: handOnDelete,
-      }}
-    />
-  );
-};

package/src/components/Dialog/hooks/useDialogObserver.ts

@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-import { rootDir } from '../../../utils/RootDir';
-
-export const useDialogObserver = () => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  useEffect(() => {
-    const observer = new MutationObserver(mutationsList => {
-      if (mutationsList.find(mutation => mutation.type === 'childList')) {
-        const isDialogInRoot = rootDir.getElementsByClassName('iui-dialog').length > 0;
-        setIsDialogOpen(isDialogInRoot);
-      }
-    });
-
-    observer.observe(rootDir, { childList: true });
-
-    return () => observer.disconnect();
-  }, []);
-
-  return isDialogOpen;
-};