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

package/package.json

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

package/src/components/Descriptions/Descriptions.tsx

@@ -1,28 +1,54 @@
 import { ActionType } from "@ant-design/pro-table";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Result, 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 useContentViewMode, { VIEW_MODE_TYPE } from "./useContentViewMode";
+import { createStyles } from "antd-style";
+import { debounce } from "lodash";
+import { NamePath } from "antd/lib/form/interface";
 
-const Descriptions = <Entity extends Record<string | symbol, any>,
+const useStyles = createStyles(() => {
+  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
+        },
+      }
+    }
+  }
+})
+
+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,
@@ -37,9 +63,20 @@ const Descriptions = <Entity extends Record<string | symbol, any>,
   }: TDescriptionsProps<Entity,
     CreateDto,
     UpdateDto,
-    TPathParams> & Omit<ProDescriptionsProps<Entity>, 'columns'>
+    TPathParams>,
+  ref: React.Ref<DescriptionsRefType>,
 ) => {
-  const [form] = useForm<Entity>();
+  const { styles } = useStyles();
+
+  let [form] = useForm<Entity>();
+  if (!editable?.form) {
+    editable = {
+      ...editable,
+      form,
+    }
+  }
+  form = editable.form;
+
   const actionRefComponent = useRef<ActionType>();
   const actionRef = actionRefProp || actionRefComponent;
   const intl = useIntl();
@@ -48,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 = {
@@ -65,6 +180,9 @@ const Descriptions = <Entity extends Record<string | symbol, any>,
     return queryParams;
   }, [params, pathParams]);
 
+  const getKey = (index: number) =>
+    index + String(pathParams?.[idColumnName as keyof TPathParams])
+
   const requestData = async () => {
     if (!getOne) {
       return;
@@ -90,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])),
         });
       }
 
@@ -111,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) {
@@ -129,38 +246,73 @@ const Descriptions = <Entity extends Record<string | symbol, any>,
     );
   }
 
-  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}
-        />
-      ))}
-    </>
-  );
+  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>
+      key={getKey(index)}
+      title={section.title as React.ReactNode}
+      actionRef={actionRef}
+      size={"small"}
+      bordered
+      loading={loading}
+      style={{ marginBottom: 20 }}
+      labelStyle={{ width: '15%' }}
+      dataSource={data as Entity}
+      className={styles.antDescriptionsStyles}
+      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}
+      extra={contentViewMode === VIEW_MODE_TYPE.GENERAL && index === 0 ? contentViewSwitcher : undefined}
+      formProps={formProps}
+      {...rest}
+    />;
+  });
+
+  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

@@ -12,7 +12,7 @@ const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
   data,
   onClose,
   onSubmit,
-  ...rest
+...rest
 }: TDescriptionsCreateModalProps<Entity>) => {
   const sections = columnsToDescriptionItemProps(columns, 'General');
   const [form] = useForm();

package/src/components/Descriptions/descriptionTypes.ts

@@ -1,8 +1,9 @@
-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, ProDescriptionsProps } from "@ant-design/pro-components";
+import { ProColumns } from "@ant-design/pro-components";
+import { ProDescriptionsProps } from "@ant-design/pro-descriptions";
 
 export type TGetOneParams = {
   /**
@@ -21,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>,
@@ -38,9 +49,12 @@ export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = objec
   params?: TDescriptionGetRequestParams,
   columns: ProColumns<Entity>[],
   onEntityChange?: (entity: Entity | null) => void;
-}
+  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,

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>
+  );
+}

package/src/components/Table/DeleteButton.tsx

@@ -0,0 +1,44 @@
+import { Popconfirm, Tooltip } from "antd";
+import { DeleteOutlined, LoadingOutlined } from "@ant-design/icons";
+import { createStyles } from "antd-style";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+
+const useStyles = createStyles(() => {
+  return {
+    popconfirm: {
+      '.ant-popconfirm-description': {
+        marginTop: '0 !important',
+      },
+    }
+  }
+})
+
+const DeleteButton = (
+  {
+    onDelete,
+  }: {
+    onDelete: () => Promise<void>
+  }) => {
+  const {styles} = useStyles();
+  const [loading, setLoading] = useState(false);
+  const intl = useIntl();
+
+  return (<a key="deleteButton">
+      {!loading && <Popconfirm
+        overlayClassName={styles.popconfirm}
+        title={false}
+        description={intl.formatMessage({id: "table.deletePopconfirmMessage"})}
+        onConfirm={() => {
+          setLoading(true);
+          onDelete().finally(() => setLoading(false));
+        }}>
+        <Tooltip title={intl.formatMessage({id: "table.deleteText"})}>
+          <DeleteOutlined/>
+        </Tooltip>
+      </Popconfirm>}
+      {loading && <LoadingOutlined/>}
+    </a>
+  );
+};
+export default DeleteButton;