[Back] Split OrderGetDetail - [Front] Merge OrderAppend | Split OrderComment & OrderDetail | useItems | useSWR

SoarCraft.AwaiShop/Hub/Order/Get.cs

@@ -26,27 +26,30 @@ await this.Db.Orders
      * <remarks>
      * @author Aloento
      * @since 0.5.0
-     * @version 1.0.0
+     * @version 1.1.0
      * </remarks>
      */
     [Authorize]
-    public async Task<dynamic> OrderGetDetail(uint orderId) {
-        var items = await this.Db.OrderCombos
+    public async Task<dynamic> OrderGetItems(uint orderId) =>
+        await this.Db.OrderCombos
             .Where(x => x.OrderId == orderId && x.Order.UserId == this.UserId)
             .Select(x => new {
                 x.Quantity,
                 Types = x.Combo.Types.Select(t => t.TypeId).ToArray()
             })
             .ToArrayAsync();
 
-        var cmts = await this.Db.Comments
+    /**
+     * <remarks>
+     * @author Aloento
+     * @since 1.3.0
+     * @version 0.1.0
+     * </remarks>
+     */
+    [Authorize]
+    public Task<uint[]> OrderGetCmts(uint orderId) =>
+        this.Db.Comments
             .Where(x => x.OrderId == orderId && x.Order.UserId == this.UserId)
             .Select(x => x.CommentId)
             .ToArrayAsync();
-
-        return new {
-            Items = items,
-            Comments = cmts
-        };
-    }
 }

package.json

@@ -20,7 +20,7 @@
     "@azure/msal-react": "^2.0.11",
     "@fluentui/react-components": "^9.46.4",
     "@fluentui/react-hooks": "^8.6.36",
-    "@fluentui/react-icons": "^2.0.226",
+    "@fluentui/react-icons": "^2.0.227",
     "@griffel/react": "^1.5.20",
     "@lexical/clipboard": "0.10.0",
     "@lexical/code": "0.10.0",
@@ -57,6 +57,6 @@
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.0"
+    "vite": "^5.1.1"
   }
 }

src/Pages/History/Append.tsx → src/Components/Order/Append.tsx

@@ -1,10 +1,11 @@
 import { Button, Field, Textarea, Toast, ToastTitle, makeStyles } from "@fluentui/react-components";
 import { useConst } from "@fluentui/react-hooks";
 import { useState } from "react";
-import { Logger } from "~/Helpers/Logger";
 import { Flex } from "~/Helpers/Styles";
 import { useErrorToast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
+import { AdminHub } from "~/ShopNet/Admin";
+import { IOrderComp } from "./Comment";
 
 /**
  * @author Aloento
@@ -21,29 +22,19 @@ const useStyles = makeStyles({
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.1.1
+ * @version 1.0.0
  */
-interface IOrderAppend {
-  OrderId: number;
-  Status?: string;
-  Refresh: () => void;
-  ParentLog: Logger;
-}
-
-/**
- * @author Aloento
- * @since 0.5.0
- * @version 0.4.2
- */
-export function OrderAppend({ OrderId, Status, Refresh, ParentLog }: IOrderAppend) {
+export function CommentAppend({ OrderId, Refresh, ParentLog, Status, Admin }: IOrderComp) {
   const log = useConst(() => ParentLog.With("Append"));
 
   const style = useStyles();
   const [cmt, setCmt] = useState<string>();
 
   const { dispatch, dispatchToast } = useErrorToast(log);
 
-  const { run: append } = Hub.Order.Post.useAppend({
+  const hub = (Admin ? AdminHub : Hub).Order.Post as typeof AdminHub.Order.Post & typeof Hub.Order.Post;
+
+  const { run: append } = hub.useAppend({
     manual: true,
     onError(e, req) {
       dispatch({
@@ -64,19 +55,19 @@ export function OrderAppend({ OrderId, Status, Refresh, ParentLog }: IOrderAppen
     }
   });
 
-  const { run: cancel } = Hub.Order.Post.useCancel({
+  const { run: cancel } = (Admin ? hub.useClose : hub.useCancel)({
     manual: true,
     onError(e, params) {
       dispatch({
-        Message: "Failed Cancel Order",
+        Message: `Failed ${Admin ? "Close" : "Cancel"} Order`,
         Request: params,
         Error: e
       });
     },
     onSuccess() {
       dispatchToast(
         <Toast>
-          <ToastTitle>Order Canceled</ToastTitle>
+          <ToastTitle>Order {Admin ? "Closed" : "Cancelled"}</ToastTitle>
         </Toast>,
         { intent: "success" }
       );
@@ -100,7 +91,11 @@ export function OrderAppend({ OrderId, Status, Refresh, ParentLog }: IOrderAppen
       {
         !(Status === "Finished" || Status === "Returning") &&
         <Button onClick={() => cancel(OrderId, cmt!)}>
-          {Status === "Shipping" ? "Ask Return" : "Cancel Order"} with Reason
+          {
+            Admin
+              ? "Force Close"
+              : Status === "Shipping" ? "Ask Return" : "Cancel Order"
+          } with Reason
         </Button>
       }
 

src/Components/Order/Comment.tsx

@@ -0,0 +1,60 @@
+import { Body1, Caption1Stronger, Field, Label } from "@fluentui/react-components";
+import { useConst } from "@fluentui/react-hooks";
+import { useRequest } from "ahooks";
+import { ICompLog } from "~/Helpers/Logger";
+import { Hub } from "~/ShopNet";
+import { CommentAppend } from "./Append";
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.1.0
+ */
+export interface IComment {
+  Content: string;
+  Time: Date;
+  User: string;
+}
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.2.0
+ */
+export interface IOrderComp extends ICompLog {
+  OrderId: number;
+  Refresh: () => void;
+  Status?: string;
+  Admin?: true;
+}
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.1.0
+ */
+export function OrderComment({ OrderId, Refresh, ParentLog, Status, Admin }: IOrderComp) {
+  const log = useConst(() => ParentLog.With("Comment"));
+
+  const { data, run } = useRequest(() => Hub.Order.Get.Cmts(OrderId, log), {
+    manual: true,
+    onError: log.error
+  });
+
+  return <>
+    <Field label="Comment" size="large">
+      {data?.length === 0
+        ?
+        <Label>No Comment</Label>
+        :
+        data?.map((v, i) => <div key={i}>
+          <Caption1Stronger>{v.User} {v.Time.toLocaleString()}</Caption1Stronger>
+          <br />
+          <Body1>{v.Content}</Body1>
+        </div>
+        )}
+    </Field>
+
+    <CommentAppend OrderId={OrderId} Status={Status} Refresh={run} ParentLog={log} />
+  </>;
+}

src/Components/OrderInfo.tsx

@@ -27,7 +27,7 @@ const useStyles = makeStyles({
  */
 interface IOrderInfo {
   OrderId: number;
-  Order: OrderEntity.Order;
+  Order?: OrderEntity.Order;
   Admin?: true;
 }
 

src/Pages/Admin/Order/Detail.tsx

@@ -3,14 +3,14 @@ import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from "@fluentui/r
 import { DismissRegular, OpenRegular } from "@fluentui/react-icons";
 import { useBoolean, useRequest } from "ahooks";
 import { useEffect } from "react";
+import { CommentAppend } from "~/Components/Order/Append";
+import { OrderComment } from "~/Components/Order/Comment";
 import { OrderInfo } from "~/Components/OrderInfo";
 import { useRouter } from "~/Components/Router";
 import { Logger } from "~/Helpers/Logger";
 import { ColFlex } from "~/Helpers/Styles";
-import { OrderComment } from "~/Pages/History/Comment";
 import { AdminHub } from "~/ShopNet/Admin";
 import { AdminOrderAction } from "./Action";
-import { AdminOrderAppend } from "./Append";
 import { AdminOrderList } from "./List";
 import { Shipment } from "./Ship";
 
@@ -31,7 +31,7 @@ const log = new Logger("Admin", "Order", "Detail");
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.3.1
+ * @version 0.4.0
  */
 export function AdminOrderDetail({ OrderId }: { OrderId: number; }) {
   const style = useStyles();
@@ -104,7 +104,7 @@ export function AdminOrderDetail({ OrderId }: { OrderId: number; }) {
 
         <OrderComment Comments={data?.Comments} />
 
-        <AdminOrderAppend OrderId={OrderId} Refresh={run} />
+        <CommentAppend OrderId={OrderId} Status={order?.Status} Admin Refresh={run} ParentLog={log} />
 
         <AdminOrderAction OrderId={OrderId} Status={order?.Status} Refresh={run} />
       </DrawerBody>

src/Pages/History/Action.tsx

@@ -1,7 +1,7 @@
 import { Button, Field, Toast, ToastTitle, makeStyles } from "@fluentui/react-components";
 import { useConst } from "@fluentui/react-hooks";
+import { IOrderComp } from "~/Components/Order/Comment";
 import { useRouter } from "~/Components/Router";
-import { ICompLog } from "~/Helpers/Logger";
 import { ColFlex } from "~/Helpers/Styles";
 import { useErrorToast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
@@ -18,23 +18,12 @@ const useStyles = makeStyles({
   },
 });
 
-/**
- * @author Aloento
- * @since 1.0.0
- * @version 0.1.1
- */
-interface IOrderAction extends ICompLog {
-  OrderId: number;
-  Status?: string;
-  Refresh: () => void;
-}
-
 /**
  * @author Aloento
  * @since 1.0.0
  * @version 0.1.2
  */
-export function OrderAction({ OrderId, Status, Refresh, ParentLog }: IOrderAction) {
+export function OrderAction({ OrderId, Status, Refresh, ParentLog }: IOrderComp) {
   const log = useConst(() => ParentLog.With("Action"));
 
   const style = useStyles();