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

package/package.json

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

package/src/components/Descriptions/Descriptions.tsx

@@ -1,6 +1,6 @@
 import { ActionType } from "@ant-design/pro-table";
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Result, Tooltip } from "antd";
+import { Button, Result, Tabs, Tooltip } from "antd";
 import { DeleteOutlined, StopOutlined } from "@ant-design/icons";
 import { FormattedMessage, useIntl } from "react-intl";
 import { TDescriptionsProps, TGetOneParams } from "./descriptionTypes";
@@ -12,6 +12,27 @@ 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 { createStyles } from "antd-style";
+
+const useStyles = createStyles(() => {
+  return {
+    antDescriptionsStyles: {
+      '.anticon-edit': {
+        opacity: 0,
+        transition: 'opacity 200ms'
+      },
+      '.ant-descriptions-item-content': {
+        width: '20%',
+      },
+      '.ant-descriptions-item-content:hover': {
+        '.anticon-edit': {
+          opacity: 1
+        },
+      }
+    }
+  }
+})
 
 const Descriptions = <Entity extends Record<string | symbol, any>,
   CreateDto = Entity,
@@ -33,12 +54,14 @@ 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'>
 ) => {
+  const { styles } = useStyles();
   const [form] = useForm<Entity>();
   const actionRefComponent = useRef<ActionType>();
   const actionRef = actionRefProp || actionRefComponent;
@@ -65,6 +88,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;
@@ -129,36 +155,58 @@ 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;
+    }
+
+    return <ProDescriptions<Entity>
+      // @ts-ignore-next-line
+      form={form}
+      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}
+      {...rest}
+    />
+  })
+
   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}
-        />
-      ))}
+      {
+        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
+      }
     </>
   );
 };

package/src/components/Descriptions/DescriptionsCreateModal.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useMemo } from "react";
-import { Button, Modal } from "antd";
+import React, { useEffect, useMemo } from "react";
+import { Button, Modal, Tabs } 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,
@@ -12,11 +13,15 @@ const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
   data,
   onClose,
   onSubmit,
+  viewMode = VIEW_MODE_TYPE.GENERAL,
   ...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(
@@ -30,6 +35,31 @@ 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}
@@ -38,26 +68,24 @@ const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
       footer={[
         <Button key='submit' type="primary" onClick={async () => form.validateFields().then(onSubmit)}>Create</Button>
       ]}
+      closeIcon={false}
     >
-      {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}
-        />
-      ))}
+      {
+        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
+      }
     </Modal>
   );
 };

package/src/components/Descriptions/descriptionTypes.ts

@@ -2,7 +2,9 @@ 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";
+import { ProColumns } from "@ant-design/pro-components";
+import { VIEW_MODE_TYPE } from "../Table/ContentViewModeButton";
+import { ProDescriptionsProps } from "@ant-design/pro-descriptions";
 
 export type TGetOneParams = {
   /**
@@ -38,6 +40,7 @@ export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = objec
   params?: TDescriptionGetRequestParams,
   columns: ProColumns<Entity>[],
   onEntityChange?: (entity: Entity | null) => void;
+  viewMode?: VIEW_MODE_TYPE,
 }
 
 export type TDescriptionsCreateModalProps<Entity> = Omit<ProDescriptionsProps<Entity>, 'columns'> & {
@@ -46,4 +49,5 @@ export type TDescriptionsCreateModalProps<Entity> = Omit<ProDescriptionsProps<En
   data: Partial<Entity> | undefined,
   onSubmit: (data: Entity) => Promise<void>,
   onClose: () => void,
+  viewMode?: VIEW_MODE_TYPE,
 }

package/src/components/Table/ContentViewModeButton.tsx

@@ -0,0 +1,27 @@
+import { Button, Tooltip } from "antd";
+import { AppstoreOutlined, UnorderedListOutlined } from "@ant-design/icons";
+export enum VIEW_MODE_TYPE {
+    TABS = 'tabs',
+    GENERAL = 'general'
+}
+
+interface ContentViewModeButtonProps {
+    contentViewMode: VIEW_MODE_TYPE;
+    setContentViewMode: (mode: VIEW_MODE_TYPE) => void;
+}
+
+const ContentViewModeButton: React.FC<ContentViewModeButtonProps> = ({ contentViewMode, setContentViewMode }) => {
+    return (
+        <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 ? <UnorderedListOutlined/> :
+                    <AppstoreOutlined/>}
+                onClick={() => setContentViewMode(contentViewMode === VIEW_MODE_TYPE.TABS ? VIEW_MODE_TYPE.GENERAL : VIEW_MODE_TYPE.TABS)}
+            />
+        </Tooltip>);
+};
+
+export default ContentViewModeButton;

package/src/components/Table/Table.tsx

@@ -1,17 +1,24 @@
 import ProTable, { ActionType } from "@ant-design/pro-table";
 import React, { useEffect, useRef, useState } from "react";
-import { Button, Popover, Space, Tooltip, message } from "antd";
-import { DeleteOutlined, PlusOutlined, QuestionCircleTwoTone, StopOutlined } from "@ant-design/icons";
+import {Button, Popover, Space, Tooltip, message, Modal } from "antd";
+import {
+  DeleteOutlined,
+  PlusOutlined,
+  QuestionCircleTwoTone,
+  StopOutlined,
+} from "@ant-design/icons";
 import { FormattedMessage, useIntl } from "react-intl";
 import { flushSync } from "react-dom";
 import { applyKeywordToSearch, buildJoinFields, collectFieldsFromColumns, getFiltersSearch } from "./tableTools";
 import { TFilterParams, TFilters, TGetAllParams, TSort, TTableProps } from "./tableTypes";
 import useColumnsSets from "./useColumnsSets";
-import DescriptionsCreateModal from "../Descriptions/DescriptionsCreateModal";
 import BulkEditButton from "./BulkEditButton";
 import _ from "lodash";
 import BulkDeleteButton from "./BulkDeleteButton";
 import { createStyles } from "antd-style";
+import ContentViewModeButton, { VIEW_MODE_TYPE } from "./ContentViewModeButton";
+import { Descriptions } from "../Descriptions";
+import DescriptionsCreateModal from "../Descriptions/DescriptionsCreateModal";
 
 let creatingRecordsCount = 0;
 
@@ -55,6 +62,7 @@ const Table = <Entity extends Record<string | symbol, any>,
     entityToCreateDto,
     entityToUpdateDto,
     createNewDefaultParams,
+    editableRecord,
     afterSave,
     actionRef: actionRefProp,
     editable,
@@ -69,6 +77,7 @@ const Table = <Entity extends Record<string | symbol, any>,
     toolBarRender,
     params,
     popupDataState,
+    editPopupTitle,
     ...rest
   }: TTableProps<Entity,
     CreateDto,
@@ -79,18 +88,21 @@ const Table = <Entity extends Record<string | symbol, any>,
   const actionRefComponent = useRef<ActionType>();
   const actionRef = actionRefProp || actionRefComponent;
   const [createPopupData, setCreatePopupData] = popupDataState ?? useState<Partial<Entity> | undefined>();
+  const [updatePopupData, setUpdatePopupData] = useState<Partial<Entity> | undefined>();
   const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
   const [selectedRecords, setSelectedRecords] = useState<Entity[]>([]);
   const [lastRequest, setLastRequest] = useState<[TGetAllParams & TPathParams, any] | []>([]);
   const [allSelected, setAllSelected] = useState(false);
   const { styles } = useStyles();
   const [messageApi, contextHolder] = message.useMessage();
+  const [descriptionsModalViewMode, setDescriptionsModalViewMode] = useState<VIEW_MODE_TYPE>(VIEW_MODE_TYPE.TABS);
 
   const intl = useIntl();
 
   useEffect(() => {
+    setUpdatePopupData(editableRecord);
     actionRef?.current?.reload();
-  }, [JSON.stringify(pathParams), JSON.stringify(params)]);
+  }, [editableRecord, JSON.stringify(pathParams), JSON.stringify(params)]);
 
   const {
     columnsSetSelect: localColumnsSetSelect,
@@ -264,7 +276,6 @@ const Table = <Entity extends Record<string | symbol, any>,
         ...editable,
       }}
       toolBarRender={(...args) => [
-        ...toolBarRender && toolBarRender(...args) || [],
         columnsSetSelect?.() || null,
         !viewOnly && onUpdateMany
           ? (
@@ -323,6 +334,7 @@ const Table = <Entity extends Record<string | symbol, any>,
           )
           : <></>,
         !viewOnly && createButton || null,
+        ...toolBarRender && toolBarRender(...args) || [],
       ]}
       columns={columns}
       defaultSize='small'
@@ -392,7 +404,36 @@ const Table = <Entity extends Record<string | symbol, any>,
       }}
       idColumnName={idColumnName}
       columns={columns ?? []}
+      viewMode={descriptionsModalViewMode}
+      extra={
+        <ContentViewModeButton
+          contentViewMode={descriptionsModalViewMode}
+          setContentViewMode={setDescriptionsModalViewMode}
+        />
+      }
     />
+    <Modal
+      title={editPopupTitle}
+      open={updatePopupData !== undefined}
+      width='80%'
+      footer={null}
+      closeIcon={false}
+      onCancel={() => setUpdatePopupData(undefined)}
+    >
+      <Descriptions<Entity>
+        mainTitle='Main'
+        columns={columns}
+        canEdit={true}
+        entity={updatePopupData}
+        viewMode={descriptionsModalViewMode}
+        extra={
+          <ContentViewModeButton
+            contentViewMode={descriptionsModalViewMode}
+            setContentViewMode={setDescriptionsModalViewMode}
+          />
+        }
+      />
+    </Modal>
     {contextHolder}
   </>);
 };

package/src/components/Table/tableTypes.ts

@@ -88,6 +88,7 @@ interface BaseProps<Entity,
   pathParams: TPathParams;
   idColumnName?: string & keyof Entity | (string & keyof Entity)[];
   createNewDefaultParams?: Partial<Entity>;
+  editableRecord?: Partial<Entity>;
   afterSave?: (record: Entity) => Promise<void>;
   actionRef?: MutableRefObject<ActionType | undefined>;
   editable?: RowEditableConfig<Entity>;
@@ -99,6 +100,7 @@ interface BaseProps<Entity,
   columnsState?: ColumnStateType;
   columnsSetSelect?: () => React.ReactNode;
   popupDataState?: [Partial<Entity>, React.Dispatch<React.SetStateAction<Partial<Entity>>>]
+  editPopupTitle?: string;
 }
 
 interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}> {