@boarteam/boar-pack-common-frontend 3.2.1 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "description": "Common frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
@@ -26,14 +26,17 @@
   },
   "dependencies": {
     "@nestjsx/crud-request": "^5.0.0-alpha.3",
+    "deep-diff": "^1.0.2",
     "lodash": "^4.17.21",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.8.3",
     "@ant-design/pro-components": "^2.6.52",
     "@ant-design/pro-table": "^3.15.1",
     "@ant-design/pro-utils": "^2.15.5",
+    "@types/deep-diff": "^1.0.5",
     "@types/lodash": "^4.17.0",
     "@types/react-dom": "^18.2.22",
     "@umijs/plugin-locale": "^0.16.0",
@@ -47,5 +50,5 @@
   "scripts": {
     "yalc:push": "yalc push"
   },
-  "gitHead": "84d2c3f084f48afc57cb93f7eb2639c971bba5d2"
+  "gitHead": "b0da143812410567f09640cbc6a6ecf95516bed2"
 }

package/src/components/ChangesModal/ChangesModal.tsx

@@ -0,0 +1,262 @@
+import { Badge, Button, message, Modal, Tabs } from "antd";
+import { ProColumns } from "@ant-design/pro-components";
+import { createStyles } from "antd-style";
+import { useEffect, useState } from "react";
+import ConflictsTab from "./ConflictsTab";
+import ErrorsTab from "./ErrorsTab";
+import ResultsTab from "./ResultsTab";
+import NewRecordsTab, { TCreatedRecordsColumnsConfig } from "./NewRecordsTab";
+import ChangesTab from "./ChangesTab";
+import { TDiffResult } from "../Table/useImportExport";
+import { CancelablePromise } from "@boarteam/boar-pack-users-frontend/dist/src/tools/api-client";
+
+enum ModalTabs {
+  changes = "changes",
+  newRecords = "newRecords",
+  errors = "errors",
+  results = "results",
+  conflicts = "conflicts",
+}
+
+export type TServerErrorItem = { field: string; message: string };
+
+export type TRelationalFields = Map<string, {
+  key: string,
+  data: {
+    [key: string]: any,
+  }
+}>
+
+export type TImportConflict = {
+  id: number;
+  version: number;
+  fields: Array<{
+    field: string;
+    current_value: any;
+    imported_value: any;
+  }>;
+}
+
+export type TImportResponse = {
+  errors?: Array<TServerErrorItem>,
+  conflicts?: Array<TImportConflict>,
+  created_count: number,
+  updated_count: number
+}
+
+const useStyles = createStyles(() => {
+  return {
+    changesModal: {
+      ".ant-modal-content": {
+        width: 800,
+      },
+      ".ant-table-content": {
+        overflowX: "auto",
+      },
+      "ul": {
+        maxHeight: 500,
+        overflowY: "auto",
+      },
+    },
+  };
+});
+
+export function ChangesModal<
+  Entity,
+  ImportRequestParams,
+>({
+  onClose,
+  onCommit,
+  changes,
+  relationalFields,
+  originRecordsColumnsConfig,
+  changedRecordsColumnsConfig,
+  createdRecordsColumnsConfig,
+}: {
+  onCommit: (params: ImportRequestParams) => CancelablePromise<TImportResponse>,
+  onClose: () => void;
+  changes?: TDiffResult<Entity>,
+  relationalFields?: TRelationalFields,
+  originRecordsColumnsConfig: ProColumns<Entity>[],
+  changedRecordsColumnsConfig: ProColumns<Entity>[];
+  createdRecordsColumnsConfig: TCreatedRecordsColumnsConfig<Entity>;
+}) {
+  const { styles } = useStyles();
+  const [activeTab, setActiveTab] = useState<string>(ModalTabs.changes);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [importResponse, setImportResponse] = useState<TImportResponse>();
+  const [serverErrors, setServerErrors] = useState<TServerErrorItem[]>([]);
+  const [resolvedData, setResolvedData] = useState<Entity[]>();
+
+  useEffect(() => {
+    if (serverErrors.length > 0) {
+      setActiveTab(ModalTabs.errors);
+    }
+  }, [serverErrors.length]);
+
+  if (!changes) return null;
+
+  const { created, updated, tableData } = changes;
+
+  const onCancel = () => {
+    setActiveTab(ModalTabs.changes);
+    setImportResponse(undefined);
+    setServerErrors([]);
+    setResolvedData([])
+    onClose();
+  }
+
+  const handleCommitClick = async () => {
+    // TODO: Client validation
+    // ...
+    setServerErrors([]);
+    setIsLoading(true);
+
+    const modifiedSource = (resolvedData && resolvedData.length > 0)
+      ? resolvedData
+      : updated;
+
+    const payload: any = {
+      new: created,
+      modified: modifiedSource,
+    };
+
+    onCommit(payload).then((res) => {
+      setImportResponse(res);
+
+      // Check conflicts
+      if (res.conflicts?.length) {
+        setActiveTab(ModalTabs.conflicts);
+        message.error("There are conflicts in the import. Please resolve them.");
+        return;
+      }
+
+      setActiveTab(ModalTabs.results);
+    }).catch((err) => {
+      // TODO: Simplify
+      const status = err?.status || err?.statusCode || err?.response?.status;
+      const payload = err?.body || err?.response?.data || err?.data || err;
+
+      if ((status === 400 || payload?.statusCode === 400) && Array.isArray(payload?.errors)) {
+        setServerErrors(payload.errors);
+        message.error(payload.message || "Validation error");
+        return;
+      }
+
+      console.error("Commit failed:", err);
+      message.error("Unexpected error while committing changes");
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  };
+
+  const tabList = [
+    {
+      key: ModalTabs.changes,
+      tab: "Changed values",
+      disabled: tableData.length === 0,
+      label: tableData.length ? (
+        <Badge
+          size="small"
+          color="blue"
+          count={tableData.length}
+        >
+          Changed Values
+        </Badge>
+      ) : "Changed Values",
+      children: <ChangesTab
+        changedRecordsColumnsConfig={changedRecordsColumnsConfig}
+        updated={tableData}
+      />,
+    },
+    {
+      key: ModalTabs.newRecords,
+      tab: "New records",
+      disabled: created.length === 0,
+      label: created.length ? (
+        <Badge
+          size="small"
+          color="blue"
+          count={created.length}
+        >
+          New Records
+        </Badge>
+      ) : "New Records",
+      children: <NewRecordsTab
+        createdRecordsColumnsConfig={createdRecordsColumnsConfig}
+        created={created}
+      />,
+    },
+    {
+      key: ModalTabs.errors,
+      tab: "Import errors",
+      disabled: serverErrors.length === 0,
+      label: serverErrors.length ? (
+        <Badge size="small" count={serverErrors.length}>
+          Errors
+        </Badge>
+      ) : "Errors",
+      children: <ErrorsTab serverErrors={serverErrors} />,
+    },
+    {
+      key: ModalTabs.conflicts,
+      tab: "Import conflicts",
+      disabled: !importResponse || importResponse.conflicts?.length === 0,
+      label: importResponse?.conflicts?.length ? (
+        <Badge size="small" count={importResponse.conflicts.length}>
+          Conflicts
+        </Badge>
+      ) : "Conflicts",
+      children: <ConflictsTab<Entity>
+        conflicts={importResponse?.conflicts}
+        setResolvedData={setResolvedData}
+        relationalFields={relationalFields}
+        originColumns={originRecordsColumnsConfig}
+      />,
+    },
+    {
+      key: ModalTabs.results,
+      tab: "Import results",
+      disabled: !importResponse || !!importResponse.conflicts?.length,
+      label: "Results",
+      children: <ResultsTab importStatistic={
+        {
+          created: importResponse?.created_count || 0,
+          updated: importResponse?.updated_count || 0,
+        }
+      } />,
+    },
+  ];
+
+  return (
+    <Modal
+      title="Preview changes"
+      open={true}
+      onCancel={onCancel}
+      footer={[
+        <Button key="close" onClick={onCancel}>Close</Button>,
+        <Button
+          loading={isLoading}
+          type="primary"
+          key="approve"
+          onClick={handleCommitClick}
+          disabled={
+            importResponse?.conflicts?.length === 0
+            || serverErrors.length > 0
+            || updated.length === 0 && created.length === 0
+          }
+        >
+          Commit
+        </Button>,
+      ]}
+      className={styles.changesModal}
+    >
+      <Tabs
+        activeKey={activeTab}
+        onChange={setActiveTab}
+        defaultActiveKey="1"
+        items={tabList}
+      />
+    </Modal>
+  )
+}

package/src/components/ChangesModal/ChangesTab.tsx

@@ -0,0 +1,51 @@
+import diff from "deep-diff";
+import { Tag } from "antd";
+import { ProColumns } from "@ant-design/pro-components";
+import { TDiffResult, TUpdatedDiffResult } from "../Table/useImportExport";
+import ProTable from "@ant-design/pro-table";
+
+function ChangesTab<Entity> ({ updated, changedRecordsColumnsConfig }: {
+  updated: TDiffResult<Entity>['tableData'],
+  changedRecordsColumnsConfig: ProColumns<Entity>[]
+}) {
+  if (!updated.length) {
+    return <>
+      No changes found.
+    </>
+  }
+
+  const updateColumns = [
+    ...changedRecordsColumnsConfig,
+    {
+      title: "Changes",
+      dataIndex: "diff",
+      key: "diff",
+      render: (diff: diff.Diff<any, any>[]) => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          {diff.map((change, index) => {
+            return (
+              <div key={index} style={{ display: "flex", alignItems: "center" }}>
+                <Tag color="blue">{change.path.join(".")}</Tag>
+                {change.lhs ? `${change.lhs.toString()} →` : "- →"} {change.rhs ? change.rhs : change.rhs === false ? 'false' : '-'}
+              </div>
+            );
+          })}
+        </div>
+      ),
+    },
+  ];
+
+  return [
+    <h3 key='changes-header'>Changed Values (Local Comparing)</h3>,
+    <ProTable<TUpdatedDiffResult>
+      key='changes-data'
+      dataSource={updated}
+      columns={updateColumns}
+      rowKey='id'
+      search={false}
+      toolBarRender={false}
+    />
+  ]
+}
+
+export default ChangesTab;

package/src/components/ChangesModal/ConflictsTab.tsx

@@ -0,0 +1,176 @@
+import { Descriptions, TImportConflict } from "@boarteam/boar-pack-common-frontend";
+import { Tag, Tooltip, Button } from "antd";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { TImportResponse, TRelationalFields } from "./ChangesModal";
+import { keyBy } from "lodash";
+import { createStyles } from "antd-style";
+import { SwapOutlined } from "@ant-design/icons";
+import { ProColumns } from "@ant-design/pro-components";
+
+const useStyles = createStyles(() => {
+  return {
+    conflictsStyle: {
+      ".ant-descriptions-row > *:nth-child(1), .ant-descriptions-row > *:nth-child(2)": {
+
+      },
+      ".ant-descriptions-row > *:nth-child(3)": {
+
+      },
+      ".ant-descriptions-row > *:nth-child(4)": {
+        backgroundColor: "#f0fff0 !important",
+      },
+    },
+  };
+});
+
+const getCurrentKey = (field: string) => {
+  return `${field}-current`;
+};
+
+const getNormalizedKey = (field: string) => {
+  return field.replace('_id', '');
+}
+
+function ConflictsTab<Entity>({
+  conflicts,
+  relationalFields,
+  setResolvedData,
+  originColumns,
+}: {
+  conflicts?: TImportResponse['conflicts'],
+  relationalFields?: TRelationalFields;
+  setResolvedData?: Dispatch<SetStateAction<Entity[]>>;
+  originColumns: ProColumns<Entity>[];
+}) {
+
+  if (!conflicts || conflicts.length === 0) {
+    return <p>No conflicts found.</p>;
+  }
+
+  const getRelationalData = (key: string, value: string) => {
+    if (relationalFields?.has(key)) {
+      const relation = relationalFields.get(key);
+      return relation?.data[value] ?? null;
+    }
+
+    return value;
+  };
+
+  /*Initial value based on received conflicts
+  {
+    field: 'importing field value',
+    field-current: 'current field name from server',
+    ...
+  }*/
+  const [resolvedData, setLocalResolvedData] = useState<Record<string, any>[]>(conflicts.map(conflict => (
+    conflict.fields.reduce((acc: Record<string, any>, currentValue) => {
+      const key = getNormalizedKey(currentValue.field);
+      acc[key] = getRelationalData(key, currentValue.imported_value);
+      acc[getCurrentKey(key)] = getRelationalData(key, currentValue.current_value);
+
+      return acc;
+    }, {})
+  )));
+
+  useEffect(() => {
+    if (!setResolvedData) return;
+
+    const payload = resolvedData.map((obj, i) => {
+      const data = { ...obj };
+      // Remove "current" postfix key from the resolved data
+      Object.keys(obj).forEach(key => {
+        if (key.endsWith('-current')) {
+          delete data[key];
+        }
+      })
+
+      return {
+        id: conflicts[i].id,
+        ...data,
+        version: conflicts[i].version,
+      }
+    });
+
+    setResolvedData(payload);
+  }, [resolvedData, conflicts, setResolvedData]);
+
+  const { styles } = useStyles();
+
+  const useCurrentValue = (conflict: TImportConflict, field: string) => {
+    const key = getNormalizedKey(field);
+
+    // Update the resolved data for this conflict
+    setLocalResolvedData(prev => {
+      const newData = [...prev];
+      const index = conflicts.indexOf(conflict);
+      newData[index] = {
+        ...newData[index],
+        [key]: newData[index][getCurrentKey(key)],
+      };
+      return newData;
+    });
+  };
+
+  const keyedOriginColumns = keyBy(originColumns, "dataIndex");
+
+  return conflicts.map((conflict, idx) => {
+    const conflictColumns: ProColumns[] = [];
+
+    conflict.fields.forEach(field => {
+      const key = getNormalizedKey(field.field);
+      const originColumn = keyedOriginColumns[key];
+      conflictColumns.push({
+        ...originColumn,
+        dataIndex: getCurrentKey(key),
+        editable: false,
+        // Should override render to keep -current value
+        render: (node) => node
+      });
+      conflictColumns.push({
+        ...originColumn,
+        title: (
+          <div style={{ textAlign: 'center' }}>
+            <Tooltip title="Use value from server">
+              <Button
+                size="small"
+                type="link"
+                icon={<SwapOutlined />}
+                onClick={() => useCurrentValue(conflict, field.field)}
+              />
+            </Tooltip>
+          </div>
+        ),
+      });
+    });
+
+    return (
+      <div key={idx} style={{ display: "flex", flexDirection: "column", gap: 15, width: "100%" }}>
+        <div>
+          <Tag color="error">ID {conflict.id}</Tag>
+          <Tag color="blue">Server version: v{conflict.version}</Tag>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th style={{ width: '50%' }}>Current (From Server)</th>
+              <th style={{ width: '50%' }}>New (Importing)</th>
+            </tr>
+          </thead>
+        </table>
+        <Descriptions
+          size="small"
+          bordered
+          entity={resolvedData[idx]}
+          columns={conflictColumns}
+          column={2}
+          canEdit={true}
+          mainTitle={null}
+          className={styles.conflictsStyle}
+        >
+        </Descriptions>
+      </div>
+    );
+  });
+}
+
+export default ConflictsTab;

package/src/components/ChangesModal/ErrorsTab.tsx

@@ -0,0 +1,49 @@
+import { List, Tag } from "antd";
+import { TServerErrorItem } from "./ChangesModal";
+
+const formatField = (field: string) => {
+  const parts = field.split(".");
+  if (parts[0] === "new" && parts.length >= 3) {
+    const idx = Number(parts[1]);
+    return `New #${isNaN(idx) ? parts[1] : idx + 1}: ${parts.slice(2).join(".")}`;
+  }
+  if (parts[0] === "updated" && parts.length >= 3) {
+    const id = parts[1];
+    return `Updated ${id}: ${parts.slice(2).join(".")}`;
+  }
+  return field;
+};
+
+const ErrorsTab = ({
+                     serverErrors,
+                   }: {
+  serverErrors: TServerErrorItem[],
+}) => {
+  if (serverErrors.length === 0) {
+    return <div>No errors</div>;
+  }
+
+  return (
+    [
+      <p key='errors-header'>Please fix the following errors and repeat import</p>,
+      <List
+        key='errors-list'
+        size="small"
+        dataSource={serverErrors}
+        renderItem={(err, idx) => (
+          <List.Item key={idx}>
+            <div style={{ display: "flex", flexDirection: "column", gap: 4, width: "100%" }}>
+              {err.field && <div>
+                <Tag color="error">{formatField(err.field)}</Tag>
+              </div>}
+              <div>{err.message}</div>
+              {err.field && <div style={{ color: "#999" }}>({err.field})</div>}
+            </div>
+          </List.Item>
+        )}
+      />,
+    ]
+  );
+};
+
+export default ErrorsTab;

package/src/components/ChangesModal/NewRecordsTab.tsx

@@ -0,0 +1,48 @@
+import { ProColumns } from "@ant-design/pro-components";
+import { TDiffResult } from "../Table/useImportExport";
+import ProTable from "@ant-design/pro-table";
+import useColumnsSets, { TColumnsSet } from "../Table/useColumnsSets";
+
+export type TCreatedRecordsColumnsConfig<Entity> = {
+  columnsSets?: TColumnsSet<Entity>[],
+  columns: ProColumns<Entity>[],
+}
+
+function NewRecordsTab<Entity>({
+                                 created,
+                                 createdRecordsColumnsConfig,
+                               }: {
+  created: TDiffResult<Entity>['created'],
+  createdRecordsColumnsConfig: TCreatedRecordsColumnsConfig<Entity>,
+}) {
+  const { columns, columnsSets } = createdRecordsColumnsConfig;
+
+  const {
+    columnsSetSelect,
+    columnsState,
+  } = useColumnsSets<Entity>({
+    columns,
+    columnsSets,
+  });
+
+  if (!created.length) {
+    return <p>No new records found.</p>
+  }
+
+  return [
+    <h3 key='new-records-header'>New Records (Local Comparing)</h3>,
+    <ProTable<Entity>
+      key='new-records-data'
+      dataSource={created}
+      columns={columns}
+      columnsState={columnsState}
+      toolBarRender={(...args) => [
+        columnsSetSelect?.() || null,
+      ]}
+      rowKey={(record, index) => index}
+      search={false}
+    />,
+  ];
+}
+
+export default NewRecordsTab;

package/src/components/ChangesModal/ResultsTab.tsx

@@ -0,0 +1,28 @@
+import { CheckCircleOutlined, SyncOutlined } from "@ant-design/icons";
+
+type TImportStatistic = {
+  created: number;
+  updated: number;
+}
+
+const ResultsTab = ({
+  importStatistic
+                    }: {
+  importStatistic: TImportStatistic
+}) => {
+  return [
+    <h3 key='results-header'>Import Results</h3>,
+    <div key='results-data' style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <CheckCircleOutlined style={{ color: "#52c41a", marginRight: "8px" }} />
+        <span>Created: {importStatistic.created}</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <SyncOutlined style={{ color: "#1890ff", marginRight: "8px" }} />
+        <span>Updated: {importStatistic.updated}</span>
+      </div>
+    </div>
+  ]
+}
+
+export default ResultsTab;

package/src/components/ChangesModal/index.ts

@@ -0,0 +1 @@
+export * from './ChangesModal';

package/src/components/Inputs/RelationSelect.tsx

@@ -1,19 +1,30 @@
 import { ProFormSelect, ProFormSelectProps } from "@ant-design/pro-components";
 import { useState } from "react";
+import { useCreation } from "../Table";
+import { Space } from "antd";
 
-type RelationSelectProps<T> = ProFormSelectProps & {
+type RelationSelectProps<T, CreateDto = T> = ProFormSelectProps & {
   selectedItem: T | null | undefined,
   onChange?: (type: T | null) => void,
   filter?: string[],
-  fetchItems: (filter: string[], keyword?: string) => Promise<{data: T[]}>,
+  fetchItems: (filter: string[], keyword?: string) => Promise<{ data: T[] }>,
   fieldNames?: {
     value: string,
     label: string,
   },
+  onCreate?: ({}: { requestBody: CreateDto }) => Promise<T>,
+  creationColumns?: any[], // TODO: any specified in the createEntityModal. Need to fix it in the both places
+  idColumnName?: string & keyof T | (string & keyof T)[],
+  createPopupTitle?: string,
 };
 
-export const RelationSelect = function<T>({
+export const RelationSelect = function <T, CreateDto = T>({
   selectedItem,
+  onCreate,
+  creationColumns,
+  // @ts-ignore
+  idColumnName = 'id',
+  createPopupTitle = 'Add new record',
   onChange,
   filter = [],
   fetchItems,
@@ -22,13 +33,28 @@ export const RelationSelect = function<T>({
     label: 'name',
   },
   ...rest
-}: RelationSelectProps<T>) {
+}: RelationSelectProps<T, CreateDto>) {
   const { value: valueKey, label: labelKey } = fieldNames;
   const [value, setValue] = useState(selectedItem ? {
     label: selectedItem[labelKey as keyof T],
     value: selectedItem[valueKey as keyof T],
   } : undefined);
 
+  const {
+    creationModal,
+    createButton,
+  } = useCreation<T, CreateDto>({
+    onCreate,
+    columns: creationColumns,
+    popupCreation: !!onCreate,
+    createNewDefaultParams: {},
+    createButtonSize: 'small',
+    pathParams: {},
+    entityToCreateDto: (entity: T) => entity as unknown as CreateDto,
+    title: createPopupTitle,
+    idColumnName
+  });
+
   const request = async ({ keyWords: keyword }: { keyWords: string }) => {
     const reqFilter = [...filter];
     if (keyword) {
@@ -39,31 +65,44 @@ export const RelationSelect = function<T>({
   }
 
   return (
-    <ProFormSelect.SearchSelect
-      showSearch
-      mode={'single'}
-      request={request}
-      className='relational-select'
-      formItemProps={{
-        style: {
-          margin: 0,
-          display: 'inline-block',
-        }
-      }}
-      style={{ minWidth: 160 }}
-      placeholder='Please choose'
-      fieldProps={{
-        fieldNames: {
-          value: valueKey,
-          label: labelKey,
-        },
-        value,
-        onChange(value, row) {
-          setValue(value);
-          onChange?.(row ? value : null);
-        },
-      }}
-      {...rest}
-    />
+    <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+      <ProFormSelect.SearchSelect
+        showSearch
+        mode={'single'}
+        request={request}
+        className='relational-select'
+        formItemProps={{
+          style: {
+            margin: 0,
+            display: 'inline-block',
+          }
+        }}
+        style={{ minWidth: 160 }}
+        placeholder='Please choose'
+        fieldProps={{
+          fieldNames: {
+            value: valueKey,
+            label: labelKey,
+          },
+          value,
+          onChange(value, row) {
+            setValue(value);
+            onChange?.(row ? value : null);
+          },
+          dropdownRender: (menu) => (
+            <>
+              {menu}
+              {onCreate && (
+                <Space style={{ padding: '0 8px 4px', display: 'flex', justifyContent: 'center' }}>
+                  {createButton}
+                </Space>
+              )}
+            </>
+          ),
+        }}
+        {...rest}
+      />
+      {creationModal}
+    </div>
   );
 }

package/src/components/Table/Table.tsx

@@ -10,6 +10,8 @@ import { getTableDataQueryParams } from "./getTableDataQueryParams";
 import { useEditableTable } from "./useEditableTable";
 import { useBulkEditing } from "./useBulkEditing";
 import { useImportExport } from "./useImportExport";
+import { ChangesModal } from "../ChangesModal";
+import { ProColumns } from "@ant-design/pro-components";
 
 const useStyles = createStyles(() => {
   return {
@@ -21,12 +23,16 @@ const useStyles = createStyles(() => {
   }
 })
 
-const Table = <Entity extends Record<string | symbol, any>,
+const Table = <
+  Entity extends Record<string | symbol, any>,
   CreateDto = Entity,
   UpdateDto = Entity,
   TEntityParams = {},
   TPathParams extends Record<string, string | number> = {},
-  TKey = string,
+  TImportRequest = { // TODO: Add to Table types
+    new?: Array<Entity>,
+    modified?: Array<Entity>,
+  },
 >(
   {
     getAll,
@@ -37,7 +43,6 @@ const Table = <Entity extends Record<string | symbol, any>,
     onDeleteMany,
     exportUrl,
     exportParams,
-    onImport,
     pathParams,
     idColumnName = 'id',
     entityToCreateDto,
@@ -60,6 +65,7 @@ const Table = <Entity extends Record<string | symbol, any>,
     editPopupTitle,
     createPopupTitle,
     descriptionsMainTitle,
+    importConfig,
     ...rest
   }: TTableProps<Entity,
     CreateDto,
@@ -71,6 +77,14 @@ const Table = <Entity extends Record<string | symbol, any>,
   const actionRef = actionRefProp || actionRefComponent;
   const [updatePopupData, setUpdatePopupData] = useState<Partial<Entity> | undefined>();
   const { styles } = useStyles();
+  const flatColumns: ProColumns<Entity>[] = [];
+  columns.forEach((column) => {
+    if (column.children && column.children.length > 0) {
+      flatColumns.push(...column.children);
+    } else {
+      flatColumns.push(column);
+    }
+  });
 
   const {
     editableConfig,
@@ -122,10 +136,18 @@ const Table = <Entity extends Record<string | symbol, any>,
     createNewDefaultParams,
   });
 
-  const { exportButton, importButton, setLastQueryParams } = useImportExport<TPathParams>({
+  const {
+    exportButton,
+    importButton,
+    setLastQueryParams,
+    diffResult,
+    setDiffResult,
+  } = useImportExport<Entity, TPathParams>({
+    columns: flatColumns,
     exportUrl,
     exportParams,
-    onImport,
+    changedRecordsColumnsConfig: importConfig?.changedRecordsColumnsConfig,
+    relationalFields: importConfig?.relationalFields,
   })
 
   useEffect(() => {
@@ -207,7 +229,7 @@ const Table = <Entity extends Record<string | symbol, any>,
           ? bulkDeleteButton
           : null,
         !viewOnly && createButton || null,
-        !viewOnly && onImport && importButton || null,
+        !viewOnly && importConfig?.onImport && importButton || null,
         exportUrl && exportButton || null,
         ...toolBarRender && toolBarRender(...args) || [],
       ]}
@@ -247,6 +269,24 @@ const Table = <Entity extends Record<string | symbol, any>,
         entityToUpdateDto={entityToUpdateDto}
       />
     </Modal>
+    <ChangesModal<
+        Entity,
+        TImportRequest
+      >
+      {...(diffResult && { changes: diffResult })}
+      onCommit={importConfig?.onImport}
+      onClose={() => {
+        actionRef.current?.reload();
+        setDiffResult(undefined);
+      }}
+      originRecordsColumnsConfig={flatColumns}
+      changedRecordsColumnsConfig={importConfig?.changedRecordsColumnsConfig}
+      createdRecordsColumnsConfig={{
+        columnsSets,
+        columns: importConfig?.createdRecordsColumnsConfig
+      }}
+      relationalFields={importConfig?.relationalFields}
+    />
     {messagesContext}
   </>);
 };

package/src/components/Table/tableTypes.ts

@@ -6,6 +6,8 @@ import { TColumnsSet } from "./useColumnsSets";
 import { ColumnStateType } from "@ant-design/pro-table/es/typing";
 import { RowEditableConfig } from "@ant-design/pro-utils";
 import { ProColumns } from "@ant-design/pro-components";
+import { TImportResponse, TRelationalFields } from "../ChangesModal";
+import { CancelablePromise } from "@boarteam/boar-pack-users-frontend/dist/src/tools/api-client";
 
 export type IWithId = {
   id: string | number,
@@ -103,7 +105,7 @@ interface BaseProps<Entity,
   descriptionsMainTitle?: ProColumns<Entity>['title'] | null;
 }
 
-export interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}> {
+export interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}, ImportRequestParams = {}> {
   actionRef?: MutableRefObject<ActionType | undefined>;
   editable?: RowEditableConfig<Entity>;
   afterSave?: (record: Entity) => Promise<void>;
@@ -112,7 +114,6 @@ export interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}> {
   exportParams?: {
     [key: string]: string | number
   };
-  onImport?: (event: React.ChangeEvent<HTMLInputElement>) => Promise<any>;
   onUpdate: ({}: Partial<Entity> & {
     requestBody: UpdateDto,
     index?: number,
@@ -120,8 +121,16 @@ export interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}> {
   onDelete: ({}: Partial<Entity> & TPathParams) => Promise<void>;
   entityToCreateDto: (entity: Entity) => CreateDto;
   entityToUpdateDto: (entity: Entity) => UpdateDto;
-  onUpdateMany: ({}: Partial<Entity> & { requestBody: { updateValues: Partial<UpdateDto>[], records: Entity[] } } & TPathParams) => Promise<void>,
+  onUpdateMany: ({}: Partial<Entity> & {
+    requestBody: { updateValues: Partial<UpdateDto>[], records: Entity[] }
+  } & TPathParams) => Promise<void>,
   onDeleteMany: ({}: Partial<Entity> & { requestBody: { records: Entity[] } } & TPathParams) => Promise<void>,
+  importConfig?: {
+    onImport?: (params: ImportRequestParams) => CancelablePromise<TImportResponse>;
+    relationalFields?: TRelationalFields,
+    changedRecordsColumnsConfig: ProColumns<Entity>[],
+    createdRecordsColumnsConfig: ProColumns<Entity>[],
+  }
 }
 
 // Conditional type to merge base and editable props conditionally
@@ -138,4 +147,4 @@ export type TTableProps<Entity,
   CreateDto,
   UpdateDto,
   TEntityParams = {},
-  TPathParams = {}> = ConditionalProps<Entity, CreateDto, UpdateDto, TEntityParams, TPathParams>;
+  TPathParams = {}> = ConditionalProps<Entity, CreateDto, UpdateDto, TEntityParams, TPathParams>

package/src/components/Table/useImportExport.tsx

@@ -1,67 +1,315 @@
 import { Button, Tooltip } from 'antd';
 import { DownloadOutlined, UploadOutlined } from "@ant-design/icons";
-import { useState } from "react";
+import { ChangeEvent, useCallback, useRef, useState } from "react";
 import { TGetAllParams } from "./tableTypes";
 import { Link } from "react-router-dom";
+import * as XLSX from "xlsx";
+import diff from "deep-diff";
+import { ProColumns } from "@ant-design/pro-components";
+import { keyBy } from "lodash";
+import { TRelationalFields } from "../ChangesModal";
 
-export function useImportExport<TPathParams = {}>({
+type TImportedJSON<Entity> = (Entity & { id: string })[]
+
+export type TUpdatedDiffResult = {
+  id: string | number,
+  diff: diff.Diff<any, any>[],
+  [key: string]: any,
+}
+
+type TUpdatedResult = ({
+  id: string | number,
+  version: string | number,
+  [key: string]: any,
+})
+
+export type TDiffResult<Entity> = {
+  created: Entity[],
+  updated: TUpdatedResult[],
+  tableData: TUpdatedDiffResult[],
+}
+
+export function useImportExport<Entity, TPathParams = {}>({
   exportUrl,
   exportParams,
-  onImport
+  columns,
+  changedRecordsColumnsConfig,
+  relationalFields,
 }: {
   exportUrl?: string;
   exportParams?: {
     [key: string]: string | number
-  }
-  onImport?: (event: React.ChangeEvent<HTMLInputElement>) => Promise<any>;
+  },
+  columns: ProColumns<Entity>[],
+  changedRecordsColumnsConfig?: ProColumns<Entity>[],
+  relationalFields?: TRelationalFields,
 }) {
   const [isLoadingImport, setIsLoadingImport] = useState(false);
   const [lastQueryParams, setLastQueryParams] = useState<TGetAllParams & TPathParams>();
+  const keyedColumns = keyBy(columns, 'dataIndex');
 
-  const onImportChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    setIsLoadingImport(true);
-    await onImport?.(event)
-      .then((response) => {
-        console.log(response);
-      })
-      .finally(() => {
-        setIsLoadingImport(false);
-      });
+  const [diffResult, setDiffResult] = useState<TDiffResult<Entity>>();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const openFileDialog = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+      fileInputRef.current.click();
+    }
+  }, []);
+
+  const trueBooleanValues = [true, "TRUE", "True", "true", "1", "yes", "on"];
+
+  const buildExportUrl = useCallback(() => {
+    const params = {
+      ...(lastQueryParams && {
+        s: (lastQueryParams as any).s,
+        sort: (lastQueryParams as any).sort?.[0],
+      }),
+      ...exportParams,
+    } as Record<string, string | number | undefined>;
+
+    const qp = Object.entries(params)
+      .filter(([, v]) => v !== undefined && v !== null && v !== '')
+      .reduce((acc, [k, v]) => {
+        acc.append(k, String(v));
+        return acc;
+      }, new URLSearchParams());
+
+    return exportUrl
+      ? exportUrl + (qp.toString() ? `?${qp.toString()}` : '')
+      : undefined;
+  }, [exportUrl, exportParams, lastQueryParams]);
+
+  const fetchExportCsvArrayBuffer = useCallback(async (): Promise<ArrayBuffer> => {
+    const url = buildExportUrl();
+    if (!url) throw new Error('Specify exportUrl!');
+
+    const res = await fetch(url, {
+      method: 'GET',
+    });
+
+    if (!res.ok) {
+      throw new Error(`Can't get actual CSV data for comparing. HTTP ${res.status}`);
+    }
+    return await res.arrayBuffer();
+  }, [buildExportUrl]);
+
+  const normalizeRow = (row: any) => {
+    const normalizedRow = { ...row };
+    for (const key in normalizedRow) {
+      if (normalizedRow[key] === null) {
+        continue;
+      }
+
+      // Relational fields handling
+      const relationalKey = key.replace('_id', '');
+      if (relationalFields?.has(relationalKey)) {
+        const relation = relationalFields.get(relationalKey);
+        const id = Number(normalizedRow[key]);
+        normalizedRow[relationalKey] = relation.data[id] || null;
+        continue;
+      }
+
+      // Boolean values handling
+      if (keyedColumns[key]?.valueType === "switch") {
+        normalizedRow[key] = trueBooleanValues.includes(normalizedRow[key]);
+        continue;
+      }
+
+      // Numeric values handling
+      if (keyedColumns[key]?.valueType === "digit") {
+        normalizedRow[key] = Number(normalizedRow[key]);
+        continue;
+      }
+
+      // Empty values handling
+      if (['', 'null'].includes(normalizedRow[key])) {
+        normalizedRow[key] = null;
+        continue;
+      }
+
+      // Text values handling
+      // Text by default if not specified
+      if (keyedColumns[key] && keyedColumns[key].valueType === undefined || 'text') {
+        normalizedRow[key] = String(normalizedRow[key]);
+      }
+    }
+
+    return normalizedRow;
   }
 
-  const params = {
-    ...(lastQueryParams && {
-      s: lastQueryParams.s,
-      sort: lastQueryParams.sort?.[0],
-    }),
-    ...exportParams
+  const getRelationalValue = (relationField: {
+    id: any;
+    name?: string;
+    description?: string;
+  }) => {
+    return relationField?.name || relationField?.description || relationField?.id;
   }
 
-  const url = exportUrl + (Object.keys(params).length ? '?' + new URLSearchParams(params).toString() : '');
+  const handleFileAsync = async (e: ChangeEvent<HTMLInputElement>) => {
+    setIsLoadingImport(true);
+
+    const fileAfter = e.target.files[0];
+
+    if (!fileAfter) {
+      throw new Error('Choose CSV with changes.');
+    }
+
+    console.time('fetch actual export from api');
+
+    // File before now should be fetched from the same endpoint as the export button use
+    const dataBefore = await fetchExportCsvArrayBuffer();
+
+    console.timeEnd('fetch actual export from api');
+
+    const dataAfter = await fileAfter.arrayBuffer();
+
+    // Data is an ArrayBuffer
+    const workbookBefore = XLSX.read(dataBefore);
+    const workbookAfter = XLSX.read(dataAfter, {
+      type: 'array',
+      raw: true,
+    });
+
+    const jsonBefore: TImportedJSON<Entity> = XLSX.utils.sheet_to_json(workbookBefore.Sheets[workbookBefore.SheetNames[0]], {
+      defval: null
+    });
+
+    const jsonAfter: TImportedJSON<Entity> = XLSX.utils.sheet_to_json(workbookAfter.Sheets[workbookAfter.SheetNames[0]], {
+      defval: null
+    });
+
+    // TODO: Check JSON structure
+    // ...
+
+    const oldMap = Object.fromEntries(
+      jsonBefore.map(
+        (row) => {
+          return [row.id, normalizeRow(row)]
+        }
+      )
+    );
+    const newMap: { [key: string]: any } = {};
+
+    const diffResult: TDiffResult<Entity> = {
+      created: [],
+      updated: [],
+      tableData: [],
+    };
+
+    jsonAfter.map((row) => {
+      const normalizedRow = normalizeRow(row);
+
+      // New record
+      if (!normalizedRow.id) {
+        diffResult.created.push(normalizedRow);
+        return;
+      }
+
+      // Existing record
+      newMap[normalizedRow.id] = normalizedRow;
+    });
+
+    // Recognize added and changed records
+    for (const id in newMap) {
+      if (!oldMap[id]) {
+        continue;
+      }
+
+      const differences = diff<any, any>(oldMap[id], newMap[id], {
+        normalize: (currentPath, key, lhs, rhs) => {
+          // We don't need to compare versions
+          if (key === 'version') {
+            return [true, true];
+          }
+
+          // We don't care about relational ids. Skip them
+          if (key.endsWith('_id')) {
+            return [true, true];
+          }
+
+          // If the key is a relational field (dictionary value), we need to compare only value fields
+          if (relationalFields && relationalFields.has(key)) {
+            return [
+              getRelationalValue(lhs),
+              getRelationalValue(rhs),
+            ]
+          }
+
+          return [lhs, rhs];
+        }
+      });
+
+      if (differences) {
+        // console.log(differences);
+        const changedFields = differences.map((diff) => diff.path?.[0]).filter((field: string | undefined) => field);
+        const displayFields = changedRecordsColumnsConfig.map(column => column.dataIndex);
+
+        const payload: TUpdatedResult = {
+          id,
+          version: newMap[id].version,
+        };
+
+        const tableData: TUpdatedDiffResult = {
+          id,
+          diff: differences,
+        };
+
+        columns.forEach((column) => {
+          const key = String(column.dataIndex);
+          const value = newMap[id][key] === undefined ? newMap[id][key + "_id"] : newMap[id][key];
+          if (changedFields.includes(key)) {
+            payload[key] = value;
+          }
+
+          if (displayFields.includes(key)) {
+            tableData[key] = value;
+          }
+        })
+
+        // Will be sent to the server
+        diffResult.updated.push(payload);
+
+        // Will be shown in the "changed values" tab
+        diffResult.tableData.push(tableData);
+      }
+    }
+
+    // Store this value in the state
+    setDiffResult(diffResult);
+    setIsLoadingImport(false);
+  };
+
   const exportButton = <Tooltip title="Export">
-    <Link to={url} target={'_blank'}>
-      <Button icon={<DownloadOutlined />}/>
+    <Link to={buildExportUrl() ?? '#'} target={'_blank'}>
+      <Button icon={<UploadOutlined />} />
     </Link>
   </Tooltip>;
 
   const importButton = <>
-    <Tooltip title="Import">
-      <label htmlFor="import-input">
-        <Button loading={isLoadingImport} icon={<UploadOutlined />} />
-      </label>
+    <Tooltip title="Import changes CSV file">
+      <Button
+        loading={isLoadingImport}
+        icon={<DownloadOutlined />}
+        onClick={openFileDialog}
+      />
     </Tooltip>
+
     <input
       type="file"
-      id="import-input"
-      style={{ display: "none" }}
-      accept=".xlsx, .xls"
-      onChange={onImportChange}
+      ref={fileInputRef}
+      style={{ display: 'none' }}
+      accept=".csv"
+      onChange={handleFileAsync}
     />
   </>
 
   return {
     exportButton,
     importButton,
-    setLastQueryParams
+    setLastQueryParams,
+    diffResult,
+    setDiffResult,
   };
 }

package/src/components/index.ts

@@ -3,3 +3,4 @@ export * from './Inputs';
 export * from './QuestionMarkHint';
 export * from './Table';
 export * from './List';
+export * from './ChangesModal';