Add edit and delete buttons for orders (#136)

* Add delete and view buttons

apps/cms/src/admin/views/MerchSales.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Button } from 'payload/components/elements';
-import { AdminView } from 'payload/config';
+import { Button } from "payload/components/elements";
+import { AdminView } from "payload/config";
 import ViewTemplate from "./ViewTemplate";
 import { Column } from "payload/dist/admin/components/elements/Table/types";
 import { Order } from "../../@types/Order";
@@ -11,34 +11,35 @@ import SortedColumn from "../utils/SortedColumn";
 import { Table } from "payload/dist/admin/components/elements/Table";
 
 const MerchSales: AdminView = ({ user, canAccessAdmin }) => {
-
   // Get data from API
   const [data, setData] = useState<IOrder[]>(null);
   useEffect(() => {
     OrdersApi.getOrders()
-      .then(
-        (res: IOrder[]) => setData(res)
-      )
+      .then((res: IOrder[]) => setData(res))
       .catch((error) => console.log(error));
   }, []);
 
   // Output human-readable table headers based on the attribute names from the API
   function prettifyKey(str: string): string {
     let res = "";
-    for (const i of str.split('_')) {
-      res += i.charAt(0).toUpperCase() + i.slice(1) + " "
+    for (const i of str.split("_")) {
+      res += i.charAt(0).toUpperCase() + i.slice(1) + " ";
     }
     return res;
   }
 
   // Do not load table until we receive the data
-  if (data==null) {
-    return <div> Loading... </div>
+  if (data == null) {
+    return <div> Loading... </div>;
   }
 
   const tableCols = new Array<Column>();
   for (const key of Object.keys(new Order())) {
-    const renderCell: React.FC<{children?: React.ReactNode}> = RenderCellFactory.get(data[0], key);
+    const renderCellComponent = RenderCellFactory.get(data[0], key);
+    const renderCell: React.FC<{ children?: React.ReactNode }> =
+      renderCellComponent instanceof Promise
+        ? renderCellComponent
+        : renderCellComponent;
 
     const col: Column = {
       accessor: key,
@@ -47,38 +48,73 @@ const MerchSales: AdminView = ({ user, canAccessAdmin }) => {
           <SortedColumn
             label={prettifyKey(key)}
             name={key}
-            data={data as never[]}/>
+            data={data as never[]}
+          />
         ),
-        renderCell: renderCell
+        renderCell: renderCell,
       },
       label: "",
       name: "",
-      active: true
-    }
+      active: true,
+    };
     tableCols.push(col);
   }
-  console.log(tableCols)
+
+  const editColumn: Column = {
+    accessor: "edit",
+    components: {
+      Heading: <div>Edit</div>,
+      renderCell: ({ children }) => (
+        <Button onClick={() => handleEdit(children as string)}>Edit</Button>
+      ),
+    },
+    label: "Edit",
+    name: "edit",
+    active: true,
+  };
+
+  tableCols.push(editColumn);
+
+  const deleteColumn: Column = {
+    accessor: "delete",
+    components: {
+      Heading: <div>Delete</div>,
+      renderCell: ({ children }) => (
+        <Button onClick={() => handleDelete(children as string)}>Delete</Button>
+      ),
+    },
+    label: "Delete",
+    name: "delete",
+    active: true,
+  };
+
+  tableCols.push(deleteColumn);
+
+  const handleEdit = (orderId: string) => {
+    console.log(`Dummy. Order ID: ${orderId}`);
+  };
+
+  const handleDelete = (orderId: string) => {
+    console.log(`Dummy. Order ID: ${orderId}`);
+  };
+
+  console.log(tableCols);
 
   return (
-  <ViewTemplate
-    user={user}
-    canAccessAdmin={canAccessAdmin}
-    description=""
-    keywords=""
-    title="Merchandise Sales"
-  >
-    <Button
-      el="link"
-      to={"/admin"}
-      buttonStyle="primary"
+    <ViewTemplate
+      user={user}
+      canAccessAdmin={canAccessAdmin}
+      description=""
+      keywords=""
+      title="Merchandise Sales"
     >
-      Go to Main Admin View
-    </Button>
-
-    <Table data={data} columns={tableCols}/>
+      <Button el="link" to={"/admin"} buttonStyle="primary">
+        Go to Main Admin View
+      </Button>
 
-  </ViewTemplate>
+      <Table data={data} columns={tableCols} />
+    </ViewTemplate>
   );
 };
 
-export default MerchSales
+export default MerchSales;

apps/cms/src/apis/orders.api.ts

@@ -3,45 +3,48 @@ import { IOrder } from "../@types/IOrder";
 // todo turn into real api
 class OrdersApi {
   // eslint-disable-next-line @typescript-eslint/require-await
-  async getOrders(): Promise<any> {
-    const res = []
+  async getOrders(): Promise<IOrder[]> {
+    const res: IOrder[] = [];
     const item1: IOrder = {
       colour: "black",
       date: new Date("2022-01-31"),
-      image_url: "https://i.kym-cdn.com/entries/icons/original/000/033/421/cover2.jpg",
+      image_url:
+        "https://i.kym-cdn.com/entries/icons/original/000/033/421/cover2.jpg",
       item: "graduation hat",
       order_id: "1",
       order_person: "kenneth west",
       qty: 2,
-      size: "M"
-    }
+      size: "M",
+    };
     res.push(item1);
 
     const item2: IOrder = {
       colour: "white",
       date: new Date("2022-02-13"),
-      image_url: "https://i.kym-cdn.com/photos/images/newsfeed/002/164/493/b8b.jpg",
+      image_url:
+        "https://i.kym-cdn.com/photos/images/newsfeed/002/164/493/b8b.jpg",
       item: "scorpion",
       order_id: "2",
       order_person: "aubrey graham drake",
       qty: 1,
-      size: "L"
-    }
+      size: "L",
+    };
     res.push(item2);
 
     const item3: IOrder = {
       colour: "beige",
       date: new Date("2010-02-13"),
-      image_url: "https://i.pinimg.com/474x/c0/f9/f1/c0f9f10a0061a8dd1080d7d9e560579c.jpg",
+      image_url:
+        "https://i.pinimg.com/474x/c0/f9/f1/c0f9f10a0061a8dd1080d7d9e560579c.jpg",
       item: "dat stick",
       order_id: "3",
       order_person: "rich brian",
       qty: 1,
-      size: "S"
-    }
+      size: "S",
+    };
     res.push(item3);
 
-    return res as IOrder[];
+    return res;
   }
 }