@boarteam/boar-pack-common-frontend 2.0.1

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@boarteam/boar-pack-common-frontend",
+  "version": "2.0.1",
+  "description": "Common frontend package for Boar Pack",
+  "repository": "git@github.com:boarteam/boar-pack.git",
+  "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
+  "license": "MIT",
+  "main": "src/index",
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": "^4.8.3",
+    "@ant-design/pro-components": "^2.6.52",
+    "@ant-design/pro-table": "^3.15.1",
+    "@ant-design/pro-utils": "^2.15.5",
+    "antd": "^5.15.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.6.2",
+    "umi": "^4.1.5"
+  },
+  "dependencies": {
+    "@nestjsx/crud-request": "^5.0.0-alpha.3",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^4.8.3",
+    "@ant-design/pro-components": "^2.6.52",
+    "@ant-design/pro-table": "^3.15.1",
+    "@ant-design/pro-utils": "^2.15.5",
+    "@types/lodash": "^4.17.0",
+    "@types/react-dom": "^18.2.22",
+    "@umijs/plugin-locale": "^0.16.0",
+    "antd": "^5.15.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.6.2",
+    "typescript": "^5.4.5",
+    "umi": "^4.1.5"
+  },
+  "scripts": {
+    "yalc:push": "yalc push"
+  },
+  "gitHead": "392553082a2f9f0124d05eaa11d0cdb6079766e1"
+}

package/src/components/Descriptions/Descriptions.tsx

@@ -0,0 +1,166 @@
+import { ActionType } from "@ant-design/pro-table";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Button, Result, Tooltip } from "antd";
+import { DeleteOutlined, StopOutlined } from "@ant-design/icons";
+import { FormattedMessage, useIntl } from "react-intl";
+import { TDescriptionsProps, TGetOneParams } from "./descriptionTypes";
+import { ProDescriptionsProps } from "@ant-design/pro-descriptions";
+import { PageLoading, ProDescriptions } from "@ant-design/pro-components";
+import { columnsToDescriptionItemProps } from "./useDescriptionColumns";
+import pick from "lodash/pick";
+import safetyRun from "../../tools/safetyRun";
+import { buildJoinFields, collectFieldsFromColumns } from "../Table";
+import { RowEditableConfig } from "@ant-design/pro-utils";
+import { useForm } from "antd/es/form/Form";
+
+const Descriptions = <Entity extends Record<string | symbol, any>,
+  CreateDto = Entity,
+  UpdateDto = Entity,
+  TPathParams = object,
+  >(
+  {
+    mainTitle,
+    entity,
+    getOne,
+    onUpdate,
+    pathParams,
+    idColumnName = 'id',
+    entityToUpdateDto,
+    afterSave,
+    actionRef: actionRefProp,
+    editable,
+    canEdit = false,
+    columns,
+    params,
+    onEntityChange,
+    ...rest
+  }: TDescriptionsProps<Entity,
+    CreateDto,
+    UpdateDto,
+    TPathParams> & Omit<ProDescriptionsProps<Entity>, 'columns'>
+) => {
+  const [form] = useForm<Entity>();
+  const actionRefComponent = useRef<ActionType>();
+  const actionRef = actionRefProp || actionRefComponent;
+  const intl = useIntl();
+  const [data, setData] = useState<Partial<Entity> | undefined>(entity);
+  const [loading, setLoading] = useState(false);
+
+  const sections = columnsToDescriptionItemProps(columns, mainTitle);
+
+  const queryParams = useMemo(() => {
+    const join = params?.join;
+    const queryParams: TGetOneParams & TPathParams = {
+      ...(pathParams ?? {} as TPathParams),
+    };
+
+    const { joinSelect, joinFields } = buildJoinFields(join);
+    queryParams.join = joinSelect;
+    queryParams.fields = collectFieldsFromColumns(
+      columns,
+      idColumnName,
+      joinFields,
+    );
+
+    return queryParams;
+  }, [params, pathParams]);
+
+  const requestData = async () => {
+    if (!getOne) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const record = await getOne(queryParams);
+      onEntityChange?.(record);
+      setData(record ?? undefined);
+    } catch (e) {
+      console.error(e);
+      setData(undefined);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const onSave: RowEditableConfig<Entity>['onSave'] = async (propName, record) => {
+    try {
+      await form.validateFields();
+      if (onUpdate && entityToUpdateDto) {
+        await onUpdate({
+          ...queryParams,
+          ...{} as Record<keyof Entity, string>, // todo: fix this
+          // @ts-ignore
+          requestBody: entityToUpdateDto(pick(record, [propName])),
+        });
+      }
+
+      setData(record);
+      if (typeof afterSave === 'function') {
+        await afterSave(record);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  useEffect(() => {
+    safetyRun(requestData());
+  }, [])
+
+  useEffect(() => {
+    setData(entity);
+    form.setFieldsValue(entity as Entity);
+  }, [entity])
+
+  if (loading) {
+    return <PageLoading />;
+  }
+
+  if (!data) {
+    return (
+      <Result
+        status="404"
+        title="404"
+        subTitle="The instrument is not found."
+        extra={<Button type="primary" href={'/liquidity/ecn-instruments'}>See list of instruments</Button>}
+      />
+    );
+  }
+
+  return (
+    <>
+      {sections.map((section, index) => (
+        <ProDescriptions<Entity>
+          // @ts-ignore-next-line
+          form={form}
+          key={index + String(pathParams?.[idColumnName as keyof TPathParams])}
+          title={section.title as React.ReactNode}
+          actionRef={actionRef}
+          size={"small"}
+          bordered
+          loading={loading}
+          style={{ marginBottom: 20 }}
+          labelStyle={{ width: '15%' }}
+          contentStyle={{ width: '20%' }}
+          dataSource={data as Entity}
+          editable={canEdit ? {
+            type: 'multiple',
+            onSave,
+            deletePopconfirmMessage: intl.formatMessage({ id: 'table.deletePopconfirmMessage' }),
+            onlyAddOneLineAlertMessage: intl.formatMessage({ id: 'table.onlyAddOneLineAlertMessage' }),
+            cancelText: <Tooltip title={intl.formatMessage({ id: 'table.cancelText' })}><StopOutlined /></Tooltip>,
+            deleteText: <Tooltip title={intl.formatMessage({ id: 'table.deleteText' })}><DeleteOutlined /></Tooltip>,
+            saveText: <Button size={"small"} type={"primary"}><FormattedMessage id={'table.saveText'} /></Button>,
+            ...editable,
+          }: undefined}
+          columns={section.columns}
+          {...rest}
+        />
+      ))}
+    </>
+  );
+};
+
+export default Descriptions;

package/src/components/Descriptions/DescriptionsCreateModal.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useMemo } from "react";
+import { Button, Modal } from "antd";
+import { TDescriptionsCreateModalProps } from "./descriptionTypes";
+import { ProDescriptions } from "@ant-design/pro-components";
+import { columnsToDescriptionItemProps } from "./useDescriptionColumns";
+import { useForm } from "antd/es/form/Form";
+import { buildFieldsFromColumns } from "../Table";
+
+const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
+  idColumnName,
+  columns,
+  data,
+  onClose,
+  onSubmit,
+  ...rest
+}: TDescriptionsCreateModalProps<Entity>) => {
+  const sections = columnsToDescriptionItemProps(columns, 'General');
+  const [form] = useForm();
+
+  const editableKeys = useMemo(() => {
+    return [
+      ...buildFieldsFromColumns(
+        columns,
+        idColumnName,
+      ),
+    ];
+  }, [columns, idColumnName]);
+
+  useEffect(() => {
+    data ? form.setFieldsValue(data) : form.resetFields();
+  }, [data]);
+
+  return (
+    <Modal
+      open={data !== undefined}
+      onCancel={onClose}
+      width='80%'
+      footer={[
+        <Button key='submit' type="primary" onClick={async () => form.validateFields().then(onSubmit)}>Create</Button>
+      ]}
+    >
+      {sections.map((section, index) => (
+        <ProDescriptions<Entity>
+          key={index + (Array.isArray(idColumnName) ? idColumnName.join('-') : idColumnName)}
+          title={section.title as React.ReactNode}
+          size={"small"}
+          bordered
+          column={2}
+          style={{ marginBottom: 20 }}
+          labelStyle={{ width: '15%' }}
+          contentStyle={{ width: '25%' }}
+          editable={{
+            form,
+            editableKeys,
+            actionRender: () => [],
+          }}
+          columns={section.columns}
+          {...rest}
+        />
+      ))}
+    </Modal>
+  );
+};
+
+export default DescriptionsCreateModal;

package/src/components/Descriptions/descriptionTypes.ts

@@ -0,0 +1,49 @@
+import { MutableRefObject } from "react";
+import { ActionType } from "@ant-design/pro-table";
+import { RowEditableConfig } from "@ant-design/pro-utils";
+import { QueryJoin } from "@nestjsx/crud-request";
+import { ProColumns, ProDescriptionsProps } from "@ant-design/pro-components";
+
+export type TGetOneParams = {
+  /**
+   * Selects resource fields. <a href="https://github.com/nestjsx/crud/wiki/Requests#select" target="_blank">Docs</a>
+   */
+  fields?: Array<string>,
+  /**
+   * Adds relational resources. <a href="https://github.com/nestjsx/crud/wiki/Requests#join" target="_blank">Docs</a>
+   */
+  join?: Array<string>,
+  /**
+   * Reset cache (if was enabled). <a href="https://github.com/nestjsx/crud/wiki/Requests#cache" target="_blank">Docs</a>
+   */
+  cache?: number,
+}
+export type TDescriptionGetRequestParams = {
+  join?: QueryJoin | QueryJoin[];
+};
+export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = object> = {
+  mainTitle?: ProColumns<Entity>['title'] | null,
+  entity?: Partial<Entity>,
+  getOne?: ({}: TGetOneParams & TPathParams) => Promise<Entity | null>,
+  onUpdate?: ({}: Record<keyof Entity, string> & { requestBody: UpdateDto } & TPathParams) => Promise<Entity>,
+  onDelete?: ({}: Record<keyof Entity, string> & TPathParams) => Promise<void>,
+  pathParams?: TPathParams,
+  idColumnName?: string & keyof Entity,
+  entityToUpdateDto?: (entity: Partial<Entity>) => UpdateDto,
+  createNewDefaultParams?: Partial<Entity>,
+  afterSave?: (record: Entity) => Promise<void>,
+  actionRef?: MutableRefObject<ActionType | undefined>,
+  editable?: RowEditableConfig<Entity>,
+  canEdit?: boolean,
+  params?: TDescriptionGetRequestParams,
+  columns: ProColumns<Entity>[],
+  onEntityChange?: (entity: Entity | null) => void;
+}
+
+export type TDescriptionsCreateModalProps<Entity> = Omit<ProDescriptionsProps<Entity>, 'columns'> & {
+  idColumnName: string & keyof Entity | (string & keyof Entity)[],
+  columns: ProColumns<Entity>[],
+  data: Partial<Entity> | undefined,
+  onSubmit: (data: Entity) => Promise<void>,
+  onClose: () => void,
+}

package/src/components/Descriptions/index.ts

@@ -0,0 +1,5 @@
+export * from './Descriptions';
+export { default as Descriptions } from './Descriptions';
+export * from './DescriptionsCreateModal';
+export * from './descriptionTypes';
+export * from './useDescriptionColumns';

package/src/components/Descriptions/useDescriptionColumns.ts

@@ -0,0 +1,37 @@
+import { ProColumns } from "@ant-design/pro-components";
+import { ProDescriptionsItemProps } from "@ant-design/pro-descriptions";
+
+export type TDescriptionSection<T> = {
+  title: ProColumns<T>['title'] | null;
+  columns: ProDescriptionsItemProps<T>[];
+}
+
+export function columnsToDescriptionItemProps<T>(
+  columns: ProColumns<T>[],
+  mainTitle: ProColumns<T>['title'] | null = null,
+): TDescriptionSection<T>[] {
+  const baseSection: TDescriptionSection<T> = {
+    title: mainTitle,
+    columns: [],
+  }
+  const result: TDescriptionSection<T>[] = [baseSection];
+
+  columns.forEach((column) => {
+    if (column.valueType === 'option') {
+      return;
+    }
+
+    if (column.children) {
+      result.push(...columnsToDescriptionItemProps(column.children, column.title));
+    } else {
+      const {
+        children,
+        ...rest
+      } = column;
+      // @ts-ignore-next-line
+      baseSection.columns.push(rest as ProDescriptionsItemProps<T>);
+    }
+  });
+
+  return result;
+}

package/src/components/Inputs/DateRange.tsx

@@ -0,0 +1,75 @@
+// antd switch but not for boolean, for numbers 0 and 1
+import React from "react";
+import dayjs from "dayjs";
+import { DatePicker } from "antd";
+
+interface RangePickerProps extends Omit<React.ComponentProps<typeof DatePicker.RangePicker>, 'value' | 'onChange'> {
+  value? : [string | null, string | null] | null;
+  onChange? : (value?: [string | null, string | null] | null) => void;
+}
+
+export const DateRange: React.FC<RangePickerProps> = ({
+  value,
+  onChange,
+  ...props
+}) => {
+  return (
+    <DatePicker.RangePicker
+      showTime={{
+        showNow: true,
+        showHour: true,
+        showMinute: true,
+        showSecond: true,
+        showMillisecond: true,
+      }}
+      allowEmpty={[true, true]}
+      presets={[
+        {
+          label: 'Today',
+          value: [dayjs().startOf('day'), dayjs().endOf('day')],
+        },
+        {
+          label: 'Yesterday',
+          value: [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')],
+        },
+        {
+          label: 'Last 15 minutes',
+          value: [dayjs().subtract(15, 'minute'), dayjs()],
+        },
+        {
+          label: 'Last 30 minutes',
+          value: [dayjs().subtract(30, 'minute'), dayjs()],
+        },
+        {
+          label: 'Last 1 hour',
+          value: [dayjs().subtract(1, 'hour'), dayjs()],
+        },
+        {
+          label: 'Last 24 hours',
+          value: [dayjs().subtract(1, 'day'), dayjs()],
+        },
+        {
+          label: 'Last 7 days',
+          value: [dayjs().subtract(7, 'day'), dayjs()],
+        },
+        {
+          label: 'Last 30 days',
+          value: [dayjs().subtract(30, 'day'), dayjs()],
+        },
+        {
+          label: 'This month',
+          value: [dayjs().startOf('month'), dayjs().endOf('month')],
+        },
+        {
+          label: 'Last month',
+          value: [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')],
+        },
+      ]}
+      value={value?.map(date => dayjs(date)) as [dayjs.Dayjs, dayjs.Dayjs] | undefined}
+      onChange={(dates) => {
+        onChange?.(dates?.map(date => date?.toISOString() ?? null) as [string | null, string | null] | null);
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/Inputs/MultiStringSelect.tsx

@@ -0,0 +1,20 @@
+import { Select } from "antd";
+import React from "react";
+
+export const MultiStringSelect: React.FC<{
+  value?: string[];
+  onChange?: (value: string[]) => void;
+}> = ({ value, onChange }) => {
+  return (
+    <Select<string[]>
+      dropdownStyle={{ minWidth: 200 }}
+      allowClear={true}
+      mode="tags"
+      style={{ minWidth: 200 }}
+      maxTagCount='responsive'
+      value={value}
+      onChange={onChange}
+      notFoundContent='Enter manually'
+    />
+  )
+}

package/src/components/Inputs/NumberInputHandlingNewRecord.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { InputNumberProps } from "antd/es/input-number";
+import { InputNumber } from "antd";
+import { isRecordNew } from "../Table";
+
+export const NumberInputHandlingNewRecord: React.FC<InputNumberProps> = ({ value, onChange }) => {
+  return <InputNumber
+    value={isRecordNew({ id: value }) ? '' : value}
+    onChange={onChange}
+  />
+}

package/src/components/Inputs/NumberSwitcher.tsx

@@ -0,0 +1,27 @@
+// antd switch but not for boolean, for numbers 0 and 1
+import { Switch } from "antd";
+import React from "react";
+import { SwitchProps } from "antd/es/switch";
+
+interface NumberSwitcherProps extends Omit<SwitchProps, 'value' | 'onChange'> {
+  value?: number;
+  onChange?: (value?: number) => void;
+}
+
+export const NumberSwitch: React.FC<NumberSwitcherProps> = ({
+  value,
+  onChange,
+  ...props
+}) => {
+  return (
+    <Switch
+      checkedChildren="1"
+      unCheckedChildren="0"
+      checked={value === 1}
+      onChange={(checked) => {
+        onChange?.(checked ? 1 : 0);
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/Inputs/Password.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Button, Input, Tooltip } from "antd";
+import { ThunderboltOutlined } from "@ant-design/icons";
+import { Typography } from "antd";
+import { PasswordProps } from "antd/es/input/Password";
+
+const { Paragraph } = Typography;
+
+export const Password: React.FC<PasswordProps> = ({ value, onChange }) => {
+  return (
+    <Input.Group compact={true}>
+      <Input.Password
+        placeholder={'Enter password'}
+        onChange={onChange}
+        value={value}
+        style={{ width: 'calc(100% - 80px)' }}
+        autoComplete={'one-time-code'}
+      />
+      <Tooltip title="Generate password">
+        <Button
+          onClick={(e) => {
+            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%&';
+            const pass = Array(10).fill('').map(x => chars[Math.floor(Math.random() * chars.length)]).join('');
+            // @ts-ignore
+            onChange?.(pass);
+          }}
+          icon={<ThunderboltOutlined color={'var(--ant-primary)'} />}
+        />
+      </Tooltip>
+      <Button icon={<Paragraph copyable={{ text: String(value) }} />} />
+    </Input.Group>
+  );
+}

package/src/components/Inputs/RelationSelect.tsx

@@ -0,0 +1,72 @@
+import { ProFormSelectProps } from "@ant-design/pro-form/lib/components/Select";
+import { useState } from "react";
+import { ProFormSelect } from "@ant-design/pro-form";
+
+type RelationSelectProps<T> = ProFormSelectProps & {
+  selectedItem: T | null | undefined,
+  onChange?: (type: T | null) => void,
+  filter?: string[],
+  fetchItems: (filter: string[], keyword?: string) => Promise<{data: T[]}>,
+  fieldNames?: {
+    value: string,
+    label: string,
+  },
+};
+
+export const RelationSelect = function<T>({
+  selectedItem,
+  onChange,
+  filter = [],
+  fetchItems,
+  fieldNames = {
+    value: 'id',
+    label: 'name',
+  },
+  ...rest
+}: RelationSelectProps<T>) {
+  const { value: valueKey, label: labelKey } = fieldNames;
+  const [value, setValue] = useState(selectedItem ? {
+    label: selectedItem[labelKey as keyof T],
+    value: selectedItem[valueKey as keyof T],
+  } : undefined);
+
+  const request = async ({ keyWords: keyword }: { keyWords: string }) => {
+    const reqFilter = [...filter];
+    if (keyword) {
+      reqFilter.push(labelKey + '||$contL||' + keyword);
+    }
+    const resp = await fetchItems(reqFilter, keyword);
+    return resp.data;
+  }
+
+  return (
+    <ProFormSelect.SearchSelect
+      showSearch
+      mode={'single'}
+      request={request}
+      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',
+        }
+      }}
+      style={{ minWidth: 160 }}
+      placeholder='Please choose'
+      fieldProps={{
+        fieldNames: {
+          value: valueKey,
+          label: labelKey,
+        },
+        value,
+        onChange(value, row) {
+          setValue(value);
+          onChange?.(row ? value : null);
+        },
+      }}
+      {...rest}
+    />
+  );
+}