From bd95bbf74a7e4a4db5158069af7918df3674b8d9 Mon Sep 17 00:00:00 2001 From: "jason.lam" Date: Fri, 2 May 2025 11:52:30 +0800 Subject: [PATCH] [new page] create temp rough schedule page --- src/app/(main)/settings/rss/page.tsx | 48 +++++ src/components/Breadcrumb/Breadcrumb.tsx | 2 +- .../NavigationContent/NavigationContent.tsx | 5 + .../RoughScheduleSetting.tsx | 191 ++++++++++++++++++ .../RoughScheduleSettingWrapper.tsx | 51 +++++ src/components/RoughScheduleSetting/index.ts | 1 + 6 files changed, 297 insertions(+), 1 deletion(-) create mode 100644 src/app/(main)/settings/rss/page.tsx create mode 100644 src/components/RoughScheduleSetting/RoughScheduleSetting.tsx create mode 100644 src/components/RoughScheduleSetting/RoughScheduleSettingWrapper.tsx create mode 100644 src/components/RoughScheduleSetting/index.ts diff --git a/src/app/(main)/settings/rss/page.tsx b/src/app/(main)/settings/rss/page.tsx new file mode 100644 index 0000000..2bf97dd --- /dev/null +++ b/src/app/(main)/settings/rss/page.tsx @@ -0,0 +1,48 @@ +import { TypeEnum } from "@/app/utils/typeEnum"; +import ItemsSearch from "@/components/ItemsSearch"; +import { getServerI18n } from "@/i18n"; +import Add from "@mui/icons-material/Add"; +import Button from "@mui/material/Button"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import { Metadata } from "next"; +import Link from "next/link"; +import { Suspense } from "react"; + +export const metadata: Metadata = { + title: "Rough Schedule Setting", +}; + +const roughScheduleSetting: React.FC = async () => { + const project = TypeEnum.PRODUCT + const { t } = await getServerI18n(project); + // preloadClaims(); + + return ( + <> + + + {t("Rough Schedule Setting")} + + {/* */} + + }> + + + + ); +}; + +export default roughScheduleSetting; diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index fa93e47..1c8bf07 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -13,7 +13,7 @@ const pathToLabelMap: { [path: string]: string } = { "/tasks": "Task Template", "/tasks/create": "Create Task Template", "/settings/qcItem": "Qc Item", - + "/settings/rss": "Rough Schedule Setting", }; const Breadcrumb = () => { diff --git a/src/components/NavigationContent/NavigationContent.tsx b/src/components/NavigationContent/NavigationContent.tsx index 62b0159..4b80162 100644 --- a/src/components/NavigationContent/NavigationContent.tsx +++ b/src/components/NavigationContent/NavigationContent.tsx @@ -196,6 +196,11 @@ const NavigationContent: React.FC = () => { label: "Items", path: "/settings/items", }, + { + icon: , + label: "Rough Schedule Setting", + path: "/settings/rss", + }, { icon: , label: "Equipment Type", diff --git a/src/components/RoughScheduleSetting/RoughScheduleSetting.tsx b/src/components/RoughScheduleSetting/RoughScheduleSetting.tsx new file mode 100644 index 0000000..2416dca --- /dev/null +++ b/src/components/RoughScheduleSetting/RoughScheduleSetting.tsx @@ -0,0 +1,191 @@ +"use client"; + +import { useCallback, useEffect, useMemo, useState } from "react"; +import { useRouter, useSearchParams } from "next/navigation"; + +import { + FormProvider, + SubmitErrorHandler, + SubmitHandler, + useForm, +} from "react-hook-form"; +import { deleteDialog } from "../Swal/CustomAlerts"; +import { Box, Button, Grid, Stack, Tab, Tabs, TabsProps, Typography } from "@mui/material"; +import { Check, Close, EditNote } from "@mui/icons-material"; +import { useGridApiRef } from "@mui/x-data-grid"; +import {CreateItemInputs, saveItem} from "@/app/api/settings/item/actions"; +import {saveItemQcChecks} from "@/app/api/settings/qcCheck/actions"; +import {useTranslation} from "react-i18next/index"; +import {ItemQc} from "@/app/api/settings/item"; + +type Props = { + isEditMode: boolean; + // type: TypeEnum; + defaultValues: Partial | undefined; + qcChecks: ItemQc[] +}; + +const CreateItem: React.FC = ({ + isEditMode, + // type, + defaultValues, + qcChecks + }) => { + // console.log(type) + const apiRef = useGridApiRef(); + const params = useSearchParams() + console.log(params.get("id")) + const [serverError, setServerError] = useState(""); + const [tabIndex, setTabIndex] = useState(0); + const { t } = useTranslation(); + const router = useRouter(); + const title = "Product / Material" + const [mode, redirPath] = useMemo(() => { + // var typeId = TypeEnum.CONSUMABLE_ID + var title = ""; + var mode = ""; + var redirPath = ""; + // if (type === TypeEnum.MATERIAL) { + // typeId = TypeEnum.MATERIAL_ID + // title = "Material"; + // redirPath = "/settings/material"; + // } + // if (type === TypeEnum.PRODUCT) { + // typeId = TypeEnum.PRODUCT_ID + title = "Rough Schedule"; + redirPath = "/settings/rss"; + // } + // if (type === TypeEnum.BYPRODUCT) { + // typeId = TypeEnum.BYPRODUCT_ID + // title = "By-Product"; + // redirPath = "/settings/byProduct"; + // } + if (isEditMode) { + mode = "Edit"; + } else { + mode = "Create"; + } + return [mode, redirPath]; + }, [isEditMode]); + // console.log(typeId) + const formProps = useForm({ + defaultValues: defaultValues ? defaultValues : { + }, + }); + const errors = formProps.formState.errors; + + const handleCancel = () => { + router.replace(`/settings/product`); + }; + const onSubmit = useCallback>( + async (data, event) => { + let hasErrors = false; + console.log(errors) + // console.log(apiRef.current.getCellValue(2, "lowerLimit")) + // apiRef.current. + try { + if (hasErrors) { + setServerError(t("An error has occurred. Please try again later.") as String); + return false; + } + console.log("data posted"); + console.log(data); + const qcCheck = data.qcChecks.length > 0 ? data.qcChecks.filter((q) => data.qcChecks_active.includes(q.id!!)).map((qc) => { + return { + qcItemId: qc.id, + instruction: qc.instruction, + lowerLimit: qc.lowerLimit, + upperLimit: qc.upperLimit, + itemId: parseInt(params.get("id")!.toString()) + } + }) : [] + + const test = data.qcChecks.filter((q) => data.qcChecks_active.includes(q.id!!)) + // TODO: + // 1. check field ( directly modify col def / check here ) + // 2. set error change tab index + console.log(test) + console.log(qcCheck) + // return + // do api + console.log("asdad") + var responseI = await saveItem(data); + console.log("asdad") + var responseQ = await saveItemQcChecks(qcCheck) + if (responseI && responseQ) { + if (!Boolean(responseI.id)) { + formProps.setError(responseI.errorPosition!! as keyof CreateItemInputs, { + message: responseI.message!!, + type: "required", + }); + } else if (!Boolean(responseQ.id)) { + + } else if (Boolean(responseI.id) && Boolean(responseQ.id)) { + router.replace(redirPath); + } + } + } catch (e) { + // backend error + setServerError(t("An error has occurred. Please try again later.")); + console.log(e); + } + }, + [apiRef, router, t] + ); + + // multiple tabs + const onSubmitError = useCallback>( + (errors) => {}, + [] + ); + + return ( + <> + + + + + {t(`${mode} ${title}`)} + + + + + + + {serverError && ( + + {serverError} + + )} + {tabIndex === 0 && } + {tabIndex === 1 && } + {/* {type === TypeEnum.MATERIAL && } */} + {/* {type === TypeEnum.BYPRODUCT && } */} + + + + + + + + ); +}; +export default CreateItem; diff --git a/src/components/RoughScheduleSetting/RoughScheduleSettingWrapper.tsx b/src/components/RoughScheduleSetting/RoughScheduleSettingWrapper.tsx new file mode 100644 index 0000000..93a7bd6 --- /dev/null +++ b/src/components/RoughScheduleSetting/RoughScheduleSettingWrapper.tsx @@ -0,0 +1,51 @@ +import {CreateItemInputs} from "@/app/api/settings/item/actions"; +import CreateItemLoading from "../CreateItem/CreateItemLoading"; +import {fetchItem} from "@/app/api/settings/item"; +import CreateItem from "@/components/RoughScheduleSetting/RoughScheduleSetting"; + +interface SubComponents { + Loading: typeof CreateItemLoading; +} + +type Props = { + id?: number + // type: TypeEnum; +}; + +const RoughScheduleSettingWrapper: ({id}: { id: any }) => Promise = async ({ id }) => { + var result + var defaultValues: Partial | undefined + // console.log(type) + var qcChecks + if (id) { + result = await fetchItem(id); + const item = result.item + qcChecks = result.qcChecks + const activeRows = qcChecks.filter(it => it.isActive).map(i => i.id) + console.log(qcChecks) + defaultValues = { + type: item?.type, + id: item?.id, + code: item?.code, + name: item?.name, + description: item?.description, + remarks: item?.remarks, + shelfLife: item?.shelfLife, + countryOfOrigin: item?.countryOfOrigin, + maxQty: item?.maxQty, + qcChecks: qcChecks, + qcChecks_active: activeRows + }; + } + + return ( + + ); +}; +RoughScheduleSettingWrapper.Loading = CreateItemLoading; + +export default RoughScheduleSettingWrapper; diff --git a/src/components/RoughScheduleSetting/index.ts b/src/components/RoughScheduleSetting/index.ts new file mode 100644 index 0000000..f343771 --- /dev/null +++ b/src/components/RoughScheduleSetting/index.ts @@ -0,0 +1 @@ +export { default } from "./RoughScheduleSettingWrapper"; \ No newline at end of file