diff --git a/client/src/components/forms/ProjectForm/index.tsx b/client/src/components/forms/ProjectForm/index.tsx index 757aeac9d860322ade8c9d9e4ba3a51b9f726a57..74f91a3ee5747ff0222f04e7775a6aafd948f022 100644 --- a/client/src/components/forms/ProjectForm/index.tsx +++ b/client/src/components/forms/ProjectForm/index.tsx @@ -1,4 +1,4 @@ -import { Project, ProjectColors } from 'adapters/project'; +import { Project, ProjectColors, Status } from 'adapters/project'; import { FormEvent, useCallback, useEffect, useState } from 'react'; import Callout from 'components/ui/Callout'; import Button from 'components/ui/Button'; @@ -8,7 +8,7 @@ import { getTeam, getTeams, Team } from 'adapters/team'; interface Props { project?: Project - onSubmit: (teams: string[], name: string, text: string, color: string, deadline?: Date) => void; + onSubmit: (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: Date) => void; } function validateName(name: string): string | null { @@ -35,10 +35,19 @@ function validateColor(color: string): string | null { } } +function validateTeams(teams: string[]): string | null { + if (teams.length > 0) { + return null; + } else { + return 'Please choose at least one team'; + } +} + export default function ProjectForm({ project, onSubmit }: Props) { const [name, setName] = useState(project?.name); const [text, setText] = useState(project?.text); + const [status, setStatus] = useState(project?.status); const [color, setColor] = useState(project?.color); const [deadline, setDeadline] = useState(project?.deadline); const [error, setError] = useState(''); @@ -66,15 +75,22 @@ export default function ProjectForm({ project, onSubmit }: Props) { const colors = Object.values(ProjectColors); + const allStatus = Object.values(Status); + console.log(allStatus); + const handleSubmit = useCallback(async (e: FormEvent) => { e.preventDefault(); - if (validateName(name ?? '') === null && validateText(text ?? '') === null && validateColor(color ?? '') === null) { - onSubmit?.(teams, name ?? '', text ?? '', color ?? '', deadline); + if (validateName(name ?? '') === null && + validateText(text ?? '') === null && + validateColor(color ?? '') === null && + validateTeams(teams) === null + ) { + onSubmit?.(teams, name ?? '', text ?? '', color ?? '', status ?? Status.OPEN, deadline); } else { setError('Please fill in the mandatory fields.'); } - }, [onSubmit, setError, name, text, color, deadline, teams]); + }, [onSubmit, setError, name, text, color, deadline, teams, status]); return ( <form onSubmit={handleSubmit} className="project-form"> @@ -137,8 +153,23 @@ export default function ProjectForm({ project, onSubmit }: Props) { } </div> + { + status && + <select onChange={(e: any) => { + let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? Status.OPEN; + setStatus(currentStatus); + } + }> + { + allStatus.map((s) => ( + <option selected={status === s} value={s} key={s}>{s}</option> + )) + } + </select> + } + <Button type="submit"> - Create + {project ? 'Update' : 'Create'} </Button> </form> ) diff --git a/client/src/pages/Projects/ProjectCreate/index.tsx b/client/src/pages/Projects/ProjectCreate/index.tsx index b25cabd903bc60cc79e740e97057b2842b930b40..4074a872650650bd8e8a7105c7da6bc788dbe3a3 100644 --- a/client/src/pages/Projects/ProjectCreate/index.tsx +++ b/client/src/pages/Projects/ProjectCreate/index.tsx @@ -1,4 +1,4 @@ -import { createProject } from "adapters/project"; +import { createProject, Status } from "adapters/project"; import ProjectForm from "components/forms/ProjectForm"; import { useCallback, useState } from "react"; import { useHistory } from "react-router"; @@ -7,7 +7,7 @@ import Callout from 'components/ui/Callout'; export default function ProjectCreate() { const history = useHistory(); const [error, setError] = useState(''); - const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, deadline?: Date) => { + const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: Date) => { try { if (await createProject({ teams, name, text, color, deadline })) { history.push('/projects'); diff --git a/client/src/pages/Projects/ProjectEdit/index.tsx b/client/src/pages/Projects/ProjectEdit/index.tsx index f5a2f31627ea3b4bf54e60aaa09bd38df0da15fc..2b020f91caa334edb0215abd421b89da9972405f 100644 --- a/client/src/pages/Projects/ProjectEdit/index.tsx +++ b/client/src/pages/Projects/ProjectEdit/index.tsx @@ -1,4 +1,4 @@ -import { getProject, Project, updateProject } from 'adapters/project'; +import { getProject, Project, Status, updateProject } from 'adapters/project'; import { useCallback, useEffect, useState } from 'react'; import { useHistory, useParams } from 'react-router'; import ProjectForm from 'components/forms/ProjectForm'; @@ -21,27 +21,34 @@ export default function ProjectEdit() { history.goBack(); }); }, []); - const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, deadline?: Date) => { + + const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: Date) => { try { - /*if (await updateProject({ teams, name, text, color, deadline })) { + + if (project) { + let removedTeams = project.teams, addedTeams = teams; + removedTeams.filter((teamId) => teams.indexOf(teamId) === -1); + addedTeams.filter((teamId) => project.teams.indexOf(teamId) === -1); + + await updateProject(project.id, { remove_teams: removedTeams, add_teams: addedTeams, name, text, color, status, deadline: deadline?.toString() }); history.push('/projects'); - } else { - setError('There was an error with your registration. Please try again!'); - }*/ - } catch (e) { } - }, [history]); + } + } catch (e) { + setError('There was an error with updating your project. Please try again!'); + } + }, [history, project]); return ( <div className="project-create-page"> - { - project ? - <div className="content-container"> - <h1>Edit the project {project?.name}</h1> - {error && <Callout message={error} />} - <ProjectForm onSubmit={handleSubmit} project={project} /> - </div> : - <h2>Loading...</h2> - } + { + project ? + <div className="content-container"> + <h1>Edit the project {project?.name}</h1> + {error && <Callout message={error} />} + <ProjectForm onSubmit={handleSubmit} project={project} /> + </div> : + <h2>Loading...</h2> + } </div> )