@boarteam/boar-pack-common-frontend 2.4.1 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "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": "15bb55f9ca20f3a86c95c9b519e3b31ef1ed1772"
+  "gitHead": "8eb798bf7672983cd13372098b1cfae43d73d190"
 }

package/src/components/Descriptions/Descriptions.tsx

@@ -1,22 +1,26 @@
 import { ActionType } from "@ant-design/pro-table";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Result, Tabs, Tooltip } from "antd";
+import React, { Key, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Badge, Button, Result, Tabs, TabsProps, 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 { DescriptionsRefType, TDescriptionsProps, TGetOneParams } from "./descriptionTypes";
 import { PageLoading, ProDescriptions } from "@ant-design/pro-components";
-import { columnsToDescriptionItemProps } from "./useDescriptionColumns";
+import { columnsToDescriptionItemProps, TDescriptionSection } 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";
-import { VIEW_MODE_TYPE } from "../Table/ContentViewModeButton";
+import useContentViewMode, { VIEW_MODE_TYPE } from "./useContentViewMode";
 import { createStyles } from "antd-style";
+import { debounce } from "lodash";
+import { NamePath } from "antd/lib/form/interface";
 
 const useStyles = createStyles(() => {
   return {
+    /**
+     * Styles for the ant-descriptions component to show edit icon on hover
+     */
     antDescriptionsStyles: {
       '.anticon-edit': {
         opacity: 0,
@@ -34,16 +38,17 @@ const useStyles = createStyles(() => {
   }
 })
 
-const Descriptions = <Entity extends Record<string | symbol, any>,
+const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
   CreateDto = Entity,
   UpdateDto = Entity,
   TPathParams = object,
-  >(
+>(
   {
-    mainTitle,
+    mainTitle = 'General',
     entity,
     getOne,
     onUpdate,
+    onCreate,
     pathParams,
     idColumnName = 'id',
     entityToUpdateDto,
@@ -54,15 +59,24 @@ const Descriptions = <Entity extends Record<string | symbol, any>,
     columns,
     params,
     onEntityChange,
-    viewMode = VIEW_MODE_TYPE.GENERAL,
     ...rest
   }: TDescriptionsProps<Entity,
     CreateDto,
     UpdateDto,
-    TPathParams> & Omit<ProDescriptionsProps<Entity>, 'columns'>
+    TPathParams>,
+  ref: React.Ref<DescriptionsRefType>,
 ) => {
   const { styles } = useStyles();
-  const [form] = useForm<Entity>();
+
+  let [form] = useForm<Entity>();
+  if (!editable?.form) {
+    editable = {
+      ...editable,
+      form,
+    }
+  }
+  form = editable.form;
+
   const actionRefComponent = useRef<ActionType>();
   const actionRef = actionRefProp || actionRefComponent;
   const intl = useIntl();
@@ -71,6 +85,84 @@ const Descriptions = <Entity extends Record<string | symbol, any>,
 
   const sections = columnsToDescriptionItemProps(columns, mainTitle);
 
+  const columnDataIndexToSection = sections.reduce((acc, section) => {
+    section.columns.forEach(column => {
+      if (Array.isArray(column.dataIndex)) {
+        throw new Error('We only support simple dataIndex for now');
+      }
+
+      acc.set(column.dataIndex, section);
+    })
+    return acc;
+  }, new Map<Key, TDescriptionSection<Entity>>());
+
+  const {
+    contentViewModeButton,
+    contentViewMode
+  } = useContentViewMode({
+    mode: sections.length > 1 ? VIEW_MODE_TYPE.TABS : VIEW_MODE_TYPE.GENERAL
+  });
+  const [errorsPerSection, setErrorsPerSection] = useState<Map<TDescriptionSection<Entity>['key'], number>>(
+    new Map(sections.map(section => [section.key, 0]))
+  );
+
+  const handleSubmit = async () => {
+    try {
+      // Validate all fields in the form
+      const data = await form.validateFields();
+      // Let the parent component handle the submit logic
+      await onCreate(data);
+    } catch (error) {
+      console.error('Validation or submission failed:', error);
+    } finally {
+      // Recalculate the error count per section (tab) after validation
+      const newErrorsPerSection = new Map<string, number>();
+      sections.forEach((section) => {
+        let errorCount = 0;
+        section.columns.forEach((column) => {
+          if (form.getFieldError(column.dataIndex as NamePath<Entity>)?.length > 0) {
+            errorCount++;
+          }
+        });
+        newErrorsPerSection.set(section.key, errorCount);
+      });
+      setErrorsPerSection(newErrorsPerSection);
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    reset: () => {
+      setErrorsPerSection(new Map(sections.map(section => [section.key, 0])));
+      form.resetFields();
+    },
+    submit: () => handleSubmit(),
+  }));
+
+  const onValuesChange = debounce((changedValues, allValues) => {
+    let key = Object.keys(changedValues)[0];
+
+    // changedValues = {} if we clear select value
+    if (!key) {
+      const previousValues = form.getFieldsValue(true);
+      key = Object.keys(previousValues).find((field) => !(field in allValues));
+    }
+
+    form.validateFields([key])
+      .finally(() => {
+        const section = columnDataIndexToSection.get(key);
+        const dataIndexes = section.columns.map(column => {
+          return Array.isArray(column.dataIndex) ? column.dataIndex.join('.') : column.dataIndex;
+        });
+
+        const errorsNumber = form.getFieldsError(dataIndexes as NamePath<Entity>[]).reduce((acc, field) => acc + field.errors.length, 0);
+        setErrorsPerSection((prev) => {
+          const updated = new Map(prev);
+          updated.set(section.key, errorsNumber);
+          return updated;
+        });
+      });
+  }, 500);
+
   const queryParams = useMemo(() => {
     const join = params?.join;
     const queryParams: TGetOneParams & TPathParams = {
@@ -116,9 +208,8 @@ const Descriptions = <Entity extends Record<string | symbol, any>,
       if (onUpdate && entityToUpdateDto) {
         await onUpdate({
           ...queryParams,
-          ...{} as Record<keyof Entity, string>, // todo: fix this
-          // @ts-ignore
-          requestBody: entityToUpdateDto(pick(record, [propName])),
+          ...{} as Partial<Entity>,
+          requestBody: entityToUpdateDto(pick(record, [propName as keyof Entity])),
         });
       }
 
@@ -137,7 +228,7 @@ const Descriptions = <Entity extends Record<string | symbol, any>,
 
   useEffect(() => {
     setData(entity);
-    form.setFieldsValue(entity as Entity);
+    form.setFieldsValue(entity);
   }, [entity])
 
   if (loading) {
@@ -155,15 +246,13 @@ const Descriptions = <Entity extends Record<string | symbol, any>,
     );
   }
 
-  const descriptions = sections.map((section, index) => {
-    // In the general view mode we need to render extra elements only ones for the top one section
-    if (viewMode === VIEW_MODE_TYPE.GENERAL && rest.extra && index !== 0)  {
-      rest.extra = null;
-    }
+  const formProps = contentViewMode === VIEW_MODE_TYPE.TABS ? {
+    onValuesChange,
+  } : undefined;
 
+  const contentViewSwitcher = sections.length > 1 ? contentViewModeButton : undefined;
+  const descriptions = sections.map((section, index) => {
     return <ProDescriptions<Entity>
-      // @ts-ignore-next-line
-      form={form}
       key={getKey(index)}
       title={section.title as React.ReactNode}
       actionRef={actionRef}
@@ -183,32 +272,47 @@ const Descriptions = <Entity extends Record<string | symbol, any>,
         deleteText: <Tooltip title={intl.formatMessage({ id: 'table.deleteText' })}><DeleteOutlined /></Tooltip>,
         saveText: <Button size={"small"} type={"primary"}><FormattedMessage id={'table.saveText'} /></Button>,
         ...editable,
-      }: undefined}
+      } : undefined}
       columns={section.columns}
+      extra={contentViewMode === VIEW_MODE_TYPE.GENERAL && index === 0 ? contentViewSwitcher : undefined}
+      formProps={formProps}
       {...rest}
-    />
-  })
-
-  return (
-    <>
-      {
-        viewMode === VIEW_MODE_TYPE.TABS ?
-          (<Tabs defaultActiveKey="0">
-            {
-              descriptions.map((description, index) => (
-                <Tabs.TabPane
-                  tab={description.props.title as React.ReactNode}
-                  key={getKey(index)}
-                >
-                  {description}
-                </Tabs.TabPane>
-              ))
-            }
-          </Tabs>)
-          : descriptions
-      }
-    </>
-  );
+    />;
+  });
+
+  if (contentViewMode === VIEW_MODE_TYPE.GENERAL) {
+    return descriptions;
+  }
+
+  const tabsItems: TabsProps['items'] = sections.map((section, index) => {
+    return {
+      key: getKey(index),
+      label: (
+        <Badge
+          size='small'
+          overflowCount={5}
+          count={errorsPerSection.get(section.key)}
+        >
+          {section.title as React.ReactNode}
+        </Badge>
+      ),
+      forceRender: true,
+      children: descriptions[index],
+    }
+  });
+
+  return <Tabs
+    defaultActiveKey="0"
+    items={tabsItems}
+    tabBarExtraContent={contentViewModeButton}
+  />;
 };
 
+const Descriptions = React.forwardRef(DescriptionsComponent) as <Entity extends Record<string | symbol, any>,
+  CreateDto = Entity,
+  UpdateDto = Entity,
+  TPathParams = object>(
+  props: TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams>
+) => React.ReactElement;
+
 export default Descriptions;

package/src/components/Descriptions/DescriptionsCreateModal.tsx

@@ -1,11 +1,10 @@
-import React, { useEffect, useMemo } from "react";
-import { Button, Modal, Tabs } from "antd";
+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 { buildFieldsFromColumnsForDescriptionsDisplay } from "../Table";
-import { VIEW_MODE_TYPE } from "../Table/ContentViewModeButton";
 
 const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
   idColumnName,
@@ -13,15 +12,11 @@ const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
   data,
   onClose,
   onSubmit,
-  viewMode = VIEW_MODE_TYPE.GENERAL,
-  ...rest
+...rest
 }: TDescriptionsCreateModalProps<Entity>) => {
   const sections = columnsToDescriptionItemProps(columns, 'General');
   const [form] = useForm();
 
-  const getKey = (index: number) =>
-    index + (Array.isArray(idColumnName) ? idColumnName.join('-') : idColumnName)
-
   const editableKeys = useMemo(() => {
     return [
       ...buildFieldsFromColumnsForDescriptionsDisplay(
@@ -35,31 +30,6 @@ const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
     data ? form.setFieldsValue(data) : form.resetFields();
   }, [data]);
 
-  const descriptions = sections.map((section, index) => {
-    // In the general view mode we need to render extra elements only ones for the top one section
-    if (viewMode === VIEW_MODE_TYPE.GENERAL && rest.extra && index !== 0)  {
-      rest.extra = null;
-    }
-
-    return <ProDescriptions<Entity>
-      key={getKey(index)}
-      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}
-    />
-  })
-
   return (
     <Modal
       open={data !== undefined}
@@ -68,24 +38,26 @@ const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
       footer={[
         <Button key='submit' type="primary" onClick={async () => form.validateFields().then(onSubmit)}>Create</Button>
       ]}
-      closeIcon={false}
     >
-      {
-        viewMode === VIEW_MODE_TYPE.TABS ?
-          (<Tabs defaultActiveKey="0">
-            {
-              descriptions.map((description, index) => (
-                <Tabs.TabPane
-                  tab={description.props.title as React.ReactNode}
-                  key={getKey(index)}
-                >
-                  {description}
-                </Tabs.TabPane>
-              ))
-            }
-          </Tabs>)
-          : descriptions
-      }
+      {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>
   );
 };

package/src/components/Descriptions/descriptionTypes.ts

@@ -1,9 +1,8 @@
-import { MutableRefObject } from "react";
+import React, { 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 } from "@ant-design/pro-components";
-import { VIEW_MODE_TYPE } from "../Table/ContentViewModeButton";
 import { ProDescriptionsProps } from "@ant-design/pro-descriptions";
 
 export type TGetOneParams = {
@@ -23,15 +22,25 @@ export type TGetOneParams = {
 export type TDescriptionGetRequestParams = {
   join?: QueryJoin | QueryJoin[];
 };
+
+export type DescriptionsRefType = {
+  reset: () => void;
+  submit: () => void;
+};
+
 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>,
+  onUpdate?: ({}: Partial<Entity> & {
+    requestBody: UpdateDto,
+    index?: number,
+  } & TPathParams) => Promise<Entity>,
+  onCreate: (data: Partial<Entity>) => Promise<void>;
+  onDelete?: ({}: Partial<Entity> & TPathParams) => Promise<void>,
   pathParams?: TPathParams,
   idColumnName?: string & keyof Entity,
-  entityToUpdateDto?: (entity: Partial<Entity>) => UpdateDto,
+  entityToUpdateDto?: (entity: Entity) => UpdateDto,
   createNewDefaultParams?: Partial<Entity>,
   afterSave?: (record: Entity) => Promise<void>,
   actionRef?: MutableRefObject<ActionType | undefined>,
@@ -40,14 +49,15 @@ export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = objec
   params?: TDescriptionGetRequestParams,
   columns: ProColumns<Entity>[],
   onEntityChange?: (entity: Entity | null) => void;
-  viewMode?: VIEW_MODE_TYPE,
-}
+  ref?: React.Ref<DescriptionsRefType>,
+} & Omit<ProDescriptionsProps<Entity>, 'columns'>;
 
 export type TDescriptionsCreateModalProps<Entity> = Omit<ProDescriptionsProps<Entity>, 'columns'> & {
+  modalTitle?: string,
+  mainTitle?: ProColumns<Entity>['title'] | null,
   idColumnName: string & keyof Entity | (string & keyof Entity)[],
   columns: ProColumns<Entity>[],
   data: Partial<Entity> | undefined,
   onSubmit: (data: Entity) => Promise<void>,
   onClose: () => void,
-  viewMode?: VIEW_MODE_TYPE,
 }

package/src/components/Descriptions/useContentViewMode.tsx

@@ -0,0 +1,28 @@
+import { Button, Tooltip } from "antd";
+import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
+import { useState } from "react";
+
+export enum VIEW_MODE_TYPE {
+  TABS = 'tabs',
+  GENERAL = 'general'
+}
+
+export default function useContentViewMode({
+  mode,
+}: {
+  mode?: VIEW_MODE_TYPE;
+} = {}) {
+  const [contentViewMode, setContentViewMode] = useState<VIEW_MODE_TYPE>(mode || VIEW_MODE_TYPE.GENERAL);
+
+  const contentViewModeButton = <Tooltip
+    title={contentViewMode === VIEW_MODE_TYPE.TABS ? 'Switch to general view' : 'Switch to tabs view'}
+    key="viewModeToggle">
+    <Button
+      type="text"
+      icon={contentViewMode === VIEW_MODE_TYPE.TABS ? <MenuOutlined /> : <AppstoreOutlined />}
+      onClick={() => setContentViewMode(contentViewMode === VIEW_MODE_TYPE.TABS ? VIEW_MODE_TYPE.GENERAL : VIEW_MODE_TYPE.TABS)}
+    />
+  </Tooltip>;
+
+  return { contentViewMode, contentViewModeButton };
+}

package/src/components/Descriptions/useDescriptionColumns.ts

@@ -3,15 +3,19 @@ import { ProDescriptionsItemProps } from "@ant-design/pro-descriptions";
 
 export type TDescriptionSection<T> = {
   title: ProColumns<T>['title'] | null;
+  // 'general' is a special value for the main section including only columns without children
+  key: string | 'general';
   columns: ProDescriptionsItemProps<T>[];
 }
 
 export function columnsToDescriptionItemProps<T>(
   columns: ProColumns<T>[],
   mainTitle: ProColumns<T>['title'] | null = null,
+  key: string | 'general' = 'general'
 ): TDescriptionSection<T>[] {
   const baseSection: TDescriptionSection<T> = {
     title: mainTitle,
+    key,
     columns: [],
   }
   const result: TDescriptionSection<T>[] = [baseSection];
@@ -22,7 +26,8 @@ export function columnsToDescriptionItemProps<T>(
     }
 
     if (column.children) {
-      result.push(...columnsToDescriptionItemProps(column.children, column.title));
+      const dataIndex = String(Array.isArray(column.dataIndex) ? column.dataIndex[0] : column.dataIndex);
+      result.push(...columnsToDescriptionItemProps(column.children, column.title, dataIndex));
     } else {
       const {
         children,

package/src/components/Table/BulkDeleteButton.tsx

@@ -14,7 +14,7 @@ const useStyles = createStyles(() => {
   }
 })
 
-const BulkDeleteButton = <Entity extends Record<string | symbol, any>>(
+const BulkDeleteButton = <Entity extends Record<string | symbol, any>, TPathParams>(
   {
     selectedRecords,
     lastRequest,
@@ -23,7 +23,7 @@ const BulkDeleteButton = <Entity extends Record<string | symbol, any>>(
   } : {
     selectedRecords: Entity[],
     allSelected: boolean,
-    lastRequest: [TGetAllParams & Record<string, string | number>, any] | [],
+    lastRequest: [TGetAllParams & TPathParams, any] | [],
     onDelete: () => Promise<void>
   }) => {
   const { styles } = useStyles();

package/src/components/Table/BulkEditButton.tsx

@@ -117,7 +117,7 @@ const BulkEditDialog =  <Entity extends Record<string | symbol, any>>(
   );
 }
 
-const BulkEditButton = <Entity extends Record<string | symbol, any>>(
+const BulkEditButton = <Entity extends Record<string | symbol, any>, TPathParams>(
   {
     selectedRecords,
     lastRequest,
@@ -127,7 +127,7 @@ const BulkEditButton = <Entity extends Record<string | symbol, any>>(
     onSubmit,
   } : {
     selectedRecords: Entity[],
-    lastRequest: [TGetAllParams & Record<string, string | number>, any] | [],
+    lastRequest: [TGetAllParams & TPathParams, any] | [],
     idColumnName: string & keyof Entity | (string & keyof Entity)[],
     allSelected: boolean,
     columns: ProColumns<Entity>[],

package/src/components/Table/CreateEntityModal.tsx

@@ -0,0 +1,85 @@
+import { ProColumns } from "@ant-design/pro-components";
+import { Button, Modal } from "antd";
+import { useRef } from "react";
+import { Descriptions, DescriptionsRefType } from "../Descriptions";
+import { buildFieldsFromColumnsForDescriptionsDisplay } from "./tableTools";
+
+export interface CreateEntityModalProps<Entity> {
+  /** Whether the modal is visible */
+  open?: boolean;
+  /** The entity (or partial entity) data to edit */
+  entity: Partial<Entity> | undefined;
+  /** Modal title */
+  title: string;
+  /** Main title for the Descriptions component */
+  mainTitle?: ProColumns<Entity>['title'] | null;
+  /** Table columns used to render the fields */
+  columns: any[];
+  /** Column key (or keys) used as an ID */
+  idColumnName: string | string[];
+  /** Called when the modal is cancelled (closed) */
+  onCancel: () => void;
+  /**
+   * Called when the form is submitted.
+   * Receives the validated form data.
+   */
+  onSubmit: (data: any) => Promise<void>;
+}
+
+export function CreateEntityModal<
+  Entity,
+  CreateDto = Entity,
+  UpdateDto = Entity,
+  TPathParams = object
+>({
+  entity,
+  open = entity !== undefined,
+  title,
+  mainTitle,
+  columns,
+  idColumnName,
+  onCancel,
+  onSubmit,
+}: CreateEntityModalProps<Entity>) {
+  const descriptionsRef = useRef<DescriptionsRefType>(null);
+
+  // Calculate the editable keys from the columns and idColumnName
+  const editableKeys = [...buildFieldsFromColumnsForDescriptionsDisplay(columns, idColumnName)];
+
+  return (
+    <Modal
+      title={title}
+      open={open}
+      width="80%"
+      closeIcon={true}
+      footer={[
+        <Button key="submit" type="primary" onClick={() => descriptionsRef.current?.submit()}>
+          Create
+        </Button>,
+      ]}
+      onCancel={() => {
+        descriptionsRef.current?.reset();
+        onCancel();
+      }}
+    >
+      <Descriptions<Entity, CreateDto, UpdateDto, TPathParams>
+        ref={descriptionsRef}
+        mainTitle={mainTitle}
+        columns={columns ?? []}
+        entity={entity}
+        size="small"
+        bordered
+        column={2}
+        style={{ marginBottom: 20 }}
+        labelStyle={{ width: '15%' }}
+        contentStyle={{ width: '25%' }}
+        canEdit={true}
+        onCreate={onSubmit}
+        editable={{
+          editableKeys,
+          actionRender: () => [],
+        }}
+      />
+    </Modal>
+  );
+}