Added minimal object child table with modal popup.

src/components/Dashboard/common/ObjectChildTable.jsx

@@ -1,11 +1,11 @@
-import { useMemo, useEffect, useRef } from 'react'
+import { useMemo, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-import { Table, Skeleton, Card, Button, Flex, Typography } from 'antd'
+import { Table, Skeleton, Card, Button, Flex, Typography, Modal } from 'antd'
 import PlusIcon from '../../Icons/PlusIcon'
 import ObjectProperty from './ObjectProperty'
 import { LoadingOutlined } from '@ant-design/icons'
 import BinIcon from '../../Icons/BinIcon'
-const { Text } = Typography
+const { Text, Link, Title } = Typography
 
 const DEFAULT_COLUMN_WIDTHS = {
   text: 200,
@@ -64,13 +64,15 @@ const ObjectChildTable = ({
   value = [],
   rollups = [],
   onChange,
+  minimal = false,
+  label = '',
   ...tableProps
 }) => {
   const mainTableWrapperRef = useRef(null)
   const rollupTableWrapperRef = useRef(null)
   const generatedRowKeysRef = useRef(new WeakMap())
   const generatedRowKeyCountRef = useRef(0)
-
+  const [minimalModelOpen, setMinimalModelOpen] = useState(false)
   const getFallbackRowKey = (record) => {
     if (!record || typeof record !== 'object') {
       return `object-child-table-row-${String(record)}`
@@ -274,8 +276,7 @@ const ObjectChildTable = ({
     return itemsSource
   }, [itemsSource, loading, skeletonData])
 
-  const resolvedRowKey =
+  const resolvedRowKey = (record) => getResolvedRecordKey(record)
-    (record) => getResolvedRecordKey(record)
 
   const scrollConfig =
     scrollHeight != null
@@ -460,7 +461,8 @@ const ObjectChildTable = ({
         rowKey={resolvedRowKey}
         scroll={scrollConfig}
         locale={{ emptyText }}
-        style={{ maxWidth, minWidth: 0 }}
+        bordered={true}
+        style={{ maxWidth: minimal ? '100%' : maxWidth, minWidth: 0 }}
         className='rollup-table'
       />
     </div>
@@ -470,13 +472,14 @@ const ObjectChildTable = ({
     <Flex vertical>
       <div ref={mainTableWrapperRef}>
         <Table
-          style={{ maxWidth, minWidth: 0 }}
+          style={{ maxWidth: minimal ? '100%' : maxWidth, minWidth: 0 }}
           dataSource={dataSource}
           columns={tableColumns}
           loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
           size={size}
           rowKey={resolvedRowKey}
           scroll={scrollConfig}
+          bordered={true}
           locale={{ emptyText }}
           pagination={false}
           className={hasRollups ? 'child-table-rollups' : 'child-table'}
@@ -509,6 +512,34 @@ const ObjectChildTable = ({
     )
   }
 
+  if (minimal == true) {
+    return (
+      <>
+        <Link
+          onClick={() => {
+            setMinimalModelOpen(true)
+          }}
+        >
+          {value?.length || 0} {value?.length == 1 ? 'item' : 'items'}
+        </Link>
+        <Modal
+          open={minimalModelOpen}
+          onCancel={() => setMinimalModelOpen(false)}
+          footer={null}
+          width='860px'
+        >
+          <Title
+            level={2}
+            style={{ marginTop: 0, lineHeight: '0.7', marginBottom: 20 }}
+          >
+            {label}
+          </Title>
+          {tableComponent}
+        </Modal>
+      </>
+    )
+  }
+
   return tableComponent
 }
 
@@ -530,13 +561,15 @@ ObjectChildTable.propTypes = {
   skeletonRows: PropTypes.number,
   additionalColumns: PropTypes.arrayOf(PropTypes.object),
   emptyText: PropTypes.node,
+  label: PropTypes.string,
   isEditing: PropTypes.bool,
   value: PropTypes.arrayOf(PropTypes.object),
   onChange: PropTypes.func,
   maxWidth: PropTypes.string,
   rollups: PropTypes.arrayOf(PropTypes.object),
   objectData: PropTypes.object,
-  canAddRemove: PropTypes.bool
+  canAddRemove: PropTypes.bool,
+  minimal: PropTypes.bool
 }
 
 export default ObjectChildTable

src/components/Dashboard/common/ObjectProperty.jsx

@@ -422,6 +422,8 @@ const ObjectProperty = ({
               loading={loading}
               rollups={rollups}
               size={size}
+              minimal={minimal}
+              label={label}
               canAddRemove={canAddRemove}
             />
           )