From 6767a32bf55a2ef9f740fabc26fa0f32d9f90dc2 Mon Sep 17 00:00:00 2001 From: "Eng. Elias" Date: Thu, 29 Feb 2024 15:49:49 +0400 Subject: [PATCH] update mission validation and action --- src/app/missions/page.tsx | 7 +- src/components/modals/mission_modal.tsx | 158 +++++++++++++++++------- src/types/mission.ts | 2 +- 3 files changed, 121 insertions(+), 46 deletions(-) diff --git a/src/app/missions/page.tsx b/src/app/missions/page.tsx index 323bf2d..ec64cc9 100644 --- a/src/app/missions/page.tsx +++ b/src/app/missions/page.tsx @@ -14,7 +14,7 @@ const MissionsPage = () => { const [showMissionModal, setShowMissionModal] = useState(false); const [showNewMissionModal, setShowNewMissionModal] = useState(false); - const [selectedMission, setSelectedMission] = useState(null); + const [selectedMission, setSelectedMission] = useState(); const { loading, error, data, refetch } = useQuery(GET_MISSIONS); @@ -67,9 +67,12 @@ const MissionsPage = () => { ))} { + refetch(); + }} /> diff --git a/src/components/modals/mission_modal.tsx b/src/components/modals/mission_modal.tsx index 35dcd1a..b4fd707 100644 --- a/src/components/modals/mission_modal.tsx +++ b/src/components/modals/mission_modal.tsx @@ -1,6 +1,5 @@ "use client"; -import { agents, tools } from "@/data/data"; import { Icon } from "@iconify/react"; import React, { useEffect, useState } from "react"; import { @@ -18,23 +17,62 @@ import { Mission } from "@/types/mission"; import MissionTaskEditor from "../inputs/mission_tasks_editor"; import { TasksAccordion } from "../ui/tasks_accordions"; import { Process, selectTheme } from "@/data/consts"; -import { Switch } from "@material-tailwind/react"; +import { Button, Switch } from "@material-tailwind/react"; +import { useMutation, useQuery } from "@apollo/client"; +import { GET_AGENTS, UPDATE_MISSION } from "@/utils/graphql_queries"; +import withReactContent from "sweetalert2-react-content"; +import Swal from "sweetalert2"; +import { Agent } from "@/types/agent"; export default function MissionModal(props: { - mission: Mission | null; + mission: Mission; showModal: boolean; setShowModal: Function; + onUpdateMission: Function; }): JSX.Element { - const { mission, showModal, setShowModal } = props; + const { + mission, + showModal, + setShowModal, + onUpdateMission = () => {}, + } = props; const [isEdit, setEdit] = useState(false); - const [tempMission, setTempMission] = useState(mission); + const [tempMission, setTempMission] = useState(mission); useEffect(() => { setTempMission(mission); }, [mission]); + const { loading, error, data: agentsData } = useQuery(GET_AGENTS); + + const [updateMission] = useMutation(UPDATE_MISSION); + const [updateMissionLoading, setUpdateMissionLoading] = useState(false); + + const handleUpdateMission = async (missionData: Mission) => { + setUpdateMissionLoading(true); + return updateMission({ + variables: { + ...missionData, + // TODO: Check why Prisma Schema (id Int) return String. + id: Number.parseInt(missionData.id as string), + crew: missionData.crew + .filter((agent) => Number.parseInt(agent?.id as string)) + .map((agent) => Number.parseInt(agent.id as string)), + tasks: missionData.tasks.map((task) => ({ + name: task.name, + description: task.description, + agent: Number.parseInt(task.agent?.id as string), + })), + }, + }).finally(() => { + setUpdateMissionLoading(false); + }); + }; + + const ReactSwal = withReactContent(Swal); + return (
@@ -44,14 +82,12 @@ export default function MissionModal(props: {

{mission?.name}

- +
@@ -75,22 +111,35 @@ export default function MissionModal(props: { Crew (Agents):
{isEdit ? ( - ({ - text: agent.role, - value: agent.role, - }))} - multiple - value={tempMission?.crew.map((agent) => agent.role) ?? []} - onValueChange={(event: any) => { - const newValue = event.map((item: any) => item.value); - setTempMission((prevState) => ({ - ...prevState!, - tools: newValue, - })); - }} - theme={selectTheme} - /> + loading ? ( + + ) : ( + ({ + text: agent.role, + value: agent.id, + }))} + multiple + onValueChange={(event: any) => { + const newValue = event.map((item: any) => item.value); + const newCrew = agentsData.agents.filter( + (agent: Agent) => newValue.includes(agent.id) + ); + setTempMission((prevState) => ({ + ...prevState!, + crew: newCrew, + })); + }} + theme={selectTheme} + /> + ) ) : ( mission?.crew.map((agent, i) => ( <> @@ -191,45 +240,68 @@ export default function MissionModal(props: { )}
- +
)}
+ {/* Update Mission */} {!isEdit && ( - + )} {isEdit && ( <> - + Cancel + - + Save Changes + )} diff --git a/src/types/mission.ts b/src/types/mission.ts index d5c32da..d61da6c 100644 --- a/src/types/mission.ts +++ b/src/types/mission.ts @@ -4,7 +4,7 @@ import { Task, TaskInput } from "./task"; type ProcessType = "SEQUENTIAL" | "HIERARCHICAL"; export type Mission = { - id?: number; + id?: number | string; name: string; crew: Array; tasks: Array;