From cbda48860b8b72e7e8714b9ed80235b7ea2ee5cf Mon Sep 17 00:00:00 2001 From: "MSI\\derek" Date: Thu, 25 Apr 2024 17:57:28 +0800 Subject: [PATCH] update team delete --- src/app/api/staff/index.ts | 6 + src/app/api/team/actions.ts | 9 ++ .../CreateStaffForm/CreateStaffForm.tsx | 13 ++- .../CreateTeam/CreateTeamWrapper.tsx | 4 +- src/components/EditTeam/Allocation.tsx | 6 +- src/components/EditTeam/EditTeam.tsx | 21 +--- .../TeamSearch/ConfirmDeleteModal.tsx | 105 ++++++++++++++++++ src/components/TeamSearch/TeamSearch.tsx | 46 ++++++-- 8 files changed, 180 insertions(+), 30 deletions(-) create mode 100644 src/components/TeamSearch/ConfirmDeleteModal.tsx diff --git a/src/app/api/staff/index.ts b/src/app/api/staff/index.ts index 2c3f66d..f24f187 100644 --- a/src/app/api/staff/index.ts +++ b/src/app/api/staff/index.ts @@ -67,6 +67,12 @@ export const fetchStaff = cache(async () => { }); }); +export const fetchStaffWithoutTeam = cache(async () => { + return serverFetchJson(`${BASE_API_URL}/staffs/noteam`, { + next: { tags: ["staffs"] }, + }); +}); + // export const fetchStaffCombo = cache(async () => { // return serverFetchJson(`${BASE_API_URL}/staffs/combo`, { // next: { tags: ["staffs"] }, diff --git a/src/app/api/team/actions.ts b/src/app/api/team/actions.ts index a86ccf6..28496d0 100644 --- a/src/app/api/team/actions.ts +++ b/src/app/api/team/actions.ts @@ -51,3 +51,12 @@ export const saveTeam = async (data: CreateTeamInputs) => { headers: { "Content-Type": "application/json" }, }); }; + + +export const deleteTeam = async (data: TeamResult) => { + return serverFetchJson(`${BASE_API_URL}/team/delete/${data.id}`, { + method: "DELETE", + // body: JSON.stringify(data), + headers: { "Content-Type": "application/json" }, + }); +}; diff --git a/src/components/CreateStaffForm/CreateStaffForm.tsx b/src/components/CreateStaffForm/CreateStaffForm.tsx index bc55a01..31eb1fc 100644 --- a/src/components/CreateStaffForm/CreateStaffForm.tsx +++ b/src/components/CreateStaffForm/CreateStaffForm.tsx @@ -47,7 +47,7 @@ const CreateStaffForm: React.FC = ({ Title, fieldLists }) => { return haveError; } //check if joinDate > departDate - if (data.departDate != null && data.departDate != "Invalid Date") { + if (data.departDate != null && data.departDate != "Invalid Date" && data.departDate.length != 0) { if (data.joinDate != null) { const joinDate = new Date(data.joinDate); const departDate = new Date(data.departDate); @@ -56,6 +56,10 @@ const CreateStaffForm: React.FC = ({ Title, fieldLists }) => { return haveError; } } + if (data.departReason == null || data.departReason.length == 0) { + haveError = true; + return haveError; + } } if (haveError) { @@ -68,6 +72,13 @@ const CreateStaffForm: React.FC = ({ Title, fieldLists }) => { phone2: data.phone2.toString(), hourlyRate: typeof data.hourlyRate === 'string' ? parseInt(data.hourlyRate.replace("$", "").replace(",", "")) : 0 }; + if (postData.departDate?.length === 0 && postData.departReason?.length === 0) { + delete postData.departDate; + delete postData.departReason; + } + if (postData.remark?.length === 0) { + delete postData.remark; + } console.log(postData); setServerError(""); await saveStaff(postData); diff --git a/src/components/CreateTeam/CreateTeamWrapper.tsx b/src/components/CreateTeam/CreateTeamWrapper.tsx index 605ff83..3829a3a 100644 --- a/src/components/CreateTeam/CreateTeamWrapper.tsx +++ b/src/components/CreateTeam/CreateTeamWrapper.tsx @@ -3,7 +3,7 @@ import CreateTeam from "./CreateTeam"; import CreateTeamLoading from "./CreateTeamLoading"; // import { fetchTeam, fetchTeamLeads } from "@/app/api/team"; import { useSearchParams } from "next/navigation"; -import { fetchStaff } from "@/app/api/staff"; +import { fetchStaff, fetchStaffWithoutTeam } from "@/app/api/staff"; interface SubComponents { Loading: typeof CreateTeamLoading; @@ -14,7 +14,7 @@ const CreateTeamWrapper: React.FC & SubComponents = async () => { const [ staff, ] = await Promise.all([ - fetchStaff(), + fetchStaffWithoutTeam(), ]); return ; diff --git a/src/components/EditTeam/Allocation.tsx b/src/components/EditTeam/Allocation.tsx index 96b4b46..44c89b1 100644 --- a/src/components/EditTeam/Allocation.tsx +++ b/src/components/EditTeam/Allocation.tsx @@ -67,8 +67,8 @@ const Allocation: React.FC = ({ allStaffs: staff }) => { const removeStaff = useCallback((staff: StaffResult) => { setSelectedStaff((s) => s.filter((s) => s.id !== staff.id)); - setDeletedStaffIds((s) => s) - // setValue("deleteStaffIds", [...staff.id]) + // setDeletedStaffIds((s) => s) + setDeletedStaffIds((prevIds) => [...prevIds, staff.id]); }, []); const setTeamLead = useCallback( @@ -118,7 +118,7 @@ const Allocation: React.FC = ({ allStaffs: staff }) => { useEffect(() => { setValue("deleteStaffIds", deletedStaffIds) console.log(deletedStaffIds) - }, [deletedStaffIds, setValue]); + }, [deletedStaffIds]); const StaffPoolColumns = useMemo[]>( () => [ diff --git a/src/components/EditTeam/EditTeam.tsx b/src/components/EditTeam/EditTeam.tsx index 4b93754..095559b 100644 --- a/src/components/EditTeam/EditTeam.tsx +++ b/src/components/EditTeam/EditTeam.tsx @@ -70,7 +70,7 @@ const EditTeam: React.FC = async ({ staff, desc }) => { const tempDesc = desc.filter( (item) => item.id === parseInt(idString) ) - // console.log(filteredTeam); + if (filteredTeam.length > 0) { const filteredIds: number[] = filteredTeam.map((i) => ( i.id @@ -82,21 +82,7 @@ const EditTeam: React.FC = async ({ staff, desc }) => { formProps.reset({description: tempDesc[0].description, addStaffIds: idList}) setFilteredDesc(tempDesc[0].description) } - // console.log(staff); - // const desc = staff[0]?.description - // setDesc(desc) - // const staff = staff.map((item) => { - // return { - // id: item.id, - // name: item.name, - // staffId: item.staffId, - // teamId: item.teamId, - // staffName: item.staffName, - // currentPosition: item.currentPosition - // } as StaffResult - // }) - console.log(staff) setAllStaffs(staff) }, [searchParams]); @@ -124,11 +110,12 @@ const EditTeam: React.FC = async ({ staff, desc }) => { const tempData = { description: data.description, addStaffIds: data.addStaffIds, + deleteStaffIds: data.deleteStaffIds, id: parseInt(idString!!) } console.log(tempData) - // await saveTeam(tempData); - // router.replace("/settings/staff"); + await saveTeam(tempData); + router.replace("/settings/team"); } catch (e) { console.log(e); setServerError(t("An error has occurred. Please try again later.")); diff --git a/src/components/TeamSearch/ConfirmDeleteModal.tsx b/src/components/TeamSearch/ConfirmDeleteModal.tsx new file mode 100644 index 0000000..a5e7ed0 --- /dev/null +++ b/src/components/TeamSearch/ConfirmDeleteModal.tsx @@ -0,0 +1,105 @@ +"use client"; +import React, { useCallback, useMemo, useState } from "react"; +import Button from "@mui/material/Button"; +import { Card, Modal, Stack, Typography } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import { Add } from "@mui/icons-material"; +import Check from "@mui/icons-material/Check"; +import Close from "@mui/icons-material/Close"; +import { TSMS_BUTTON_THEME } from "@/theme/colorConst"; +import { ThemeProvider } from "@emotion/react"; + +interface Props { + isOpen: boolean; + onConfirm: (data: any) => void; + onCancel: (data: any | null) => void; +} + +const ConfirmModal: React.FC = ({ ...props }) => { + const { t } = useTranslation(); + return ( + <> + + + <> + + {t("Confirm")} + + <> + + {t("Are You Sure")} + + + {/* */} + + + + + {/* */} + + + + + ); +}; + +export default ConfirmModal; diff --git a/src/components/TeamSearch/TeamSearch.tsx b/src/components/TeamSearch/TeamSearch.tsx index 9aae6f1..b2cc9e8 100644 --- a/src/components/TeamSearch/TeamSearch.tsx +++ b/src/components/TeamSearch/TeamSearch.tsx @@ -9,6 +9,9 @@ import EditNote from "@mui/icons-material/EditNote"; import DeleteIcon from '@mui/icons-material/Delete'; import { deleteStaff } from "@/app/api/staff/actions"; import { useRouter } from "next/navigation"; +import ConfirmModal from "./ConfirmDeleteModal"; +import { deleteTeam } from "@/app/api/team/actions"; + interface Props { team: TeamResult[]; @@ -50,23 +53,47 @@ const TeamSearch: React.FC = ({ team }) => { router.push(`/settings/team/edit?id=${id}`); }, [router, t]); + // const onDeleteClick = useCallback((team: TeamResult) => { + // console.log(team); + // deleteTeam + + // }, [router, t]); + + const onDeleteClick = (team: TeamResult) => { + console.log(team); + setData(team) + setIsOpen(!isOpen) + }; + + const onConfirm = useCallback(async (team: TeamResult) => { + console.log(team); + if (data) + await deleteTeam(data) + setIsOpen(false) + window.location.reload; + }, [deleteTeam, data]); + + const onCancel = useCallback(() => { + setIsOpen(false) + }, []); + const columns = useMemo[]>( () => [ { name: "action", - label: t("Actions"), + label: t("Edit"), onClick: onTeamClick, buttonIcon: , }, { name: "name", label: t("Name") }, { name: "code", label: t("Code") }, { name: "description", label: t("description") }, - // { - // name: "action", - // label: t("Actions"), - // onClick: deleteClick, - // buttonIcon: , - // }, + { + name: "action", + label: t("Delete"), + onClick: onDeleteClick, + buttonIcon: , + }, ], [t], ); @@ -89,6 +116,11 @@ const TeamSearch: React.FC = ({ team }) => { }} /> items={filteredTeam} columns={columns} /> + );