VF-113 Create teams table in controlpanel (#271)

* Create teams table in controlpanel * Test new email * Legg til opprett team knapp * Fikse lint error --------- Co-authored-by: mauricew <[email protected]>
vektorprogrammet · Apr 10, 2024 · 3221ce3 · 3221ce3
1 parent 46db0d0
commit 3221ce3
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 49 deletions.
diff --git a/src/pages/controlpanel/components/Team/Team.tsx b/src/pages/controlpanel/components/Team/Team.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import CreateTable from "../CreateTable";
+
+const Team = (): JSX.Element => {
+  const navigate = useNavigate();
+  interface Team {
+    name: string;
+    email: string;
+    opptak: string;
+  }
+
+  const example1: Team[] = [
+    {
+      name: "IT",
+      email: "[email protected]",
+      opptak: "Åpent",
+    },
+    {
+      name: "Evaluering",
+      email: "[email protected]",
+      opptak: "Stengt",
+    },
+    {
+      name: "Rekruttering",
+      email: "[email protected]",
+      opptak: "Stengt",
+    },
+    {
+      name: "Proffilering",
+      email: "[email protected]",
+      opptak: "Stengt",
+    },
+    {
+      name: "Skolekoordinering",
+      email: "[email protected]",
+      opptak: "Stengt",
+    },
+    {
+      name: "Sponsor",
+      email: "[email protected]",
+      opptak: "Stengt",
+    },
+    {
+      name: "Styret",
+      email: "[email protected]",
+      opptak: "Stengt",
+    },
+    {
+      name: "Økonomi",
+      email: "[email protected]",
+      opptak: "Stengt",
+    },
+  ];
+
+  return (
+    <div className="w-full">
+      <div className="pt-10 mt-50 shadow grid-rows-2 grid-cols-2 flex flex-col items-center">
+        <h1 className="text-2xl row-start-1 row-end-1">Team</h1>
+        <CreateTable header={["Navn", "Epost", "Opptak"]} content={example1} />
+        <button
+          type="button"
+          className="login-buttons mt-6 text-black px-4 py-2 rounded-full duration-300 mb-4 bg-white hover:bg-slate-300"
+          onClick={() => navigate(`/kontrollpanel/opprett-team`)}
+        >
+          + Opprett Team
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Team;
diff --git a/...controlpanel/components/Teammedlemmer.tsx → ...olpanel/components/Team/Teammedlemmer.tsx b/...controlpanel/components/Teammedlemmer.tsx → ...olpanel/components/Team/Teammedlemmer.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import Navbar from "./Navbar";
+import Navbar from "../Navbar";
 
 const Teammedlemmer = (): JSX.Element => {
   const select = ["Aktive medlemmer", "Inaktive medlemmer", "Søkere"];
@@ -77,62 +77,59 @@ const Teammedlemmer = (): JSX.Element => {
       <div className="pt-10 pr-10 pl-10 mt-50 shadow grid-rows-2 grid-cols-2 flex flex-col items-center">
         <h1 className="text-2xl row-start-1 row-end-1">{id}</h1>
         <div className="flex flex-wrap ml-16">
-          <Navbar select={select} selected={selected} setSelected={setSelected} />
+          <Navbar
+            select={select}
+            selected={selected}
+            setSelected={setSelected}
+          />
         </div>
       </div>
       <div className="p-10 flex flex-col justify-center items-center ml-6">
         <div className="w-10/12 border-2 mt-100 shadow overflow-x-scroll">
           <table className="w-full">
             <thead>
-              {selected === select[2]
-                ? (
-                  <tr className="bg-white">
-                    <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                      Navn
-                    </th>
-                    <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                      Epost
-                    </th>
-                  </tr>
-                )
-                : (
-                  <tr className="bg-white">
-                    <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                      Navn
-                    </th>
-                    <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                      Stilling
-                    </th>
-                    <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                      Start
-                    </th>
-                  </tr>
-                )}
+              {selected === select[2] ? (
+                <tr className="bg-white">
+                  <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
+                    Navn
+                  </th>
+                  <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
+                    Epost
+                  </th>
+                </tr>
+              ) : (
+                <tr className="bg-white">
+                  <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
+                    Navn
+                  </th>
+                  <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
+                    Stilling
+                  </th>
+                  <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
+                    Start
+                  </th>
+                </tr>
+              )}
             </thead>
             <tbody>
               {mapToTable(
-                (selected === select[0]
-                  && itListe)
-                || (selected === select[1]
-                  && inactiveitListe) || ([]),
-              )}
-              {mapToTableSoker(
-                (selected === select[2]
-                  && sokere) || ([]),
+                (selected === select[0] && itListe)
+                  || (selected === select[1] && inactiveitListe)
+                  || [],
               )}
+              {mapToTableSoker((selected === select[2] && sokere) || [])}
             </tbody>
           </table>
         </div>
-        {selected === select[0]
-          ? (
-            <button
-              type="button"
-              className="login-buttons mt-6 bg-blue-400 hover:bg-blue-900 text-white px-4 py-2 rounded-full duration-300"
-              onClick={() => navigate(`/kontrollpanel/teams/${id}/leggtil`)}
-            >
-              Legg til teammedlem
-            </button>
-          ) : null}
+        {selected === select[0] ? (
+          <button
+            type="button"
+            className="login-buttons mt-6 bg-blue-400 hover:bg-blue-900 text-white px-4 py-2 rounded-full duration-300"
+            onClick={() => navigate(`/kontrollpanel/teams/${id}/leggtil`)}
+          >
+            Legg til teammedlem
+          </button>
+        ) : null}
       </div>
     </div>
   );

diff --git a/src/pages/controlpanel/routes.tsx b/src/pages/controlpanel/routes.tsx
@@ -5,16 +5,34 @@ import Skoler from "pages/controlpanel/components/Skoler";
 import Teaminteresse from "pages/controlpanel/components/Teaminteresse";
 import Assistent from "pages/controlpanel/components/Assistent";
 import RegistrerSoker from "./components/RegistrerSoker/RegistrerSoker";
-import Teammedlemmer from "./components/Teammedlemmer";
+import Teammedlemmer from "./components/Team/Teammedlemmer";
+import Team from "./components/Team/Team";
 
 // The route with the corresponding component to render in the route
 const routes: AppRoute[] = [
   { path: "", element: <Kontrollpanel />, name: "Kontrollpanel" },
+  { path: "/kontrollpanel/team", element: <Team />, name: "Team" },
   { path: "/kontrollpanel/skoler", element: <Skoler />, name: "Skoler" },
-  { path: "/kontrollpanel/teams/:id", element: <Teammedlemmer />, name: "Teammedlemmer" },
-  { path: "/kontrollpanel/teaminteresse", element: <Teaminteresse />, name: "Teaminteresse" },
-  { path: "/kontrollpanel/assistenter", element: <Assistent />, name: "Assistent" },
-  { path: "/kontrollpanel/registrer-soker", element: <RegistrerSoker />, name: "Registrer søker" },
+  {
+    path: "/kontrollpanel/teams/:id",
+    element: <Teammedlemmer />,
+    name: "Teammedlemmer",
+  },
+  {
+    path: "/kontrollpanel/teaminteresse",
+    element: <Teaminteresse />,
+    name: "Teaminteresse",
+  },
+  {
+    path: "/kontrollpanel/assistenter",
+    element: <Assistent />,
+    name: "Assistent",
+  },
+  {
+    path: "/kontrollpanel/registrer-soker",
+    element: <RegistrerSoker />,
+    name: "Registrer søker",
+  },
 ];
 
 export default routes;