Everything Projects

frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx

@@ -43,7 +43,7 @@ export default function AddedSkills({
                     if (event.target.valueAsNumber < 1) return item;
                     return {
                         ...item,
-                        amount: event.target.valueAsNumber,
+                        slots: event.target.valueAsNumber,
                     };
                 }
                 return {
@@ -62,17 +62,18 @@ export default function AddedSkills({
                 <SkillContainer key={index}>
                     <TopContainer>
                         <TopLeftContainer>
-                            <SkillName>{skill.skill}</SkillName>
+                            <SkillName>{skill.skill.name}</SkillName>
 
                             <AmountInput
                                 type="number"
-                                value={skill.amount.toString()}
+                                value={skill.slots.toString()}
                                 placeholder="Amount"
                                 min={1}
                                 onChange={event => {
                                     updateSkills(event, index, true);
                                 }}
                             />
+                            {skill.slots === 1 ? <div>student</div> : <div>students</div>}
                         </TopLeftContainer>
                         <Delete
                             onClick={() => {

frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts

@@ -54,11 +54,12 @@ export const DescriptionInput = styled.input`
 `;
 
 export const AmountInput = styled.input`
-    margin: 5px;
+    margin: 5px 10px;
     padding: 2px 10px;
     background-color: #131329;
     color: white;
     border: none;
     border-radius: 5px;
     width: 100px;
+    direction: rtl;
 `;

frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx

@@ -39,7 +39,7 @@ export default function Coach({
                     if (e.key === "Enter") addCoach();
                 }}
                 list="users"
-                placeholder="Coach"
+                placeholder="Ex. Michael Scott"
             />
             <datalist id="users">
                 {availableCoaches.map((availableCoach, _index) => {

frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/InfoUrl/InfoUrl.tsx

@@ -0,0 +1,17 @@
+import { Input } from "../../styles";
+
+export default function InfoUrl({
+    infoUrl,
+    setInfoUrl,
+}: {
+    infoUrl: string;
+    setInfoUrl: (infoUrl: string) => void;
+}) {
+    return (
+        <Input
+            value={infoUrl}
+            onChange={e => setInfoUrl(e.target.value)}
+            placeholder="Ex. https://osoc.be/"
+        />
+    );
+}

frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/InfoUrl/index.ts

@@ -0,0 +1 @@
+export { default } from "./InfoUrl";

frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/Name.tsx

@@ -2,6 +2,10 @@ import { Input } from "../../styles";
 
 export default function Name({ name, setName }: { name: string; setName: (name: string) => void }) {
     return (
-        <Input value={name} onChange={e => setName(e.target.value)} placeholder="Project name" />
+        <Input
+            value={name}
+            onChange={e => setName(e.target.value)}
+            placeholder="Ex. UGent project"
+        />
     );
 }

frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx

@@ -22,7 +22,7 @@ export default function Partner({
                     if (e.key === "Enter") addPartner();
                 }}
                 list="partners"
-                placeholder="Partner"
+                placeholder="Ex. Open Knowledge Belgium"
             />
 
             <datalist id="partners">

frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx

@@ -1,7 +1,10 @@
+import { useEffect, useState } from "react";
 import { SkillProject } from "../../../../../data/interfaces/projects";
+import { Skill } from "../../../../../data/interfaces/skills";
+import { getSkills } from "../../../../../utils/api/skills";
 import { Input, AddButton } from "../../styles";
 
-export default function Skill({
+export default function SkillInput({
     skill,
     setSkill,
     skills,
@@ -12,7 +15,14 @@ export default function Skill({
     skills: SkillProject[];
     setSkills: (skills: SkillProject[]) => void;
 }) {
-    const availableSkills = ["Frontend", "Backend", "Database", "Design"];
+    const [availableSkills, setAvailableSkills] = useState<Skill[]>([]);
+
+    useEffect(() => {
+        async function callCoaches() {
+            setAvailableSkills((await getSkills())?.skills || []);
+        }
+        callCoaches();
+    }, []);
 
     return (
         <div>
@@ -22,12 +32,12 @@ export default function Skill({
                 onKeyDown={e => {
                     if (e.key === "Enter") addSkill();
                 }}
-                placeholder="Skill"
+                placeholder="Ex. Front-end Developer"
                 list="skills"
             />
             <datalist id="skills">
-                {availableSkills.map((availableCoach, _index) => {
-                    return <option key={_index} value={availableCoach} />;
+                {availableSkills.map((availableSkill, _index) => {
+                    return <option key={availableSkill.skillId} value={availableSkill.name} />;
                 })}
             </datalist>
 
@@ -36,12 +46,18 @@ export default function Skill({
     );
 
     function addSkill() {
-        if (availableSkills.some(availableSkill => availableSkill === skill)) {
+        let skillToAdd: Skill | undefined;
+        availableSkills.forEach(availableSkill => {
+            if (availableSkill.name === skill) {
+                skillToAdd = availableSkill;
+            }
+        });
+        if (skillToAdd) {
             const newSkills = [...skills];
             const newSkill: SkillProject = {
-                skill: skill,
+                skill: skillToAdd,
                 description: "",
-                amount: 1,
+                slots: 1,
             };
             newSkills.push(newSkill);
             setSkills(newSkills);

frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts

@@ -1,5 +1,4 @@
 export { default as NameInput } from "./Name";
-export { default as NumberOfStudentsInput } from "./NumberOfStudents";
 export { default as CoachInput } from "./Coach";
 export { default as SkillInput } from "./Skill";
 export { default as PartnerInput } from "./Partner";

frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts

@@ -1,10 +1,4 @@
-export {
-    NameInput,
-    NumberOfStudentsInput,
-    CoachInput,
-    SkillInput,
-    PartnerInput,
-} from "./InputFields";
+export { NameInput, CoachInput, SkillInput, PartnerInput } from "./InputFields";
 export { default as AddedPartners } from "./AddedPartners";
 export { default as AddedCoaches } from "./AddedCoaches";
 export { default as AddedSkills } from "./AddedSkills";

frontend/src/components/ProjectsComponents/ProjectCard/ProjectCard.tsx

@@ -25,6 +25,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { Project } from "../../../data/interfaces";
 import { useAuth } from "../../../contexts";
 import { Role } from "../../../data/enums";
+import { toast } from "react-toastify";
 
 /**
  *
@@ -43,7 +44,6 @@ export default function ProjectCard({
     const [show, setShow] = useState(false);
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
-
     const navigate = useNavigate();
     const params = useParams();
     const editionId = params.editionId!;
@@ -53,9 +53,10 @@ export default function ProjectCard({
         const success = await deleteProject(editionId, project.projectId);
         setShow(false);
         if (!success) {
-            alert("Failed to delete the project");
+            toast.error("Could not delete project", { toastId: "deleteProject" });
         } else {
             removeProject(project);
+            toast.success("Deleted project", { toastId: "deletedProject" });
         }
     }
 
@@ -94,7 +95,9 @@ export default function ProjectCard({
                     ))}
                 </Clients>
                 <NumberOfStudents>
-                    {project.numberOfStudents}
+                    {
+                        // project.numberOfStudents
+                    }
                     <BsPersonFill />
                 </NumberOfStudents>
             </ClientContainer>

frontend/src/data/interfaces/projects.ts

@@ -2,6 +2,9 @@
  * This file contains all interfaces used in projects pages.
  */
 
+import { Skill } from "./skills";
+import { Student } from "./students";
+
 /**
  * Data about a partner.
  */
@@ -14,35 +17,47 @@ export interface Partner {
  * Data about a coach.
  */
 export interface Coach {
+    /** The user's ID */
+    userId: number;
     /** The name of the coach */
     name: string;
+}
 
-    /** The user's ID */
-    userId: number;
+export interface ProjectRoleSuggestion {
+    projectRoleSuggestionId: number;
+    argumentation: string;
+    drafter: Coach;
+    student: Student;
+}
+
+export interface ProjectRole {
+    projectRoleId: number;
+    projectId: number;
+    description: string;
+    skill: Skill;
+    slots: number;
+    suggestions: ProjectRoleSuggestion[];
 }
 
 /**
  * Data about a project.
  * Such as a list of the partners and the coaches
  */
 export interface Project {
+    /** The project's ID */
+    projectId: number;
+
     /** The name of the project */
     name: string;
 
-    /** How many students are needed for this project */
-    numberOfStudents: number;
-
-    /** The partners of this project */
-    partners: Partner[];
+    /** An url with more info */
+    infoUrl: string;
 
     /** The coaches of this project */
     coaches: Coach[];
 
-    /** The name of the edition this project belongs to */
-    editionName: string;
-
-    /** The project's ID */
-    projectId: number;
+    /** The partners of this project */
+    partners: Partner[];
 }
 
 /**
@@ -58,13 +73,13 @@ export interface Projects {
  */
 export interface SkillProject {
     /** The name of the skill */
-    skill: string;
+    skill: Skill;
 
     /** More info about this skill in a specific project */
     description: string;
 
     /** Number of positions of this skill in a project */
-    amount: number;
+    slots: number;
 }
 
 /**
@@ -74,11 +89,8 @@ export interface CreateProject {
     /** The name of the new project */
     name: string;
 
-    /** Number of students the project needs */
-    number_of_students: number;
-
-    /** The required skills for the project */
-    skills: string[];
+    /** An url with more info */
+    info_url: string;
 
     /** The partners that belong to this project */
     partners: string[];
@@ -87,6 +99,17 @@ export interface CreateProject {
     coaches: number[];
 }
 
+export interface CreateProjectRole {
+    /** The id of the skill */
+    skill_id: number;
+
+    /** More info about this skill in a specific project */
+    description: string;
+
+    /** Number of positions of this skill in a project */
+    slots: number;
+}
+
 /**
  * Data about a place in a project
  */