@boarteam/boar-pack-common-frontend 2.7.0 → 2.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "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": "fd26e1cd23414aaf4b2aed44640f2eeb2f84b611"
+  "gitHead": "da7dfee327d3713dbc9419e69ae61bf725aba89a"
 }

package/src/components/Descriptions/Descriptions.tsx

@@ -15,6 +15,7 @@ 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(({css}) => {
   return {
@@ -61,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();
 
@@ -133,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) => {
@@ -237,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

@@ -196,7 +196,7 @@ const Table = <Entity extends Record<string | symbol, any>,
       bordered
       search={false}
       editable={editableConfig}
-      toolBarRender={(...args) => [
+      toolBarRender={toolBarRender === false ? false : (...args) => [
         columnsSetSelect?.() || null,
         !viewOnly && onUpdateMany
           ? bulkEditButton
@@ -205,7 +205,7 @@ const Table = <Entity extends Record<string | symbol, any>,
           ? bulkDeleteButton
           : null,
         !viewOnly && createButton || null,
-        !viewOnly && importButton || null,
+        !viewOnly && onImport && importButton || null,
         exportUrl && exportButton || null,
         ...toolBarRender && toolBarRender(...args) || [],
       ]}

package/src/components/Table/tableTools.ts

@@ -97,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/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: Partial<Entity>) => {
+  const onCreateSubmit = async (data: Partial<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/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'