diff --git a/src/app/(main)/settings/importTesting/page.tsx b/src/app/(main)/settings/m18ImportTesting/page.tsx similarity index 60% rename from src/app/(main)/settings/importTesting/page.tsx rename to src/app/(main)/settings/m18ImportTesting/page.tsx index ca07e8b..dc426cb 100644 --- a/src/app/(main)/settings/importTesting/page.tsx +++ b/src/app/(main)/settings/m18ImportTesting/page.tsx @@ -1,4 +1,4 @@ -import ImportTesting from "@/components/ImportTesting"; +import M18ImportTesting from "@/components/M18ImportTesting"; import { getServerI18n } from "@/i18n"; import { Stack } from "@mui/material"; import { Metadata } from "next"; @@ -8,8 +8,8 @@ export const metadata: Metadata = { title: "Import Testing" } -const ImportTestingPage: React.FC = async () => { - const { t } = await getServerI18n("importTesting"); +const M18ImportTestingPage: React.FC = async () => { + const { t } = await getServerI18n("m18ImportTesting"); return ( <> @@ -20,11 +20,11 @@ const ImportTestingPage: React.FC = async () => { rowGap={2} > - }> - + }> + ) } -export default ImportTestingPage; \ No newline at end of file +export default M18ImportTestingPage; \ No newline at end of file diff --git a/src/app/api/settings/importTesting/actions.ts b/src/app/api/settings/importTesting/actions.ts deleted file mode 100644 index 20db792..0000000 --- a/src/app/api/settings/importTesting/actions.ts +++ /dev/null @@ -1,21 +0,0 @@ -"use server"; - -import { serverFetchWithNoContent } from '@/app/utils/fetchUtil'; -import { BASE_API_URL } from "@/config/api"; - -export interface ImportPoForm { - dateFrom: string, - dateTo: string, -} - -export interface ImportTestingForm { - po: ImportPoForm -} - -export const testImportPo = async (data: ImportPoForm) => { - return serverFetchWithNoContent(`${BASE_API_URL}/m18/po`, { - method: "POST", - body: JSON.stringify(data), - headers: { "Content-Type": "application/json" }, - }) -} \ No newline at end of file diff --git a/src/app/api/settings/m18ImportTesting/actions.ts b/src/app/api/settings/m18ImportTesting/actions.ts new file mode 100644 index 0000000..7d36be8 --- /dev/null +++ b/src/app/api/settings/m18ImportTesting/actions.ts @@ -0,0 +1,49 @@ +"use server"; + +import { serverFetchWithNoContent } from '@/app/utils/fetchUtil'; +import { BASE_API_URL } from "@/config/api"; + +export interface M18ImportPoForm { + modifiedDateFrom: string, + modifiedDateTo: string, +} + +export interface M18ImportPqForm { + modifiedDateFrom: string, + modifiedDateTo: string, +} + +export interface M18ImportMasterDataForm { + modifiedDateFrom: string, + modifiedDateTo: string, +} + +export interface M18ImportTestingForm { + po: M18ImportPoForm, + pq: M18ImportPqForm, + masterData: M18ImportMasterDataForm, +} + +export const testM18ImportPo = async (data: M18ImportPoForm) => { + return serverFetchWithNoContent(`${BASE_API_URL}/m18/po`, { + method: "POST", + body: JSON.stringify(data), + headers: { "Content-Type": "application/json" }, + }) +} + +export const testM18ImportPq = async (data: M18ImportPqForm) => { + return serverFetchWithNoContent(`${BASE_API_URL}/m18/pq`, { + method: "POST", + body: JSON.stringify(data), + headers: { "Content-Type": "application/json" }, + }) +} + +export const testM18ImportMasterData = async (data: M18ImportMasterDataForm) => { + return serverFetchWithNoContent(`${BASE_API_URL}/m18/master-data`, { + method: "POST", + body: JSON.stringify(data), + headers: { "Content-Type": "application/json" }, + }) +} \ No newline at end of file diff --git a/src/app/api/settings/importTesting/index.ts b/src/app/api/settings/m18ImportTesting/index.ts similarity index 100% rename from src/app/api/settings/importTesting/index.ts rename to src/app/api/settings/m18ImportTesting/index.ts diff --git a/src/components/ImportTesting/ImportTesting.tsx b/src/components/ImportTesting/ImportTesting.tsx deleted file mode 100644 index f9b7ad1..0000000 --- a/src/components/ImportTesting/ImportTesting.tsx +++ /dev/null @@ -1,67 +0,0 @@ -"use client" - -import { ImportTestingForm, testImportPo } from "@/app/api/settings/importTesting/actions"; -import { Card, CardContent, Grid, Stack, Typography } from "@mui/material"; -import React, { BaseSyntheticEvent, FormEvent, useCallback, useState } from "react"; -import { FormProvider, SubmitErrorHandler, useForm } from "react-hook-form"; -import { useTranslation } from "react-i18next"; -import ImportPo from "./ImportPo"; -import { ImportPoForm } from "@/app/api/settings/importTesting/actions"; - -interface Props { - -} - -const ImportTesting: React.FC = ({ - -}) => { - - const { t } = useTranslation() - const [isLoading, setIsLoading] = useState(false) - const formProps = useForm() - - const onSubmit = useCallback(async (data: ImportTestingForm, event?: BaseSyntheticEvent) => { - const buttonId = (event?.nativeEvent as SubmitEvent).submitter?.id - console.log(data.po) - switch (buttonId) { - case "importPo": - setIsLoading(() => true) - const response = await testImportPo(data.po) - console.log(response) - if (response) { - setIsLoading(() => false) - } - break; - default: - break; - } - }, []) - - const onSubmitError = useCallback>( - (errors) => { - console.log(errors) - }, - [], - ); - - return ( - - - {t("Status: ")}{isLoading ? t("Importing...") : t("Ready to import")} - - - - - - - - - - ) -} - -export default ImportTesting; \ No newline at end of file diff --git a/src/components/ImportTesting/ImportTestingWrapper.tsx b/src/components/ImportTesting/ImportTestingWrapper.tsx deleted file mode 100644 index 843f4f1..0000000 --- a/src/components/ImportTesting/ImportTestingWrapper.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; -import GeneralLoading from "../General/GeneralLoading" -import ImportTesting from "./ImportTesting"; - -interface SubComponents { - Loading: typeof GeneralLoading; -} - -const ImportTestingWrapper: React.FC & SubComponents = async () => { - - return -} - - -ImportTestingWrapper.Loading = GeneralLoading; - -export default ImportTestingWrapper \ No newline at end of file diff --git a/src/components/ImportTesting/index.ts b/src/components/ImportTesting/index.ts deleted file mode 100644 index de60105..0000000 --- a/src/components/ImportTesting/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ImportTestingWrapper' \ No newline at end of file diff --git a/src/components/M18ImportTesting/M18ImportMasterData.tsx b/src/components/M18ImportTesting/M18ImportMasterData.tsx new file mode 100644 index 0000000..55c181f --- /dev/null +++ b/src/components/M18ImportTesting/M18ImportMasterData.tsx @@ -0,0 +1,126 @@ +"use client" +import { M18ImportTestingForm, M18ImportMasterDataForm } from "@/app/api/settings/m18ImportTesting/actions"; +import { INPUT_DATE_FORMAT, OUTPUT_DATE_FORMAT, OUTPUT_TIME_FORMAT, dateTimeStringToDayjs } from "@/app/utils/formatUtil"; +import { Check } from "@mui/icons-material"; +import { Box, Button, Card, CardContent, FormControl, Grid, Stack, Typography } from "@mui/material"; +import { DatePicker, DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +import dayjs, { Dayjs } from "dayjs"; +import React, { useCallback, useState } from "react"; +import { Controller, useFormContext } from "react-hook-form"; +import { useTranslation } from "react-i18next"; + +interface Props { +} + +const M18ImportMasterData: React.FC = ({ +}) => { + + const { t } = useTranslation() + const [isLoading, setIsLoading] = useState(false) + const { + control, + formState: { errors }, + watch + } = useFormContext() + + const handleDateTimePickerOnChange = useCallback((value: Dayjs | null, onChange: (value: any) => void) => { + const formattedValue = value ? value.format(`${INPUT_DATE_FORMAT} ${OUTPUT_TIME_FORMAT}`) : null + onChange(formattedValue) + }, []) + + + + return ( + + + + + {t("Import Master Data")} + + + + + + // value && dateTimeStringToDayjs(value).isValid() ? true : "Invalid date-time" + // }, + // }} + render={({ field, fieldState: { error } }) => ( + (handleDateTimePickerOnChange(newValue, field.onChange))} + slotProps={{ + textField: { + error: !!error, + helperText: error ? error.message : null + } + }} + /> + )} + /> + + {"-"} + + + // value && dateTimeStringToDayjs(value).isValid() ? true : "Invalid date-time", + // isFuture: (value) => + // dateTimeStringToDayjs(value).isAfter(watch("po.dateFrom")) || "Date must be in the future", + // }, + // }} + render={({ field, fieldState: { error } }) => ( + (handleDateTimePickerOnChange(newValue, field.onChange))} + slotProps={{ + textField: { + error: !!error, + helperText: error ? error.message : null + } + }} + /> + )} + /> + + + + + + + + + + ) +} + +export default M18ImportMasterData; \ No newline at end of file diff --git a/src/components/ImportTesting/ImportPo.tsx b/src/components/M18ImportTesting/M18ImportPo.tsx similarity index 72% rename from src/components/ImportTesting/ImportPo.tsx rename to src/components/M18ImportTesting/M18ImportPo.tsx index 052676f..77303a6 100644 --- a/src/components/ImportTesting/ImportPo.tsx +++ b/src/components/M18ImportTesting/M18ImportPo.tsx @@ -1,6 +1,5 @@ "use client" -import { ImportTestingForm } from "@/app/api/settings/importTesting/actions"; -import { ImportPoForm } from "@/app/api/settings/importTesting/actions"; +import { M18ImportTestingForm, M18ImportPoForm } from "@/app/api/settings/m18ImportTesting/actions"; import { INPUT_DATE_FORMAT, OUTPUT_DATE_FORMAT, OUTPUT_TIME_FORMAT, dateTimeStringToDayjs } from "@/app/utils/formatUtil"; import { Check } from "@mui/icons-material"; import { Box, Button, Card, CardContent, FormControl, Grid, Stack, Typography } from "@mui/material"; @@ -14,7 +13,7 @@ import { useTranslation } from "react-i18next"; interface Props { } -const ImportPo: React.FC = ({ +const M18ImportPo: React.FC = ({ }) => { const { t } = useTranslation() @@ -23,7 +22,7 @@ const ImportPo: React.FC = ({ control, formState: { errors }, watch - } = useFormContext() + } = useFormContext() const handleDateTimePickerOnChange = useCallback((value: Dayjs | null, onChange: (value: any) => void) => { const formattedValue = value ? value.format(`${INPUT_DATE_FORMAT} ${OUTPUT_TIME_FORMAT}`) : null @@ -37,7 +36,7 @@ const ImportPo: React.FC = ({ - {t("Import PO")} + {t("Import Purchase Order")} = ({ - value && dateTimeStringToDayjs(value).isValid() ? true : "Invalid date-time" - }, - }} + name="po.modifiedDateFrom" + // rules={{ + // required: "Please input the date From!", + // validate: { + // isValid: (value) => + // value && dateTimeStringToDayjs(value).isValid() ? true : "Invalid date-time" + // }, + // }} render={({ field, fieldState: { error } }) => ( (handleDateTimePickerOnChange(newValue, field.onChange))} slotProps={{ @@ -80,19 +79,19 @@ const ImportPo: React.FC = ({ - value && dateTimeStringToDayjs(value).isValid() ? true : "Invalid date-time", - isFuture: (value) => - dateTimeStringToDayjs(value).isAfter(watch("po.dateFrom")) || "Date must be in the future", - }, - }} + name="po.modifiedDateTo" + // rules={{ + // required: "Please input the date to!", + // validate: { + // isValid: (value) => + // value && dateTimeStringToDayjs(value).isValid() ? true : "Invalid date-time", + // isFuture: (value) => + // dateTimeStringToDayjs(value).isAfter(watch("po.dateFrom")) || "Date must be in the future", + // }, + // }} render={({ field, fieldState: { error } }) => ( (handleDateTimePickerOnChange(newValue, field.onChange))} slotProps={{ @@ -110,8 +109,8 @@ const ImportPo: React.FC = ({ + + + + ) +} + +export default M18ImportPq; \ No newline at end of file diff --git a/src/components/M18ImportTesting/M18ImportTesting.tsx b/src/components/M18ImportTesting/M18ImportTesting.tsx new file mode 100644 index 0000000..7804f25 --- /dev/null +++ b/src/components/M18ImportTesting/M18ImportTesting.tsx @@ -0,0 +1,143 @@ +"use client" + +import { M18ImportTestingForm, testM18ImportPo, M18ImportPoForm, testM18ImportPq, testM18ImportMasterData } from "@/app/api/settings/m18ImportTesting/actions"; +import { Card, CardContent, Grid, Stack, Typography } from "@mui/material"; +import React, { BaseSyntheticEvent, FormEvent, useCallback, useState } from "react"; +import { FormProvider, SubmitErrorHandler, useForm } from "react-hook-form"; +import { useTranslation } from "react-i18next"; +import M18ImportPo from "./M18ImportPo"; +import M18ImportPq from "./M18ImportPq"; +import { dateTimeStringToDayjs } from "@/app/utils/formatUtil"; +import M18ImportMasterData from "./M18ImportMasterData"; + +interface Props { + +} + +const M18ImportTesting: React.FC = ({ + +}) => { + + const { t } = useTranslation() + const [isLoading, setIsLoading] = useState(false) + const formProps = useForm() + + const onSubmit = useCallback(async (data: M18ImportTestingForm, event?: BaseSyntheticEvent) => { + console.log(isLoading) + + if (isLoading) { + return; + } + + const buttonId = (event?.nativeEvent as SubmitEvent).submitter?.id + console.log(data) + console.log(buttonId) + + switch (buttonId) { + case "m18ImportMasterData": + const mdDateFrom = data.masterData.modifiedDateFrom + const mdDateTo = data.masterData.modifiedDateTo + if (!(!!mdDateFrom && dateTimeStringToDayjs(mdDateFrom).isValid())) { + formProps.setError("masterData.modifiedDateFrom", { message: "Invalid DateTime Format" }) + } + + if (!(!!mdDateTo && dateTimeStringToDayjs(mdDateTo).isValid())) { + formProps.setError("masterData.modifiedDateTo", { message: "Invalid DateTime Format" }) + } + + if (formProps.formState.errors.masterData) { + return; + } + + setIsLoading(() => true) + const mdResponse = await testM18ImportMasterData(data.masterData) + console.log(mdResponse) + if (mdResponse) { + setIsLoading(() => false) + } + break; + case "m18ImportPo": + const poDateFrom = data.po.modifiedDateFrom + const poDateTo = data.po.modifiedDateTo + if (!(poDateFrom && dateTimeStringToDayjs(poDateFrom).isValid())) { + formProps.setError("po.modifiedDateFrom", { message: "Invalid DateTime Format" }) + } + + if (!(poDateTo && dateTimeStringToDayjs(poDateTo).isValid())) { + formProps.setError("po.modifiedDateTo", { message: "Invalid DateTime Format" }) + } + + if (formProps.formState.errors.po) { + return; + } + + setIsLoading(() => true) + const poResponse = await testM18ImportMasterData(data.po) + console.log(poResponse) + if (poResponse) { + setIsLoading(() => false) + } + break; + case "m18ImportPq": + const pqDateFrom = data.pq.modifiedDateFrom + const pqDateTo = data.pq.modifiedDateTo + if (!(!!pqDateFrom && dateTimeStringToDayjs(pqDateFrom).isValid())) { + formProps.setError("pq.modifiedDateFrom", { message: "Invalid DateTime Format" }) + } + + if (!(!!pqDateTo && dateTimeStringToDayjs(pqDateTo).isValid())) { + formProps.setError("pq.modifiedDateTo", { message: "Invalid DateTime Format" }) + } + + if (formProps.formState.errors.pq) { + return; + } + + setIsLoading(() => true) + const pqResponse = await testM18ImportPq(data.pq) + console.log(pqResponse) + if (pqResponse) { + setIsLoading(() => false) + } + break; + default: + break; + } + }, []) + + // const onSubmitError = useCallback>( + // (errors) => { + // console.log(errors) + // }, + // [], + // ); + + return ( + + + {t("Status: ")}{isLoading ? t("Importing...") : t("Ready to import")} + + + + + + + + + + + + + + + + + + ) +} + +export default M18ImportTesting; \ No newline at end of file diff --git a/src/components/M18ImportTesting/M18ImportTestingWrapper.tsx b/src/components/M18ImportTesting/M18ImportTestingWrapper.tsx new file mode 100644 index 0000000..6f0ee60 --- /dev/null +++ b/src/components/M18ImportTesting/M18ImportTestingWrapper.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import GeneralLoading from "../General/GeneralLoading" +import M18ImportTesting from "./M18ImportTesting"; + +interface SubComponents { + Loading: typeof GeneralLoading; +} + +const M18ImportTestingWrapper: React.FC & SubComponents = async () => { + + return +} + + +M18ImportTestingWrapper.Loading = GeneralLoading; + +export default M18ImportTestingWrapper \ No newline at end of file diff --git a/src/components/M18ImportTesting/index.ts b/src/components/M18ImportTesting/index.ts new file mode 100644 index 0000000..f3489f0 --- /dev/null +++ b/src/components/M18ImportTesting/index.ts @@ -0,0 +1 @@ +export { default } from './M18ImportTestingWrapper' \ No newline at end of file diff --git a/src/components/NavigationContent/NavigationContent.tsx b/src/components/NavigationContent/NavigationContent.tsx index ca99d64..29fdf4e 100644 --- a/src/components/NavigationContent/NavigationContent.tsx +++ b/src/components/NavigationContent/NavigationContent.tsx @@ -266,7 +266,7 @@ const NavigationContent: React.FC = () => { { icon: , label: "Import Testing", - path: "/settings/importTesting", + path: "/settings/m18ImportTesting", }, ], },