diff --git a/apps/cms/src/admin/views/MerchSales.tsx b/apps/cms/src/admin/views/MerchSales.tsx index a809cc2f..81d2d3f2 100644 --- a/apps/cms/src/admin/views/MerchSales.tsx +++ b/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(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
Loading...
+ if (data == null) { + return
Loading...
; } const tableCols = new Array(); 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 }) => { + 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:
Edit
, + renderCell: ({ children }) => ( + + ), + }, + label: "Edit", + name: "edit", + active: true, + }; + + tableCols.push(editColumn); + + const deleteColumn: Column = { + accessor: "delete", + components: { + Heading:
Delete
, + renderCell: ({ children }) => ( + + ), + }, + 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 ( - - - - + - +
+ ); }; -export default MerchSales +export default MerchSales; diff --git a/apps/cms/src/apis/orders.api.ts b/apps/cms/src/apis/orders.api.ts index d8d44d47..a18160f4 100644 --- a/apps/cms/src/apis/orders.api.ts +++ b/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 { - const res = [] + async getOrders(): Promise { + 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; } }