@boarteam/boar-pack-common-frontend 4.0.0 → 4.1.0

package/dist/tools/safetyRun.d.ts

@@ -1 +1,2 @@
-export default function safetyRun<T>(promise?: Promise<T>): void;
+export declare function safetyRun<T>(promise?: Promise<T>): void;
+export default safetyRun;

package/dist/tools/safetyRun.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = safetyRun;
+exports.safetyRun = safetyRun;
 function safetyRun(promise) {
     promise?.catch((e) => {
         console.error(e);
     });
 }
+exports.default = safetyRun;
 //# sourceMappingURL=safetyRun.js.map

package/dist/tools/safetyRun.js.map

@@ -1 +1 @@
-{"version":3,"file":"safetyRun.js","sourceRoot":"","sources":["../../src/tools/safetyRun.ts"],"names":[],"mappings":";;AAAA,4BAIC;AAJD,SAAwB,SAAS,CAAI,OAAoB;IACvD,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;QACnB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,CAAC,CAAA;AACJ,CAAC"}
+{"version":3,"file":"safetyRun.js","sourceRoot":"","sources":["../../src/tools/safetyRun.ts"],"names":[],"mappings":";;AAAA,8BAIC;AAJD,SAAgB,SAAS,CAAI,OAAoB;IAC/C,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;QACnB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,CAAC,CAAA;AACJ,CAAC;AAED,kBAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Common frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
@@ -8,7 +8,6 @@
   "main": "dist/index",
   "types": "dist/index.d.ts",
   "files": [
-    "src",
     "dist"
   ],
   "publishConfig": {
@@ -53,5 +52,5 @@
     "build": "rm -rf dist && tsc --project tsconfig.build.json",
     "yalc:push": "yalc push"
   },
-  "gitHead": "311a9d2be89fb756e01331f4a70fc79af411e6f9"
+  "gitHead": "db759a35be3528d9970b7d2408d3b90d19bd7741"
 }

package/src/components/ChangesModal/ChangesModal.tsx

@@ -1,260 +0,0 @@
-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";
-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) => Promise<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

@@ -1,51 +0,0 @@
-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: ProColumns<TUpdatedDiffResult>[] = [
-    ...(changedRecordsColumnsConfig as unknown as ProColumns<TUpdatedDiffResult>[]),
-    {
-      title: "Changes",
-      dataIndex: "diff",
-      key: "diff",
-      render: (_dom, entity) => (
-        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-          {entity.diff.map((change, index) => {
-            const c = change as { path?: any[]; lhs?: any; rhs?: any };
-            return (
-              <div key={index} style={{ display: "flex", alignItems: "center" }}>
-                <Tag color="blue">{c.path?.join(".")}</Tag>
-                {c.lhs ? `${c.lhs.toString()} →` : "- →"} {c.rhs ? c.rhs : c.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

@@ -1,176 +0,0 @@
-import { Descriptions, TImportConflict } from "../../index";
-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 as Entity[]);
-  }, [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

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

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

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

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