From 0e663929f144cc0bad011c88b5a30d34b592c095 Mon Sep 17 00:00:00 2001 From: "MSI\\derek" Date: Thu, 21 Mar 2024 14:44:57 +0800 Subject: [PATCH] add create staff page --- src/app/(main)/staff/create/page.tsx | 110 +++++ .../CreateStaff/CreateStaffForm.tsx | 45 +++ src/components/CreateStaff/index.ts | 1 + .../CustomInputForm/CustomInputForm.tsx | 377 ++++++++++++++++++ src/components/CustomInputForm/index.ts | 1 + 5 files changed, 534 insertions(+) create mode 100644 src/app/(main)/staff/create/page.tsx create mode 100644 src/components/CreateStaff/CreateStaffForm.tsx create mode 100644 src/components/CreateStaff/index.ts create mode 100644 src/components/CustomInputForm/CustomInputForm.tsx create mode 100644 src/components/CustomInputForm/index.ts diff --git a/src/app/(main)/staff/create/page.tsx b/src/app/(main)/staff/create/page.tsx new file mode 100644 index 0000000..b2d6bc6 --- /dev/null +++ b/src/app/(main)/staff/create/page.tsx @@ -0,0 +1,110 @@ +// 'use client'; +import { I18nProvider, getServerI18n } from "@/i18n"; +import CustomInputForm from "@/components/CustomInputForm"; +import Check from "@mui/icons-material/Check"; +import Close from "@mui/icons-material/Close"; +import Button from "@mui/material/Button"; +import Stack from "@mui/material/Stack"; +import Tab from "@mui/material/Tab"; +import Tabs, { TabsProps } from "@mui/material/Tabs"; +import { useRouter } from "next/navigation"; +import React, { useCallback, useState } from "react"; +import { useTranslation } from "react-i18next"; +// import ProjectClientDetails from "./ProjectClientDetails"; +// import TaskSetup from "./TaskSetup"; +// import StaffAllocation from "./StaffAllocation"; +// import ResourceMilestone from "./ResourceMilestone"; +import { Task, TaskTemplate } from "@/app/api/tasks"; +import { + FieldErrors, + FormProvider, + SubmitErrorHandler, + SubmitHandler, + useForm, +} from "react-hook-form"; +import { CreateProjectInputs, saveProject } from "@/app/api/projects/actions"; +import { Error } from "@mui/icons-material"; +import { ProjectCategory } from "@/app/api/projects"; +import { Staff } from "@/app/api/staff"; +import { Grid, Typography } from "@mui/material"; +import CreateStaffForm from "@/components/CreateStaff/CreateStaffForm"; + +// import { Metadata } from "next"; + +// export const metadata: Metadata = { +// title: "staffCreate", +// }; + +// export interface Props { +// allTasks: Task[]; +// projectCategories: ProjectCategory[]; +// taskTemplates: TaskTemplate[]; +// teamLeads: Staff[]; +// } +interface CreateCustomInputs { + projectCode: string; + projectName: string; +} +const createCustomInputs: CreateCustomInputs = { + // Project details + projectCode: "", + projectName: "", +} +// const Title = ["title1", "title2"]; + +const CreateStaff: React.FC = async () => { + const { t } = await getServerI18n("createStaff"); + + const fieldLists = [ + [ + { + id: "name", + label: t("Staff Name"), + type: "textfield", + value: "asdasd", + // required: "asdasd", + // option: "asdasd", + }, + { + id: "date", + label: "date test", + type: "multiDate", + value: "asdasd", + // required: "asdasd", + // option: "asdasd", + }, + { + id: "date2", + label: "combo test", + type: "combo-Obj", + value: "asdasd", + // required: "asdasd", + options: [{id: 1, key: 1, value: 1, label: "first"}, {id: 2, key: 1, value: 2, label: "second"}], + }, + { + id: "field1", + label: "remarks test", + type: "remarks", + value: "", + // required: "asdasd", + // options: "asdasd", + }, + ], + ]; + + const handleSubmit = (data: any) => { + console.log(data); + }; + + return ( + <> + {t("Create Staff")} + + {/* / */} + + + + ); +}; + +export default CreateStaff; diff --git a/src/components/CreateStaff/CreateStaffForm.tsx b/src/components/CreateStaff/CreateStaffForm.tsx new file mode 100644 index 0000000..e73cf1d --- /dev/null +++ b/src/components/CreateStaff/CreateStaffForm.tsx @@ -0,0 +1,45 @@ +'use client' +import { useState } from 'react'; +import CustomInputForm from '../CustomInputForm'; + +interface Field { + // subtitle: string; + id: string; + label: string; + type: string; + value?: any; + required?: boolean; + options?: any[]; + readOnly?: boolean; +} + +interface formProps { + // onSubmit: (data: any) => void; + // resetForm: () => void; + // Title?: string[]; + // isActive: boolean; + fieldLists: Field[][]; +} + +const CreateStaffForm: React.FC = ({ + fieldLists +}) => { + // const [formData, setFormData] = useState(null); + + const handleSubmit = (data: any) => { + console.log(data); + // Handle the form submission logic here + // setFormData(data); + }; + + return ( + + ); +}; + +export default CreateStaffForm; \ No newline at end of file diff --git a/src/components/CreateStaff/index.ts b/src/components/CreateStaff/index.ts new file mode 100644 index 0000000..d0bd13c --- /dev/null +++ b/src/components/CreateStaff/index.ts @@ -0,0 +1 @@ +export { default } from "./CreateStaffForm"; diff --git a/src/components/CustomInputForm/CustomInputForm.tsx b/src/components/CustomInputForm/CustomInputForm.tsx new file mode 100644 index 0000000..dc7f962 --- /dev/null +++ b/src/components/CustomInputForm/CustomInputForm.tsx @@ -0,0 +1,377 @@ +"use client"; +import { + Card, + CardHeader, + CardContent, + SxProps, + Theme, + Typography, + Grid, + TextField, + FormControl, + InputLabel, + Select, + MenuItem, + Checkbox, + FormControlLabel, + Button, +} from "@mui/material"; +import { DataGrid, GridColDef, GridRowSelectionModel } from "@mui/x-data-grid"; +import { darken, lighten, styled } from "@mui/material/styles"; +import { Controller, useForm, useFormContext } from "react-hook-form"; +import Stack from "@mui/material/Stack"; +import { useTranslation } from "react-i18next"; +import Box from "@mui/material/Box"; +import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +import { DemoItem } from "@mui/x-date-pickers/internals/demo"; +import { DatePicker } from "@mui/x-date-pickers/DatePicker"; +import dayjs from "dayjs"; +import { useEffect, useState } from "react"; +import { Check } from "@mui/icons-material"; + +// interface Option { +// // Define properties of each option object +// // based on your specific requirements +// id: any; +// value: any; +// label: string; +// } + +interface Field { + // subtitle: string; + id: string; + label: string; + type: string; + value?: any; + required?: boolean; + options?: any[]; + readOnly?: boolean; +} + +interface CustomInputFormProps { + onSubmit: (data: any) => void; + // resetForm: () => void; + Title?: string[]; + isActive: boolean; + fieldLists: Field[][]; +} + +const CustomInputForm: React.FC = ({ + Title, + isActive, + fieldLists, + onSubmit, + // resetForm, +}) => { + const { t } = useTranslation(); + const { reset, register, handleSubmit, control } = useForm(); + const [dateObj, setDateObj] = useState(null); + const [value, setValue] = useState({}); + const [checkboxValue, setCheckboxValue] = useState({}); + // const [dateObj, setDateObj] = useState({}); + + interface DateObj { + [key: string]: string; + } + + const handleFormSubmit = (data: any) => { + // if (date != null || date != undefined ) { + // data.date = dayjs(date).format('YYYY-MM-DD'); + // } + for (const key in data) { + if (!isNaN(data[key])) { + if (data[key] !== "") { + if (Number.isInteger(parseFloat(data[key]))) { + data[key] = parseInt(data[key]); + } else { + data[key] = parseFloat(data[key]); + } + } + } + } + + if (checkboxValue !== null) { + data = { ...data, ...checkboxValue }; + } + + // if (value !== null) { + // data.dropdownCombo = value; + // } + const finalData = { + ...value, + ...data, + ...dateObj, + }; + + console.log(finalData); + onSubmit(finalData); + }; + + const handleDateChange = (id: string, newValue: dayjs.Dayjs | null): void => { + console.log(dayjs(newValue).format("YYYY-MM-DD")); + setDateObj((prevValues: DateObj) => ({ + ...prevValues, + [id]: newValue ? dayjs(newValue).format("YYYY-MM-DD") : "", + })); + }; + + const handleCheckboxChange = (id: string, newValue: boolean): void => { + setCheckboxValue((prevValues: { [key: string]: boolean }) => ({ + ...prevValues, + [id]: newValue, + })); + }; + + const handleAutocompleteChange = (id: any, newValue: any) => { + setValue((prevValues: any) => ({ + ...prevValues, + [id]: newValue, + })); + }; + + fieldLists.forEach((list) => { + list.forEach((obj) => { + if ( + obj.id === "created" || + obj.id === "createdBy" || + obj.id === "modified" || + obj.id === "deleted" || + obj.id === "modifiedBy" + ) { + obj.readOnly = true; + } + }); + }); + + // useEffect(() => { + // if (dateObj) { + // console.log(dateObj); + // } + // }, [dateObj]); + + return ( +
+ + + <> + {fieldLists.map((fieldList, fieldListIndex) => ( + + {Title ? ( + + {t(`${Title[fieldListIndex]}`)} + + ) : null} + + {fieldList.map((field: Field) => { + if (field.type === "textfield") { + return ( + + + + ); + } else if (field.type === "multiDate") { + return ( + + + + { + handleDateChange(field.id, newValue); + }} + // required = {field.required ?? false}, + /> + + + + ); + } else if (field.type === "combo-Obj") { + return ( + + + + {field.label} + + ( + + )} + /> + + + ); + } else if (field.type === "numeric") { + return ( + + + + ); + } else if (field.type === "numeric-positive") { + return ( + + + + ); + } else if (field.type === "checkbox") { + return ( + + { + handleCheckboxChange( + field.id, + event.target.checked + ); + }} + color="primary" + /> + } + label={ + + {field.label} + + } + /> + + ); + } else if (field.type === "remarks") { + return ( + + + + ); + } else { + return ( + + + + ); + } + })} + + + ))} + + {/* */} + + + + + +
+ ); +}; + +export default CustomInputForm; diff --git a/src/components/CustomInputForm/index.ts b/src/components/CustomInputForm/index.ts new file mode 100644 index 0000000..d99c1c9 --- /dev/null +++ b/src/components/CustomInputForm/index.ts @@ -0,0 +1 @@ +export { default } from "./CustomInputForm";