@boarteam/boar-pack-common-frontend 2.6.0-alpha.2 → 2.6.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "2.6.0-alpha.2",
+  "version": "2.6.0-alpha.3",
   "description": "Common frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
@@ -46,5 +46,5 @@
   "scripts": {
     "yalc:push": "yalc push"
   },
-  "gitHead": "754f593790263282b28867173f587da6b142b306"
+  "gitHead": "8e43d50ded7a9d9554b6624c89dc8a038f82c8d2"
 }

package/src/components/Descriptions/Descriptions.tsx

@@ -15,26 +15,24 @@ import useContentViewMode, { VIEW_MODE_TYPE } from "./useContentViewMode";
 import { createStyles } from "antd-style";
 import { debounce } from "lodash";
 import { NamePath } from "antd/lib/form/interface";
+import { FieldData } from "rc-field-form/lib/interface";
 
-const useStyles = createStyles(() => {
+const useStyles = createStyles(({css}) => {
   return {
-    /**
-     * Styles for the ant-descriptions component to show edit icon on hover
-     */
-    antDescriptionsStyles: {
-      '.anticon-edit': {
-        opacity: 0,
-        transition: 'opacity 200ms'
-      },
-      '.ant-descriptions-item-content': {
-        width: '20%',
-      },
-      '.ant-descriptions-item-content:hover': {
-        '.anticon-edit': {
-          opacity: 1
-        },
+    antDescriptionsStyles: css`
+      .ant-descriptions-item-content {
+        .anticon-edit {
+          opacity: 0;
+          transition: opacity 200ms;
+        }
+
+        &:hover {
+          .anticon-edit {
+              opacity: 1;
+          }
+        }
       }
-    }
+    `
   }
 })
 
@@ -64,7 +62,7 @@ const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
     CreateDto,
     UpdateDto,
     TPathParams>,
-  ref: React.Ref<DescriptionsRefType>,
+  ref: React.Ref<DescriptionsRefType<Entity>>,
 ) => {
   const { styles } = useStyles();
 
@@ -136,6 +134,9 @@ const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
       form.resetFields();
     },
     submit: () => handleSubmit(),
+    setFieldErrors: (fields: FieldData<Entity>[]) => {
+      form.setFields(fields)
+    }
   }));
 
   const onValuesChange = debounce((changedValues, allValues) => {
@@ -240,8 +241,7 @@ const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
       <Result
         status="404"
         title="404"
-        subTitle="The instrument is not found."
-        extra={<Button type="primary" href={'/liquidity/ecn-instruments'}>See list of instruments</Button>}
+        subTitle="The entity is not found."
       />
     );
   }

package/src/components/Descriptions/descriptionTypes.ts

@@ -4,6 +4,7 @@ import { RowEditableConfig } from "@ant-design/pro-utils";
 import { QueryJoin } from "@nestjsx/crud-request";
 import { ProColumns } from "@ant-design/pro-components";
 import { ProDescriptionsProps } from "@ant-design/pro-descriptions";
+import { FieldData } from "rc-field-form/lib/interface";
 
 export type TGetOneParams = {
   /**
@@ -23,9 +24,10 @@ export type TDescriptionGetRequestParams = {
   join?: QueryJoin | QueryJoin[];
 };
 
-export type DescriptionsRefType = {
+export type DescriptionsRefType<Entity> = {
   reset: () => void;
   submit: () => void;
+  setFieldErrors: (fields: FieldData<Entity>[]) => void;
 };
 
 export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = object> = {
@@ -49,7 +51,7 @@ export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = objec
   params?: TDescriptionGetRequestParams,
   columns: ProColumns<Entity>[],
   onEntityChange?: (entity: Entity | null) => void;
-  ref?: React.Ref<DescriptionsRefType>,
+  ref?: React.Ref<DescriptionsRefType<Entity>>,
 } & Omit<ProDescriptionsProps<Entity>, 'columns'>;
 
 export type TDescriptionsCreateModalProps<Entity> = Omit<ProDescriptionsProps<Entity>, 'columns'> & {

package/src/components/Inputs/RelationSelect.tsx

@@ -1,6 +1,5 @@
-import { ProFormSelectProps } from "@ant-design/pro-form/lib/components/Select";
+import { ProFormSelect, ProFormSelectProps } from "@ant-design/pro-components";
 import { useState } from "react";
-import { ProFormSelect } from "@ant-design/pro-form";
 
 type RelationSelectProps<T> = ProFormSelectProps & {
   selectedItem: T | null | undefined,
@@ -44,10 +43,8 @@ export const RelationSelect = function<T>({
       showSearch
       mode={'single'}
       request={request}
+      className='relational-select'
       formItemProps={{
-        // correct color for invalid relational fields (#64)
-        // @ts-ignore-next-line
-        validateStatus: rest['aria-invalid'] === 'true' ? 'error' : 'success',
         style: {
           margin: 0,
           display: 'inline-block',

package/src/components/Table/CreateEntityModal.tsx

@@ -1,6 +1,6 @@
 import { ProColumns } from "@ant-design/pro-components";
 import { Button, Modal } from "antd";
-import { useRef } from "react";
+import { MutableRefObject, useRef } from "react";
 import { Descriptions, DescriptionsRefType } from "../Descriptions";
 import { buildFieldsFromColumnsForDescriptionsDisplay } from "./tableTools";
 
@@ -23,7 +23,7 @@ export interface CreateEntityModalProps<Entity> {
    * Called when the form is submitted.
    * Receives the validated form data.
    */
-  onSubmit: (data: any) => Promise<void>;
+  onSubmit: (data: any, descriptionsRef: MutableRefObject<DescriptionsRefType<Entity>>) => Promise<void>;
 }
 
 export function CreateEntityModal<
@@ -41,7 +41,7 @@ export function CreateEntityModal<
   onCancel,
   onSubmit,
 }: CreateEntityModalProps<Entity>) {
-  const descriptionsRef = useRef<DescriptionsRefType>(null);
+  const descriptionsRef = useRef<DescriptionsRefType<Entity>>(null);
 
   // Calculate the editable keys from the columns and idColumnName
   const editableKeys = [...buildFieldsFromColumnsForDescriptionsDisplay(columns, idColumnName)];
@@ -74,7 +74,7 @@ export function CreateEntityModal<
         labelStyle={{ width: '15%' }}
         contentStyle={{ width: '25%' }}
         canEdit={true}
-        onCreate={onSubmit}
+        onCreate={(data) => onSubmit(data, descriptionsRef)}
         editable={{
           editableKeys,
           actionRender: () => [],

package/src/components/Table/Table.tsx

@@ -9,6 +9,7 @@ import { KEY_SYMBOL, useCreation } from "./useCreation";
 import { getTableDataQueryParams } from "./getTableDataQueryParams";
 import { useEditableTable } from "./useEditableTable";
 import { useBulkEditing } from "./useBulkEditing";
+import { useImportExport } from "./useImportExport";
 
 const useStyles = createStyles(() => {
   return {
@@ -34,6 +35,8 @@ const Table = <Entity extends Record<string | symbol, any>,
     onUpdateMany,
     onDelete,
     onDeleteMany,
+    exportUrl,
+    onImport,
     pathParams,
     idColumnName = 'id',
     entityToCreateDto,
@@ -118,6 +121,11 @@ const Table = <Entity extends Record<string | symbol, any>,
     createNewDefaultParams,
   });
 
+  const { exportButton, importButton, setLastQueryParams } = useImportExport<TPathParams>({
+    exportUrl,
+    onImport,
+  })
+
   useEffect(() => {
     setUpdatePopupData(editableRecord);
     actionRef?.current?.reload();
@@ -158,6 +166,7 @@ const Table = <Entity extends Record<string | symbol, any>,
       queryParams,
       result,
     ]);
+    setLastQueryParams(queryParams);
     return result;
   }
 
@@ -181,10 +190,13 @@ const Table = <Entity extends Record<string | symbol, any>,
           listsHeight: 500,
         },
       }}
+      scroll={{
+        x: 'max-content',
+      }}
       bordered
       search={false}
       editable={editableConfig}
-      toolBarRender={(...args) => [
+      toolBarRender={toolBarRender === false ? false : (...args) => [
         columnsSetSelect?.() || null,
         !viewOnly && onUpdateMany
           ? bulkEditButton
@@ -193,6 +205,8 @@ const Table = <Entity extends Record<string | symbol, any>,
           ? bulkDeleteButton
           : null,
         !viewOnly && createButton || null,
+        !viewOnly && onImport && importButton || null,
+        exportUrl && exportButton || null,
         ...toolBarRender && toolBarRender(...args) || [],
       ]}
       columns={columns}

package/src/components/Table/tableTools.ts

@@ -58,6 +58,22 @@ export function getFiltersSearch({
           value = true;
         }
         break;
+
+      case Operators.in:
+      case Operators.inLow:
+        if (Array.isArray(value) && value.length === 1 && value[0] === null) {
+          operator = Operators.isNull;
+          value = true;
+        }
+        break;
+
+      case Operators.equals:
+        if (Array.isArray(value) && value.length === 1 && value[0] === null || value === null) {
+          operator = Operators.isNull;
+          value = true;
+        }
+        break;
+
     }
 
     search.$and?.push({ [field]: { [operator]: value } });
@@ -81,6 +97,7 @@ export const Operators = {
   lowerOrEquals: CondOperator.LOWER_THAN_EQUALS,
   isNull: CondOperator.IS_NULL,
   notNull: CondOperator.NOT_NULL,
+  starts: CondOperator.STARTS,
 } as const;
 
 export function applyKeywordToSearch(

package/src/components/Table/tableTypes.ts

@@ -107,6 +107,8 @@ export interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}> {
   editable?: RowEditableConfig<Entity>;
   afterSave?: (record: Entity) => Promise<void>;
   onCreate?: ({}: { requestBody: CreateDto } & TPathParams) => Promise<Entity>;
+  exportUrl?: string;
+  onImport?: (event: React.ChangeEvent<HTMLInputElement>) => Promise<any>;
   onUpdate: ({}: Partial<Entity> & {
     requestBody: UpdateDto,
     index?: number,

package/src/components/Table/useColumnsSets.tsx

@@ -33,19 +33,29 @@ function getColumnsStates<T>(
   columns: TIndexableRecord[],
   shownCols: Set<keyof T>,
   state: TColumnsState = {},
-): Record<string, ColumnsState> {
+): {state: Record<string, ColumnsState>, someColumnsShown: boolean} {
+  let someColumnsShown = false;
   columns.forEach(col => {
     const idx = Array.isArray(col.dataIndex) ? col.dataIndex.join(',') : col.dataIndex;
+    let childrenColumnsShown = false;
     if ('children' in col && Array.isArray(col.children)) {
-      getColumnsStates(col.children, shownCols, state);
+      const { someColumnsShown } = getColumnsStates(col.children, shownCols, state);
+      if (someColumnsShown) {
+        childrenColumnsShown = true;
+      }
     }
 
-    if (idx && !shownCols.has(idx as keyof T)) {
-      state[idx as string] = { show: false };
+    if (idx) {
+      if (shownCols.has(idx as keyof T) || childrenColumnsShown) {
+        state[idx as string] = { show: true };
+        someColumnsShown = true;
+      } else {
+        state[idx as string] = { show: false };
+      }
     }
   }, state);
 
-  return state as Record<string, ColumnsState>;
+  return { state, someColumnsShown };
 }
 
 export default function useColumnsSets<Entity>({
@@ -60,7 +70,7 @@ export default function useColumnsSets<Entity>({
         columns: columnsSet
       }) => [
         name,
-        getColumnsStates<Entity>(columns, new Set(columnsSet))
+        getColumnsStates<Entity>(columns as TIndexableRecord[], new Set(columnsSet)).state,
       ])
     ), [columns]
   );
@@ -97,7 +107,30 @@ export default function useColumnsSets<Entity>({
 
   const columnsState = {
     value: chosenColumnsSet,
-    onChange: setChosenColumnsSet,
+    // value contains only hidden columns and one which is just changed
+    onChange: (value: TColumnsStates) => {
+      const checkParentVisibility = (columns: TIndexableRecord[]) => {
+        let someColumnsShown = false;
+
+        columns.forEach(col => {
+          const idx = Array.isArray(col.dataIndex) ? col.dataIndex.join(',') : col.dataIndex as string;
+          if (idx && value[idx]?.show) {
+            someColumnsShown = true;
+          }
+
+          if ('children' in col && Array.isArray(col.children)) {
+            const someChildColumnsShown = checkParentVisibility(col.children);
+            if (someChildColumnsShown) {
+              value[idx] = { show: true };
+            }
+          }
+        });
+
+        return someColumnsShown;
+      };
+      checkParentVisibility(columns as TIndexableRecord[]);
+      setChosenColumnsSet(value);
+    },
   };
 
   return {

package/src/components/Table/useCreation.tsx

@@ -5,6 +5,8 @@ import { PlusOutlined } from "@ant-design/icons";
 import { FormattedMessage } from "react-intl";
 import type { SizeType } from "antd/es/config-provider/SizeContext";
 import { CreateEntityModal, CreateEntityModalProps } from "./CreateEntityModal";
+import { DescriptionsRefType } from "../Descriptions";
+import { ApiError } from '../../tools'
 
 let creatingRecordsCount = 0;
 export const KEY_SYMBOL = Symbol('key');
@@ -41,7 +43,7 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
 } & Omit<CreateEntityModalProps<Entity>, 'onSubmit' | 'onCancel' | 'entity'>) {
   const [createPopupData, setCreatePopupData] = useState<Partial<Entity> | undefined>();
 
-  const onCreateSubmit = async (data: Entity) => {
+  const onCreateSubmit = async (data: Entity, descriptionsRef: MutableRefObject<DescriptionsRefType<Entity>>) => {
     try {
       await onCreate?.({
         ...pathParams,
@@ -54,6 +56,22 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
       await actionRef?.current?.reload();
     } catch (e) {
       console.error(e);
+
+      // Handle common error
+      if (e.body && e.body.statusCode && e.body.errors) {
+        const error = e as ApiError;
+        const { statusCode, errors } = error.body;
+        // Validation error. Highlight corresponding form fields
+        if (statusCode === 400) {
+          const formErrors = errors.map(error => ({
+            name: error.field,
+            errors: [error.message],
+          }));
+
+          // @ts-ignore
+          descriptionsRef.current.setFieldErrors(formErrors);
+        }
+      }
     }
   };
 

package/src/components/Table/useEditableTable.tsx

@@ -5,6 +5,7 @@ import { Button, Tooltip } from "antd";
 import { DeleteOutlined, StopOutlined } from "@ant-design/icons";
 import { FormattedMessage, useIntl } from "react-intl";
 import React, { useState } from "react";
+import { isRecordNew } from "./useCreation";
 
 export function useEditableTable<Entity, CreateDto, UpdateDto, TPathParams = {}>(
   {
@@ -68,6 +69,7 @@ export function useEditableTable<Entity, CreateDto, UpdateDto, TPathParams = {}>
       }
     },
     async onDelete(id, row) {
+      if (isRecordNew(row)) return;
       await onDelete({ ...row, ...pathParams });
     },
     deletePopconfirmMessage: intl.formatMessage({ id: 'table.deletePopconfirmMessage' }),

package/src/components/Table/useImportExport.tsx

@@ -0,0 +1,58 @@
+import { Button, Tooltip } from 'antd';
+import { DownloadOutlined, UploadOutlined } from "@ant-design/icons";
+import { useState } from "react";
+import { TGetAllParams } from "./tableTypes";
+import { Link } from "react-router-dom";
+
+export function useImportExport<TPathParams = {}>({
+  exportUrl,
+  onImport
+}: {
+  exportUrl?: string;
+  onImport?: (event: React.ChangeEvent<HTMLInputElement>) => Promise<any>;
+}) {
+  const [isLoadingImport, setIsLoadingImport] = useState(false);
+  const [lastQueryParams, setLastQueryParams] = useState<TGetAllParams & TPathParams>();
+
+  const onImportChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoadingImport(true);
+    await onImport?.(event)
+      .then((response) => {
+        console.log(response);
+      })
+      .finally(() => {
+        setIsLoadingImport(false);
+      });
+  }
+
+  const url = exportUrl + (lastQueryParams ? '?' + new URLSearchParams({
+    s: lastQueryParams.s,
+    sort: lastQueryParams.sort?.[0],
+  }).toString() : '');
+  const exportButton = <Tooltip title="Export">
+    <Link to={url} target={'_blank'}>
+      <Button icon={<DownloadOutlined />}/>
+    </Link>
+  </Tooltip>;
+
+  const importButton = <>
+    <Tooltip title="Import">
+      <label htmlFor="import-input">
+        <Button loading={isLoadingImport} icon={<UploadOutlined />} />
+      </label>
+    </Tooltip>
+    <input
+      type="file"
+      id="import-input"
+      style={{ display: "none" }}
+      accept=".xlsx, .xls"
+      onChange={onImportChange}
+    />
+  </>
+
+  return {
+    exportButton,
+    importButton,
+    setLastQueryParams
+  };
+}

package/src/tools/ApiError.ts

@@ -0,0 +1,18 @@
+// 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/index.ts

@@ -3,3 +3,4 @@ export * from './useFullscreen';
 export * from './numberTools';
 export * from './useTabs';
 export * from './WebsocketClient';
+export * from './ApiError'