feat(cms): add Many to One field on create resource form

tenseijs · Dec 10, 2021 · ce8439f · ce8439f
1 parent 7108f22
commit ce8439f
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 55 deletions.
diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts
@@ -88,14 +88,12 @@ export default tensei()
       text('Stripe Checkout ID').hideOnIndex(),
       belongsToMany('Product')
     ]),
-    resource('Order Item')
-      .fields([
-        integer('Quantity').min(0).rules('min:0', 'required'),
-        integer('Total').rules('required', 'min:0'),
-        belongsTo('Order').rules('required'),
-        belongsTo('Product').rules('required')
-      ])
-      .hideFromNavigation(),
+    resource('Order Item').fields([
+      integer('Quantity').min(0).rules('min:0', 'required'),
+      integer('Total').rules('required', 'min:0'),
+      belongsTo('Order').rules('required'),
+      belongsTo('Product').rules('required')
+    ]),
     resource('Option')
       .fields([
         text('Name').rules('Required'),

diff --git a/packages/cms/core.ts b/packages/cms/core.ts
@@ -78,6 +78,7 @@ class Core {
       Integer: FormNumber,
       Boolean: FormBoolean,
       Textarea: FormTextarea,
+      ManyToOne: FormBelongsToMany,
       ManyToMany: FormBelongsToMany
     },
     index: {}

diff --git a/packages/cms/form/belongs-to-many/belongs-to-many.tsx b/packages/cms/form/belongs-to-many/belongs-to-many.tsx
@@ -99,6 +99,7 @@ export const BelongsToMany: React.FunctionComponent<FormComponentProps> = ({
   editing,
   resource
 }) => {
+  const isManyToOne = field.component.form === 'ManyToOne'
   const [createFlyOutOpen, setCreateFlyOutOpen] = useState(false)
   const [documents, setDocuments] = useState<any[]>([])
   const [selectedItems, setSelectedItems] = useState<any[]>([])
@@ -165,7 +166,25 @@ export const BelongsToMany: React.FunctionComponent<FormComponentProps> = ({
           <EuiFlyoutBody>
             <Resource
               resource={relatedResource}
-              tableProps={{ onSelect: setSelectedItems }}
+              tableProps={{
+                onSelect: setSelectedItems,
+                inFlyout: true,
+                hideSelection: isManyToOne,
+                actions: isManyToOne
+                  ? [
+                      {
+                        name: 'Link',
+                        description: 'Link this item',
+                        icon: 'link',
+                        type: 'icon',
+                        onClick: item => {
+                          setDocuments([item])
+                          setFlyoutOpen(false)
+                        }
+                      }
+                    ]
+                  : []
+              }}
             />
           </EuiFlyoutBody>
 
@@ -180,18 +199,20 @@ export const BelongsToMany: React.FunctionComponent<FormComponentProps> = ({
                   Close
                 </EuiButtonEmpty>
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  disabled={selectedItems.length === 0}
-                  onClick={() => {
-                    setDocuments(selectedItems)
-                    closeFlyout()
-                  }}
-                  fill
-                >
-                  Add selected {relatedResource?.label}
-                </EuiButton>
-              </EuiFlexItem>
+              {isManyToOne ? null : (
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    disabled={selectedItems.length === 0}
+                    onClick={() => {
+                      setDocuments(selectedItems)
+                      closeFlyout()
+                    }}
+                    fill
+                  >
+                    Add selected {relatedResource?.label}
+                  </EuiButton>
+                </EuiFlexItem>
+              )}
             </EuiFlexGroup>
           </EuiFlyoutFooter>
         </EuiFlyout>

diff --git a/packages/cms/pages/resources/resource/resource.tsx b/packages/cms/pages/resources/resource/resource.tsx
@@ -11,6 +11,7 @@ import {
   EuiBasicTable,
   EuiBasicTableProps,
   EuiBasicTableColumn,
+  EuiTableActionsColumnType,
   CriteriaWithPagination
 } from '@tensei/eui/lib/components/basic_table'
 import {
@@ -219,6 +220,9 @@ interface MetaData {
 }
 interface TableProps {
   search: string
+  hideSelection?: boolean
+  inFlyout?: boolean
+  actions?: EuiTableActionsColumnType<any>['actions']
   resource: ResourceContract
   filters: ActiveFilter[]
   applyFilter: (filter: ActiveFilter) => void
@@ -229,7 +233,10 @@ export const Table: React.FunctionComponent<TableProps> = ({
   search,
   filters,
   resource,
-  onSelect
+  onSelect,
+  hideSelection,
+  inFlyout,
+  actions
 }) => {
   const { fetchTableData, deleteTableData } = useResourceStore()
   const [pageSize, setPageSize] = useState(resource?.perPageOptions[0])
@@ -316,33 +323,35 @@ export const Table: React.FunctionComponent<TableProps> = ({
         })) || []),
       {
         name: 'Actions',
-        actions: [
-          {
-            name: 'Edit',
-            description: 'Edit this item',
-            icon: 'pencil',
-            type: 'icon',
-            // color: 'danger',
-            onClick: item => {
-              push(
-                window.Tensei.getPath(
-                  `resources/${resource?.slugPlural}/${item.id}/edit`
-                )
-              )
-            }
-          },
-          {
-            name: 'Delete',
-            description: 'Delete this item',
-            icon: 'trash',
-            type: 'icon',
-            color: 'danger',
-            onClick: item => {
-              setIsModalVisible(true)
-              setItemsSelectedForDelete([item.id])
-            }
-          }
-        ]
+        actions: inFlyout
+          ? actions || []
+          : [
+              {
+                name: 'Edit',
+                description: 'Edit this item',
+                icon: 'pencil',
+                type: 'icon',
+                // color: 'danger',
+                onClick: item => {
+                  push(
+                    window.Tensei.getPath(
+                      `resources/${resource?.slugPlural}/${item.id}/edit`
+                    )
+                  )
+                }
+              },
+              {
+                name: 'Delete',
+                description: 'Delete this item',
+                icon: 'trash',
+                type: 'icon',
+                color: 'danger',
+                onClick: item => {
+                  setIsModalVisible(true)
+                  setItemsSelectedForDelete([item.id])
+                }
+              }
+            ]
       }
     ]
   }, [resource])
@@ -431,12 +440,16 @@ export const Table: React.FunctionComponent<TableProps> = ({
         columns={columns}
         hasActions={true}
         loading={loading}
-        selection={{
-          selectable: () => true,
-          onSelectionChange: setSelectedItems,
-          selectableMessage: selectable =>
-            selectable ? '' : 'Cannot select this product.'
-        }}
+        selection={
+          hideSelection
+            ? undefined
+            : {
+                selectable: () => true,
+                onSelectionChange: setSelectedItems,
+                selectableMessage: selectable =>
+                  selectable ? '' : 'Cannot select this product.'
+              }
+        }
         isSelectable={true}
         sorting={{
           sort: {