update

src/app/api/team/index.ts

@@ -15,6 +15,7 @@ export interface TeamResult {
     staffName: string;
     posLabel: string;
     posCode: string;
+    teamLead: number;
 
   }
   

src/components/EditTeam/Allocation.tsx

@@ -35,9 +35,10 @@ import StarsIcon from "@mui/icons-material/Stars";
 
 export interface Props {
   allStaffs: StaffResult[];
+  teamLead: number;
 }
 
-const Allocation: React.FC<Props> = ({ allStaffs: staff }) => {
+const Allocation: React.FC<Props> = ({ allStaffs: staff, teamLead }) => {
   const { t } = useTranslation();
   const searchParams = useSearchParams();
   const idString = searchParams.get("id");
@@ -53,9 +54,16 @@ const Allocation: React.FC<Props> = ({ allStaffs: staff }) => {
 
   const initialStaffs = staff.map((s) => ({ ...s }));
   const [filteredStaff, setFilteredStaff] = useState(initialStaffs);
-  const [selectedStaff, setSelectedStaff] = useState<typeof filteredStaff>(
-    filteredStaff.filter((s) => getValues("addStaffIds")?.includes(s.id))
+  const [selectedStaff, setSelectedStaff] = useState<typeof filteredStaff>(() => {
+    const rearrangedStaff = filteredStaff.sort((a, b) => {
+      if (a.id === teamLead) return -1;
+      if (b.id === teamLead) return 1;
+      return 0;
+    });
+    return rearrangedStaff.filter((s) => getValues("addStaffIds")?.includes(s.id))
+  }
   );
+  console.log(filteredStaff.filter((s) => getValues("addStaffIds")?.includes(s.id)))
   const [seletedTeamLead, setSeletedTeamLead] = useState<number>();
   const [deletedStaffIds, setDeletedStaffIds] = useState<number[]>([]);
 
@@ -84,8 +92,8 @@ const Allocation: React.FC<Props> = ({ allStaffs: staff }) => {
         },
         getValues("addStaffIds")
       );
-      console.log(rearrangedList);
-      console.log(selectedStaff);
+      // console.log(rearrangedList);
+      // console.log(selectedStaff);
 
       const rearrangedStaff = rearrangedList.map((id) => {
         return selectedStaff.find((staff) => staff.id === id);

src/components/EditTeam/EditTeam.tsx

@@ -20,12 +20,15 @@ import { StaffResult } from "@/app/api/staff";
 
 interface desc {
   id: number;
+  name: string;
   description: string;
+  teamLead: number;
 }
 
 interface Props {
   staff: StaffResult[];
   desc: desc[];
+  // teamLead: StaffResult[]
 }
 
 const EditTeam: React.FC<Props> = async ({ staff, desc }) => {
@@ -37,6 +40,8 @@ const EditTeam: React.FC<Props> = async ({ staff, desc }) => {
   const [filteredItems, setFilteredItems] = useState<StaffResult[]>();
   const [allStaffs, setAllStaffs] = useState<StaffResult[]>();
   const [filteredDesc, setFilteredDesc] = useState<string>();
+  const [filteredName, setFilteredName] = useState<string>();
+  const [teamLead, setTeamLead] = useState<number>();
   const [tabIndex, setTabIndex] = useState(0);
   const router = useRouter();
   //   const [selectedStaff, setSelectedStaff] = useState<typeof filteredItems>(
@@ -63,25 +68,47 @@ const EditTeam: React.FC<Props> = async ({ staff, desc }) => {
   );
   useEffect(() => {
     let idList: number[] = []
+    console.log(desc)
     if (idString) {
       const filteredTeam = staff.filter(
-        (item) => item.teamId === parseInt(idString)
+        (item) => {
+          console.log(item)
+          console.log(parseInt(idString))
+          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)
       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);
+          // }
+
         idList = filteredIds
+        console.log(filteredIds)
       }
-      // console.log(filteredIds)
+      console.log(idList)
       setFilteredItems(filteredTeam);
       formProps.reset({description: tempDesc[0].description, addStaffIds: idList})
       setFilteredDesc(tempDesc[0].description)
+      setFilteredName(tempDesc[0].name)
     }
+    console.log(staff)
 
     setAllStaffs(staff)
     
@@ -139,7 +166,7 @@ const EditTeam: React.FC<Props> = async ({ staff, desc }) => {
         >
 
         <Typography variant="h4" marginInlineEnd={2}>
-          {t("Edit Team")}
+          {t("Edit Team")} - {filteredName}
         </Typography>
         <Stack
           direction="row"
@@ -165,7 +192,7 @@ const EditTeam: React.FC<Props> = async ({ staff, desc }) => {
           </Tabs>
         </Stack>
         {tabIndex === 0 && <TeamInfo value={filteredDesc!!} />}
-        {tabIndex === 1 && <Allocation allStaffs={allStaffs!!} />}
+        {tabIndex === 1 && <Allocation allStaffs={allStaffs!!} teamLead={teamLead!!}/>}
         <Stack direction="row" justifyContent="flex-end" gap={1}>
             <Button
               variant="outlined"

src/components/EditTeam/EditTeamWrapper.tsx

@@ -4,24 +4,36 @@ import EditTeamLoading from "./EditTeamLoading";
 // import { fetchTeam, fetchTeamLeads } from "@/app/api/Team";
 import { useSearchParams } from "next/navigation";
 import { fetchTeam, fetchTeamDetail } from "@/app/api/team";
-import { fetchStaff } from "@/app/api/staff";
+import { fetchStaff, fetchStaffWithoutTeam, fetchTeamLeads } from "@/app/api/staff";
 
 interface SubComponents {
   Loading: typeof EditTeamLoading;
 }
 
 const EditTeamWrapper: React.FC & SubComponents = async () => {
-  const staff = await fetchStaff()
-  const allTeams = await fetchTeam();
-  const teamDesc = allTeams.map((i) => (
+
+  const [
+    staff,
+    allTeams,
+    // teamLead,
+  ] = await Promise.all([
+    fetchStaff(),
+    fetchTeam(),
+    // fetchTeamLeads(),
+  ]);
+  console.log(allTeams)
+
+  const teamDesc = allTeams.map((i) => {
+    return (
     {
       id: i.id,
-      description: i.description
+      name: i.name,
+      description: i.description,
+      teamLead: i.teamLead
     }
-  ))
-  console.log(staff)
-  console.log(teamDesc)
-  return <EditTeam staff={staff} desc={teamDesc}/>;
+  )})
+
+  return <EditTeam staff={staff} desc={teamDesc} />;
 };
 
 EditTeamWrapper.Loading = EditTeamLoading;