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

package/src/components/Table/useImportExport.tsx

@@ -1,315 +0,0 @@
-import { Button, Tooltip } from 'antd';
-import { DownloadOutlined, UploadOutlined } from "@ant-design/icons";
-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";
-
-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,
-  columns,
-  changedRecordsColumnsConfig,
-  relationalFields,
-}: {
-  exportUrl?: string;
-  exportParams?: {
-    [key: string]: string | number
-  },
-  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 [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 getRelationalValue = (relationField: {
-    id: any;
-    name?: string;
-    description?: string;
-  }) => {
-    return relationField?.name || relationField?.description || relationField?.id;
-  }
-
-  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={buildExportUrl() ?? '#'} target={'_blank'}>
-      <Button icon={<UploadOutlined />} />
-    </Link>
-  </Tooltip>;
-
-  const importButton = <>
-    <Tooltip title="Import changes CSV file">
-      <Button
-        loading={isLoadingImport}
-        icon={<DownloadOutlined />}
-        onClick={openFileDialog}
-      />
-    </Tooltip>
-
-    <input
-      type="file"
-      ref={fileInputRef}
-      style={{ display: 'none' }}
-      accept=".csv"
-      onChange={handleFileAsync}
-    />
-  </>
-
-  return {
-    exportButton,
-    importButton,
-    setLastQueryParams,
-    diffResult,
-    setDiffResult,
-  };
-}

package/src/components/index.ts

@@ -1,6 +0,0 @@
-export * from './Descriptions';
-export * from './Inputs';
-export * from './QuestionMarkHint';
-export * from './Table';
-export * from './List';
-export * from './ChangesModal';

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './components/index';
-export * from './tools/index';

package/src/tools/ApiError.ts

@@ -1,18 +0,0 @@
-// Should be synced with common-backend/src/tools/ApiError.ts
-type TApiErrorBodyType = {
-    statusCode: number
-    message: string
-    errors: {
-        field: string,
-        message: string
-    }[]
-}
-
-// Copied from api-client/generated/core/ApiError.ts
-export class ApiError extends Error {
-    public readonly url: string;
-    public readonly status: number;
-    public readonly statusText: string;
-    public readonly body: TApiErrorBodyType;
-    public readonly request: any;
-}

package/src/tools/WebsocketClient.ts

@@ -1,146 +0,0 @@
-import { message } from "antd";
-
-export type TIncomeEvent = {
-  event: string;
-  data: {
-    message: string;
-    status?: WebSocket['readyState'];
-    [key: string]: any;
-  };
-};
-
-export enum WsErrorCodes {
-  ConnectionClosed = 1000,
-  InvalidJson = 4000,
-  ErrorMessage = 4001,
-  Unauthorized = 4003,
-}
-
-export class WebsocketClient {
-  private socket: WebSocket | null;
-  private reconnectTimeout: number | undefined;
-  private readonly worker: null | string;
-  private serverSocketStatus: WebSocket['readyState'] = WebSocket.CLOSED;
-
-  private readonly closeHandler: (event: CloseEvent) => void;
-  private readonly openHandler: () => void;
-  private readonly messageHandler: (msg: TIncomeEvent) => void;
-
-  constructor({
-    worker,
-    onOpen,
-    onMessage,
-    onClose,
-  }: {
-    worker: null | string;
-    onOpen: () => void;
-    onMessage: (msg: TIncomeEvent) => void;
-    onClose?: (event: CloseEvent) => void;
-  }) {
-    this.worker = worker;
-    this.closeHandler = onClose || (() => {});
-    this.openHandler = onOpen;
-    this.messageHandler = onMessage;
-
-    this.connect();
-  }
-
-  get status() {
-    return this.serverSocketStatus === WebSocket.OPEN ? this.socket?.readyState : this.serverSocketStatus;
-  }
-
-  private connect() {
-    const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const url = `${wsProtocol}//${location.host}/ws/${this.worker || 'primary'}/ws`;
-    console.log(`QuotesDataSocket: connecting to ${url}...`);
-    this.serverSocketStatus = WebSocket.CONNECTING;
-    this.socket = new WebSocket(url);
-    this.socket.addEventListener("open", this.onOpen);
-    this.socket.addEventListener("message", this.onMessage);
-    this.socket.addEventListener("error", this.onError);
-    this.socket.addEventListener("close", this.onClose);
-  }
-
-  private onError = (event: WebSocketEventMap['error']) => {
-    console.error(`QuotesDataSocket: error for ${this.worker || 'primary'} socket:`);
-    console.error(event);
-    this.socket?.close();
-  }
-
-  private onClose = (event: WebSocketEventMap['close']) => {
-    console.log(`QuotesDataSocket: ${this.worker || 'primary'} socket closed`);
-    this.socket?.removeEventListener("close", this.onClose);
-    this.socket?.removeEventListener("error", this.onError);
-    this.socket?.removeEventListener("message", this.onMessage);
-    this.socket?.removeEventListener("open", this.onOpen);
-    this.socket = null;
-    this.closeHandler(event);
-  }
-
-  private onOpen = () => {
-    this.openHandler();
-  }
-
-  private onMessage = async (event: WebSocketEventMap['message']) => {
-    let msg: TIncomeEvent;
-
-    try {
-      msg = JSON.parse(event.data);
-    } catch (e) {
-      console.error(`Error, while parsing message from WS server ${event.data}`);
-      console.error(e);
-      this.socket?.close(WsErrorCodes.InvalidJson, "Invalid JSON");
-      return;
-    }
-
-    if (msg.event === "error") {
-      console.error(`Error from WS server: ${msg.data.message}`);
-      this.socket?.close(WsErrorCodes.ErrorMessage, msg.data.message);
-      await message.error(`WS server error: ${msg.data.message}`);
-      return;
-    }
-
-    if (msg.event === "status") {
-      this.serverSocketStatus = msg.data?.status ?? this.serverSocketStatus;
-    }
-
-    this.messageHandler(msg);
-  }
-
-  public close(): Promise<void> {
-    clearTimeout(this.reconnectTimeout);
-    if (!this.socket || this.socket.readyState === WebSocket.CLOSED) {
-      return Promise.resolve();
-    }
-
-    return new Promise((resolve) => {
-      this.socket?.addEventListener("close", () => resolve(), { once: true });
-      this.socket?.close();
-    });
-  }
-
-  public reconnect(timeout: number) {
-    this.reconnectTimeout = setTimeout(() => {
-      this.connect();
-    }, timeout) as unknown as number;
-  }
-
-  public send<T>(data: T) {
-    const send = () => {
-      this.socket?.send(JSON.stringify(data));
-    }
-
-    if (this.socket?.readyState !== WebSocket.OPEN) {
-      console.warn(`QuotesDataSocket: socket is not ready to send data`);
-      this.socket.addEventListener("open", send, { once: true });
-      return;
-    }
-
-    try {
-      send();
-    } catch (e) {
-      console.error(`QuotesDataSocket: error, while sending data to WS server`);
-      console.error(e);
-    }
-  }
-}

package/src/tools/index.ts

@@ -1,6 +0,0 @@
-export * from './safetyRun';
-export * from './useFullscreen';
-export * from './numberTools';
-export * from './useTabs';
-export * from './WebsocketClient';
-export * from './ApiError'

package/src/tools/numberTools.ts

@@ -1,6 +0,0 @@
-export function dropTrailZeroes(str: string | undefined) {
-  if (typeof str === 'string' && str.includes(".")) {
-    return str.replace(/\.?0*$/, "");
-  }
-  return str;
-}

package/src/tools/safetyRun.ts

@@ -1,5 +0,0 @@
-export default function safetyRun<T>(promise?: Promise<T>): void {
-  promise?.catch((e) => {
-    console.error(e);
-  })
-}

package/src/tools/useFullscreen.tsx

@@ -1,62 +0,0 @@
-import { useEffect, useState } from "react";
-import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
-import { Button } from "antd";
-import { createStyles } from "antd-style";
-
-function changeFullScreen(fullscreen: boolean) {
-  if (fullscreen) {
-    document.documentElement.requestFullscreen().catch((e) => {
-      console.log(e);
-    });
-  } else if (document.fullscreenElement) {
-    document.exitFullscreen().catch((e) => {
-      console.log(e);
-    });
-  }
-}
-
-const useStyles = createStyles(({ token }) => {
-  return {
-    fullscreen: {
-      backgroundColor: token.colorBgLayout,
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      zIndex: 100,
-      width: '100%',
-      height: '100%',
-      overflow: 'auto',
-    },
-    notFullscreen: {},
-  };
-});
-
-export function useFullscreen() {
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const { styles } = useStyles();
-
-  useEffect(() => {
-    const listener = () => {
-      setIsFullscreen(!!document.fullscreenElement);
-    };
-    document.addEventListener('fullscreenchange', listener);
-    return () => {
-      document.removeEventListener('fullscreenchange', listener);
-    }
-  }, []);
-
-  const button = <Button
-    key="fullscreen"
-    type="text"
-    onClick={() => changeFullScreen(!isFullscreen)}
-  >
-    {isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
-  </Button>;
-
-  return {
-    isFullscreen,
-    setIsFullscreen,
-    fullscreenClassName: isFullscreen ? styles.fullscreen : styles.notFullscreen,
-    fullscreenButton: button,
-  };
-}

package/src/tools/useTabs.ts

@@ -1,17 +0,0 @@
-import { useSearchParams } from "react-router-dom";
-import React, { useEffect, useState } from "react";
-
-export function useTabs<T extends string>(defaultTab: T): [T, React.Dispatch<React.SetStateAction<T>>] {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [tab, setTab] = useState<T>(() => {
-    return searchParams.get('tab') as T ?? defaultTab;
-  });
-
-  useEffect(() => {
-    const newSearchParams = new URLSearchParams(searchParams);
-    newSearchParams.set('tab', tab);
-    setSearchParams(newSearchParams, { replace: true });
-  }, [tab]);
-
-  return [tab, setTab];
-}