diff --git a/client/src/adapters/project.ts b/client/src/adapters/project.ts
index d7da7f2fc7897f2373499c460b921c70f64d8823..8dec52b6471d35daae6ad34c6c50ee8235bf7e1a 100644
--- a/client/src/adapters/project.ts
+++ b/client/src/adapters/project.ts
@@ -92,7 +92,7 @@ interface NewProjectData {
name: string;
text: string;
color: string;
- deadline?: Date;
+ deadline?: string;
}
export function createProject(project: NewProjectData): Promise<string> {
diff --git a/client/src/components/forms/ProjectForm/index.tsx b/client/src/components/forms/ProjectForm/index.tsx
index b2ad430015add844e467a95770ab703f28a7a47c..1ada5d19ddccf3572bc8ef32d49aa50dedd9ef97 100644
--- a/client/src/components/forms/ProjectForm/index.tsx
+++ b/client/src/components/forms/ProjectForm/index.tsx
@@ -9,7 +9,7 @@ import CheckboxGroup from 'components/ui/CheckboxGroup';
interface Props {
project?: Project
- onSubmit: (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: Date) => void;
+ onSubmit: (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: string) => void;
}
function validateName(name: string): string | null {
@@ -44,22 +44,42 @@ function validateTeams(teams: string[]): string | null {
}
}
+//TODO add to ryoko-moment something like that
+
+export function getDateString(date?: Date) {
+ if (date) {
+ let month = date.getMonth() + 1;
+ return date.getFullYear() + '-'
+ + (month / 10 < 1 ? '0' + month : month) + '-'
+ + (date.getDate() / 10 < 1 ? '0' + date.getDate() : date.getDate());
+ } else {
+ return undefined;
+ }
+}
+
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 [deadline, setDeadline] = useState(getDateString(project?.deadline));
const [error, setError] = useState('');
const [teams, setTeams] = useState(project?.teams ?? []);
const [allTeams, setAllTeams] = useState<Team[]>([]);
useEffect(() => {
+ //TODO refactor
teams.forEach((userTeam) => {
getTeam(userTeam).then((team) => {
- setAllTeams(state => [...state, team]);
+ setAllTeams(state => {
+ if (!state.find((t) => t.id === team.id)) {
+ return [...state, team];
+ }
+
+ return [...state];
+ });
});
});
getTeams().then((allTeamsItems) => {
@@ -68,13 +88,13 @@ export default function ProjectForm({ project, onSubmit }: Props) {
if (!state.find((team) => team.id === allTeamsItem.id)) {
return [...state, allTeamsItem];
}
+
return [...state];
});
})
});
}, [teams])
-
const colors = Object.values(ProjectColors);
const allStatus = Object.values(Status);
@@ -86,6 +106,7 @@ export default function ProjectForm({ project, onSubmit }: Props) {
validateColor(color ?? '') === null &&
validateTeams(teams) === null
) {
+
onSubmit?.(teams, name ?? '', text ?? '', color ?? '', status ?? Status.OPEN, deadline);
} else {
setError('Please fill in the mandatory fields.');
@@ -128,7 +149,7 @@ export default function ProjectForm({ project, onSubmit }: Props) {
<TextInput
label="Deadline"
name="text"
- defaultText={project?.deadline?.toString()}
+ defaultText={deadline}
onChange={setDeadline}
type="date"
/>
@@ -139,14 +160,15 @@ export default function ProjectForm({ project, onSubmit }: Props) {
{
status &&
- <select onChange={(e) => {
- let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? Status.OPEN;
+ <select defaultValue={project?.status} onChange={(e) => {
+ let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? undefined;
setStatus(currentStatus);
}
}>
+ <option value="">Please choose a status</option>
{
allStatus.map((s) => (
- <option selected={status === s} value={s} key={s}>{s}</option>
+ <option value={s} key={s}>{s}</option>
))
}
</select>
diff --git a/client/src/components/ui/CheckboxGroup/index.tsx b/client/src/components/ui/CheckboxGroup/index.tsx
index d04537166a7d9083f00ff4b758ec114bb305001b..47a9cf90c295fcb0552a87bf5fa58987daa6b12a 100644
--- a/client/src/components/ui/CheckboxGroup/index.tsx
+++ b/client/src/components/ui/CheckboxGroup/index.tsx
@@ -15,7 +15,7 @@ export default function CheckboxGroup({ choices, chosen, setChosen }: Props) {
<div className="team-item" key={choice.id}>
<input type="checkbox" id={choice.id}
checked={chosen.indexOf(choice.id) >= 0}
- onClick={(e) => {
+ onChange={(e) => {
if (chosen.find(id => choice.id === id)) {
setChosen((state: any) => state.filter((id: any) => id !== choice.id));
} else {
diff --git a/client/src/components/ui/TextInput/index.tsx b/client/src/components/ui/TextInput/index.tsx
index f5fa05cf17e2e80eb6a2732b7083dc91bf9297d0..0b2da1eabb62998d97d8f16f647e9408b970ee75 100644
--- a/client/src/components/ui/TextInput/index.tsx
+++ b/client/src/components/ui/TextInput/index.tsx
@@ -1,6 +1,5 @@
import { ChangeEvent, FocusEvent, useCallback, useState } from "react";
-
import './text-input.scss';
interface Props {
@@ -17,12 +16,8 @@ export default function TextInput({ label, name, type, onChange, validation, com
const [error, setError] = useState('');
const handleChange = useCallback((e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
- if (type === 'date') {
- onChange(new Date(e.target.value));
- } else {
- onChange(e.target.value);
- }
- }, [onChange, type]);
+ onChange(e.target.value);
+ }, [onChange]);
const handleBlur = useCallback(async (e: FocusEvent<HTMLTextAreaElement | HTMLInputElement>) => {
let error = await validation?.(e.target.value, compareValue ?? '');
diff --git a/client/src/pages/Projects/ProjectCreate/index.tsx b/client/src/pages/Projects/ProjectCreate/index.tsx
index 4074a872650650bd8e8a7105c7da6bc788dbe3a3..8009c4facc979a12031ce6ed41d9fa8a08b6c510 100644
--- a/client/src/pages/Projects/ProjectCreate/index.tsx
+++ b/client/src/pages/Projects/ProjectCreate/index.tsx
@@ -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, status?: Status, deadline?: Date) => {
+ const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: string) => {
try {
if (await createProject({ teams, name, text, color, deadline })) {
history.push('/projects');
@@ -17,7 +17,6 @@ export default function ProjectCreate() {
} catch (e) { }
}, [history]);
-
return (
<div className="project-create-page">
<div className="content-container">
diff --git a/client/src/pages/Projects/ProjectEdit/index.tsx b/client/src/pages/Projects/ProjectEdit/index.tsx
index 3345f900586ad333e3a64917e6f9dae49ab4117c..581ebbf2bd9117091eb9c7711a596c90a43ed524 100644
--- a/client/src/pages/Projects/ProjectEdit/index.tsx
+++ b/client/src/pages/Projects/ProjectEdit/index.tsx
@@ -22,7 +22,7 @@ export default function ProjectEdit() {
});
}, [history, projectId]);
- const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: Date) => {
+ const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: string) => {
try {
if (project) {