From 4f374e9439c432c628a6f3472ba30d7f5deeb946 Mon Sep 17 00:00:00 2001 From: Andrii Balitskyi <10balian10@gmail.com> Date: Fri, 18 Oct 2024 15:08:18 +0200 Subject: [PATCH] Add order preview --- fake-snippets-api/lib/db/schema.ts | 3 +- fake-snippets-api/lib/db/seed.ts | 16 ++- fake-snippets-api/routes/api/orders/create.ts | 2 +- fake-snippets-api/routes/api/orders/update.ts | 2 +- .../tests/fixtures/get-test-server.ts | 16 ++- .../tests/routes/order_files/upload.test.ts | 2 +- src/components/OrderPreviewContent.tsx | 61 +++++++++ src/pages/view-order.tsx | 120 ++++++++++-------- 8 files changed, 150 insertions(+), 72 deletions(-) create mode 100644 src/components/OrderPreviewContent.tsx diff --git a/fake-snippets-api/lib/db/schema.ts b/fake-snippets-api/lib/db/schema.ts index 3c9759e..3f4f85a 100644 --- a/fake-snippets-api/lib/db/schema.ts +++ b/fake-snippets-api/lib/db/schema.ts @@ -1,3 +1,4 @@ +import { AnyCircuitElement } from "circuit-json" import { z } from "zod" export const snippetSchema = z.object({ @@ -65,7 +66,7 @@ export const orderSchema = z.object({ should_be_blank_pcb: z.boolean(), should_include_stencil: z.boolean(), jlcpcb_order_params: z.record(z.any()), - circuit_json: z.record(z.any()), + circuit_json: z.array(z.record(z.any())), created_at: z.string(), updated_at: z.string(), }) diff --git a/fake-snippets-api/lib/db/seed.ts b/fake-snippets-api/lib/db/seed.ts index a23a858..6623c36 100644 --- a/fake-snippets-api/lib/db/seed.ts +++ b/fake-snippets-api/lib/db/seed.ts @@ -109,13 +109,15 @@ export const SquareWaveModule = () => ( should_be_blank_pcb: false, should_include_stencil: false, jlcpcb_order_params: {}, - circuit_json: { - type: "source_component", - ftype: "simple_resistor", - source_component_id: "source_component_1", - name: "R1", - resistane: "1k", - }, + circuit_json: [ + { + type: "source_component", + ftype: "simple_resistor", + source_component_id: "source_component_1", + name: "R1", + resistane: "1k", + }, + ], created_at: new Date().toISOString(), updated_at: new Date().toISOString(), }) diff --git a/fake-snippets-api/routes/api/orders/create.ts b/fake-snippets-api/routes/api/orders/create.ts index d93528a..549d347 100644 --- a/fake-snippets-api/routes/api/orders/create.ts +++ b/fake-snippets-api/routes/api/orders/create.ts @@ -6,7 +6,7 @@ export default withRouteSpec({ methods: ["POST"], auth: "session", jsonBody: z.object({ - circuit_json: z.record(z.any()), + circuit_json: z.array(z.record(z.any())), }), jsonResponse: z.object({ order: orderSchema, diff --git a/fake-snippets-api/routes/api/orders/update.ts b/fake-snippets-api/routes/api/orders/update.ts index aed054b..c36e6c5 100644 --- a/fake-snippets-api/routes/api/orders/update.ts +++ b/fake-snippets-api/routes/api/orders/update.ts @@ -20,7 +20,7 @@ export default withRouteSpec({ should_be_blank_pcb: z.boolean().optional(), should_include_stencil: z.boolean().optional(), jlcpcb_order_params: z.record(z.any()).optional(), - circuit_json: z.record(z.any()).optional(), + circuit_json: z.array(z.record(z.any())).optional(), }), }), jsonResponse: z.object({ diff --git a/fake-snippets-api/tests/fixtures/get-test-server.ts b/fake-snippets-api/tests/fixtures/get-test-server.ts index 1bef199..ecad9fd 100644 --- a/fake-snippets-api/tests/fixtures/get-test-server.ts +++ b/fake-snippets-api/tests/fixtures/get-test-server.ts @@ -73,13 +73,15 @@ const seedDatabase = (db: DbClient) => { should_be_blank_pcb: false, should_include_stencil: false, jlcpcb_order_params: {}, - circuit_json: { - type: "source_component", - ftype: "simple_resistor", - source_component_id: "source_component_1", - name: "R1", - resistance: "1k", - }, + circuit_json: [ + { + type: "source_component", + ftype: "simple_resistor", + source_component_id: "source_component_1", + name: "R1", + resistance: "1k", + }, + ], created_at: new Date().toISOString(), updated_at: new Date().toISOString(), }) diff --git a/fake-snippets-api/tests/routes/order_files/upload.test.ts b/fake-snippets-api/tests/routes/order_files/upload.test.ts index f82a778..130b37c 100644 --- a/fake-snippets-api/tests/routes/order_files/upload.test.ts +++ b/fake-snippets-api/tests/routes/order_files/upload.test.ts @@ -31,7 +31,7 @@ test("upload order file with for_provider", async () => { const { axios, db } = await getTestServer() const orderResponse = await axios.post("/api/orders/create", { - circuit_json: { test: "circuit data" }, + circuit_json: [{ test: "circuit data" }], }) const orderId = orderResponse.data.order.order_id diff --git a/src/components/OrderPreviewContent.tsx b/src/components/OrderPreviewContent.tsx new file mode 100644 index 0000000..bd8c98d --- /dev/null +++ b/src/components/OrderPreviewContent.tsx @@ -0,0 +1,61 @@ +import React from "react" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { PCBViewer } from "@tscircuit/pcb-viewer" +import { CadViewer } from "@tscircuit/3d-viewer" +import { CircuitJsonTableViewer } from "./TableViewer/CircuitJsonTableViewer" +import { AnyCircuitElement } from "circuit-json" + +interface OrderPreviewContentProps { + circuitJson: AnyCircuitElement[] | null + className?: string +} + +export const OrderPreviewContent: React.FC = ({ + circuitJson, + className, +}) => { + return ( +
+ + + PCB + 3D + JSON + + +
+ {circuitJson ? ( + + ) : ( +
+ No PCB data available +
+ )} +
+ + +
+ {circuitJson ? ( + + ) : ( +
+ No 3D data available +
+ )} +
+ + +
+ {circuitJson ? ( + + ) : ( +
+ No JSON data available +
+ )} +
+ + +
+ ) +} diff --git a/src/pages/view-order.tsx b/src/pages/view-order.tsx index 3dc775c..d0687ac 100644 --- a/src/pages/view-order.tsx +++ b/src/pages/view-order.tsx @@ -6,6 +6,8 @@ import Footer from "@/components/Footer" import { Order } from "fake-snippets-api/lib/db/schema" import { Link, useParams } from "wouter" import { Button } from "@/components/ui/button" +import { OrderPreviewContent } from "@/components/OrderPreviewContent" +import { AnyCircuitElement } from "circuit-json" export const ViewOrderPage = () => { const { orderId } = useParams() @@ -41,64 +43,74 @@ export const ViewOrderPage = () => { return (
-
+

Order Details

-
-
-

- Order #{order.order_id} -

-

- Created at: {new Date(order.created_at).toLocaleString()} -

-
-
-
-
-
Status
-
- {order.is_shipped ? "Shipped" : "Processing"} -
-
-
-
Is Draft
-
- {order.is_draft ? "Yes" : "No"} -
-
-
-
- Pending Validation -
-
- {order.is_pending_validation_by_fab ? "Yes" : "No"} -
+
+
+
+
+

+ Order #{order.order_id} +

+

+ Created at: {new Date(order.created_at).toLocaleString()} +

-
-
- Approved by Fab -
-
- {order.is_approved_by_fab_review ? "Yes" : "No"} -
+
+
+
+
Status
+
+ {order.is_shipped ? "Shipped" : "Processing"} +
+
+
+
Is Draft
+
+ {order.is_draft ? "Yes" : "No"} +
+
+
+
+ Pending Validation +
+
+ {order.is_pending_validation_by_fab ? "Yes" : "No"} +
+
+
+
+ Approved by Fab +
+
+ {order.is_approved_by_fab_review ? "Yes" : "No"} +
+
+
+
+ In Production +
+
+ {order.is_in_production ? "Yes" : "No"} +
+
+
-
-
- In Production -
-
- {order.is_in_production ? "Yes" : "No"} -
-
-
+
+
+ + + +
+
+
+
-
-
- - -