admin: add connect and disconnect for list relation in edit page

paljs · Aug 20, 2020 · 6156501 · 6156501
1 parent e92c240
commit 6156501
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 22 deletions.
diff --git a/packages/admin/src/PrismaTable/EditRecord.tsx b/packages/admin/src/PrismaTable/EditRecord.tsx
@@ -87,7 +87,7 @@ const EditRecord: React.FC<EditRecordProps> = ({
                       model={field.type}
                       inEdit
                       filter={{ [model]: record[modelObject.idField] }}
-                      parent={{ name: model, value: record }}
+                      parent={{ name: model, value: record, field: field.name }}
                     />
                   </Tab>
                 );

diff --git a/packages/admin/src/PrismaTable/QueryDocument.ts b/packages/admin/src/PrismaTable/QueryDocument.ts
@@ -18,28 +18,30 @@ const getFields = (
     ) {
       if (field.kind !== 'object') {
         fieldsString += `${field.name} `;
-      } else if (!field.list) {
+      } else if (!(field.list && !update)) {
         const fieldModel = models.find((item) => item.id === field.type);
         if (fieldModel) {
           fieldsString += `${field.name} {${fieldModel.idField} `;
-          fieldModel.displayFields.forEach((item) => {
-            const splitItems = item.split('.');
-            for (let i = 0; i < splitItems.length; i++) {
-              if (i + 1 < splitItems.length) {
-                fieldsString += `${splitItems[i]} { `;
-              } else if (
-                !(
-                  splitItems.length === 1 &&
-                  splitItems[i] === fieldModel.idField
-                )
-              ) {
-                fieldsString += `${splitItems[i]} `;
+          if (!field.list) {
+            fieldModel.displayFields.forEach((item) => {
+              const splitItems = item.split('.');
+              for (let i = 0; i < splitItems.length; i++) {
+                if (i + 1 < splitItems.length) {
+                  fieldsString += `${splitItems[i]} { `;
+                } else if (
+                  !(
+                    splitItems.length === 1 &&
+                    splitItems[i] === fieldModel.idField
+                  )
+                ) {
+                  fieldsString += `${splitItems[i]} `;
+                }
               }
-            }
-            for (let i = 1; i < splitItems.length; i++) {
-              fieldsString += `} `;
-            }
-          });
+              for (let i = 1; i < splitItems.length; i++) {
+                fieldsString += `} `;
+              }
+            });
+          }
           fieldsString += '} ';
         }
       }

diff --git a/packages/admin/src/PrismaTable/Table/ListConnect.tsx b/packages/admin/src/PrismaTable/Table/ListConnect.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button } from '@paljs/ui/Button';
+import { useListConnectToOne } from '../useListConnectToOne';
+import { SchemaModel } from '@paljs/types';
+import { Spinner } from '@paljs/ui';
+
+interface ListConnectProps {
+  parent: { name: string; value: any; field: string };
+  row: any;
+  model: SchemaModel;
+}
+export const ListConnect: React.FC<ListConnectProps> = ({
+  parent,
+  row,
+  model,
+}) => {
+  const { listConnectToOne, updateLoading } = useListConnectToOne(parent);
+
+  const rowId = row.original[model.idField];
+
+  const isConnected = !!parent.value[parent.field].find(
+    (r: any) => r[model.idField] === rowId,
+  );
+
+  return (
+    <td colSpan={2} style={{ position: 'relative' }}>
+      <Button
+        size="Small"
+        appearance="ghost"
+        status={isConnected ? 'Danger' : 'Success'}
+        onClick={() => listConnectToOne(model, rowId, !isConnected)}
+      >
+        {isConnected ? 'DisConnect' : 'Connect'}
+        {updateLoading && <Spinner size="Tiny" />}
+      </Button>
+    </td>
+  );
+};
diff --git a/packages/admin/src/PrismaTable/Table/index.tsx b/packages/admin/src/PrismaTable/Table/index.tsx
@@ -15,6 +15,7 @@ import { TableContext } from '../Context';
 import Spinner from '@paljs/ui/Spinner';
 import Tooltip from '@paljs/ui/Tooltip';
 import { Checkbox } from '@paljs/ui';
+import { ListConnect } from './ListConnect';
 
 interface TableProps {
   inEdit?: boolean;
@@ -28,6 +29,7 @@ interface TableProps {
   filterHandler: (filters: { id: string; value: any }[]) => void;
   onAction: (action: 'create' | 'delete' | 'connect', value?: unknown) => void;
   connect?: any;
+  parent?: { name: string; value: any; field: string };
 }
 
 export const Table: React.FC<TableProps> = ({
@@ -42,6 +44,7 @@ export const Table: React.FC<TableProps> = ({
   onAction,
   inEdit,
   connect,
+  parent,
 }) => {
   const {
     schema: { models },
@@ -270,7 +273,10 @@ export const Table: React.FC<TableProps> = ({
                       </Button>
                     </td>
                   )}
-                  {!connect && (
+                  {parent && model && (
+                    <ListConnect parent={parent} row={row} model={model} />
+                  )}
+                  {!connect && !parent && (
                     <td colSpan={actions.delete ? 1 : 2}>
                       <Tooltip
                         className="inline-block"
@@ -300,7 +306,7 @@ export const Table: React.FC<TableProps> = ({
                       </Tooltip>
                     </td>
                   )}
-                  {actions.delete && !connect && (
+                  {actions.delete && !connect && !parent && (
                     <td colSpan={1}>
                       <Tooltip
                         className="inline-block"

diff --git a/packages/admin/src/PrismaTable/dynamicTable.tsx b/packages/admin/src/PrismaTable/dynamicTable.tsx
@@ -9,7 +9,7 @@ import EditRecord from './EditRecord';
 import { mutationDocument, queryDocument } from './QueryDocument';
 
 interface DynamicTableProps {
-  parent?: { name: string; value: any };
+  parent?: { name: string; value: any; field: string };
   inEdit?: boolean;
   model: string;
   filter?: unknown;
@@ -165,6 +165,7 @@ const DynamicTable: React.FC<DynamicTableProps> = ({
         />
       ) : (
         <Table
+          parent={parent}
           connect={connect}
           inEdit={inEdit}
           onAction={onAction}

diff --git a/packages/admin/src/PrismaTable/useListConnectToOne.ts b/packages/admin/src/PrismaTable/useListConnectToOne.ts
@@ -0,0 +1,48 @@
+import { useContext } from 'react';
+import { TableContext } from './Context';
+import { useMutation } from '@apollo/client';
+import { mutationDocument } from './QueryDocument';
+import { SchemaModel } from '@paljs/types';
+
+export const useListConnectToOne = (parent: {
+  name: string;
+  value: any;
+  field: string;
+}) => {
+  const {
+    schema: { models },
+  } = useContext(TableContext);
+  const [updateModel, { loading: updateLoading }] = useMutation(
+    mutationDocument(models, parent.name, 'update'),
+  );
+
+  const modelObject = models.find((m) => m.id === parent.name);
+
+  const listConnectToOne = (
+    fieldModel: SchemaModel,
+    fieldId: any,
+    connect = true,
+  ) => {
+    if (modelObject) {
+      updateModel({
+        variables: {
+          where: {
+            [modelObject.idField]: parent.value[modelObject.idField],
+          },
+          data: {
+            [parent.field]: {
+              [connect ? 'connect' : 'disconnect']: {
+                [fieldModel.idField]: fieldId,
+              },
+            },
+          },
+        },
+      });
+    }
+  };
+
+  return {
+    listConnectToOne,
+    updateLoading,
+  };
+};