From fca6dbfdb654f0dc79372b6c69aa78276ded9ac0 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Wed, 19 May 2021 14:13:14 +0200
Subject: [PATCH] add and delete requirements
---
.../forms/TaskForm/RequirementsChoice.tsx | 91 ++++++++++++-------
1 file changed, 58 insertions(+), 33 deletions(-)
diff --git a/client/src/components/forms/TaskForm/RequirementsChoice.tsx b/client/src/components/forms/TaskForm/RequirementsChoice.tsx
index 6ebf9b9..7186ca3 100644
--- a/client/src/components/forms/TaskForm/RequirementsChoice.tsx
+++ b/client/src/components/forms/TaskForm/RequirementsChoice.tsx
@@ -1,8 +1,8 @@
import { TaskRequirement } from 'adapters/task';
-import { TeamRole } from 'adapters/team';
-import { useState } from 'react';
+import { FormEvent, useCallback, useEffect, useState } from 'react';
import { possibleRole } from '../TaskForm';
-
+import Popup from 'components/ui/Popup';
+import Button from 'components/ui/Button';
interface Props {
roles: possibleRole[],
@@ -13,46 +13,71 @@ interface Props {
export default function RequirementsChoice({ roles, requirements, setRequirements }: Props) {
- const [possibleRoles, setPossibleRoles] = useState<possibleRole[]>(roles
- .filter(role => !requirements.find(r => r.role === role.id))
- );
+ const [possibleRoles, setPossibleRoles] = useState<possibleRole[]>([]);
+ const [addNew, setAddNew] = useState(false);
+ const [selectedRole, setSelectedRole] = useState<string>('');
+ const [selectedTime, setSelectedTime] = useState<string>('');
+
+ useEffect(() => {
+ setPossibleRoles(roles.filter(role => !requirements.find(r => r.role === role.id)));
+ }, [roles, requirements, setSelectedRole])
+
+
+ const addRequirement = useCallback(() => {
+ if (selectedTime && selectedRole) {
+ setRequirements((state: any) => [...state, { role: selectedRole, time: selectedTime }]);
+ setAddNew(false);
+ setSelectedRole('');
+ setSelectedTime('');
+
+ }
+ }, [selectedRole, selectedTime, setRequirements])
+
+ const removeRequirement = useCallback((role: string) => {
+ setRequirements((state: any) => state.filter((r: any) => r.id === role));
+ }, [setRequirements])
+
return (
- <div className="requirements-field">
+ <>
+ <div className="requirements-field">
+ {
+ requirements.map((requirement) => (
+ <div className="requirement" key={requirement.role}>
+ <h2>{roles.find(role => role.id === requirement.role)?.label}</h2>
+ <div>{requirement.time}</div>
+ <div onClick={() => removeRequirement(requirement.role)}>delete</div>
+ </div>
+ ))
+ }
+ {
+ possibleRoles.length > 0 && (
+ <div className="add-btn" onClick={() => setAddNew(true)}>
+ new
+ </div>
+ )
+ }
+ </div>
{
- requirements.map((requirement) => (
- <div className="requirement" key={requirement.role + '/' + requirement.time}>
- <select>
- <option value={requirement.role}>{roles.find(r => r.id === requirement.role)}</option>
+ addNew && (
+ <Popup onClose={() => setAddNew(false)}>
+ <select onChange={(e) => setSelectedRole(e.target.value)}>
+ <option value="">Please select a role</option>
{
- possibleRoles.map(role => (
+ possibleRoles.map((role) => (
<option value={role.id} key={role.id}>{role.label}</option>
))
}
</select>
- <input type="number" value={requirement.time} min={0}
- />
- </div>
- ))
- }
- {
- possibleRoles.length > 0 && (
- <div className="add-btn" onClick={() => setRequirements(
- (state: any) => {
- setPossibleRoles(state => {
- return state.slice(1);
- })
- return [...state, {
- role: possibleRoles[0].id,
- time: 0
- }];
- }
- )}>
- new
- </div>
+ <input type="number" min={1} onChange={(e) => setSelectedTime(e.target.value)} />
+ <Button type="submit" onClick={addRequirement}>
+ Create new requirement
+ </Button>
+ </Popup>
+
)
}
- </div>
+ </>
)
}
--
GitLab