From 255ba270716edc391bddef51f9ab4bee9b765371 Mon Sep 17 00:00:00 2001 From: "MSI\\derek" Date: Thu, 11 Apr 2024 18:21:05 +0800 Subject: [PATCH] update staff create combo --- src/app/api/companys/actions.ts | 2 +- src/app/api/departments/actions.ts | 2 +- src/app/api/grades/actions.ts | 2 +- src/app/api/positions/actions.ts | 2 +- src/app/api/salarys/actions.ts | 2 +- src/app/api/skill/actions.ts | 2 +- src/app/api/team/actions.ts | 2 +- src/components/CreateStaff/CreateStaff.tsx | 320 ++++++++++++++++++ .../CreateStaff/CreateStaffLoading.tsx | 40 +++ .../CreateStaff/CreateStaffWrapper.tsx | 19 ++ src/components/CreateStaff/index.ts | 2 +- .../CreateStaffForm.tsx | 1 - src/components/CreateStaffForm/index.ts | 1 + src/components/EditStaff/EditStaff.tsx | 14 +- src/components/StaffSearch/StaffSearch.tsx | 5 +- .../StaffSearch/StaffSearchWrapper.tsx | 12 +- 16 files changed, 408 insertions(+), 20 deletions(-) create mode 100644 src/components/CreateStaff/CreateStaff.tsx create mode 100644 src/components/CreateStaff/CreateStaffLoading.tsx create mode 100644 src/components/CreateStaff/CreateStaffWrapper.tsx rename src/components/{CreateStaff => CreateStaffForm}/CreateStaffForm.tsx (99%) create mode 100644 src/components/CreateStaffForm/index.ts diff --git a/src/app/api/companys/actions.ts b/src/app/api/companys/actions.ts index bfcec0a..d78f9b6 100644 --- a/src/app/api/companys/actions.ts +++ b/src/app/api/companys/actions.ts @@ -9,7 +9,7 @@ export interface comboProp { } export interface combo { - records: comboProp; + records: comboProp[]; } export const fetchCompanyCombo = cache(async () => { diff --git a/src/app/api/departments/actions.ts b/src/app/api/departments/actions.ts index def46ea..c6bdfd2 100644 --- a/src/app/api/departments/actions.ts +++ b/src/app/api/departments/actions.ts @@ -11,7 +11,7 @@ export interface comboProp { } export interface combo { - records: comboProp; + records: comboProp[]; } export interface CreateDepartmentInputs { departmentCode: string; diff --git a/src/app/api/grades/actions.ts b/src/app/api/grades/actions.ts index 49b7746..955c2f6 100644 --- a/src/app/api/grades/actions.ts +++ b/src/app/api/grades/actions.ts @@ -10,7 +10,7 @@ export interface comboProp { } export interface combo { - records: comboProp; + records: comboProp[]; } export const fetchGradeCombo = cache(async () => { diff --git a/src/app/api/positions/actions.ts b/src/app/api/positions/actions.ts index 430a75e..e5abc16 100644 --- a/src/app/api/positions/actions.ts +++ b/src/app/api/positions/actions.ts @@ -10,7 +10,7 @@ export interface comboProp { } export interface combo { - records: comboProp; + records: comboProp[]; } export interface CreatePositionInputs { diff --git a/src/app/api/salarys/actions.ts b/src/app/api/salarys/actions.ts index 386f919..11384e0 100644 --- a/src/app/api/salarys/actions.ts +++ b/src/app/api/salarys/actions.ts @@ -10,7 +10,7 @@ export interface comboProp { } export interface combo { - records: comboProp; + records: comboProp[]; } export const fetchSalaryCombo = cache(async () => { diff --git a/src/app/api/skill/actions.ts b/src/app/api/skill/actions.ts index 990435e..eda7f39 100644 --- a/src/app/api/skill/actions.ts +++ b/src/app/api/skill/actions.ts @@ -11,7 +11,7 @@ export interface comboProp { } export interface combo { - records: comboProp; + records: comboProp[]; } export const fetchSkillCombo = cache(async () => { diff --git a/src/app/api/team/actions.ts b/src/app/api/team/actions.ts index bee91a4..4a371b0 100644 --- a/src/app/api/team/actions.ts +++ b/src/app/api/team/actions.ts @@ -9,7 +9,7 @@ export interface comboProp { } export interface combo { - records: comboProp; + records: comboProp[]; } export const fetchTeamCombo = cache(async () => { diff --git a/src/components/CreateStaff/CreateStaff.tsx b/src/components/CreateStaff/CreateStaff.tsx new file mode 100644 index 0000000..fc03184 --- /dev/null +++ b/src/components/CreateStaff/CreateStaff.tsx @@ -0,0 +1,320 @@ +"use client"; +import { useCallback, useEffect, useState } from "react"; +import CustomInputForm from "../CustomInputForm"; +import { useRouter } from "next/navigation"; +import { useTranslation } from "react-i18next"; +import { + FieldErrors, + FormProvider, + SubmitErrorHandler, + SubmitHandler, + useForm, +} from "react-hook-form"; +import { CreateStaffInputs, saveStaff, testing } from "@/app/api/staff/actions"; +import { Typography } from "@mui/material"; +import CreateStaffForm from "../CreateStaffForm"; +import { comboProp, fetchCompanyCombo } from "@/app/api/companys/actions"; +import { fetchTeamCombo } from "@/app/api/team/actions"; +import { fetchDepartmentCombo } from "@/app/api/departments/actions"; +import { fetchPositionCombo } from "@/app/api/positions/actions"; +import { fetchGradeCombo } from "@/app/api/grades/actions"; +import { fetchSkillCombo } from "@/app/api/skill/actions"; +import { fetchSalaryCombo } from "@/app/api/salarys/actions"; +// import { fetchTeamCombo } from "@/app/api/team/actions"; +// import { fetchDepartmentCombo } from "@/app/api/departments/actions"; +// import { fetchPositionCombo } from "@/app/api/positions/actions"; +// import { fetchGradeCombo } from "@/app/api/grades/actions"; +// import { fetchSkillCombo } from "@/app/api/skill/actions"; +// import { fetchSalaryCombo } from "@/app/api/salarys/actions"; + +interface Field { + // subtitle: string; + id: string; + label: string; + type: string; + value?: any; + required?: boolean; + pattern?: string; + message?: string; + options?: any[]; + readOnly?: boolean; +} + +interface formProps { + Title?: string[]; + // fieldLists: Field[][]; +} + +export interface comboItem { + company: comboProp[]; + team: comboProp[]; + department: comboProp[]; + position: comboProp[]; + grade: comboProp[]; + skill: comboProp[]; + salary: comboProp[]; +} + +const CreateStaff: React.FC = ({ Title }) => { + // const router = useRouter(); + const { t } = useTranslation(); + const [companyCombo, setCompanyCombo] = useState(); + const [teamCombo, setTeamCombo] = useState(); + const [departmentCombo, setDepartmentCombo] = useState(); + const [positionCombo, setPositionCombo] = useState(); + const [gradeCombo, setGradeCombo] = useState(); + const [skillCombo, setSkillCombo] = useState(); + const [salaryCombo, setSalaryCombo] = useState(); + // const [serverError, setServerError] = useState(""); + + let comboItem: comboItem = { + company: [], + team: [], + department: [], + position: [], + grade: [], + skill: [], + salary: [], + }; + + const fetchCompany = async () => { + await fetchCompanyCombo().then((data) => { + if (data) setCompanyCombo(data.records); + }); + } + + const fetchTeam = async () => { + await fetchTeamCombo().then((data) => { + if (data) setTeamCombo(data.records); + }); + } + + const fetchDepartment = async () => { + await fetchDepartmentCombo().then((data) => { + if (data) setDepartmentCombo(data.records); + }); + } + + const fetchPosition = async () => { + await fetchPositionCombo().then((data) => { + if (data) setPositionCombo(data.records); + }); + } + + const fetchGrade = async () => { + await fetchGradeCombo().then((data) => { + if (data) setGradeCombo(data.records); + }); + } + + const fetchSkill = async () => { + await fetchSkillCombo().then((data) => { + if (data) setSkillCombo(data.records); + }); + } + + const fetchSalary = async () => { + await fetchSalaryCombo().then((data) => { + if (data) setSalaryCombo(data.records); + }); + } + + useEffect(() => { + fetchCompany() + fetchTeam() + fetchDepartment() + fetchPosition() + fetchGrade() + fetchSkill() + fetchSalary() + }, []); + + useEffect(() => { + if(!companyCombo) + fetchCompany() + if(!teamCombo) + fetchTeam() + if(!departmentCombo) + fetchDepartment() + if(!positionCombo) + fetchPosition() + if(!gradeCombo) + fetchGrade() + if(!skillCombo) + fetchSkill() + if(!salaryCombo) + fetchSalary() + + }, [companyCombo, teamCombo, departmentCombo, positionCombo, gradeCombo, skillCombo, salaryCombo]); + + // useEffect(() => { + // console.log(companyCombo) + // }, [companyCombo]); + + const fieldLists: Field[][] = [ + [ + { + id: "staffId", + label: t("Staff ID"), + type: "text", + value: "", + required: true, + }, + { + id: "name", + label: t("Staff Name"), + type: "text", + value: "", + required: true, + }, + { + id: "companyId", + label: t("Company"), + type: "combo-Obj", + options: teamCombo, + required: true, + }, + { + id: "teamId", + label: t("Team"), + type: "combo-Obj", + options: teamCombo, + required: true, + }, + { + id: "departmentId", + label: t("Department"), + type: "combo-Obj", + options: departmentCombo, + required: true, + }, + { + id: "gradeId", + label: t("Grade"), + type: "combo-Obj", + options: gradeCombo, + required: true, + }, + { + id: "skillSetId", + label: t("Skillset"), + type: "combo-Obj", + options: skillCombo, + required: true, + }, + { + id: "currentPositionId", + label: t("Current Position"), + type: "combo-Obj", + options: positionCombo, + required: true, + }, + { + id: "salaryEffId", + label: t("Salary Point"), + type: "combo-Obj", + options: salaryCombo, + required: true, + }, + { + id: "hourlyRate", + label: t("Hourly Rate"), + type: "numeric-testing", + value: "", + required: true, + }, + { + id: "employType", + label: t("Employ Type"), + type: "combo-Obj", + options: [{id: "FT", label: t("FT")}, {id: "PT", label: t("PT")}], + value: "", + required: true, + }, + { + id: "email", + label: t("Email"), + type: "text", + value: "", + pattern: "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$", + message: t("input matching format"), + required: true, + }, + { + id: "phone1", + label: t("Phone1"), + type: "text", + value: "", + pattern: "^\\d{8}$", + message: t("input correct phone no."), + required: true, + }, + { + id: "phone2", + label: t("Phone2"), + type: "text", + value: "", + pattern: "^\\d{8}$", + message: t("input correct phone no."), + required: true, + }, + ], + [ + { + id: "emergContactName", + label: t("Emergency Contact Name"), + type: "text", + value: "", + required: true, + }, + { + id: "emergContactPhone", + label: t("Emergency Contact Phone"), + type: "text", + value: "", + pattern: "^\\d{8}$", + message: t("input correct phone no."), + required: true, + }, + { + id: "joinDate", + label: t("Join Date"), + type: "multiDate", + value: "", + required: true, + }, + { + id: "joinPositionId", + label: t("Join Position"), + type: "combo-Obj", + options: positionCombo, + required: true, + }, + { + id: "departDate", + label: t("Depart Date"), + type: "multiDate", + value: "", + }, + { + id: "departReason", + label: t("Depart Reason"), + type: "text", + value: "", + }, + { + id: "remark", + label: t("Remark"), + type: "remarks", + value: "", + }, + ] + ]; + return ( + <> + + + ); +}; + +export default CreateStaff; \ No newline at end of file diff --git a/src/components/CreateStaff/CreateStaffLoading.tsx b/src/components/CreateStaff/CreateStaffLoading.tsx new file mode 100644 index 0000000..a82044f --- /dev/null +++ b/src/components/CreateStaff/CreateStaffLoading.tsx @@ -0,0 +1,40 @@ +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Skeleton from "@mui/material/Skeleton"; +import Stack from "@mui/material/Stack"; +import React from "react"; + +// Can make this nicer +export const CreateStaffLoading: React.FC = () => { + return ( + <> + + + + + + + + + + + CreateStaff + + + + + + + + + + + ); +}; + +export default CreateStaffLoading; diff --git a/src/components/CreateStaff/CreateStaffWrapper.tsx b/src/components/CreateStaff/CreateStaffWrapper.tsx new file mode 100644 index 0000000..c54ad87 --- /dev/null +++ b/src/components/CreateStaff/CreateStaffWrapper.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import CreateStaff from "./CreateStaff"; +import CreateStaffLoading from "./CreateStaffLoading"; +import { fetchStaff, fetchTeamLeads } from "@/app/api/staff"; +import { useSearchParams } from "next/navigation"; + +interface SubComponents { + Loading: typeof CreateStaffLoading; +} + +const CreateStaffWrapper: React.FC & SubComponents = async () => { + + + return ; +}; + +CreateStaffWrapper.Loading = CreateStaffLoading; + +export default CreateStaffWrapper; diff --git a/src/components/CreateStaff/index.ts b/src/components/CreateStaff/index.ts index d0bd13c..cd00ff9 100644 --- a/src/components/CreateStaff/index.ts +++ b/src/components/CreateStaff/index.ts @@ -1 +1 @@ -export { default } from "./CreateStaffForm"; +export { default } from "./CreateStaffWrapper"; diff --git a/src/components/CreateStaff/CreateStaffForm.tsx b/src/components/CreateStaffForm/CreateStaffForm.tsx similarity index 99% rename from src/components/CreateStaff/CreateStaffForm.tsx rename to src/components/CreateStaffForm/CreateStaffForm.tsx index fef41e4..bc55a01 100644 --- a/src/components/CreateStaff/CreateStaffForm.tsx +++ b/src/components/CreateStaffForm/CreateStaffForm.tsx @@ -1,4 +1,3 @@ -"use client"; import { useCallback, useState } from "react"; import CustomInputForm from "../CustomInputForm"; import { useRouter } from "next/navigation"; diff --git a/src/components/CreateStaffForm/index.ts b/src/components/CreateStaffForm/index.ts new file mode 100644 index 0000000..d0bd13c --- /dev/null +++ b/src/components/CreateStaffForm/index.ts @@ -0,0 +1 @@ +export { default } from "./CreateStaffForm"; diff --git a/src/components/EditStaff/EditStaff.tsx b/src/components/EditStaff/EditStaff.tsx index 2dfd4e0..02a3d04 100644 --- a/src/components/EditStaff/EditStaff.tsx +++ b/src/components/EditStaff/EditStaff.tsx @@ -55,13 +55,13 @@ const EditStaff: React.FC = async () => { const idString = searchParams.get("id"); const [id, setId] = useState(0); const [fieldLists, setFieldLists] = useState(); - const [companyCombo, setCompanyCombo] = useState(); - const [teamCombo, setTeamCombo] = useState(); - const [departmentCombo, setDepartmentCombo] = useState(); - const [positionCombo, setPositionCombo] = useState(); - const [gradeCombo, setGradeCombo] = useState(); - const [skillCombo, setSkillCombo] = useState(); - const [salaryCombo, setSalaryCombo] = useState(); + const [companyCombo, setCompanyCombo] = useState(); + const [teamCombo, setTeamCombo] = useState(); + const [departmentCombo, setDepartmentCombo] = useState(); + const [positionCombo, setPositionCombo] = useState(); + const [gradeCombo, setGradeCombo] = useState(); + const [skillCombo, setSkillCombo] = useState(); + const [salaryCombo, setSalaryCombo] = useState(); // const employTypeCombo = [{id: "FT", label: t("FT")}, {id: "PT", label: t("PT")}]; const title = ["", t('Additional Info')] const employTypeCombo = [ diff --git a/src/components/StaffSearch/StaffSearch.tsx b/src/components/StaffSearch/StaffSearch.tsx index 18db617..e65cfe7 100644 --- a/src/components/StaffSearch/StaffSearch.tsx +++ b/src/components/StaffSearch/StaffSearch.tsx @@ -1,5 +1,4 @@ "use client"; - import { StaffResult } from "@/app/api/staff"; import React, { useCallback, useEffect, useMemo, useState } from "react"; import SearchBox, { Criterion } from "../SearchBox/index"; @@ -11,6 +10,10 @@ import ConfirmModal from "./ConfirmDeleteModal"; import { deleteStaff } from "@/app/api/staff/actions"; import { useRouter } from "next/navigation"; +interface combo { + id: any; + label: string; +} interface Props { staff: StaffResult[]; } diff --git a/src/components/StaffSearch/StaffSearchWrapper.tsx b/src/components/StaffSearch/StaffSearchWrapper.tsx index b9b03bf..c581ca8 100644 --- a/src/components/StaffSearch/StaffSearchWrapper.tsx +++ b/src/components/StaffSearch/StaffSearchWrapper.tsx @@ -1,8 +1,14 @@ - import { fetchStaff, fetchTeamLeads } from "@/app/api/staff"; import React from "react"; import StaffSearch from "./StaffSearch"; import StaffSearchLoading from "./StaffSearchLoading"; +import { comboProp, fetchCompanyCombo } from "@/app/api/companys/actions"; +import { fetchTeamCombo } from "@/app/api/team/actions"; +import { fetchDepartmentCombo } from "@/app/api/departments/actions"; +import { fetchPositionCombo } from "@/app/api/positions/actions"; +import { fetchGradeCombo } from "@/app/api/grades/actions"; +import { fetchSkillCombo } from "@/app/api/skill/actions"; +import { fetchSalaryCombo } from "@/app/api/salarys/actions"; // import { preloadStaff } from "@/app/api/staff"; interface SubComponents { @@ -11,8 +17,8 @@ interface SubComponents { const StaffSearchWrapper: React.FC & SubComponents = async () => { const staff = await fetchStaff(); - // console.log(staff) - + console.log(staff); + return ; };