From 93b6c8d3f7f899d2ac9398c17e0e3249fac4af67 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Sat, 16 Apr 2022 19:07:19 +0200 Subject: [PATCH 01/23] Created the route for a new project --- frontend/src/Router.tsx | 4 ++-- frontend/src/views/index.ts | 3 +-- .../CreateProjectPage/CreateProjectPage.tsx | 8 +++++++ .../projectViews/CreateProjectPage/index.ts | 1 + .../projectViews/CreateProjectPage/styles.ts | 3 +++ .../ProjectsPage/ProjectsPage.tsx | 21 ++++++++++++++++--- frontend/src/views/projectViews/index.ts | 3 ++- 7 files changed, 35 insertions(+), 8 deletions(-) create mode 100644 frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx create mode 100644 frontend/src/views/projectViews/CreateProjectPage/index.ts create mode 100644 frontend/src/views/projectViews/CreateProjectPage/styles.ts diff --git a/frontend/src/Router.tsx b/frontend/src/Router.tsx index eec3fd9ef..38f2fea9a 100644 --- a/frontend/src/Router.tsx +++ b/frontend/src/Router.tsx @@ -7,7 +7,7 @@ import { BrowserRouter, Navigate, Outlet, Route, Routes } from "react-router-dom import RegisterPage from "./views/RegisterPage"; import StudentsPage from "./views/StudentsPage/StudentsPage"; import UsersPage from "./views/UsersPage"; -import { ProjectsPage, ProjectDetailPage } from "./views"; +import { ProjectsPage, ProjectDetailPage, CreateProjectPage } from "./views"; import PendingPage from "./views/PendingPage"; import Footer from "./components/Footer"; import { useAuth } from "./contexts/auth-context"; @@ -60,7 +60,7 @@ export default function Router() { } /> }> {/* TODO create project page */} - } /> + } /> {/* TODO project page */} } /> diff --git a/frontend/src/views/index.ts b/frontend/src/views/index.ts index 137777e61..7394eff11 100644 --- a/frontend/src/views/index.ts +++ b/frontend/src/views/index.ts @@ -1,8 +1,7 @@ export * as Errors from "./errors"; export { default as LoginPage } from "./LoginPage"; export { default as PendingPage } from "./PendingPage"; -export { ProjectsPage } from "./projectViews"; -export { ProjectDetailPage } from "./projectViews" +export { ProjectsPage, ProjectDetailPage, CreateProjectPage } from "./projectViews"; export { default as RegisterPage } from "./RegisterPage"; export { default as StudentsPage } from "./StudentsPage"; export { default as UsersPage } from "./UsersPage"; diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx new file mode 100644 index 000000000..74fb95142 --- /dev/null +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -0,0 +1,8 @@ +export default function CreateProjectPage() { + + return( +
+ +
+ ) +} diff --git a/frontend/src/views/projectViews/CreateProjectPage/index.ts b/frontend/src/views/projectViews/CreateProjectPage/index.ts new file mode 100644 index 000000000..f20b5ad36 --- /dev/null +++ b/frontend/src/views/projectViews/CreateProjectPage/index.ts @@ -0,0 +1 @@ +export { default } from "./CreateProjectPage"; diff --git a/frontend/src/views/projectViews/CreateProjectPage/styles.ts b/frontend/src/views/projectViews/CreateProjectPage/styles.ts new file mode 100644 index 000000000..8e0438e88 --- /dev/null +++ b/frontend/src/views/projectViews/CreateProjectPage/styles.ts @@ -0,0 +1,3 @@ +import styled from "styled-components"; + +export const CreateProjectContainer = styled.div``; diff --git a/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx b/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx index 4e42a80cb..01314f2ad 100644 --- a/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx +++ b/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx @@ -4,16 +4,27 @@ import { ProjectCard } from "../../../components/ProjectsComponents"; import { CardsGrid, CreateButton, SearchButton, SearchField, OwnProject } from "./styles"; import { useAuth } from "../../../contexts/auth-context"; import { Project } from "../../../data/interfaces"; +import { useNavigate } from "react-router-dom"; +/** + * + * @returns The projects overview page where you can see all the projects. + * You can filter on your own projects or filter on project name. + * + */ function ProjectPage() { const [projectsAPI, setProjectsAPI] = useState>([]); - const [projects, setProjects] = useState>([]); const [gotProjects, setGotProjects] = useState(false); + // To filter projects we need to keep a separate list to avoid calling the API every time we change te filters. + const [projects, setProjects] = useState>([]); + + // Keep track of the set filters const [searchString, setSearchString] = useState(""); const [ownProjects, setOwnProjects] = useState(false); - const { userId } = useAuth(); + const navigate = useNavigate(); + const { userId, role } = useAuth(); /** * Uses to filter the results based onto search string and own projects @@ -66,7 +77,11 @@ function ProjectPage() { placeholder="project name" /> Search - Create Project + {role === 0 ? ( + navigate("/editions/summerof2022/projects/new")}> + Create Project + + ) : null} Date: Sat, 16 Apr 2022 23:58:44 +0200 Subject: [PATCH 02/23] Logic to create a new project Some basic page to create a project --- frontend/src/data/interfaces/projects.ts | 20 ++++++ frontend/src/utils/api/projects.ts | 32 +++++++++- .../CreateProjectPage/CreateProjectPage.tsx | 64 +++++++++++++++++-- .../projectViews/CreateProjectPage/styles.ts | 13 +++- 4 files changed, 122 insertions(+), 7 deletions(-) diff --git a/frontend/src/data/interfaces/projects.ts b/frontend/src/data/interfaces/projects.ts index 42a322b9f..ad8569d99 100644 --- a/frontend/src/data/interfaces/projects.ts +++ b/frontend/src/data/interfaces/projects.ts @@ -53,6 +53,26 @@ export interface Projects { projects: Project[]; } +/** + * Used when creating a new project + */ +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[]; + + /** The partners that belong to this project */ + partners: Partner[]; + + /** The users that will coach this project */ + coaches: Coach[]; +} + /** * Data about a place in a project */ diff --git a/frontend/src/utils/api/projects.ts b/frontend/src/utils/api/projects.ts index e49016530..384b6c046 100644 --- a/frontend/src/utils/api/projects.ts +++ b/frontend/src/utils/api/projects.ts @@ -1,5 +1,5 @@ import axios from "axios"; -import { Projects, Project } from "../../data/interfaces/projects"; +import { Projects, Project, CreateProject, Coach, Partner } from "../../data/interfaces/projects"; import { axiosInstance } from "./api"; export async function getProjects(edition: string) { @@ -30,6 +30,36 @@ export async function getProject(edition: string, projectId: number) { } } +export async function createProject( + edition: string, + name: string, + numberOfStudents: number, + skills: string[], + partners: Partner[], + coaches: Coach[] +) { + const payload: CreateProject = { + name: name, + number_of_students: numberOfStudents, + skills: skills, + partners: partners, + coaches: coaches, + }; + + try { + const response = await axiosInstance.post("editions/" + edition + "/projects/", payload); + const project = response.data as Project; + + return project; + } catch (error) { + if (axios.isAxiosError(error)) { + return null; + } else { + throw error; + } + } +} + export async function deleteProject(edition: string, projectId: number) { try { await axiosInstance.delete("/editions/" + edition + "/projects/" + projectId); diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index 74fb95142..8cc1f5726 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -1,8 +1,62 @@ +import { CreateProjectContainer, Input } from "./styles"; +import { createProject } from "../../../utils/api/projects"; +import { useState } from "react"; +import { GoBack } from "../ProjectDetailPage/styles"; +import { BiArrowBack } from "react-icons/bi"; +import { useNavigate } from "react-router-dom"; + export default function CreateProjectPage() { + const [name, setName] = useState(""); + const [numberOfStudents, setNumberOfStudents] = useState(0); + const [skills, setSkills] = useState([]); + const [partners, setPartners] = useState([]); + const [coaches, setCoaches] = useState([]); + + const navigate = useNavigate(); - return( -
- -
- ) + return ( + + navigate("/editions/2022/projects/")}> + + Cancel + +

New Project

+ setName(e.target.value)} + placeholder="Project name" + /> +
+ setNumberOfStudents(e.target.valueAsNumber)} + placeholder="Number of students" + /> +
+
+ setCoaches([])} placeholder="Coach" /> + +
+
+ setSkills([])} placeholder="Skill" /> + +
+
+ setPartners([])} + placeholder="Partner" + /> + +
+ + + ); } diff --git a/frontend/src/views/projectViews/CreateProjectPage/styles.ts b/frontend/src/views/projectViews/CreateProjectPage/styles.ts index 8e0438e88..34583e4de 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/styles.ts +++ b/frontend/src/views/projectViews/CreateProjectPage/styles.ts @@ -1,3 +1,14 @@ import styled from "styled-components"; -export const CreateProjectContainer = styled.div``; +export const CreateProjectContainer = styled.div` + margin: 20px; +`; + +export const Input = styled.input` + margin-top: 10px; + padding: 5px 10px; + background-color: #131329; + color: white; + border: none; + border-radius: 5px; +`; From 738f5c73cea40982a0fca3b214c4ba5cf84ebe6f Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Sun, 17 Apr 2022 00:26:37 +0200 Subject: [PATCH 03/23] basic adding of coaches using datalist to show options --- frontend/src/data/interfaces/projects.ts | 2 +- frontend/src/utils/api/projects.ts | 4 +-- .../CreateProjectPage/CreateProjectPage.tsx | 35 ++++++++++++++----- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/frontend/src/data/interfaces/projects.ts b/frontend/src/data/interfaces/projects.ts index ad8569d99..e47dac169 100644 --- a/frontend/src/data/interfaces/projects.ts +++ b/frontend/src/data/interfaces/projects.ts @@ -70,7 +70,7 @@ export interface CreateProject { partners: Partner[]; /** The users that will coach this project */ - coaches: Coach[]; + coaches: string[]; } /** diff --git a/frontend/src/utils/api/projects.ts b/frontend/src/utils/api/projects.ts index 384b6c046..acbb0da4d 100644 --- a/frontend/src/utils/api/projects.ts +++ b/frontend/src/utils/api/projects.ts @@ -1,5 +1,5 @@ import axios from "axios"; -import { Projects, Project, CreateProject, Coach, Partner } from "../../data/interfaces/projects"; +import { Projects, Project, CreateProject, Partner } from "../../data/interfaces/projects"; import { axiosInstance } from "./api"; export async function getProjects(edition: string) { @@ -36,7 +36,7 @@ export async function createProject( numberOfStudents: number, skills: string[], partners: Partner[], - coaches: Coach[] + coaches: string[] ) { const payload: CreateProject = { name: name, diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index 8cc1f5726..f256c1ee8 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -10,7 +10,8 @@ export default function CreateProjectPage() { const [numberOfStudents, setNumberOfStudents] = useState(0); const [skills, setSkills] = useState([]); const [partners, setPartners] = useState([]); - const [coaches, setCoaches] = useState([]); + const [coach, setCoach] = useState(""); + const [coaches, setCoaches] = useState([]); const navigate = useNavigate(); @@ -26,6 +27,7 @@ export default function CreateProjectPage() { onChange={e => setName(e.target.value)} placeholder="Project name" /> +
- setCoaches([])} placeholder="Coach" /> - + setCoach(e.target.value)} + list="users" + placeholder="Coach" + /> + + + +
+
+ {coaches.map((element, _index )=> (
{element}
))}
setSkills([])} placeholder="Skill" />
- setPartners([])} - placeholder="Partner" - /> + setPartners([])} placeholder="Partner" />
- {coaches.map((element, _index )=> (
{element}
))} + {coaches.map((element, _index) => ( +
+ {element} + +
+ ))}
setSkills([])} placeholder="Skill" /> From 3bef3bc47f125694a461cccce8a0b73b5d3429d8 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Sun, 17 Apr 2022 12:28:11 +0200 Subject: [PATCH 05/23] bootstrap alerts when invalid coach is added --- .../CreateProjectPage/CreateProjectPage.tsx | 43 ++++++++++++++++--- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index 9bd818da9..35015a845 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -4,14 +4,19 @@ import { useState } from "react"; import { GoBack } from "../ProjectDetailPage/styles"; import { BiArrowBack } from "react-icons/bi"; import { useNavigate } from "react-router-dom"; +import Alert from "react-bootstrap/Alert"; export default function CreateProjectPage() { const [name, setName] = useState(""); const [numberOfStudents, setNumberOfStudents] = useState(0); const [skills, setSkills] = useState([]); const [partners, setPartners] = useState([]); + const [coach, setCoach] = useState(""); const [coaches, setCoaches] = useState([]); + const availableCoaches = ["coach1", "coach2", "admin1", "admin2"]; // TODO get users from API call + + const [showAlert, setShowAlert] = useState(false); const navigate = useNavigate(); @@ -45,20 +50,27 @@ export default function CreateProjectPage() { placeholder="Coach" /> - + +
{coaches.map((element, _index) => ( @@ -94,3 +106,20 @@ export default function CreateProjectPage() { ); } + +function AlertDismissibleExample({ + show, + setShow, +}: { + show: boolean; + setShow: (state: boolean) => void; +}) { + if (show) { + return ( + setShow(false)} dismissible> + Please choose an option from the list + + ); + } + return null; +} From 56935546afca9bc25c695e891a332f4012f4cea1 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Sun, 17 Apr 2022 15:01:12 +0200 Subject: [PATCH 06/23] style the create project page --- .../CreateProjectPage/CreateProjectPage.tsx | 56 ++++++++++--------- .../projectViews/CreateProjectPage/styles.ts | 43 ++++++++++++++ 2 files changed, 73 insertions(+), 26 deletions(-) diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index 35015a845..f7fc1bacb 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -1,14 +1,23 @@ -import { CreateProjectContainer, Input } from "./styles"; +import { + CreateProjectContainer, + Input, + AddButton, + RemoveButton, + CreateButton, + AddedCoach, + WarningContainer, +} from "./styles"; import { createProject } from "../../../utils/api/projects"; import { useState } from "react"; import { GoBack } from "../ProjectDetailPage/styles"; import { BiArrowBack } from "react-icons/bi"; import { useNavigate } from "react-router-dom"; import Alert from "react-bootstrap/Alert"; +import { TiDeleteOutline } from "react-icons/ti"; export default function CreateProjectPage() { const [name, setName] = useState(""); - const [numberOfStudents, setNumberOfStudents] = useState(0); + const [numberOfStudents, setNumberOfStudents] = useState(0); const [skills, setSkills] = useState([]); const [partners, setPartners] = useState([]); @@ -38,7 +47,9 @@ export default function CreateProjectPage() { type="number" min="0" value={numberOfStudents} - onChange={e => setNumberOfStudents(e.target.valueAsNumber)} + onChange={e => { + setNumberOfStudents(e.target.valueAsNumber); + }} placeholder="Number of students" />
@@ -55,7 +66,7 @@ export default function CreateProjectPage() { })} - - + + + +
{coaches.map((element, _index) => ( -
+ {element} - -
+ + + ))}
setSkills([])} placeholder="Skill" /> - + Add skill
setPartners([])} placeholder="Partner" /> - + Add partner
- + ); } -function AlertDismissibleExample({ - show, - setShow, -}: { - show: boolean; - setShow: (state: boolean) => void; -}) { +function BadCoachAlert({ show, setShow }: { show: boolean; setShow: (state: boolean) => void }) { if (show) { return ( setShow(false)} dismissible> diff --git a/frontend/src/views/projectViews/CreateProjectPage/styles.ts b/frontend/src/views/projectViews/CreateProjectPage/styles.ts index 34583e4de..9953cbbaa 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/styles.ts +++ b/frontend/src/views/projectViews/CreateProjectPage/styles.ts @@ -12,3 +12,46 @@ export const Input = styled.input` border: none; border-radius: 5px; `; + +export const AddButton = styled.button` + padding: 5px 10px; + background-color: #00bfff; + color: white; + border: none; + margin-left: 5px; + border-radius: 5px; +`; + +export const RemoveButton = styled.button` + padding: 0px 2.5px; + background-color: #f14a3b; + color: white; + border: none; + margin-left: 10px; + border-radius: 1px; + display: flex; + align-items: center; +`; + +export const CreateButton = styled.button` + padding: 5px 10px; + background-color: #44dba4; + color: white; + border: none; + margin-top: 10px; + border-radius: 5px; +`; + +export const AddedCoach = styled.div` + margin: 5px; + padding: 5px; + background-color: #1a1a36; + max-width: fit-content; + border-radius: 5px; + display: flex; +`; + +export const WarningContainer = styled.div` + max-width: fit-content; + margin-top: 10px; +`; From 2d148bbc180c8bc558efefcdad7ba7e3ba31ea9b Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Sun, 17 Apr 2022 15:44:47 +0200 Subject: [PATCH 07/23] using more separate components --- .../InputFields/Coach/Coach.tsx | 61 +++++++++++++++ .../InputFields/Coach/index.ts | 1 + .../InputFields/Name/Name.tsx | 7 ++ .../InputFields/Name/index.ts | 1 + .../NumberOfStudents/NumberOfStudents.tsx | 23 ++++++ .../InputFields/NumberOfStudents/index.ts | 1 + .../ProjectsComponents/InputFields/index.ts | 3 + .../ProjectsComponents/InputFields/styles.ts | 24 ++++++ .../CreateProjectPage/CreateProjectPage.tsx | 77 ++++--------------- .../projectViews/CreateProjectPage/styles.ts | 5 -- 10 files changed, 137 insertions(+), 66 deletions(-) create mode 100644 frontend/src/components/ProjectsComponents/InputFields/Coach/Coach.tsx create mode 100644 frontend/src/components/ProjectsComponents/InputFields/Coach/index.ts create mode 100644 frontend/src/components/ProjectsComponents/InputFields/Name/Name.tsx create mode 100644 frontend/src/components/ProjectsComponents/InputFields/Name/index.ts create mode 100644 frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx create mode 100644 frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/index.ts create mode 100644 frontend/src/components/ProjectsComponents/InputFields/index.ts create mode 100644 frontend/src/components/ProjectsComponents/InputFields/styles.ts diff --git a/frontend/src/components/ProjectsComponents/InputFields/Coach/Coach.tsx b/frontend/src/components/ProjectsComponents/InputFields/Coach/Coach.tsx new file mode 100644 index 000000000..4bae326f5 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/InputFields/Coach/Coach.tsx @@ -0,0 +1,61 @@ +import { useState } from "react"; +import { Alert } from "react-bootstrap"; +import { AddButton, Input, WarningContainer } from "../styles"; + +export default function Coach({ + coach, + setCoach, + coaches, + setCoaches, +}: { + coach: string; + setCoach: (coach: string) => void; + coaches: string[]; + setCoaches: (coaches: string[]) => void; +}) { + const [showAlert, setShowAlert] = useState(false); + const availableCoaches = ["coach1", "coach2", "admin1", "admin2"]; // TODO get users from API call + + return ( +
+ setCoach(e.target.value)} + list="users" + placeholder="Coach" + /> + + {availableCoaches.map((availableCoach, _index) => { + return + + { + if (availableCoaches.some(availableCoach => availableCoach === coach)) { + const newCoaches = [...coaches]; + newCoaches.push(coach); + setCoaches(newCoaches); + setShowAlert(false); + } else setShowAlert(true); + }} + > + Add coach + + + + +
+ ); +} + +function BadCoachAlert({ show, setShow }: { show: boolean; setShow: (state: boolean) => void }) { + if (show) { + return ( + setShow(false)} dismissible> + Please choose an option from the list + + ); + } + return null; +} diff --git a/frontend/src/components/ProjectsComponents/InputFields/Coach/index.ts b/frontend/src/components/ProjectsComponents/InputFields/Coach/index.ts new file mode 100644 index 000000000..07c25c743 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/InputFields/Coach/index.ts @@ -0,0 +1 @@ +export { default } from "./Coach"; diff --git a/frontend/src/components/ProjectsComponents/InputFields/Name/Name.tsx b/frontend/src/components/ProjectsComponents/InputFields/Name/Name.tsx new file mode 100644 index 000000000..c295f2b98 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/InputFields/Name/Name.tsx @@ -0,0 +1,7 @@ +import { Input } from "../styles" + +export default function Name({ name, setName }: { name: string; setName: (name: string) => void }) { + return ( + setName(e.target.value)} placeholder="Project name" /> + ); +} diff --git a/frontend/src/components/ProjectsComponents/InputFields/Name/index.ts b/frontend/src/components/ProjectsComponents/InputFields/Name/index.ts new file mode 100644 index 000000000..4e90e41d5 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/InputFields/Name/index.ts @@ -0,0 +1 @@ +export { default } from "./Name"; diff --git a/frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx b/frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx new file mode 100644 index 000000000..52dfc9999 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx @@ -0,0 +1,23 @@ +import { Input } from "../styles"; + +export default function NumberOfStudents({ + numberOfStudents, + setNumberOfStudents, +}: { + numberOfStudents: number; + setNumberOfStudents: (numberOfStudents: number) => void; +}) { + return ( +
+ { + setNumberOfStudents(e.target.valueAsNumber); + }} + placeholder="Number of students" + /> +
+ ); +} diff --git a/frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/index.ts b/frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/index.ts new file mode 100644 index 000000000..4eef7d36a --- /dev/null +++ b/frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/index.ts @@ -0,0 +1 @@ +export {default} from "./NumberOfStudents" \ No newline at end of file diff --git a/frontend/src/components/ProjectsComponents/InputFields/index.ts b/frontend/src/components/ProjectsComponents/InputFields/index.ts new file mode 100644 index 000000000..c34286e21 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/InputFields/index.ts @@ -0,0 +1,3 @@ +export { default as NameInput } from "./Name"; +export { default as NumberOfStudentsInput } from "./NumberOfStudents"; +export { default as CoachInput } from "./Coach"; diff --git a/frontend/src/components/ProjectsComponents/InputFields/styles.ts b/frontend/src/components/ProjectsComponents/InputFields/styles.ts new file mode 100644 index 000000000..8806b3932 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/InputFields/styles.ts @@ -0,0 +1,24 @@ +import styled from "styled-components"; + +export const Input = styled.input` + margin-top: 10px; + padding: 5px 10px; + background-color: #131329; + color: white; + border: none; + border-radius: 5px; +`; + +export const AddButton = styled.button` + padding: 5px 10px; + background-color: #00bfff; + color: white; + border: none; + margin-left: 5px; + border-radius: 5px; +`; + +export const WarningContainer = styled.div` + max-width: fit-content; + margin-top: 10px; +`; diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index f7fc1bacb..6154c2d0a 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -5,15 +5,18 @@ import { RemoveButton, CreateButton, AddedCoach, - WarningContainer, } from "./styles"; import { createProject } from "../../../utils/api/projects"; import { useState } from "react"; +import { useNavigate } from "react-router-dom"; import { GoBack } from "../ProjectDetailPage/styles"; import { BiArrowBack } from "react-icons/bi"; -import { useNavigate } from "react-router-dom"; -import Alert from "react-bootstrap/Alert"; import { TiDeleteOutline } from "react-icons/ti"; +import { + NameInput, + NumberOfStudentsInput, + CoachInput, +} from "../../../components/ProjectsComponents/InputFields"; export default function CreateProjectPage() { const [name, setName] = useState(""); @@ -23,9 +26,6 @@ export default function CreateProjectPage() { const [coach, setCoach] = useState(""); const [coaches, setCoaches] = useState([]); - const availableCoaches = ["coach1", "coach2", "admin1", "admin2"]; // TODO get users from API call - - const [showAlert, setShowAlert] = useState(false); const navigate = useNavigate(); @@ -36,52 +36,18 @@ export default function CreateProjectPage() { Cancel

New Project

- setName(e.target.value)} - placeholder="Project name" + + + -
- { - setNumberOfStudents(e.target.valueAsNumber); - }} - placeholder="Number of students" - /> -
-
- setCoach(e.target.value)} - list="users" - placeholder="Coach" - /> - - {availableCoaches.map((availableCoach, _index) => { - return - - { - if (availableCoaches.some(availableCoach => availableCoach === coach)) { - const newCoaches = [...coaches]; - newCoaches.push(coach); - setCoaches(newCoaches); - setShowAlert(false); - } else setShowAlert(true); - }} - > - Add coach - - - - -
{coaches.map((element, _index) => ( @@ -116,14 +82,3 @@ export default function CreateProjectPage() { ); } - -function BadCoachAlert({ show, setShow }: { show: boolean; setShow: (state: boolean) => void }) { - if (show) { - return ( - setShow(false)} dismissible> - Please choose an option from the list - - ); - } - return null; -} diff --git a/frontend/src/views/projectViews/CreateProjectPage/styles.ts b/frontend/src/views/projectViews/CreateProjectPage/styles.ts index 9953cbbaa..626fd3333 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/styles.ts +++ b/frontend/src/views/projectViews/CreateProjectPage/styles.ts @@ -50,8 +50,3 @@ export const AddedCoach = styled.div` border-radius: 5px; display: flex; `; - -export const WarningContainer = styled.div` - max-width: fit-content; - margin-top: 10px; -`; From 1de820cdd69e9d239fb7da5b0f8f2ce5fc85f2c1 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Sun, 17 Apr 2022 16:07:48 +0200 Subject: [PATCH 08/23] more components and better imports --- .../AddedCoaches/AddedCoaches.tsx | 29 ++++++++++++++++ .../AddedCoaches/index.ts | 1 + .../InputFields/Coach/Coach.tsx | 2 +- .../InputFields/Coach/index.ts | 0 .../InputFields/Name/Name.tsx | 2 +- .../InputFields/Name/index.ts | 0 .../NumberOfStudents/NumberOfStudents.tsx | 2 +- .../InputFields/NumberOfStudents/index.ts | 0 .../InputFields/index.ts | 0 .../CreateProjectComponents/index.ts | 2 ++ .../styles.ts | 20 +++++++++++ .../CreateProjectPage/CreateProjectPage.tsx | 34 +++++-------------- .../projectViews/CreateProjectPage/styles.ts | 9 +---- 13 files changed, 64 insertions(+), 37 deletions(-) create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts rename frontend/src/components/ProjectsComponents/{ => CreateProjectComponents}/InputFields/Coach/Coach.tsx (96%) rename frontend/src/components/ProjectsComponents/{ => CreateProjectComponents}/InputFields/Coach/index.ts (100%) rename frontend/src/components/ProjectsComponents/{ => CreateProjectComponents}/InputFields/Name/Name.tsx (85%) rename frontend/src/components/ProjectsComponents/{ => CreateProjectComponents}/InputFields/Name/index.ts (100%) rename frontend/src/components/ProjectsComponents/{ => CreateProjectComponents}/InputFields/NumberOfStudents/NumberOfStudents.tsx (93%) rename frontend/src/components/ProjectsComponents/{ => CreateProjectComponents}/InputFields/NumberOfStudents/index.ts (100%) rename frontend/src/components/ProjectsComponents/{ => CreateProjectComponents}/InputFields/index.ts (100%) create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts rename frontend/src/components/ProjectsComponents/{InputFields => CreateProjectComponents}/styles.ts (54%) diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx new file mode 100644 index 000000000..4791f30b2 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx @@ -0,0 +1,29 @@ +import { TiDeleteOutline } from "react-icons/ti"; +import { AddedCoach, RemoveButton } from "../styles"; + +export default function AddedCoaches({ + coaches, + setCoaches, +}: { + coaches: string[]; + setCoaches: (coaches: string[]) => void; +}) { + return ( +
+ {coaches.map((element, _index) => ( + + {element} + { + const newCoaches = [...coaches]; + newCoaches.splice(_index, 1); + setCoaches(newCoaches); + }} + > + + + + ))} +
+ ); +} diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts new file mode 100644 index 000000000..fe048b5a7 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts @@ -0,0 +1 @@ +export { default } from "./AddedCoaches"; diff --git a/frontend/src/components/ProjectsComponents/InputFields/Coach/Coach.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx similarity index 96% rename from frontend/src/components/ProjectsComponents/InputFields/Coach/Coach.tsx rename to frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx index 4bae326f5..65dfaa2ad 100644 --- a/frontend/src/components/ProjectsComponents/InputFields/Coach/Coach.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { Alert } from "react-bootstrap"; -import { AddButton, Input, WarningContainer } from "../styles"; +import { AddButton, Input, WarningContainer } from "../../styles"; export default function Coach({ coach, diff --git a/frontend/src/components/ProjectsComponents/InputFields/Coach/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/index.ts similarity index 100% rename from frontend/src/components/ProjectsComponents/InputFields/Coach/index.ts rename to frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/index.ts diff --git a/frontend/src/components/ProjectsComponents/InputFields/Name/Name.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/Name.tsx similarity index 85% rename from frontend/src/components/ProjectsComponents/InputFields/Name/Name.tsx rename to frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/Name.tsx index c295f2b98..0a74208a8 100644 --- a/frontend/src/components/ProjectsComponents/InputFields/Name/Name.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/Name.tsx @@ -1,4 +1,4 @@ -import { Input } from "../styles" +import { Input } from "../../styles" export default function Name({ name, setName }: { name: string; setName: (name: string) => void }) { return ( diff --git a/frontend/src/components/ProjectsComponents/InputFields/Name/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/index.ts similarity index 100% rename from frontend/src/components/ProjectsComponents/InputFields/Name/index.ts rename to frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/index.ts diff --git a/frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx similarity index 93% rename from frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx rename to frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx index 52dfc9999..33279edf6 100644 --- a/frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx @@ -1,4 +1,4 @@ -import { Input } from "../styles"; +import { Input } from "../../styles"; export default function NumberOfStudents({ numberOfStudents, diff --git a/frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/index.ts similarity index 100% rename from frontend/src/components/ProjectsComponents/InputFields/NumberOfStudents/index.ts rename to frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/index.ts diff --git a/frontend/src/components/ProjectsComponents/InputFields/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts similarity index 100% rename from frontend/src/components/ProjectsComponents/InputFields/index.ts rename to frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts new file mode 100644 index 000000000..643b4a8f3 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts @@ -0,0 +1,2 @@ +export { NameInput, NumberOfStudentsInput, CoachInput } from "./InputFields"; +export { default as AddedCoaches } from "./AddedCoaches"; diff --git a/frontend/src/components/ProjectsComponents/InputFields/styles.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts similarity index 54% rename from frontend/src/components/ProjectsComponents/InputFields/styles.ts rename to frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts index 8806b3932..8d199ae87 100644 --- a/frontend/src/components/ProjectsComponents/InputFields/styles.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts @@ -18,6 +18,26 @@ export const AddButton = styled.button` border-radius: 5px; `; +export const RemoveButton = styled.button` + padding: 0px 2.5px; + background-color: #f14a3b; + color: white; + border: none; + margin-left: 10px; + border-radius: 1px; + display: flex; + align-items: center; +`; + +export const AddedCoach = styled.div` + margin: 5px; + padding: 5px; + background-color: #1a1a36; + max-width: fit-content; + border-radius: 5px; + display: flex; +`; + export const WarningContainer = styled.div` max-width: fit-content; margin-top: 10px; diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index 6154c2d0a..f867ca09a 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -1,22 +1,15 @@ -import { - CreateProjectContainer, - Input, - AddButton, - RemoveButton, - CreateButton, - AddedCoach, -} from "./styles"; +import { CreateProjectContainer, Input, AddButton, CreateButton } from "./styles"; import { createProject } from "../../../utils/api/projects"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; import { GoBack } from "../ProjectDetailPage/styles"; import { BiArrowBack } from "react-icons/bi"; -import { TiDeleteOutline } from "react-icons/ti"; import { NameInput, NumberOfStudentsInput, CoachInput, -} from "../../../components/ProjectsComponents/InputFields"; + AddedCoaches, +} from "../../../components/ProjectsComponents/CreateProjectComponents"; export default function CreateProjectPage() { const [name, setName] = useState(""); @@ -24,6 +17,7 @@ export default function CreateProjectPage() { const [skills, setSkills] = useState([]); const [partners, setPartners] = useState([]); + // States for coaches const [coach, setCoach] = useState(""); const [coaches, setCoaches] = useState([]); @@ -36,34 +30,22 @@ export default function CreateProjectPage() { Cancel

New Project

+ + + + -
- {coaches.map((element, _index) => ( - - {element} - { - const newCoaches = [...coaches]; - newCoaches.splice(_index, 1); - setCoaches(newCoaches); - }} - > - - - - ))} -
setSkills([])} placeholder="Skill" /> Add skill diff --git a/frontend/src/views/projectViews/CreateProjectPage/styles.ts b/frontend/src/views/projectViews/CreateProjectPage/styles.ts index 626fd3333..dae106a68 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/styles.ts +++ b/frontend/src/views/projectViews/CreateProjectPage/styles.ts @@ -42,11 +42,4 @@ export const CreateButton = styled.button` border-radius: 5px; `; -export const AddedCoach = styled.div` - margin: 5px; - padding: 5px; - background-color: #1a1a36; - max-width: fit-content; - border-radius: 5px; - display: flex; -`; + From 3896b2e93a062c0e277593d25717d3cc21902267 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Mon, 18 Apr 2022 17:19:13 +0200 Subject: [PATCH 09/23] 2 more components for input fields new icon to delete a project --- .../InputFields/Partner/Partner.tsx | 16 +++++++++ .../InputFields/Partner/index.ts | 1 + .../InputFields/Skill/Skill.tsx | 16 +++++++++ .../InputFields/Skill/index.ts | 1 + .../InputFields/index.ts | 2 ++ .../CreateProjectComponents/index.ts | 8 ++++- .../ProjectCard/ProjectCard.tsx | 4 +-- frontend/src/data/interfaces/projects.ts | 2 +- frontend/src/utils/api/projects.ts | 4 +-- .../CreateProjectPage/CreateProjectPage.tsx | 34 +++++++++++-------- 10 files changed, 68 insertions(+), 20 deletions(-) create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/index.ts create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/index.ts diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx new file mode 100644 index 000000000..385bae14d --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx @@ -0,0 +1,16 @@ +import { Input, AddButton } from "../../styles"; + +export default function Partner({ + partners, + setPartners, +}: { + partners: string[]; + setPartners: (partners: string[]) => void; +}) { + return ( +
+ setPartners([])} placeholder="Partner" /> + Add partner +
+ ); +} diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/index.ts new file mode 100644 index 000000000..ccf0fba3a --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/index.ts @@ -0,0 +1 @@ +export { default } from "./Partner"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx new file mode 100644 index 000000000..fc67d4654 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx @@ -0,0 +1,16 @@ +import { Input, AddButton } from "../../styles"; + +export default function Skill({ + skills, + setSkills, +}: { + skills: string[]; + setSkills: (skills: string[]) => void; +}) { + return ( +
+ setSkills([])} placeholder="Skill" /> + Add skill +
+ ); +} diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/index.ts new file mode 100644 index 000000000..c5a820d40 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/index.ts @@ -0,0 +1 @@ +export { default } from "./Skill"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts index c34286e21..b0235977d 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts @@ -1,3 +1,5 @@ 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"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts index 643b4a8f3..184b4049a 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts @@ -1,2 +1,8 @@ -export { NameInput, NumberOfStudentsInput, CoachInput } from "./InputFields"; +export { + NameInput, + NumberOfStudentsInput, + CoachInput, + SkillInput, + PartnerInput, +} from "./InputFields"; export { default as AddedCoaches } from "./AddedCoaches"; diff --git a/frontend/src/components/ProjectsComponents/ProjectCard/ProjectCard.tsx b/frontend/src/components/ProjectsComponents/ProjectCard/ProjectCard.tsx index 0441a853c..d42e61134 100644 --- a/frontend/src/components/ProjectsComponents/ProjectCard/ProjectCard.tsx +++ b/frontend/src/components/ProjectsComponents/ProjectCard/ProjectCard.tsx @@ -14,7 +14,7 @@ import { } from "./styles"; import { BsPersonFill } from "react-icons/bs"; -import { TiDeleteOutline } from "react-icons/ti"; +import { HiOutlineTrash } from "react-icons/hi"; import { useState } from "react"; @@ -60,7 +60,7 @@ export default function ProjectCard({ - + (0); - const [skills, setSkills] = useState([]); - const [partners, setPartners] = useState([]); + const [skills, setSkills] = useState([]); + const [partners, setPartners] = useState([]); // States for coaches const [coach, setCoach] = useState(""); @@ -46,18 +48,22 @@ export default function CreateProjectPage() { /> -
- setSkills([])} placeholder="Skill" /> - Add skill -
-
- setPartners([])} placeholder="Partner" /> - Add partner -
+ + - createProject("2022", name, numberOfStudents!, skills, partners, coaches) - } + onClick={async () => { + const response = await createProject( + "2022", + name, + numberOfStudents!, + skills, + partners, + coaches + ); + if (response) { + navigate("/editions/2022/projects/"); + } else alert("Something went wrong :("); + }} > Create Project From 82ed93bb05bb6ed303bbdb22465f0b887d623250 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Sun, 24 Apr 2022 17:55:13 +0200 Subject: [PATCH 10/23] placeholders for adding skills --- .../AddedSkills/AddedSkills.tsx | 58 +++++++++++++++++++ .../InputFields/Coach/Coach.tsx | 10 ++-- .../InputFields/Skill/Skill.tsx | 44 ++++++++++++-- frontend/src/data/interfaces/projects.ts | 14 +++++ .../CreateProjectPage/CreateProjectPage.tsx | 13 ++++- 5 files changed, 128 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx new file mode 100644 index 000000000..06fa1ef40 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx @@ -0,0 +1,58 @@ +import { SkillProject } from "../../../../data/interfaces/projects"; + +export default function AddedSkills({ + skills, + setSkills, +}: { + skills: SkillProject[]; + setSkills: (skills: SkillProject[]) => void; +}) { + return ( +
+ {skills.map((skill, _index) => ( +
+ {skill.skill} + { + const newList = skills.map((item, otherIndex) => { + if (_index === otherIndex) { + const updatedItem = { + ...item, + amount: event.target.valueAsNumber, + }; + return updatedItem; + } + return item; + }); + + setSkills(newList); + }} + /> + { + const newList = skills.map((item, otherIndex) => { + if (_index === otherIndex) { + const updatedItem = { + ...item, + description: event.target.value, + }; + return updatedItem; + } + return item; + }); + + setSkills(newList); + }} + /> +
+ ))} +
+ ); +} diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx index 65dfaa2ad..544330504 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx @@ -33,10 +33,12 @@ export default function Coach({ { if (availableCoaches.some(availableCoach => availableCoach === coach)) { - const newCoaches = [...coaches]; - newCoaches.push(coach); - setCoaches(newCoaches); - setShowAlert(false); + if (!coaches.includes(coach)) { + const newCoaches = [...coaches]; + newCoaches.push(coach); + setCoaches(newCoaches); + setShowAlert(false); + } } else setShowAlert(true); }} > diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx index fc67d4654..1746ab745 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx @@ -1,16 +1,52 @@ +import { SkillProject } from "../../../../../data/interfaces/projects"; import { Input, AddButton } from "../../styles"; export default function Skill({ + skill, + setSkill, skills, setSkills, }: { - skills: string[]; - setSkills: (skills: string[]) => void; + skill: string; + setSkill: (skill: string) => void; + skills: SkillProject[]; + setSkills: (skills: SkillProject[]) => void; }) { + const availableSkills = ["Frontend", "Backend", "Database", "Design"]; + return (
- setSkills([])} placeholder="Skill" /> - Add skill + setSkill(e.target.value)} + placeholder="Skill" + list="skills" + /> + + {availableSkills.map((availableCoach, _index) => { + return + + { + + if (availableSkills.some(availableSkill => availableSkill === skill)) { + if (!skills.some(existingSkill => existingSkill.skill === skill)) { + const newSkills = [...skills]; + const newSkill: SkillProject = { + skill: skill, + description: undefined, + amount: undefined, + }; + newSkills.push(newSkill); + setSkills(newSkills); + } + } + }} + > + Add skill +
); } diff --git a/frontend/src/data/interfaces/projects.ts b/frontend/src/data/interfaces/projects.ts index 43051f1dd..18aeb1730 100644 --- a/frontend/src/data/interfaces/projects.ts +++ b/frontend/src/data/interfaces/projects.ts @@ -53,6 +53,20 @@ export interface Projects { projects: Project[]; } +/** + * Used to add skills to a project + */ +export interface SkillProject { + /** The name of the skill */ + skill: string; + + /** More info about this skill in a specific project */ + description: string | undefined; + + /** Number of positions of this skill in a project */ + amount: number | undefined; +} + /** * Used when creating a new project */ diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index b7dcef062..f4ef0400e 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -12,17 +12,22 @@ import { PartnerInput, AddedCoaches, } from "../../../components/ProjectsComponents/CreateProjectComponents"; +import { SkillProject } from "../../../data/interfaces/projects"; +import AddedSkills from "../../../components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills"; export default function CreateProjectPage() { const [name, setName] = useState(""); const [numberOfStudents, setNumberOfStudents] = useState(0); - const [skills, setSkills] = useState([]); const [partners, setPartners] = useState([]); // States for coaches const [coach, setCoach] = useState(""); const [coaches, setCoaches] = useState([]); + // States for skills + const [skill, setSkill] = useState(""); + const [skills, setSkills] = useState([]); + const navigate = useNavigate(); return ( @@ -48,7 +53,9 @@ export default function CreateProjectPage() { /> - + + + { @@ -56,7 +63,7 @@ export default function CreateProjectPage() { "2022", name, numberOfStudents!, - skills, + [], partners, coaches ); From cbaa6a6a936f80b6585ea088c99040f6f6ae8ab8 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Mon, 25 Apr 2022 14:00:20 +0200 Subject: [PATCH 11/23] Added some style --- .../AddedCoaches/AddedCoaches.tsx | 1 + .../AddedSkills/AddedSkills.tsx | 90 ++++++++++--------- .../AddedSkills/styles.ts | 41 +++++++++ .../InputFields/Skill/Skill.tsx | 20 ++--- 4 files changed, 101 insertions(+), 51 deletions(-) create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx index 4791f30b2..9fe44734b 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx @@ -21,6 +21,7 @@ export default function AddedCoaches({ }} > + ))} diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx index 06fa1ef40..d29baa8d4 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx @@ -1,4 +1,7 @@ import { SkillProject } from "../../../../data/interfaces/projects"; +import { Input } from "../styles"; +import { AmountInput, SkillContainer, DescriptionContainer, Delete, TopContainer } from "./styles"; +import { TiDeleteOutline } from "react-icons/ti"; export default function AddedSkills({ skills, @@ -10,48 +13,55 @@ export default function AddedSkills({ return (
{skills.map((skill, _index) => ( -
- {skill.skill} - { - const newList = skills.map((item, otherIndex) => { - if (_index === otherIndex) { - const updatedItem = { - ...item, - amount: event.target.valueAsNumber, - }; - return updatedItem; - } - return item; - }); + + + {skill.skill} + { + const newList = skills.map((item, otherIndex) => { + if (_index === otherIndex) { + const updatedItem = { + ...item, + amount: event.target.valueAsNumber, + }; + return updatedItem; + } + return item; + }); - setSkills(newList); - }} - /> - { - const newList = skills.map((item, otherIndex) => { - if (_index === otherIndex) { - const updatedItem = { - ...item, - description: event.target.value, - }; - return updatedItem; - } - return item; - }); + setSkills(newList); + }} + /> + + + + + + { + const newList = skills.map((item, otherIndex) => { + if (_index === otherIndex) { + const updatedItem = { + ...item, + description: event.target.value, + }; + return updatedItem; + } + return item; + }); - setSkills(newList); - }} - /> -
+ setSkills(newList); + }} + /> + + ))}
); diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts new file mode 100644 index 000000000..218d26fa5 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts @@ -0,0 +1,41 @@ +import styled from "styled-components"; + +export const SkillContainer = styled.div` + border-radius: 5px; + margin-top: 10px; + margin-left: 5px; + background-color: #1a1a36; + padding: 5px 10px; + width: fit-content; +`; + +export const TopContainer = styled.div` + display: flex; + align-items: center; + justify-content: space-between; +`; + +export const Delete = styled.button` + background-color: #f14a3b; + border: 0; + padding: 2.5px 2.5px; + border-radius: 1px; + color: white; + display: flex; + align-items: center; +`; + +export const DescriptionContainer = styled.div` + margin-bottom: 10px; +`; + +export const AmountInput = styled.input` + margin: 5px; + padding: 2px 10px; + background-color: #131329; + color: white; + border: none; + border-radius: 5px; + + width: 100px; +`; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx index 1746ab745..5d4124b47 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx @@ -30,19 +30,17 @@ export default function Skill({ { - if (availableSkills.some(availableSkill => availableSkill === skill)) { - if (!skills.some(existingSkill => existingSkill.skill === skill)) { - const newSkills = [...skills]; - const newSkill: SkillProject = { - skill: skill, - description: undefined, - amount: undefined, - }; - newSkills.push(newSkill); - setSkills(newSkills); - } + const newSkills = [...skills]; + const newSkill: SkillProject = { + skill: skill, + description: undefined, + amount: undefined, + }; + newSkills.push(newSkill); + setSkills(newSkills); } + setSkill(""); }} > Add skill From 068c80bb95b97ef1236b26800be3658152590c0a Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Mon, 25 Apr 2022 17:31:28 +0200 Subject: [PATCH 12/23] Reused a component for added data to a list Added labels above each segment --- .../AddedCoaches/AddedCoaches.tsx | 30 ----------------- .../AddedCoaches/index.ts | 1 - .../AddedItems/AddedItems.tsx | 29 +++++++++++++++++ .../AddedItems/index.ts | 1 + .../AddedSkills/index.ts | 1 + .../AddedSkills/styles.ts | 1 - .../InputFields/Partner/Partner.tsx | 32 +++++++++++++++++-- .../InputFields/index.ts | 2 +- .../CreateProjectComponents/index.ts | 3 +- .../CreateProjectComponents/styles.ts | 3 +- .../CreateProjectPage/CreateProjectPage.tsx | 27 ++++++++++++---- .../projectViews/CreateProjectPage/styles.ts | 5 ++- 12 files changed, 91 insertions(+), 44 deletions(-) delete mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx delete mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/index.ts create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/index.ts diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx deleted file mode 100644 index 9fe44734b..000000000 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { TiDeleteOutline } from "react-icons/ti"; -import { AddedCoach, RemoveButton } from "../styles"; - -export default function AddedCoaches({ - coaches, - setCoaches, -}: { - coaches: string[]; - setCoaches: (coaches: string[]) => void; -}) { - return ( -
- {coaches.map((element, _index) => ( - - {element} - { - const newCoaches = [...coaches]; - newCoaches.splice(_index, 1); - setCoaches(newCoaches); - }} - > - - - - - ))} -
- ); -} diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts deleted file mode 100644 index fe048b5a7..000000000 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./AddedCoaches"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx new file mode 100644 index 000000000..9dbc6f551 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx @@ -0,0 +1,29 @@ +import { TiDeleteOutline } from "react-icons/ti"; +import { AddedItem, RemoveButton } from "../styles"; + +export default function AddedItems({ + items, + setItems, +}: { + items: string[]; + setItems: (items: string[]) => void; +}) { + return ( +
+ {items.map((element, _index) => ( + + {element} + { + const newItems = [...items]; + newItems.splice(_index, 1); + setItems(newItems); + }} + > + + + + ))} +
+ ); +} diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/index.ts new file mode 100644 index 000000000..4c09ff358 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/index.ts @@ -0,0 +1 @@ +export { default } from "./AddedItems"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/index.ts new file mode 100644 index 000000000..f3661f314 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/index.ts @@ -0,0 +1 @@ +export { default } from "./AddedSkills"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts index 218d26fa5..6e1ed21be 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts @@ -3,7 +3,6 @@ import styled from "styled-components"; export const SkillContainer = styled.div` border-radius: 5px; margin-top: 10px; - margin-left: 5px; background-color: #1a1a36; padding: 5px 10px; width: fit-content; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx index 385bae14d..29cdc1d97 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx @@ -1,16 +1,44 @@ import { Input, AddButton } from "../../styles"; export default function Partner({ + partner, + setPartner, partners, setPartners, }: { + partner: string; + setPartner: (partner: string) => void; partners: string[]; setPartners: (partners: string[]) => void; }) { + const availablePartners = ["partner1", "partner2"]; // TODO get partners from API call + return (
- setPartners([])} placeholder="Partner" /> - Add partner + setPartner(e.target.value)} + list="partners" + placeholder="Partner" + /> + + + {availablePartners.map((availablePartner, _index) => { + return + + { + if (!partners.includes(partner)) { + const newPartners = [...partners]; + newPartners.push(partner); + setPartners(newPartners); + } setPartner("") + }} + > + Add partner +
); } diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts index b0235977d..989b56347 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts @@ -2,4 +2,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"; +export { default as PartnerInput } from "./Partner"; \ No newline at end of file diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts index 184b4049a..939c037ec 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts @@ -5,4 +5,5 @@ export { SkillInput, PartnerInput, } from "./InputFields"; -export { default as AddedCoaches } from "./AddedCoaches"; +export { default as AddedItems } from "./AddedItems"; +export { default as AddedSkills } from "./AddedSkills"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts index 8d199ae87..8c73747c4 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts @@ -29,8 +29,9 @@ export const RemoveButton = styled.button` align-items: center; `; -export const AddedCoach = styled.div` +export const AddedItem = styled.div` margin: 5px; + margin-left: 0; padding: 5px; background-color: #1a1a36; max-width: fit-content; diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index f4ef0400e..00d0e9f7d 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -1,4 +1,4 @@ -import { CreateProjectContainer, CreateButton } from "./styles"; +import { CreateProjectContainer, CreateButton, Label } from "./styles"; import { createProject } from "../../../utils/api/projects"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; @@ -10,15 +10,14 @@ import { CoachInput, SkillInput, PartnerInput, - AddedCoaches, + AddedItems, + AddedSkills, } from "../../../components/ProjectsComponents/CreateProjectComponents"; import { SkillProject } from "../../../data/interfaces/projects"; -import AddedSkills from "../../../components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills"; export default function CreateProjectPage() { const [name, setName] = useState(""); const [numberOfStudents, setNumberOfStudents] = useState(0); - const [partners, setPartners] = useState([]); // States for coaches const [coach, setCoach] = useState(""); @@ -28,6 +27,10 @@ export default function CreateProjectPage() { const [skill, setSkill] = useState(""); const [skills, setSkills] = useState([]); + // States for partners + const [partner, setPartner] = useState(""); + const [partners, setPartners] = useState([]); + const navigate = useNavigate(); return ( @@ -38,25 +41,37 @@ export default function CreateProjectPage() {

New Project

+ + + - + + - + + + + { const response = await createProject( diff --git a/frontend/src/views/projectViews/CreateProjectPage/styles.ts b/frontend/src/views/projectViews/CreateProjectPage/styles.ts index dae106a68..d924e3d74 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/styles.ts +++ b/frontend/src/views/projectViews/CreateProjectPage/styles.ts @@ -42,4 +42,7 @@ export const CreateButton = styled.button` border-radius: 5px; `; - +export const Label = styled.h5` + margin-top: 20px; + margin-bottom: 0px; +` From a152871512c2e2dd9fb0fd0b86fccbf9df3bde5a Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Tue, 26 Apr 2022 20:34:22 +0200 Subject: [PATCH 13/23] Support for long items changes to adding skills --- .../AddedItems/AddedItems.tsx | 4 +- .../AddedSkills/AddedSkills.tsx | 88 +++++++++++++------ .../AddedSkills/styles.ts | 10 ++- .../InputFields/Coach/Coach.tsx | 2 +- .../InputFields/Partner/Partner.tsx | 2 +- .../InputFields/Skill/Skill.tsx | 4 +- .../CreateProjectComponents/styles.ts | 8 +- frontend/src/data/interfaces/projects.ts | 4 +- .../projectViews/CreateProjectPage/styles.ts | 4 +- 9 files changed, 84 insertions(+), 42 deletions(-) diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx index 9dbc6f551..2a0d6a434 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx @@ -1,5 +1,5 @@ import { TiDeleteOutline } from "react-icons/ti"; -import { AddedItem, RemoveButton } from "../styles"; +import { AddedItem, ItemName, RemoveButton } from "../styles"; export default function AddedItems({ items, @@ -12,7 +12,7 @@ export default function AddedItems({
{items.map((element, _index) => ( - {element} + {element} { const newItems = [...items]; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx index d29baa8d4..1194c5c87 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/AddedSkills.tsx @@ -1,8 +1,23 @@ import { SkillProject } from "../../../../data/interfaces/projects"; import { Input } from "../styles"; -import { AmountInput, SkillContainer, DescriptionContainer, Delete, TopContainer } from "./styles"; +import { + AmountInput, + SkillContainer, + DescriptionContainer, + Delete, + TopContainer, + SkillName, +} from "./styles"; import { TiDeleteOutline } from "react-icons/ti"; +import React from "react"; +/** + * + * @param skills the state of the added skills + * @param setSkills used to update the added skills and there attributes + + * @returns a react component of all the added skills + */ export default function AddedSkills({ skills, setSkills, @@ -10,54 +25,69 @@ export default function AddedSkills({ skills: SkillProject[]; setSkills: (skills: SkillProject[]) => void; }) { + /** + * This function is called when an input field is changed. + * @param event a react event + * @param index the index of the skill to change + * @param amount whether to update the amount (true) or to update the description (false) + */ + function updateSkills( + event: React.ChangeEvent, + index: number, + amount: boolean + ) { + const newList = skills.map((item, otherIndex) => { + if (index === otherIndex) { + if (amount && !isNaN(event.target.valueAsNumber)) { + return { + ...item, + amount: event.target.valueAsNumber, + }; + } + return { + ...item, + description: event.target.value, + }; + } + return item; + }); + setSkills(newList); + } + return (
- {skills.map((skill, _index) => ( - + {skills.map((skill, index) => ( + - {skill.skill} + {skill.skill} + { - const newList = skills.map((item, otherIndex) => { - if (_index === otherIndex) { - const updatedItem = { - ...item, - amount: event.target.valueAsNumber, - }; - return updatedItem; - } - return item; - }); - - setSkills(newList); + updateSkills(event, index, true); }} /> - + { + const newSkills = [...skills]; + newSkills.splice(index, 1); + setSkills(newSkills); + }} + > + { - const newList = skills.map((item, otherIndex) => { - if (_index === otherIndex) { - const updatedItem = { - ...item, - description: event.target.value, - }; - return updatedItem; - } - return item; - }); - - setSkills(newList); + updateSkills(event, index, false); }} /> diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts index 6e1ed21be..54fc29ae1 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts @@ -5,7 +5,8 @@ export const SkillContainer = styled.div` margin-top: 10px; background-color: #1a1a36; padding: 5px 10px; - width: fit-content; + width: min-content; + max-width: 75%; `; export const TopContainer = styled.div` @@ -14,6 +15,11 @@ export const TopContainer = styled.div` justify-content: space-between; `; +export const SkillName = styled.div` + overflow-x: scroll; + text-overflow: ellipsis; +`; + export const Delete = styled.button` background-color: #f14a3b; border: 0; @@ -26,6 +32,7 @@ export const Delete = styled.button` export const DescriptionContainer = styled.div` margin-bottom: 10px; + width: fit-content; `; export const AmountInput = styled.input` @@ -35,6 +42,5 @@ export const AmountInput = styled.input` color: white; border: none; border-radius: 5px; - width: 100px; `; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx index 544330504..a71529450 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx @@ -14,7 +14,7 @@ export default function Coach({ setCoaches: (coaches: string[]) => void; }) { const [showAlert, setShowAlert] = useState(false); - const availableCoaches = ["coach1", "coach2", "admin1", "admin2"]; // TODO get users from API call + const availableCoaches = ["coach1", "coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2", "admin1", "admin2"]; // TODO get users from API call return (
diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx index 29cdc1d97..aa0b5b557 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx @@ -30,7 +30,7 @@ export default function Partner({ { - if (!partners.includes(partner)) { + if (!partners.includes(partner) && partner.length > 0) { const newPartners = [...partners]; newPartners.push(partner); setPartners(newPartners); diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx index 5d4124b47..588e846d4 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Skill/Skill.tsx @@ -34,8 +34,8 @@ export default function Skill({ const newSkills = [...skills]; const newSkill: SkillProject = { skill: skill, - description: undefined, - amount: undefined, + description: "", + amount: 1, }; newSkills.push(newSkill); setSkills(newSkills); diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts index 8c73747c4..4a972830f 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts @@ -29,12 +29,18 @@ export const RemoveButton = styled.button` align-items: center; `; +export const ItemName = styled.div` + overflow-x: scroll; + text-overflow: ellipsis; +`; + export const AddedItem = styled.div` margin: 5px; margin-left: 0; padding: 5px; background-color: #1a1a36; - max-width: fit-content; + width: fit-content; + max-width: 75%; border-radius: 5px; display: flex; `; diff --git a/frontend/src/data/interfaces/projects.ts b/frontend/src/data/interfaces/projects.ts index 18aeb1730..1861fb993 100644 --- a/frontend/src/data/interfaces/projects.ts +++ b/frontend/src/data/interfaces/projects.ts @@ -61,10 +61,10 @@ export interface SkillProject { skill: string; /** More info about this skill in a specific project */ - description: string | undefined; + description: string; /** Number of positions of this skill in a project */ - amount: number | undefined; + amount: number; } /** diff --git a/frontend/src/views/projectViews/CreateProjectPage/styles.ts b/frontend/src/views/projectViews/CreateProjectPage/styles.ts index d924e3d74..719aed9f1 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/styles.ts +++ b/frontend/src/views/projectViews/CreateProjectPage/styles.ts @@ -38,11 +38,11 @@ export const CreateButton = styled.button` background-color: #44dba4; color: white; border: none; - margin-top: 10px; + margin-top: 30px; border-radius: 5px; `; export const Label = styled.h5` - margin-top: 20px; + margin-top: 30px; margin-bottom: 0px; ` From 4094076dac508351414243b0767f94f815d514bf Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Wed, 27 Apr 2022 22:14:40 +0200 Subject: [PATCH 14/23] update import --- frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx b/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx index a29a200dc..59c4d9fbc 100644 --- a/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx +++ b/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx @@ -14,6 +14,7 @@ import { import { Project } from "../../../data/interfaces"; import { useNavigate, useParams } from "react-router-dom"; import InfiniteScroll from "react-infinite-scroller"; +import { useAuth } from "../../../contexts"; /** * @returns The projects overview page where you can see all the projects. * You can filter on your own projects or filter on project name. @@ -29,7 +30,7 @@ export default function ProjectPage() { const [ownProjects, setOwnProjects] = useState(false); const navigate = useNavigate(); - const { userId, role } = useAuth(); + const { role } = useAuth(); const [page, setPage] = useState(0); const params = useParams(); From 38a6b93a9fd2a2a9cf2dd01d0db52d67bff3d862 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Wed, 27 Apr 2022 22:18:03 +0200 Subject: [PATCH 15/23] No to hardcoded editions in links --- .../CreateProjectPage/CreateProjectPage.tsx | 11 +++++++---- .../views/projectViews/ProjectsPage/ProjectsPage.tsx | 4 +++- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index 00d0e9f7d..bbedfae59 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -1,7 +1,7 @@ import { CreateProjectContainer, CreateButton, Label } from "./styles"; import { createProject } from "../../../utils/api/projects"; import { useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import { GoBack } from "../ProjectDetailPage/styles"; import { BiArrowBack } from "react-icons/bi"; import { @@ -33,9 +33,12 @@ export default function CreateProjectPage() { const navigate = useNavigate(); + const params = useParams(); + const editionId = params.editionId!; + return ( - navigate("/editions/2022/projects/")}> + navigate("/editions/" + editionId + "/projects/")}> Cancel @@ -75,7 +78,7 @@ export default function CreateProjectPage() { { const response = await createProject( - "2022", + editionId, name, numberOfStudents!, [], @@ -83,7 +86,7 @@ export default function CreateProjectPage() { coaches ); if (response) { - navigate("/editions/2022/projects/"); + navigate("/editions/" + editionId + "/projects/"); } else alert("Something went wrong :("); }} > diff --git a/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx b/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx index 59c4d9fbc..4819ecf74 100644 --- a/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx +++ b/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx @@ -82,7 +82,9 @@ export default function ProjectPage() { /> Search {role === 0 ? ( - navigate("/editions/summerof2022/projects/new")}> + navigate("/editions/" + editionId + "/projects/new")} + > Create Project ) : null} From 60c702eb6925dff4834d77258059570d7563a0d3 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Wed, 27 Apr 2022 22:55:16 +0200 Subject: [PATCH 16/23] use api calls to show available coaches to add to a project --- .../InputFields/Coach/Coach.tsx | 24 +++++++++++++++---- frontend/src/data/interfaces/users.ts | 1 + 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx index a71529450..b5c0c489a 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx @@ -1,5 +1,8 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Alert } from "react-bootstrap"; +import { useParams } from "react-router-dom"; +import { getCoaches } from "../../../../../utils/api/users/coaches"; +import { User } from "../../../../../utils/api/users/users"; import { AddButton, Input, WarningContainer } from "../../styles"; export default function Coach({ @@ -14,25 +17,36 @@ export default function Coach({ setCoaches: (coaches: string[]) => void; }) { const [showAlert, setShowAlert] = useState(false); - const availableCoaches = ["coach1", "coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2coach2", "admin1", "admin2"]; // TODO get users from API call + const [availableCoaches, setAvailableCoaches] = useState([]); + const params = useParams(); + const editionId = params.editionId!; + + useEffect(() => { + async function callCoaches() { + setAvailableCoaches((await getCoaches(editionId, coach, 0)).users); + } + callCoaches(); + }, [coach, editionId]); return (
setCoach(e.target.value)} + onChange={e => { + setCoach(e.target.value); + }} list="users" placeholder="Coach" /> {availableCoaches.map((availableCoach, _index) => { - return { - if (availableCoaches.some(availableCoach => availableCoach === coach)) { + if (availableCoaches.some(availableCoach => availableCoach.name === coach)) { if (!coaches.includes(coach)) { const newCoaches = [...coaches]; newCoaches.push(coach); diff --git a/frontend/src/data/interfaces/users.ts b/frontend/src/data/interfaces/users.ts index 1c653263d..9092af352 100644 --- a/frontend/src/data/interfaces/users.ts +++ b/frontend/src/data/interfaces/users.ts @@ -9,3 +9,4 @@ export interface User { admin: boolean; editions: string[]; } + From eb6f668b4a98946a9ff73e011d9dd4b3095b7883 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Thu, 28 Apr 2022 17:45:24 +0200 Subject: [PATCH 17/23] Add coaches to a project --- .../AddedCoaches/AddedCoaches.tsx | 30 +++++++++++++++++++ .../AddedCoaches/index.ts | 1 + .../AddedItems/index.ts | 1 - .../AddedPartners.tsx} | 2 +- .../AddedPartners/index.ts | 1 + .../InputFields/Coach/Coach.tsx | 16 ++++++---- .../CreateProjectComponents/index.ts | 3 +- frontend/src/data/interfaces/projects.ts | 4 +-- frontend/src/utils/api/projects.ts | 2 +- .../CreateProjectPage/CreateProjectPage.tsx | 17 +++++++---- 10 files changed, 61 insertions(+), 16 deletions(-) create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts delete mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/index.ts rename frontend/src/components/ProjectsComponents/CreateProjectComponents/{AddedItems/AddedItems.tsx => AddedPartners/AddedPartners.tsx} (95%) create mode 100644 frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedPartners/index.ts diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx new file mode 100644 index 000000000..6417e7964 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/AddedCoaches.tsx @@ -0,0 +1,30 @@ +import { TiDeleteOutline } from "react-icons/ti"; +import { User } from "../../../../utils/api/users/users"; +import { AddedItem, ItemName, RemoveButton } from "../styles"; + +export default function AddedCoaches({ + coaches, + setCoaches, +}: { + coaches: User[]; + setCoaches: (coaches: User[]) => void; +}) { + return ( +
+ {coaches.map((element, _index) => ( + + {element.name} + { + const newItems = [...coaches]; + newItems.splice(_index, 1); + setCoaches(newItems); + }} + > + + + + ))} +
+ ); +} diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts new file mode 100644 index 000000000..fe048b5a7 --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedCoaches/index.ts @@ -0,0 +1 @@ +export { default } from "./AddedCoaches"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/index.ts deleted file mode 100644 index 4c09ff358..000000000 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./AddedItems"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedPartners/AddedPartners.tsx similarity index 95% rename from frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx rename to frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedPartners/AddedPartners.tsx index 2a0d6a434..0cf5b0040 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedItems/AddedItems.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedPartners/AddedPartners.tsx @@ -1,7 +1,7 @@ import { TiDeleteOutline } from "react-icons/ti"; import { AddedItem, ItemName, RemoveButton } from "../styles"; -export default function AddedItems({ +export default function AddedPartners({ items, setItems, }: { diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedPartners/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedPartners/index.ts new file mode 100644 index 000000000..ee4652a7d --- /dev/null +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedPartners/index.ts @@ -0,0 +1 @@ +export { default } from "./AddedPartners"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx index b5c0c489a..2d653489b 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx @@ -13,8 +13,8 @@ export default function Coach({ }: { coach: string; setCoach: (coach: string) => void; - coaches: string[]; - setCoaches: (coaches: string[]) => void; + coaches: User[]; + setCoaches: (coaches: User[]) => void; }) { const [showAlert, setShowAlert] = useState(false); const [availableCoaches, setAvailableCoaches] = useState([]); @@ -46,10 +46,16 @@ export default function Coach({ { - if (availableCoaches.some(availableCoach => availableCoach.name === coach)) { - if (!coaches.includes(coach)) { + let coachToAdd = null; + availableCoaches.forEach(availableCoach => { + if (availableCoach.name === coach) { + coachToAdd = availableCoach; + } + }); + if (coachToAdd) { + if (!coaches.some(presentCoach => presentCoach.name === coach)) { const newCoaches = [...coaches]; - newCoaches.push(coach); + newCoaches.push(coachToAdd); setCoaches(newCoaches); setShowAlert(false); } diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts index 939c037ec..63f743cf3 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/index.ts @@ -5,5 +5,6 @@ export { SkillInput, PartnerInput, } from "./InputFields"; -export { default as AddedItems } from "./AddedItems"; +export { default as AddedPartners } from "./AddedPartners"; +export { default as AddedCoaches } from "./AddedCoaches"; export { default as AddedSkills } from "./AddedSkills"; diff --git a/frontend/src/data/interfaces/projects.ts b/frontend/src/data/interfaces/projects.ts index 1861fb993..6609d8574 100644 --- a/frontend/src/data/interfaces/projects.ts +++ b/frontend/src/data/interfaces/projects.ts @@ -83,8 +83,8 @@ export interface CreateProject { /** The partners that belong to this project */ partners: string[]; - /** The users that will coach this project */ - coaches: string[]; + /** The IDs of the users that will coach this project */ + coaches: number[]; } /** diff --git a/frontend/src/utils/api/projects.ts b/frontend/src/utils/api/projects.ts index 015ac8ebd..dc49215c9 100644 --- a/frontend/src/utils/api/projects.ts +++ b/frontend/src/utils/api/projects.ts @@ -50,7 +50,7 @@ export async function createProject( numberOfStudents: number, skills: string[], partners: string[], - coaches: string[] + coaches: number[] ) { const payload: CreateProject = { name: name, diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index bbedfae59..9de88fc6c 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -10,10 +10,12 @@ import { CoachInput, SkillInput, PartnerInput, - AddedItems, + AddedCoaches, + AddedPartners, AddedSkills, } from "../../../components/ProjectsComponents/CreateProjectComponents"; import { SkillProject } from "../../../data/interfaces/projects"; +import { User } from "../../../utils/api/users/users"; export default function CreateProjectPage() { const [name, setName] = useState(""); @@ -21,7 +23,7 @@ export default function CreateProjectPage() { // States for coaches const [coach, setCoach] = useState(""); - const [coaches, setCoaches] = useState([]); + const [coaches, setCoaches] = useState([]); // States for skills const [skill, setSkill] = useState(""); @@ -60,7 +62,7 @@ export default function CreateProjectPage() { coaches={coaches} setCoaches={setCoaches} /> - + @@ -73,17 +75,22 @@ export default function CreateProjectPage() { partners={partners} setPartners={setPartners} /> - + { + const coachesIds: number[] = []; + coaches.forEach(coachToAdd => { + coachesIds.push(coachToAdd.userId); + }); + const response = await createProject( editionId, name, numberOfStudents!, [], partners, - coaches + coachesIds ); if (response) { navigate("/editions/" + editionId + "/projects/"); From 2773789bbd4969de8f963f2d9b96cb401fa0dffe Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Thu, 28 Apr 2022 18:02:05 +0200 Subject: [PATCH 18/23] Documentation --- frontend/src/data/interfaces/users.ts | 1 - frontend/src/utils/api/projects.ts | 32 ++++++++++++++++++- .../CreateProjectPage/CreateProjectPage.tsx | 12 ++++--- .../projectViews/CreateProjectPage/styles.ts | 2 +- 4 files changed, 40 insertions(+), 7 deletions(-) diff --git a/frontend/src/data/interfaces/users.ts b/frontend/src/data/interfaces/users.ts index 9092af352..1c653263d 100644 --- a/frontend/src/data/interfaces/users.ts +++ b/frontend/src/data/interfaces/users.ts @@ -9,4 +9,3 @@ export interface User { admin: boolean; editions: string[]; } - diff --git a/frontend/src/utils/api/projects.ts b/frontend/src/utils/api/projects.ts index dc49215c9..b3efdde13 100644 --- a/frontend/src/utils/api/projects.ts +++ b/frontend/src/utils/api/projects.ts @@ -2,6 +2,14 @@ import axios from "axios"; import { Projects, Project, CreateProject } from "../../data/interfaces/projects"; import { axiosInstance } from "./api"; +/** + * API call to get projects (and filter them) + * @param edition The edition name. + * @param name To filter on project name. + * @param ownProjects To filter on your own projects. + * @param page The requested page. + * @returns + */ export async function getProjects( edition: string, name: string, @@ -30,6 +38,12 @@ export async function getProjects( } } +/** + * API call to get a specific project. + * @param edition The edition name. + * @param projectId The ID of the project. + * @returns A Project object when successful. + */ export async function getProject(edition: string, projectId: number): Promise { try { const response = await axiosInstance.get("/editions/" + edition + "/projects/" + projectId); @@ -44,6 +58,16 @@ export async function getProject(edition: string, projectId: number): Promise { const payload: CreateProject = { name: name, number_of_students: numberOfStudents, @@ -74,6 +98,12 @@ export async function createProject( } } +/** + * API call to delete a project. + * @param edition The edition name. + * @param projectId The ID of the project that needs to be deleted. + * @returns true if the deletion was successful or false if it failed. + */ export async function deleteProject(edition: string, projectId: number): Promise { try { await axiosInstance.delete("/editions/" + edition + "/projects/" + projectId); diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index 9de88fc6c..49c99ceb5 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -17,6 +17,10 @@ import { import { SkillProject } from "../../../data/interfaces/projects"; import { User } from "../../../utils/api/users/users"; +/** + * React component of the create project page. + * @returns The create project page. + */ export default function CreateProjectPage() { const [name, setName] = useState(""); const [numberOfStudents, setNumberOfStudents] = useState(0); @@ -79,18 +83,18 @@ export default function CreateProjectPage() { { - const coachesIds: number[] = []; + const coachIds: number[] = []; coaches.forEach(coachToAdd => { - coachesIds.push(coachToAdd.userId); + coachIds.push(coachToAdd.userId); }); const response = await createProject( editionId, name, numberOfStudents!, - [], + [], // Empty skills for now TODO partners, - coachesIds + coachIds ); if (response) { navigate("/editions/" + editionId + "/projects/"); diff --git a/frontend/src/views/projectViews/CreateProjectPage/styles.ts b/frontend/src/views/projectViews/CreateProjectPage/styles.ts index 719aed9f1..6cbd8c1c3 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/styles.ts +++ b/frontend/src/views/projectViews/CreateProjectPage/styles.ts @@ -45,4 +45,4 @@ export const CreateButton = styled.button` export const Label = styled.h5` margin-top: 30px; margin-bottom: 0px; -` +`; From 62f7d8c6dd99baab51ae99179c0c5629f027c271 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Thu, 28 Apr 2022 18:09:04 +0200 Subject: [PATCH 19/23] prettier --- .../CreateProjectComponents/InputFields/Name/Name.tsx | 2 +- .../InputFields/NumberOfStudents/index.ts | 2 +- .../CreateProjectComponents/InputFields/Partner/Partner.tsx | 3 ++- .../CreateProjectComponents/InputFields/index.ts | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/Name.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/Name.tsx index 0a74208a8..67ad8f7d9 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/Name.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Name/Name.tsx @@ -1,4 +1,4 @@ -import { Input } from "../../styles" +import { Input } from "../../styles"; export default function Name({ name, setName }: { name: string; setName: (name: string) => void }) { return ( diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/index.ts index 4eef7d36a..7594e8ecf 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/index.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/index.ts @@ -1 +1 @@ -export {default} from "./NumberOfStudents" \ No newline at end of file +export { default } from "./NumberOfStudents"; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx index aa0b5b557..a6096de81 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Partner/Partner.tsx @@ -34,7 +34,8 @@ export default function Partner({ const newPartners = [...partners]; newPartners.push(partner); setPartners(newPartners); - } setPartner("") + } + setPartner(""); }} > Add partner diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts index 989b56347..b0235977d 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/index.ts @@ -2,4 +2,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"; \ No newline at end of file +export { default as PartnerInput } from "./Partner"; From b5cc2996ae5c2f41012a50b0c0eba56ead07e7b2 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Thu, 28 Apr 2022 18:13:26 +0200 Subject: [PATCH 20/23] clear coach field when add button is clicked QOL --- .../CreateProjectComponents/InputFields/Coach/Coach.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx index 2d653489b..ab5a1ec47 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/Coach/Coach.tsx @@ -60,6 +60,7 @@ export default function Coach({ setShowAlert(false); } } else setShowAlert(true); + setCoach(""); }} > Add coach From e0b6d8dd2f2ea2341fcbf702a4a2d9a0bd06b9f8 Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Thu, 28 Apr 2022 20:28:02 +0200 Subject: [PATCH 21/23] scroll -> auto --- .../CreateProjectComponents/AddedSkills/styles.ts | 2 +- .../ProjectsComponents/CreateProjectComponents/styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts index 54fc29ae1..9b4a4b069 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/AddedSkills/styles.ts @@ -16,7 +16,7 @@ export const TopContainer = styled.div` `; export const SkillName = styled.div` - overflow-x: scroll; + overflow-x: auto; text-overflow: ellipsis; `; diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts b/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts index 4a972830f..d40fefa38 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/styles.ts @@ -30,7 +30,7 @@ export const RemoveButton = styled.button` `; export const ItemName = styled.div` - overflow-x: scroll; + overflow-x: auto; text-overflow: ellipsis; `; From b737c039ef1c39031a81f88d7f5685e125055f9a Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Thu, 28 Apr 2022 20:30:35 +0200 Subject: [PATCH 22/23] initial value for number of students is 1 --- .../InputFields/NumberOfStudents/NumberOfStudents.tsx | 2 +- .../views/projectViews/CreateProjectPage/CreateProjectPage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx index 33279edf6..7586d250b 100644 --- a/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx +++ b/frontend/src/components/ProjectsComponents/CreateProjectComponents/InputFields/NumberOfStudents/NumberOfStudents.tsx @@ -11,7 +11,7 @@ export default function NumberOfStudents({
{ setNumberOfStudents(e.target.valueAsNumber); diff --git a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx index 49c99ceb5..33d800399 100644 --- a/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx +++ b/frontend/src/views/projectViews/CreateProjectPage/CreateProjectPage.tsx @@ -23,7 +23,7 @@ import { User } from "../../../utils/api/users/users"; */ export default function CreateProjectPage() { const [name, setName] = useState(""); - const [numberOfStudents, setNumberOfStudents] = useState(0); + const [numberOfStudents, setNumberOfStudents] = useState(1); // States for coaches const [coach, setCoach] = useState(""); From 7fef2f0a2e2d931107879f896ee48aef1f2fed0c Mon Sep 17 00:00:00 2001 From: Tiebe Vercoutter Date: Thu, 28 Apr 2022 20:59:02 +0200 Subject: [PATCH 23/23] Use enum for role --- .../components/ProjectsComponents/ProjectCard/ProjectCard.tsx | 3 ++- frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ProjectsComponents/ProjectCard/ProjectCard.tsx b/frontend/src/components/ProjectsComponents/ProjectCard/ProjectCard.tsx index d1a0f7e13..ca815f2ee 100644 --- a/frontend/src/components/ProjectsComponents/ProjectCard/ProjectCard.tsx +++ b/frontend/src/components/ProjectsComponents/ProjectCard/ProjectCard.tsx @@ -24,6 +24,7 @@ import { useNavigate, useParams } from "react-router-dom"; import { Project } from "../../../data/interfaces"; import { useAuth } from "../../../contexts"; +import { Role } from "../../../data/enums"; /** * @@ -68,7 +69,7 @@ export default function ProjectCard({ - {!role && ( + {role === Role.ADMIN && ( diff --git a/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx b/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx index 9b803cff3..1fe9daae8 100644 --- a/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx +++ b/frontend/src/views/projectViews/ProjectsPage/ProjectsPage.tsx @@ -15,6 +15,7 @@ import { Project } from "../../../data/interfaces"; import { useNavigate, useParams } from "react-router-dom"; import InfiniteScroll from "react-infinite-scroller"; import { useAuth } from "../../../contexts"; +import { Role } from "../../../data/enums"; /** * @returns The projects overview page where you can see all the projects. * You can filter on your own projects or filter on project name. @@ -82,7 +83,7 @@ export default function ProjectPage() { }} /> Search - {!role && ( + {role === Role.ADMIN && ( navigate("/editions/" + editionId + "/projects/new")} >