From 9b2996f6f9b07359255b1167d8107b0eb1f00912 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Tue, 18 May 2021 20:25:46 +0200
Subject: [PATCH] completed project edit
---
.../components/forms/ProjectForm/index.tsx | 43 ++++++++++++++++---
.../pages/Projects/ProjectCreate/index.tsx | 4 +-
.../src/pages/Projects/ProjectEdit/index.tsx | 41 ++++++++++--------
3 files changed, 63 insertions(+), 25 deletions(-)
diff --git a/client/src/components/forms/ProjectForm/index.tsx b/client/src/components/forms/ProjectForm/index.tsx
index 757aeac..74f91a3 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 b25cabd..4074a87 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 f5a2f31..2b020f9 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>
)
--
GitLab