create-cundi-app 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cundi-app",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Create a new Cundi app with React + Refine + Ant Design",
   "type": "module",
   "bin": {

package/template/src/App.tsx

@@ -78,6 +78,7 @@ import { DrawioTestList } from "./pages/samples/drawio-test/list";
 import { DrawioTestCreate } from "./pages/samples/drawio-test/create";
 import { DrawioTestEdit } from "./pages/samples/drawio-test/edit";
 import { DrawioTestShow } from "./pages/samples/drawio-test/show";
+import { OrderList, OrderCreate, OrderEdit, OrderShow } from "./pages/samples/order";
 
 // {CHAT_START}
 import { ChatProvider } from "./components/ChatPanel";
@@ -138,6 +139,17 @@ const InnerApp: React.FC = () => {
                                 parent: "Model",
                             },
                         },
+                        {
+                            name: "Order",
+                            list: "/Orders",
+                            create: "/Orders/create",
+                            edit: "/Orders/edit/:id",
+                            show: "/Orders/show/:id",
+                            meta: {
+                                label: t("sider.order"),
+                                parent: "Model",
+                            },
+                        },
                         {
                             name: "TiptapTest",
                             list: "/TiptapTests",
@@ -317,6 +329,13 @@ const InnerApp: React.FC = () => {
                                 <Route path="show/:id" element={<DrawioTestShow />} />
                             </Route>
 
+                            <Route path="/Orders">
+                                <Route index element={<OrderList />} />
+                                <Route path="create" element={<OrderCreate />} />
+                                <Route path="edit/:id" element={<OrderEdit />} />
+                                <Route path="show/:id" element={<OrderShow />} />
+                            </Route>
+
                             {/* Core routes */}
                             <Route path="/ApplicationUsers">
                                 <Route index element={<ApplicationUserList />} />

package/template/src/i18n.ts

@@ -17,6 +17,7 @@ const enExtended = {
         samples: "Samples",
         model: "Model",
         basicTypeTest: "Basic Type",
+        order: "Master-Details",
         tiptapTest: "Tiptap Editor",
         drawioTest: "Drawio Editor",
         fullTextSearch: "Full Text Search",
@@ -53,12 +54,39 @@ const enExtended = {
         doubleValue: "Double Value",
         dateTimeValue: "DateTime Value",
         boolValue: "Bool Value",
+        statusValue: "Status",
+        status: {
+            Draft: "Draft",
+            Active: "Active",
+            Completed: "Completed",
+            Cancelled: "Cancelled",
+        },
         imageValue: "Image Value",
     },
+    order: {
+        orderNumber: "Order Number",
+        orderDate: "Order Date",
+        customerName: "Customer Name",
+        notes: "Notes",
+        totalAmount: "Total Amount",
+        items: "Order Items",
+    },
+    orderItem: {
+        title: "Order Item",
+        productName: "Product Name",
+        quantity: "Quantity",
+        unitPrice: "Unit Price",
+        subtotal: "Subtotal",
+    },
+    validation: {
+        required: "This field is required",
+    },
     types: {
         Article: "Article",
         Product: "Product",
         BasicTypeTest: "Basic Type",
+        Order: "Order",
+        OrderItem: "Order Item",
     },
 };
 
@@ -73,6 +101,7 @@ const zhTWExtended = {
         samples: "範例",
         model: "資料模型",
         basicTypeTest: "基本型別",
+        order: "主從式資料",
         tiptapTest: "Tiptap 編輯器",
         drawioTest: "Drawio 編輯器",
         fullTextSearch: "全文檢索",
@@ -109,12 +138,39 @@ const zhTWExtended = {
         doubleValue: "浮點數",
         dateTimeValue: "日期時間",
         boolValue: "布林值",
+        statusValue: "狀態",
+        status: {
+            Draft: "草稿",
+            Active: "啟用",
+            Completed: "完成",
+            Cancelled: "取消",
+        },
         imageValue: "圖片",
     },
+    order: {
+        orderNumber: "訂單編號",
+        orderDate: "訂單日期",
+        customerName: "客戶名稱",
+        notes: "備註",
+        totalAmount: "總金額",
+        items: "訂單明細",
+    },
+    orderItem: {
+        title: "訂單明細",
+        productName: "產品名稱",
+        quantity: "數量",
+        unitPrice: "單價",
+        subtotal: "小計",
+    },
+    validation: {
+        required: "此欄位為必填",
+    },
     types: {
         Article: "文章",
         Product: "產品",
         BasicTypeTest: "基本型別",
+        Order: "訂單",
+        OrderItem: "訂單明細",
     },
 };
 

package/template/src/pages/samples/basic-type-test/create.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Create, useForm } from "@refinedev/antd";
-import { Form, Input, InputNumber, DatePicker, Switch } from "antd";
+import { Form, Input, InputNumber, DatePicker, Switch, Select } from "antd";
 import { useTranslation } from "react-i18next";
 import { Base64Upload } from "@cundi/refine-xaf";
 import dayjs from "dayjs";
@@ -56,6 +56,19 @@ export const BasicTypeTestCreate: React.FC = () => {
                 >
                     <Switch />
                 </Form.Item>
+                <Form.Item
+                    label={t("basicTypeTest.statusValue")}
+                    name="StatusValue"
+                >
+                    <Select
+                        options={[
+                            { value: "Draft", label: t("basicTypeTest.status.Draft") },
+                            { value: "Active", label: t("basicTypeTest.status.Active") },
+                            { value: "Completed", label: t("basicTypeTest.status.Completed") },
+                            { value: "Cancelled", label: t("basicTypeTest.status.Cancelled") },
+                        ]}
+                    />
+                </Form.Item>
                 <Form.Item
                     label={t("basicTypeTest.imageValue")}
                     name="ImageValue"

package/template/src/pages/samples/basic-type-test/edit.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Edit, useForm } from "@refinedev/antd";
-import { Form, Input, InputNumber, DatePicker, Switch } from "antd";
+import { Form, Input, InputNumber, DatePicker, Switch, Select } from "antd";
 import { useTranslation } from "react-i18next";
 import { Base64Upload } from "@cundi/refine-xaf";
 import dayjs from "dayjs";
@@ -56,6 +56,19 @@ export const BasicTypeTestEdit: React.FC = () => {
                 >
                     <Switch />
                 </Form.Item>
+                <Form.Item
+                    label={t("basicTypeTest.statusValue")}
+                    name="StatusValue"
+                >
+                    <Select
+                        options={[
+                            { value: "Draft", label: t("basicTypeTest.status.Draft") },
+                            { value: "Active", label: t("basicTypeTest.status.Active") },
+                            { value: "Completed", label: t("basicTypeTest.status.Completed") },
+                            { value: "Cancelled", label: t("basicTypeTest.status.Cancelled") },
+                        ]}
+                    />
+                </Form.Item>
                 <Form.Item
                     label={t("basicTypeTest.imageValue")}
                     name="ImageValue"

package/template/src/pages/samples/basic-type-test/list.tsx

@@ -46,6 +46,22 @@ export const BasicTypeTestList: React.FC = () => {
                 // @ts-ignore
                 defaultVisible
             />
+            <Table.Column
+                dataIndex="StatusValue"
+                title={t("basicTypeTest.statusValue")}
+                sorter
+                render={(value: string) => (
+                    <Tag color={
+                        value === "Active" ? "green" :
+                            value === "Completed" ? "blue" :
+                                value === "Cancelled" ? "red" : "default"
+                    }>
+                        {t(`basicTypeTest.status.${value}`, value)}
+                    </Tag>
+                )}
+                // @ts-ignore
+                defaultVisible
+            />
             <Table.Column
                 dataIndex="ImageValue"
                 title={t("basicTypeTest.imageValue")}

package/template/src/pages/samples/order/create.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Create, useForm } from "@refinedev/antd";
+import { Form, Input, DatePicker } from "antd";
+import { useTranslation } from "react-i18next";
+import dayjs from "dayjs";
+
+export const OrderCreate: React.FC = () => {
+    const { t } = useTranslation();
+    const { formProps, saveButtonProps } = useForm({
+        redirect: "edit",
+    });
+
+    return (
+        <Create saveButtonProps={saveButtonProps}>
+            <Form {...formProps} layout="vertical">
+                <Form.Item
+                    label={t("order.orderNumber")}
+                    name="OrderNumber"
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.orderDate")}
+                    name="OrderDate"
+                    getValueProps={(value) => ({
+                        value: value ? dayjs(value) : dayjs(),
+                    })}
+                    getValueFromEvent={(date) => date?.toISOString()}
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <DatePicker style={{ width: "100%" }} />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.customerName")}
+                    name="CustomerName"
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.notes")}
+                    name="Notes"
+                >
+                    <Input.TextArea rows={3} />
+                </Form.Item>
+            </Form>
+        </Create>
+    );
+};

package/template/src/pages/samples/order/edit.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { Edit, useForm } from "@refinedev/antd";
+import { Form, Input, DatePicker, InputNumber, Card } from "antd";
+import { useTranslation } from "react-i18next";
+import { RelatedList } from "@cundi/refine-xaf";
+import { useTable } from "@refinedev/antd";
+import { Table } from "antd";
+import dayjs from "dayjs";
+
+// OrderItem Form Fields Component
+const OrderItemFormFields: React.FC<{ mode: "create" | "edit" }> = () => {
+    const { t } = useTranslation();
+
+    return (
+        <>
+            <Form.Item
+                label={t("orderItem.productName")}
+                name="ProductName"
+                rules={[{ required: true, message: t("validation.required") }]}
+            >
+                <Input />
+            </Form.Item>
+            <Form.Item
+                label={t("orderItem.quantity")}
+                name="Quantity"
+                rules={[{ required: true, message: t("validation.required") }]}
+            >
+                <InputNumber min={1} style={{ width: "100%" }} />
+            </Form.Item>
+            <Form.Item
+                label={t("orderItem.unitPrice")}
+                name="UnitPrice"
+                rules={[{ required: true, message: t("validation.required") }]}
+            >
+                <InputNumber min={0} precision={2} style={{ width: "100%" }} prefix="$" />
+            </Form.Item>
+        </>
+    );
+};
+
+export const OrderEdit: React.FC = () => {
+    const { t } = useTranslation();
+    const { formProps, saveButtonProps, query } = useForm({
+        meta: {
+            expand: ["Items"],
+        },
+    });
+
+    const orderId = query?.data?.data?.Oid as string | undefined;
+
+    // Fetch order items for the RelatedList
+    const { tableProps } = useTable({
+        resource: "OrderItem",
+        filters: {
+            permanent: [
+                { field: "Order/Oid", operator: "eq", value: orderId || "" }
+            ]
+        },
+        syncWithLocation: false,
+        queryOptions: {
+            enabled: !!orderId,
+        },
+        pagination: {
+            mode: "off"
+        }
+    });
+
+    // Convert readonly array to mutable array for RelatedList
+    const dataSource = tableProps.dataSource ? [...tableProps.dataSource] : [];
+
+    return (
+        <Edit saveButtonProps={saveButtonProps}>
+            <Form {...formProps} layout="vertical">
+                <Form.Item
+                    label={t("order.orderNumber")}
+                    name="OrderNumber"
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.orderDate")}
+                    name="OrderDate"
+                    getValueProps={(value) => ({
+                        value: value ? dayjs(value) : null,
+                    })}
+                    getValueFromEvent={(date) => date?.toISOString()}
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <DatePicker style={{ width: "100%" }} />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.customerName")}
+                    name="CustomerName"
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.notes")}
+                    name="Notes"
+                >
+                    <Input.TextArea rows={3} />
+                </Form.Item>
+            </Form>
+
+            {/* Order Items (Details) */}
+            <Card title={t("order.items")} style={{ marginTop: 16 }}>
+                <RelatedList
+                    resource="OrderItem"
+                    masterField="Order"
+                    masterId={orderId}
+                    dataSource={dataSource}
+                    FormFields={OrderItemFormFields}
+                    modalTitle={t("orderItem.title")}
+                >
+                    <Table.Column
+                        dataIndex="ProductName"
+                        title={t("orderItem.productName")}
+                    />
+                    <Table.Column
+                        dataIndex="Quantity"
+                        title={t("orderItem.quantity")}
+                    />
+                    <Table.Column
+                        dataIndex="UnitPrice"
+                        title={t("orderItem.unitPrice")}
+                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
+                    />
+                    <Table.Column
+                        dataIndex="Subtotal"
+                        title={t("orderItem.subtotal")}
+                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
+                    />
+                </RelatedList>
+            </Card>
+        </Edit>
+    );
+};

package/template/src/pages/samples/order/index.ts

@@ -0,0 +1,4 @@
+export { OrderList } from "./list";
+export { OrderCreate } from "./create";
+export { OrderEdit } from "./edit";
+export { OrderShow } from "./show";

package/template/src/pages/samples/order/list.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { BaseRecord } from "@refinedev/core";
+import { EditButton, ShowButton, DeleteButton } from "@refinedev/antd";
+import { Table, Space, Tag } from "antd";
+import { SmartList } from "@cundi/refine-xaf";
+import { useTranslation } from "react-i18next";
+
+export const OrderList: React.FC = () => {
+    const { t } = useTranslation();
+
+    return (
+        <SmartList
+            resource="Order"
+            searchFields={["OrderNumber", "CustomerName"]}
+        >
+            <Table.Column
+                dataIndex="OrderNumber"
+                title={t("order.orderNumber")}
+                sorter
+                // @ts-ignore
+                defaultVisible
+            />
+            <Table.Column
+                dataIndex="OrderDate"
+                title={t("order.orderDate")}
+                sorter
+                render={(value: string) => value ? new Date(value).toLocaleDateString() : "-"}
+                // @ts-ignore
+                defaultVisible
+            />
+            <Table.Column
+                dataIndex="CustomerName"
+                title={t("order.customerName")}
+                sorter
+                // @ts-ignore
+                defaultVisible
+            />
+            <Table.Column
+                dataIndex="TotalAmount"
+                title={t("order.totalAmount")}
+                sorter
+                render={(value: number) => value ? `$${value.toFixed(2)}` : "$0.00"}
+                // @ts-ignore
+                defaultVisible
+            />
+            <Table.Column
+                title={t("buttons.list")}
+                dataIndex="actions"
+                render={(_, record: BaseRecord) => (
+                    <Space>
+                        <EditButton hideText size="small" recordItemId={record.Oid} />
+                        <ShowButton hideText size="small" recordItemId={record.Oid} />
+                        <DeleteButton hideText size="small" recordItemId={record.Oid} />
+                    </Space>
+                )}
+            />
+        </SmartList>
+    );
+};

package/template/src/pages/samples/order/show.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Show } from "@refinedev/antd";
+import { useShow } from "@refinedev/core";
+import { Typography, Table, Card, Descriptions } from "antd";
+import { useTranslation } from "react-i18next";
+
+const { Title } = Typography;
+
+export const OrderShow: React.FC = () => {
+    const { t } = useTranslation();
+    const { query } = useShow({
+        meta: {
+            expand: ["Items"],
+        },
+    });
+    const { data, isLoading } = query;
+    const record = data?.data;
+
+    return (
+        <Show isLoading={isLoading}>
+            <Descriptions bordered column={1}>
+                <Descriptions.Item label={t("order.orderNumber")}>
+                    {record?.OrderNumber}
+                </Descriptions.Item>
+                <Descriptions.Item label={t("order.orderDate")}>
+                    {record?.OrderDate ? new Date(record.OrderDate).toLocaleDateString() : "-"}
+                </Descriptions.Item>
+                <Descriptions.Item label={t("order.customerName")}>
+                    {record?.CustomerName}
+                </Descriptions.Item>
+                <Descriptions.Item label={t("order.totalAmount")}>
+                    ${record?.TotalAmount?.toFixed(2) || "0.00"}
+                </Descriptions.Item>
+                <Descriptions.Item label={t("order.notes")}>
+                    {record?.Notes || "-"}
+                </Descriptions.Item>
+            </Descriptions>
+
+            <Card title={t("order.items")} style={{ marginTop: 16 }}>
+                <Table
+                    dataSource={record?.Items || []}
+                    rowKey="Oid"
+                    pagination={false}
+                    bordered
+                    size="small"
+                >
+                    <Table.Column
+                        dataIndex="ProductName"
+                        title={t("orderItem.productName")}
+                    />
+                    <Table.Column
+                        dataIndex="Quantity"
+                        title={t("orderItem.quantity")}
+                    />
+                    <Table.Column
+                        dataIndex="UnitPrice"
+                        title={t("orderItem.unitPrice")}
+                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
+                    />
+                    <Table.Column
+                        dataIndex="Subtotal"
+                        title={t("orderItem.subtotal")}
+                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
+                    />
+                </Table>
+            </Card>
+        </Show>
+    );
+};