Vf 101 lag assistentside (#264)

* set up assistent page with navbar * vf-101 created skeleton * vf-101 add map-to-table for assistent nettside * vf-101 universial maptotable * vf-101 createTable component * vf-101 header and fix css * vf-101 last commit * vf-101 add component to teaminteresse * vf-101 add create table to skoler.tsx * vf-101 fix some lint bby * vf-101 fix lint warning * vf-101 fix merge conflict --------- Co-authored-by: olejacobmellgren <[email protected]>
vektorprogrammet · Apr 3, 2024 · 91ccfe6 · 91ccfe6
1 parent c6aee65
commit 91ccfe6
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 90 deletions.
diff --git a/src/pages/controlpanel/components/Assistent.tsx b/src/pages/controlpanel/components/Assistent.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import Navbar from "./Navbar";
+import CreateTable from "./CreateTable";
+import { Assistenter, Vikarer } from "./Interfaces";
+
+const Assistent = (): JSX.Element => {
+  const select = ["Assistenter", "Vikarer"];
+  const [selected, setSelected] = useState<string>(select[0]);
+
+  const assistenter: Assistenter[] = [
+    {
+      name: "Ole Normann",
+      school: "BI",
+      email: "[email protected]",
+      semester: "Høst 2021",
+      department: "IT",
+      bolk: "Bolk 1, Bolk 2",
+      dag: "Mandag",
+    },
+    {
+      name: "Aaryan Potet",
+      school: "IB",
+      email: "[email protected]",
+      semester: "Høst 2021",
+      department: "IT",
+      bolk: "Bolk 1, Bolk 2",
+      dag: "Mandag",
+    },
+  ];
+
+  const vikarer: Vikarer[] = [
+    {
+      name: "Erling Eriksen",
+      tlf: "12345678",
+      email: "[email protected]",
+      linje: "Dataingeniør",
+      år: "3",
+      språk: "Norsk",
+      m: "Ja",
+      ti: "Ja",
+      o: "Ja",
+      to: "Ja",
+      f: "Ja",
+      bolk: "Bolk 1, Bolk 2",
+      poeng: "Høst 2021",
+      passende: "IT",
+    },
+  ];
+
+  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">Assistenter</h1>
+        <div className="flex flex-wrap">
+          <Navbar select={select} selected={selected} setSelected={setSelected} />
+        </div>
+        {(selected === select[0] && (
+          <CreateTable header={["Navn", "Skole", "E-post", "Semester", "Avdeling", "Bolk", "Dag"]} content={assistenter} />
+        )) || (selected === select[1] && (
+          <CreateTable header={["Navn", "Tlf", "E-post", "Linje", "År", "Språk", "M", "T", "O", "T", "F", "Bolk", "Poeng", "Passende"]} content={vikarer} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Assistent;
diff --git a/src/pages/controlpanel/components/CreateTable.tsx b/src/pages/controlpanel/components/CreateTable.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+// create table takes in header and content and maps the content to a table,
+// header is a string of the table headers and content is an array of objects
+
+const mapToTable = (skoler: Object[]) => {
+  return skoler.map((school, index) => (
+    <tr key={index.valueOf()} className="even:bg-white odd:bg-table-grey">
+      {Object.values(school).map((value, valueIndex) => (
+        <td key={`${index.valueOf()}-${valueIndex.valueOf()}`} className="whitespace-nowrap text-xs text-center py-3 px-6">{value}</td>
+      ))}
+    </tr>
+  ));
+};
+
+interface Props {
+  header: string[];
+  content: Object[];
+}
+
+const CreateTable:React.FC<Props> = ({ header, content }) => {
+  return (
+    <div className="w-full p-4 flex justify-center items-center">
+      <div className="max-w-full border-2 shadow overflow-x-scroll">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-white">
+              {header.map((value, index) => (
+                <th key={index.valueOf()} className="text-center text-xs py-3 px-6 text-vektor-darblue">{value}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {mapToTable(content)}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default CreateTable;
diff --git a/src/pages/controlpanel/components/Interfaces.ts b/src/pages/controlpanel/components/Interfaces.ts
@@ -0,0 +1,26 @@
+export interface Assistenter {
+  name: string;
+  school: string;
+  email: string;
+  semester: string;
+  department: string;
+  bolk: string;
+  dag: string;
+}
+
+export interface Vikarer {
+  name: string;
+  tlf: string;
+  email: string;
+  linje: string;
+  år: string;
+  språk: string;
+  m: string;
+  ti: string;
+  o: string;
+  to: string;
+  f: string;
+  bolk: string;
+  poeng: string;
+  passende: string;
+}
diff --git a/src/pages/controlpanel/components/Skoler.tsx b/src/pages/controlpanel/components/Skoler.tsx
@@ -1,22 +1,11 @@
 import React, { useState } from "react";
 import Navbar from "./Navbar";
+import CreateTable from "./CreateTable";
 
 const Skoler = (): JSX.Element => {
   const select = ["Aktive Skoler", "Inaktive Skoler"];
   const [selected, setSelected] = useState<string>(select[0]);
 
-  const mapToTable = (skoler: School[]) => {
-    return skoler.map((school, index) => (
-      <tr key={index.valueOf()} className="even:bg-white odd:bg-table-grey">
-        <td className="text-center py-3 px-6">{school.name}</td>
-        <td className="text-center py-3 px-6">{school.contactPerson}</td>
-        <td className="text-center py-3 px-6">{school.email}</td>
-        <td className="text-center py-3 px-6">{school.phone}</td>
-        <td className="text-center py-3 px-6">{school.language}</td>
-      </tr>
-    ));
-  };
-
   interface School {
     name: string;
     contactPerson: string;
@@ -61,45 +50,16 @@ const Skoler = (): JSX.Element => {
 
   return (
     <div className="w-full">
-      <div className="pt-10 pr-10 pl-10 mt-50 shadow grid-rows-2 grid-cols-2 flex flex-col items-center">
+      <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">Skoler i Trondheim</h1>
-        <div className="flex">
+        <div className="flex flex-wrap">
           <Navbar select={select} selected={selected} setSelected={setSelected} />
         </div>
-      </div>
-      <div className="p-10 flex justify-center items-center ml-6">
-        <div className="w-10/12 border-2 mt-100 shadow overflow-x-scroll">
-          <table className="w-full">
-            <thead>
-              <tr className="bg-white">
-                <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                  Skole
-                </th>
-                <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                  Kontakperson
-                </th>
-                <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                  E-post
-                </th>
-                <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                  Telefon
-                </th>
-                <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                  Språk
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {mapToTable(
-                (selected === select[0]
-                  && aktiveSkolerListe)
-                  || (selected === select[1]
-                  && inaktiveSkolerListe)
-                  || ([]),
-              )}
-            </tbody>
-          </table>
-        </div>
+        {(selected === select[0] && (
+          <CreateTable header={["Skole", "Kontakperson", "E-post", "Telefon", "Språk"]} content={aktiveSkolerListe} />
+        )) || (selected === select[1] && (
+          <CreateTable header={["Skole", "Kontakperson", "E-post", "Telefon", "Språk"]} content={inaktiveSkolerListe} />
+        ))}
       </div>
     </div>
   );

diff --git a/src/pages/controlpanel/components/Teaminteresse.tsx b/src/pages/controlpanel/components/Teaminteresse.tsx
@@ -1,27 +1,18 @@
 import React, { useState } from "react";
 import Navbar from "./Navbar";
+import CreateTable from "./CreateTable";
 
 const Teaminteresse = (): JSX.Element => {
   const select = ["IT", "Evaluering", "Rekruttering", "Profilering", "Skolekoordinering", "Sponsor", "Økonomi"];
   const [selected, setSelected] = useState<string>(select[0]);
 
-  const mapToTable = (sokere: Soker[]) => {
-    return sokere.map((soker, index) => (
-      <tr key={index.valueOf()} className="even:bg-white odd:bg-table-grey">
-        <td className="text-center py-3 px-6">{soker.name}</td>
-        <td className="text-center py-3 px-6">{soker.email}</td>
-        <td className="text-center py-3 px-6">{soker.phone}</td>
-      </tr>
-    ));
-  };
-
   interface Soker {
     name: string;
     email: string;
     phone: string;
   }
 
-  const itListe: Soker[] = [
+  const example1: Soker[] = [
     {
       name: "Aaryan Potet",
       email: "[email protected]",
@@ -39,7 +30,7 @@ const Teaminteresse = (): JSX.Element => {
     },
   ];
 
-  const evalueringListe: Soker[] = [
+  const example2: Soker[] = [
     {
       name: "Kaalhode",
       email: "[email protected]",
@@ -59,39 +50,26 @@ const Teaminteresse = (): JSX.Element => {
 
   return (
     <div className="w-full">
-      <div className="pt-10 pr-10 pl-10 mt-50 shadow grid-rows-2 grid-cols-2 flex flex-col items-center">
+      <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">Teaminteresse</h1>
-        <div className="flex flex-wrap ml-16">
+        <div className="flex flex-wrap">
           <Navbar select={select} selected={selected} setSelected={setSelected} />
         </div>
-      </div>
-      <div className="p-10 flex justify-center items-center ml-6">
-        <div className="w-10/12 border-2 mt-100 shadow overflow-x-scroll">
-          <table className="w-full">
-            <thead>
-              <tr className="bg-white">
-                <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                  Søker
-                </th>
-                <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                  E-post
-                </th>
-                <th className="text-center w-1/5 py-3 px-6 text-vektor-darblue">
-                  Telefon
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {mapToTable(
-                (selected === select[0]
-                  && itListe)
-                  || (selected === select[1]
-                  && evalueringListe)
-                  || ([]),
-              )}
-            </tbody>
-          </table>
-        </div>
+        {(selected === select[0] && (
+          <CreateTable header={["Søkere", "Epost", "Telefon"]} content={example1} />
+        )) || (selected === select[1] && (
+          <CreateTable header={["Søkere", "Epost", "Telefon"]} content={example2} />
+        )) || (selected === select[2] && (
+          <CreateTable header={["Søkere", "Epost", "Telefon"]} content={example1} />
+        )) || (selected === select[3] && (
+          <CreateTable header={["Søkere", "Epost", "Telefon"]} content={example2} />
+        )) || (selected === select[4] && (
+          <CreateTable header={["Søkere", "Epost", "Telefon"]} content={example1} />
+        )) || (selected === select[5] && (
+          <CreateTable header={["Søkere", "Epost", "Telefon"]} content={example2} />
+        )) || (
+          <CreateTable header={["Søkere", "Epost", "Telefon"]} content={example1} />
+        )}
       </div>
     </div>
   );

diff --git a/src/pages/controlpanel/index.tsx b/src/pages/controlpanel/index.tsx
@@ -7,6 +7,7 @@ const ControlPanel = (): JSX.Element => {
     <div className="bg-gray-100 flex flex-row min-h-screen">
       <SideBar />
       <Outlet />
+
     </div>
   );
 };

diff --git a/src/pages/controlpanel/routes.tsx b/src/pages/controlpanel/routes.tsx
@@ -3,6 +3,7 @@ import Kontrollpanel from "pages/controlpanel/components/Kontrollpanel";
 import { AppRoute } from "App";
 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";
 
@@ -12,6 +13,7 @@ const routes: AppRoute[] = [
   { 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" },
 ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ const ControlPanel = (): JSX.Element => { @@
         <div className="bg-gray-100 flex flex-row min-h-screen">
           <SideBar />
           <Outlet />
         </div>
       );
     };
@@ Expand Down @@