@boarteam/boar-pack-common-frontend 2.0.1

package/src/components/Table/tableTools.ts

@@ -0,0 +1,168 @@
+import { CondOperator, QueryJoin, SCondition } from "@nestjsx/crud-request";
+import { IWithId, TFilters, TSearchableColumn } from "./tableTypes";
+import React, { Key } from "react";
+import { TColumnsStates } from "./useColumnsSets";
+
+export function getFiltersSearch({
+  baseFilters = {},
+  filters = {},
+  searchableColumns,
+}: {
+  baseFilters?: TFilters,
+  filters?: TFilters,
+  searchableColumns: TSearchableColumn[],
+}): SCondition {
+  const filterKeys = new Set(Object.keys(filters).concat(Object.keys(baseFilters)));
+  const search: SCondition = { '$and': [] };
+  searchableColumns.forEach((col) => {
+    const colDataIndex = Array.isArray(col.field) ? col.field.join('.') : col.field;
+    const field = col.filterField || colDataIndex;
+    let operator = col.filterOperator || col.operator;
+    let value = filters[colDataIndex] || baseFilters[colDataIndex];
+    filterKeys.delete(colDataIndex);
+    if (!value || col.numeric && !Number.isFinite(Number(value))) {
+      return;
+    }
+
+    if (operator === Operators.between) {
+      if (value?.[0] === undefined) {
+        operator = Operators.lowerOrEquals;
+        value = value?.[1];
+      }
+      else if (value?.[1] === undefined) {
+        operator = Operators.greaterOrEquals;
+        value = value?.[0];
+      }
+    }
+
+    search.$and?.push({ [field]: { [operator]: value } });
+  });
+
+  if (filterKeys.size) {
+    throw new Error(`Some filters are not defined in searchableColumns: ${Array.from(filterKeys).join(', ')}`);
+  }
+
+  return search;
+}
+
+export const Operators = {
+  containsLow: CondOperator.CONTAINS_LOW,
+  contains: CondOperator.CONTAINS,
+  equals: CondOperator.EQUALS,
+  in: CondOperator.IN,
+  inLow: CondOperator.IN_LOW,
+  between: CondOperator.BETWEEN,
+  greaterOrEquals: CondOperator.GREATER_THAN_EQUALS,
+  lowerOrEquals: CondOperator.LOWER_THAN_EQUALS,
+} as const;
+
+export function applyKeywordToSearch(
+  filterSearch: SCondition,
+  searchableColumns: TSearchableColumn[],
+  columnsState?: TColumnsStates,
+  keyword?: string,
+): SCondition {
+  if (!keyword) {
+    return filterSearch;
+  }
+
+  const keywordSearches: SCondition[] = [];
+  keyword.split(' ').forEach((word) => {
+    const keywordSearch: SCondition = { $or: [] };
+    searchableColumns!.forEach((col) => {
+      if (col.searchField === null) {
+        return;
+      }
+
+      const dataIndex = Array.isArray(col.field) ? col.field.join(',') : col.field;
+      if (columnsState?.[dataIndex] && !columnsState[dataIndex].show) {
+        return;
+      }
+
+      const field = col.searchField || (Array.isArray(col.field) ? col.field.join('.') : col.field);
+      const operator = col.operator;
+
+      if (!col.numeric || Number.isFinite(Number(word))) {
+        keywordSearch.$or.push({ [field]: { [operator]: word } });
+      }
+    });
+
+    keywordSearches.push(keywordSearch);
+  });
+
+  if (!Array.isArray(filterSearch.$and)) {
+    throw new Error('Bad format of filter search');
+  }
+
+  return {
+    $and: [...filterSearch.$and, ...keywordSearches]
+  }
+}
+
+export type TIndexableRecord = {
+  dataIndex?: Key | Key[];
+  children?: TIndexableRecord[] | React.ReactNode;
+};
+
+export function collectFieldsFromColumns<T>(
+  columns: TIndexableRecord[] | undefined,
+  idColumnName: string | string[],
+  joinFields: Set<string> = new Set,
+  fields: Set<string> = new Set
+): string[] {
+  return [Array.from(buildFieldsFromColumns<T>(columns, idColumnName, joinFields, fields)).join(',')];
+}
+
+export function buildFieldsFromColumns<T>(
+  columns: TIndexableRecord[] | undefined,
+  idColumnName: string | string[],
+  joinFields: Set<string> = new Set,
+  fields: Set<string> = new Set
+): Set<string> {
+  columns?.forEach(col => {
+    if ('children' in col && Array.isArray(col.children)) {
+      buildFieldsFromColumns(col.children, idColumnName, joinFields, fields);
+    }
+
+    // skip id column because it is always included by backend
+    // and join fields because they are included by join
+
+    if (!col.dataIndex || (Array.isArray(idColumnName) ? idColumnName.includes(col.dataIndex) : col.dataIndex === idColumnName) || joinFields.has(col.dataIndex as string)) {
+      return;
+    }
+
+    fields.add(String(Array.isArray(col.dataIndex) ? col.dataIndex[0] : col.dataIndex));
+  });
+
+  return fields;
+}
+
+export function withNumericId<T extends IWithId>(entity: T): T & { id: number } {
+  return {
+    ...entity,
+    id: Number(entity.id),
+  };
+}
+
+export function buildJoinFields(join?: QueryJoin | QueryJoin[]) {
+  const joinFields = new Set<string>();
+  let joinSelect: string[] = [];
+  if (join) {
+    let joinArr = join;
+    if (!Array.isArray(joinArr)) {
+      joinArr = [joinArr];
+    }
+    joinSelect = joinArr.map(relation => {
+      joinFields.add(relation.field);
+      let res = relation.field;
+      if (relation.select) {
+        res += `||${relation.select.join(',')}`;
+      }
+      return res;
+    });
+  }
+  return {
+    joinSelect,
+    joinFields,
+  };
+}

package/src/components/Table/tableTypes.ts

@@ -0,0 +1,127 @@
+import React, { MutableRefObject } from "react";
+import { ActionType, ProTableProps } from "@ant-design/pro-table";
+import { QueryJoin, QuerySortArr } from "@nestjsx/crud-request";
+import { Operators } from "./tableTools";
+import { TColumnsSet } from "./useColumnsSets";
+import { ColumnStateType } from "@ant-design/pro-table/es/typing";
+import { RowEditableConfig } from "@ant-design/pro-utils";
+
+export type IWithId = {
+  id: string | number,
+}
+export type TGetAllParams = {
+  /**
+   * Selects resource fields. <a href="https://github.com/nestjsx/crud/wiki/Requests#select" target="_blank">Docs</a>
+   */
+  fields?: Array<string>,
+  /**
+   * Adds search condition. <a href="https://github.com/nestjsx/crud/wiki/Requests#search" target="_blank">Docs</a>
+   */
+  s?: string,
+  /**
+   * Adds filter condition. <a href="https://github.com/nestjsx/crud/wiki/Requests#filter" target="_blank">Docs</a>
+   */
+  filter?: Array<string>,
+  /**
+   * Adds OR condition. <a href="https://github.com/nestjsx/crud/wiki/Requests#or" target="_blank">Docs</a>
+   */
+  or?: Array<string>,
+  /**
+   * Adds sort by field. <a href="https://github.com/nestjsx/crud/wiki/Requests#sort" target="_blank">Docs</a>
+   */
+  sort?: Array<string>,
+  /**
+   * Adds relational resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#join" target="_blank">Docs</a>
+   */
+  join?: Array<string>,
+  /**
+   * Limit amount of resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#limit" target="_blank">Docs</a>
+   */
+  limit?: number,
+  /**
+   * Offset amount of resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#offset" target="_blank">Docs</a>
+   */
+  offset?: number,
+  /**
+   * Page portion of resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#page" target="_blank">Docs</a>
+   */
+  page?: number,
+  /**
+   * Reset cache (if was enabled). <a href="https://github.com/nestjsx/crud/wiki/Requests#cache" target="_blank">Docs</a>
+   */
+  cache?: number,
+}
+export type TFilters = {
+  [key: string]: number | string | boolean | (string | number)[] | null;
+}
+
+export type TGetRequestParams = {
+  baseFilters?: TFilters;
+  join?: QueryJoin | QueryJoin[];
+};
+export type TGetAllRequestParams = TGetRequestParams & {
+  keyword?: string;
+}
+export type TFilterParams = {
+  current?: number;
+  pageSize?: number;
+  sortMap?: { [key: string]: string };
+} & TGetAllRequestParams;
+export type TSort = {
+  [key: string]: 'ascend' | 'descend' | null,
+};
+export type TSearchableColumn = {
+  field: string | string[],
+  searchField?: string | null,
+  operator: typeof Operators[keyof typeof Operators],
+  filterField?: string,
+  filterOperator?: typeof Operators[keyof typeof Operators],
+  numeric?: boolean,
+}
+
+interface BaseProps<Entity,
+  CreateDto,
+  UpdateDto,
+  TEntityParams = {},
+  TPathParams = {}> extends ProTableProps<Entity, TEntityParams & TFilterParams> {
+  getAll: ({}: TGetAllParams & TPathParams) => Promise<{ data: Entity[] }>;
+  pathParams: TPathParams;
+  idColumnName?: string & keyof Entity | (string & keyof Entity)[];
+  createNewDefaultParams?: Partial<Entity>;
+  afterSave?: (record: Entity) => Promise<void>;
+  actionRef?: MutableRefObject<ActionType | undefined>;
+  editable?: RowEditableConfig<Entity>;
+  defaultSort?: QuerySortArr;
+  searchableColumns?: TSearchableColumn[];
+  viewOnly?: boolean;
+  columnsSets?: TColumnsSet<Entity>[];
+  popupCreation?: boolean;
+  columnsState?: ColumnStateType;
+  columnsSetSelect?: () => React.ReactNode;
+}
+
+interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}> {
+  onCreate?: ({}: { requestBody: CreateDto } & TPathParams) => Promise<Entity>;
+  onUpdate: ({}: Record<keyof Entity, string> & { requestBody: UpdateDto } & TPathParams) => Promise<Entity>;
+  onDelete: ({}: Record<keyof Entity, string> & TPathParams) => Promise<void>;
+  entityToCreateDto: (entity: Entity) => CreateDto;
+  entityToUpdateDto: (entity: Entity) => UpdateDto;
+  onUpdateMany: ({}: Record<keyof Entity, string> & { requestBody: { updateValues: Partial<UpdateDto>[], records: Entity[] } } & TPathParams) => Promise<void>,
+  onDeleteMany: ({}: Record<keyof Entity, string> & { requestBody: { records: Entity[] } } & TPathParams) => Promise<void>,
+}
+
+// Conditional type to merge base and editable props conditionally
+type ConditionalProps<Entity,
+  CreateDto,
+  UpdateDto,
+  TEntityParams,
+  TPathParams> = { viewOnly: true } extends { viewOnly: boolean }
+  ? BaseProps<Entity, CreateDto, UpdateDto, TEntityParams, TPathParams> & Partial<EditableProps<Entity, CreateDto, UpdateDto, TPathParams>>
+  : BaseProps<Entity, CreateDto, UpdateDto, TEntityParams, TPathParams> & EditableProps<Entity, CreateDto, UpdateDto, TPathParams>;
+
+// Main type
+export type TTableProps<Entity,
+  CreateDto,
+  UpdateDto,
+  TEntityParams = {},
+  TPathParams = {}> = ConditionalProps<Entity, CreateDto, UpdateDto, TEntityParams, TPathParams>;

package/src/components/Table/useColumnsSets.tsx

@@ -0,0 +1,110 @@
+import { ColumnsState, ProColumns } from "@ant-design/pro-components";
+import React, { useMemo, useState } from "react";
+import { Select } from "antd";
+import { ColumnStateType } from "@ant-design/pro-table/es/typing";
+import { TIndexableRecord } from "./tableTools";
+import QuestionMarkHint from "../QuestionMarkHint/QuestionMarkHint";
+import { SettingOutlined } from "@ant-design/icons";
+
+export type TColumnsSet<Entity> = {
+  name: string,
+  columns: (keyof Entity)[],
+}
+
+type TUseColumnsSetsParams<Entity> = {
+  columns: ProColumns<Entity>[],
+  columnsSets?: TColumnsSet<Entity>[],
+  defaultColumnState?: string;
+}
+
+export type TColumnsStates = Record<string, ColumnsState>;
+
+type TUseColumnsSetsResult<Entity> = {
+  columnsSetSelect: () => React.ReactNode,
+  chosenColumnsSet: TColumnsStates | undefined,
+  setChosenColumnsSet: React.Dispatch<React.SetStateAction<TColumnsStates | undefined>>,
+  setChosenColumnsSetByName: (value: string) => void,
+  columnsState: ColumnStateType,
+}
+
+type TColumnsState = Partial<Record<string, ColumnsState>>;
+
+function getColumnsStates<T>(
+  columns: TIndexableRecord[],
+  shownCols: Set<keyof T>,
+  state: TColumnsState = {},
+): Record<string, ColumnsState> {
+  columns.forEach(col => {
+    const idx = Array.isArray(col.dataIndex) ? col.dataIndex.join(',') : col.dataIndex;
+    if ('children' in col && Array.isArray(col.children)) {
+      getColumnsStates(col.children, shownCols, state);
+    }
+
+    if (idx && !shownCols.has(idx as keyof T)) {
+      state[idx as string] = { show: false };
+    }
+  }, state);
+
+  return state as Record<string, ColumnsState>;
+}
+
+export default function useColumnsSets<Entity>({
+  columns,
+  columnsSets,
+  defaultColumnState,
+}: TUseColumnsSetsParams<Entity>): TUseColumnsSetsResult<Entity> {
+  const columnsSetsByName: Map<string, TColumnsStates> = useMemo(
+    () => new Map<string, TColumnsStates>(
+      columnsSets?.map(({
+        name,
+        columns: columnsSet
+      }) => [
+        name,
+        getColumnsStates<Entity>(columns, new Set(columnsSet))
+      ])
+    ), [columns]
+  );
+
+  const [chosenSetName, setChosenSetName] = useState<string | undefined>(
+    defaultColumnState || columnsSets?.[0].name || undefined
+  );
+  const [chosenColumnsSet, setChosenColumnsSet] = useState<TColumnsStates | undefined>(
+    columnsSetsByName.get(chosenSetName || '') || undefined
+  );
+
+  const setChosenColumnsSetByName = (value: string) => {
+    setChosenSetName(value);
+    setChosenColumnsSet(columnsSetsByName.get(value));
+  }
+
+  const options = Array.from(columnsSetsByName.keys()).map(name => ({
+    value: name,
+    label: name,
+  }));
+
+  const columnsSetSelect = () => columnsSetsByName.size > 1 ? <>
+    <Select
+      key="columnsSetSelect"
+      style={{ width: 200 }}
+      value={chosenSetName}
+      onChange={(value: string) => setChosenColumnsSetByName(value)}
+      options={options}
+    />
+    <QuestionMarkHint intlPrefix={'tables.columnsSetSelect'} values={{
+      gearIcon: <SettingOutlined />,
+    }} />
+  </> : null;
+
+  const columnsState = {
+    value: chosenColumnsSet,
+    onChange: setChosenColumnsSet,
+  };
+
+  return {
+    columnsSetSelect,
+    chosenColumnsSet,
+    setChosenColumnsSet,
+    setChosenColumnsSetByName,
+    columnsState,
+  }
+}

package/src/components/index.ts

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

package/src/index.ts

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

package/src/tools/WebsocketClient.ts

@@ -0,0 +1,138 @@
+import { TIncomeEvent } from "../../../liquidity-manager-frontend/src/components/RealTimeData/RealTimeDataSource";
+import { message } from "antd";
+
+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

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

package/src/tools/numberTools.ts

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

package/src/tools/safetyRun.ts

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

package/src/tools/useFullscreen.tsx

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

@@ -0,0 +1,17 @@
+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];
+}