Refactor DocumentTemplate for Improved Readability and Layout Adjustments

- Reformatted the NewDocumentTemplate import for better readability.
- Enhanced the layout of the DocumentTemplate component by adjusting column widths for various fields, improving overall data presentation.
- Ensured consistent formatting in the content rendering of NewDocumentTemplate, enhancing code clarity.

assets/stylesheets/App.css

@@ -691,6 +691,11 @@ body {
   top: 1.5px;
 }
 
+.object-select .ant-select-selection-item .object-display-tag .iddisplay,
+.ant-select-dropdown .object-display-tag .iddisplay {
+  margin-bottom: -1px;
+}
+
 .ant-select-tree-title .object-display-tag {
   top: 0.5px;
 }

src/components/Dashboard/Management/DocumentTemplates/NewDocumentTemplate.jsx

@@ -36,7 +36,11 @@ const NewDocumentTemplate = ({ onOk, defaultValues }) => {
                 bordered={false}
                 isEditing={true}
                 required={false}
-                visibleProperties={{ content: false, testObject: false }}
+                visibleProperties={{
+                  content: false,
+                  testObject: false,
+                  referencedTemplates: false
+                }}
                 objectData={objectData}
               />
             )
@@ -53,7 +57,8 @@ const NewDocumentTemplate = ({ onOk, defaultValues }) => {
                   _id: false,
                   _reference: false,
                   createdAt: false,
-                  updatedAt: false
+                  updatedAt: false,
+                  referencedTemplates: false
                 }}
                 isEditing={false}
                 objectData={objectData}

src/components/Dashboard/common/ObjectList.jsx

@@ -1,33 +1,48 @@
 import PropTypes from 'prop-types'
 import ObjectDisplay from './ObjectDisplay'
-import { Space, Typography } from 'antd'
+import { Flex, Typography } from 'antd'
+import ScrollBox from './ScrollBox'
 
 const { Text } = Typography
 
-const ObjectList = ({ value, objectType, style, showHyperlink = false }) => {
+const ObjectList = ({
+  value,
+  objectType,
+  style,
+  showHyperlink = false,
+  scrollHorizontal = false
+}) => {
   if (!value || !Array.isArray(value) || value.length === 0) {
     return <Text type='secondary'>n/a</Text>
   }
 
-  return (
+  const listContents = (
-    <Space size={'small'} wrap style={style}>
+    <Flex gap={'4px'} wrap={!scrollHorizontal} style={style} justify={'start'}>
       {value.map((item) => (
-        <ObjectDisplay
+        <div key={item._id} style={{ flexShrink: 0 }}>
-          object={item}
+          <ObjectDisplay
-          objectType={objectType}
+            object={item}
-          key={item._id}
+            objectType={objectType}
-          showHyperlink={showHyperlink}
+            showHyperlink={showHyperlink}
-        />
+          />
+        </div>
       ))}
-    </Space>
+    </Flex>
   )
+
+  if (scrollHorizontal) {
+    return <ScrollBox horizontalBottomPadding={10}>{listContents}</ScrollBox>
+  } else {
+    return listContents
+  }
 }
 
 ObjectList.propTypes = {
   value: PropTypes.array,
   objectType: PropTypes.string,
   style: PropTypes.object,
-  showHyperlink: PropTypes.bool
+  showHyperlink: PropTypes.bool,
+  scrollHorizontal: PropTypes.bool
 }
 
 export default ObjectList

src/components/Dashboard/common/ObjectProperty.jsx

@@ -480,6 +480,7 @@ const ObjectProperty = ({
               value={value}
               objectType={objectType}
               showHyperlink={showHyperlink}
+              scrollHorizontal={inTable}
             />
           )
         }

src/components/Dashboard/common/SimplePropertyFilter.jsx

@@ -28,6 +28,11 @@ const getOptionKey = (option) => {
 
 const getDisplayValue = (option, property) => {
   if (!property) return option
+  if (property.type === 'objectList') {
+    if (Array.isArray(option)) return option
+    if (option && typeof option === 'object' && option._id) return [option]
+    if (option != null) return [{ _id: option }]
+  }
   if (property.type === 'object') {
     if (option && typeof option === 'object' && option._id) return option
     if (option != null) return { _id: option }

src/database/models/DocumentTemplate.js

@@ -5,7 +5,8 @@ const DocumentTemplateInfo = lazy(
     import('../../components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo')
 )
 const NewDocumentTemplate = lazy(
-  () => import('../../components/Dashboard/Management/DocumentTemplates/NewDocumentTemplate')
+  () =>
+    import('../../components/Dashboard/Management/DocumentTemplates/NewDocumentTemplate')
 )
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
@@ -32,7 +33,11 @@ export const DocumentTemplate = {
       label: 'New Document Template',
       icon: PlusIcon,
       content: (objectData, { onOk } = {}) => {
-        return createElement(NewDocumentTemplate, { defaultValues: objectData, onOk, reset: true })
+        return createElement(NewDocumentTemplate, {
+          defaultValues: objectData,
+          onOk,
+          reset: true
+        })
       }
     },
     {
@@ -106,6 +111,7 @@ export const DocumentTemplate = {
     'tags',
     'parent',
     'documentSize',
+    'referencedTemplates',
     'createdAt',
     'updatedAt'
   ],
@@ -116,6 +122,7 @@ export const DocumentTemplate = {
     'global',
     'parent',
     'documentSize',
+    'referencedTemplates',
     'objectType',
     'createdAt',
     'updatedAt',
@@ -178,7 +185,7 @@ export const DocumentTemplate = {
       label: 'Object Type',
       required: true,
       type: 'objectType',
-      columnWidth: 150,
+      columnWidth: 180,
       empty: (documentTemplate) => {
         return documentTemplate.global
       }
@@ -221,7 +228,7 @@ export const DocumentTemplate = {
       masterFilter: { global: true, active: true },
       objectType: 'documentTemplate',
       showHyperlink: true,
-      columnWidth: 200,
+      columnWidth: 230,
       empty: (documentTemplate) => {
         return documentTemplate.global
       }
@@ -231,9 +238,20 @@ export const DocumentTemplate = {
       label: 'Document Printers',
       required: false,
       type: 'objectList',
+      columnWidth: 230,
       objectType: 'documentPrinter',
       showHyperlink: true
     },
+    {
+      name: 'referencedTemplates',
+      label: 'Referenced Templates',
+      required: false,
+      type: 'objectList',
+      columnWidth: 230,
+      objectType: 'documentTemplate',
+      readOnly: true,
+      showHyperlink: true
+    },
     {
       name: 'content',
       label: 'Content',