From 7d8a2a994af7fa598db98e8c4cd6be1e0035cd82 Mon Sep 17 00:00:00 2001 From: "MSI\\derek" Date: Mon, 27 May 2024 18:00:21 +0800 Subject: [PATCH] update --- src/app/(main)/settings/team/edit/page.tsx | 10 +- src/app/api/team/actions.ts | 3 +- src/app/api/team/index.ts | 18 ++ src/components/CreateTeam/TeamInfo.tsx | 22 +++ src/components/EditTeam/Allocation.tsx | 4 + src/components/EditTeam/EditTeam.tsx | 192 +++++++++----------- src/components/EditTeam/EditTeamWrapper.tsx | 27 +-- src/components/EditTeam/TeamInfo.tsx | 83 ++++++--- 8 files changed, 203 insertions(+), 156 deletions(-) diff --git a/src/app/(main)/settings/team/edit/page.tsx b/src/app/(main)/settings/team/edit/page.tsx index 94458f4..02d84eb 100644 --- a/src/app/(main)/settings/team/edit/page.tsx +++ b/src/app/(main)/settings/team/edit/page.tsx @@ -2,19 +2,23 @@ import { Edit } from "@mui/icons-material"; import { useSearchParams } from "next/navigation"; // import EditStaff from "@/components/EditStaff"; import { Suspense } from "react"; -import { I18nProvider } from "@/i18n"; +import { I18nProvider, getServerI18n } from "@/i18n"; // import EditStaffWrapper from "@/components/EditStaff/EditStaffWrapper"; import { Metadata } from "next"; import EditTeam from "@/components/EditTeam"; +import { searchParamsProps } from "@/app/utils/fetchUtil"; -const EditTeamPage: React.FC = () => { +const EditTeamPage: React.FC = async ({ + searchParams, +}) => { + const { t } = await getServerI18n("team"); return ( <> }> - + {/* */} diff --git a/src/app/api/team/actions.ts b/src/app/api/team/actions.ts index f57a17a..affb193 100644 --- a/src/app/api/team/actions.ts +++ b/src/app/api/team/actions.ts @@ -8,7 +8,8 @@ import { revalidateTag } from "next/cache"; export interface CreateTeamInputs { id: number | null; - // name: string; + name: string; + code: string; // team: string; // staffId: string; // grade: string; diff --git a/src/app/api/team/index.ts b/src/app/api/team/index.ts index 37fa5ac..9ae4a5a 100644 --- a/src/app/api/team/index.ts +++ b/src/app/api/team/index.ts @@ -15,7 +15,19 @@ export interface TeamResult { posLabel: string; posCode: string; teamLead: number; +} + +export type IndivTeam = { + team: IndividualTeam + staffIds: number[] +} +export type IndividualTeam = { + id: number; + description: string; + name: string; + code: string; + teamLead: number; } export interface comboProp { @@ -33,6 +45,12 @@ export const fetchTeam = cache(async () => { }); }); +export const fetchIndivTeam = cache(async (id: number) => { + return serverFetchJson(`${BASE_API_URL}/team/${id}`, { + next: { tags: ["team"] }, + }); +}); + export const preloadTeamDetail = () => { fetchTeamDetail(); }; diff --git a/src/components/CreateTeam/TeamInfo.tsx b/src/components/CreateTeam/TeamInfo.tsx index cd8b90a..dce3ec0 100644 --- a/src/components/CreateTeam/TeamInfo.tsx +++ b/src/components/CreateTeam/TeamInfo.tsx @@ -43,6 +43,28 @@ const TeamInfo: React.FC = ( {t("Team Info")} + + + + + + = ({ allStaffs: staff, teamLead }) => { ); const [deletedStaffIds, setDeletedStaffIds] = useState([]); + console.log(getValues("addStaffIds")); + console.log(filteredStaff); + console.log(selectedStaff) + // Adding / Removing staff const addStaff = useCallback((staff: StaffResult) => { setSelectedStaff((s) => [...s, staff]); diff --git a/src/components/EditTeam/EditTeam.tsx b/src/components/EditTeam/EditTeam.tsx index cd5f83a..b1a4ca8 100644 --- a/src/components/EditTeam/EditTeam.tsx +++ b/src/components/EditTeam/EditTeam.tsx @@ -1,6 +1,6 @@ "use client"; import { useRouter, useSearchParams } from "next/navigation"; -import { useCallback, useEffect, useMemo, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import SearchResults, { Column } from "../SearchResults"; // import { TeamResult } from "@/app/api/team"; import { useTranslation } from "react-i18next"; @@ -13,40 +13,27 @@ import { useForm, useFormContext, } from "react-hook-form"; -import { Check, Close, Error } from "@mui/icons-material"; +import { Check, Close, Error, RestartAlt } from "@mui/icons-material"; import TeamInfo from "../EditTeam/TeamInfo"; import Allocation from "./Allocation"; import { StaffResult } from "@/app/api/staff"; - -interface desc { - id: number; - name: string; - description: string; - teamLead: number; -} +import { IndivTeam } from "@/app/api/team"; interface Props { staff: StaffResult[]; - desc: desc[]; - // teamLead: StaffResult[] + teamInfo: IndivTeam; } -const EditTeam: React.FC = async ({ staff, desc }) => { - // console.log(desc) +const EditTeam: React.FC = async ({ staff, teamInfo }) => { + const { team, staffIds } = teamInfo; const { t } = useTranslation(); const formProps = useForm(); const searchParams = useSearchParams(); const idString = searchParams.get("id"); - const [filteredItems, setFilteredItems] = useState(); const [allStaffs, setAllStaffs] = useState(); - const [filteredDesc, setFilteredDesc] = useState(); - const [filteredName, setFilteredName] = useState(); const [teamLead, setTeamLead] = useState(); const [tabIndex, setTabIndex] = useState(0); const router = useRouter(); - // const [selectedStaff, setSelectedStaff] = useState( - // initialStaffs.filter((s) => getValues("addStaffIds")?.includes(s.id)) - // ); const errors = formProps.formState.errors; @@ -58,64 +45,36 @@ const EditTeam: React.FC = async ({ staff, desc }) => { ); const [serverError, setServerError] = useState(""); - const cols = useMemo[]>( - () => [ - { label: t("Staff Id"), name: "staffId" }, - { label: t("Name"), name: "staffName" }, - // { label: t("Current Position"), name: "posCode" }, - ], - [t] - ); + useEffect(() => { - let idList: number[] = [] + let idList: number[] = []; // console.log(desc) if (idString) { - const filteredTeam = staff.filter( - (item) => { - return (item.teamId === parseInt(idString))} - ); - // console.log(filteredTeam) - const tempDesc = desc.filter( - (item) => item.id === parseInt(idString) - ) - // const leader = teamLead.filter( - // (staff) => staff.teamId === parseInt(idString) - // ) - // console.log(leader) - console.log(tempDesc[0].teamLead) - setTeamLead(tempDesc[0].teamLead) + const filteredTeam = staff.filter((item) => { + return item.teamId === parseInt(idString); + }); + console.log(team.teamLead); + setTeamLead(team.teamLead); if (filteredTeam.length > 0) { - const filteredIds: number[] = filteredTeam.map((i) => ( - i.id - )) - - // const teamLead = tempDesc[0].teamLead - // const index = filteredIds.indexOf(teamLead); - - // if (index !== -1) { - // filteredIds.splice(index, 1); - // filteredIds.unshift(teamLead); - // } + const filteredIds: number[] = filteredTeam.map((i) => i.id); + + // const teamLead = tempDesc[0].teamLead + // const index = filteredIds.indexOf(teamLead); + + // if (index !== -1) { + // filteredIds.splice(index, 1); + // filteredIds.unshift(teamLead); + // } - idList = filteredIds - // console.log(filteredIds) + idList = filteredIds; } - // console.log(idList) - setFilteredItems(filteredTeam); - formProps.reset({description: tempDesc[0].description, addStaffIds: idList}) - setFilteredDesc(tempDesc[0].description) - setFilteredName(tempDesc[0].name) + formProps.reset({ description: team.description, addStaffIds: idList }); } // console.log(staff) - setAllStaffs(staff) - + setAllStaffs(staff); }, [searchParams]); -// useEffect(() => { -// console.log(allStaffs) -// }, [allStaffs]); - const hasErrorsInTab = ( tabIndex: number, errors: FieldErrors @@ -133,14 +92,14 @@ const EditTeam: React.FC = async ({ staff, desc }) => { try { // console.log(data); const tempData = { - description: data.description, - addStaffIds: data.addStaffIds, - deleteStaffIds: data.deleteStaffIds, - id: parseInt(idString!!) - } - console.log(tempData) - await saveTeam(tempData); - router.replace("/settings/team"); + description: data.description, + addStaffIds: data.addStaffIds, + deleteStaffIds: data.deleteStaffIds, + id: parseInt(idString!!), + }; + console.log(tempData); + // await saveTeam(tempData); + // router.replace("/settings/team"); } catch (e) { console.log(e); setServerError(t("An error has occurred. Please try again later.")); @@ -149,6 +108,20 @@ const EditTeam: React.FC = async ({ staff, desc }) => { [router] ); + const resetTeam = React.useCallback(() => { + formProps.reset({ + name: team.name, + code: team.code, + description: team.description, + addStaffIds: staffIds, + deleteStaffIds: [] + }); + }, []); + + useEffect(() => { + resetTeam(); + }, [team]); + return ( <> {serverError && ( @@ -157,41 +130,50 @@ const EditTeam: React.FC = async ({ staff, desc }) => { )} - - - - {t("Edit Team")} - {filteredName} - - - + {t("Edit Team")} + {/* - {team.name} */} + + - - ) : undefined - } - iconPosition="end" - /> - - - - {tabIndex === 0 && } - {tabIndex === 1 && } - + + + ) : undefined + } + iconPosition="end" + /> + + + + {tabIndex === 0 && } + {tabIndex === 1 && ( + + )} + + - + ); diff --git a/src/components/EditTeam/EditTeamWrapper.tsx b/src/components/EditTeam/EditTeamWrapper.tsx index 18c707e..e6f9a9e 100644 --- a/src/components/EditTeam/EditTeamWrapper.tsx +++ b/src/components/EditTeam/EditTeamWrapper.tsx @@ -3,37 +3,28 @@ import EditTeam from "./EditTeam"; import EditTeamLoading from "./EditTeamLoading"; // import { fetchTeam, fetchTeamLeads } from "@/app/api/Team"; import { useSearchParams } from "next/navigation"; -import { fetchTeam, fetchTeamDetail } from "@/app/api/team"; +import { fetchIndivTeam, fetchTeam, fetchTeamDetail } from "@/app/api/team"; import { fetchStaff, fetchStaffWithoutTeam, fetchTeamLeads } from "@/app/api/staff"; interface SubComponents { Loading: typeof EditTeamLoading; } -const EditTeamWrapper: React.FC & SubComponents = async () => { +interface Props { + id: number +} + +const EditTeamWrapper: React.FC & SubComponents = async ({ id }) => { const [ staff, - allTeams, - // teamLead, + team, ] = await Promise.all([ fetchStaff(), - fetchTeam(), - // fetchTeamLeads(), + fetchIndivTeam(id), ]); - console.log(allTeams) - - const teamDesc = allTeams.map((i) => { - return ( - { - id: i.id, - name: i.name, - description: i.description, - teamLead: i.teamLead - } - )}) - return ; + return ; }; EditTeamWrapper.Loading = EditTeamLoading; diff --git a/src/components/EditTeam/TeamInfo.tsx b/src/components/EditTeam/TeamInfo.tsx index 4a54f6c..9c2e8a0 100644 --- a/src/components/EditTeam/TeamInfo.tsx +++ b/src/components/EditTeam/TeamInfo.tsx @@ -16,14 +16,10 @@ import { useCallback } from "react"; import { CreateTeamInputs } from "@/app/api/team/actions"; interface Props { - value: string; + } -const TeamInfo: React.FC = ( - { - value - } -) => { +const TeamInfo: React.FC = () => { const { t } = useTranslation(); const { register, @@ -34,13 +30,6 @@ const TeamInfo: React.FC = ( setValue, } = useFormContext(); - const resetCustomer = useCallback(() => { - console.log(defaultValues); - if (defaultValues !== undefined) { - resetField("description"); - } - }, [defaultValues]); - return ( <> @@ -49,22 +38,58 @@ const TeamInfo: React.FC = ( {t("Team Info")} - - - - - + + + + + + + + + + +