704 possibility to access interview notes from overview page

frontend/src/AppRoutes.tsx

@@ -47,6 +47,7 @@ import { SamfOutlet } from './Components/SamfOutlet';
 import { SultenOutlet } from './Components/SultenOutlet';
 import { VenuePage } from './Pages/VenuePage';
 import { AdminLayout } from './PagesAdmin/AdminLayout/AdminLayout';
+import { InterviewNotesPage } from './PagesAdmin/InterviewNotesAdminPage';
 import { RecruitmentFormAdminPage } from './PagesAdmin/RecruitmentFormAdminPage';
 import { RecruitmentPositionOverviewPage } from './PagesAdmin/RecruitmentPositionOverviewPage/RecruitmentPositionOverviewPage';
 import { SaksdokumentAdminPage } from './PagesAdmin/SaksdokumentAdminPage';
@@ -185,6 +186,10 @@ export function AppRoutes() {
           path={ROUTES.frontend.admin_recruitment_users_without_interview}
           element={<RecruitmentUsersWithoutInterview />}
         />
+        <Route
+          path={ROUTES.frontend.admin_recruitment_gang_position_applicants_interviewNotes}
+          element={<InterviewNotesPage />}
+        />
         {/* TODO ADD PERMISSIONS */}
         <Route
           path={ROUTES.frontend.admin_recruitment_gang_overview}

frontend/src/PagesAdmin/InterviewNotesAdminPage/InterviewNotesAdminPage.module.scss

@@ -0,0 +1,46 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  width: auto;
+  background-color: white;
+  font-family: inherit;
+  border-radius: 10px;  
+  transition: 0.2s;
+  padding: 20px;
+  margin: 10px;
+}
+
+.textbox {
+  width: 100%;
+  height: 200px;
+  border: 1px outset #ccc;
+  border-radius: 4px;
+  resize: none;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  display: block;
+  object-fit: cover;
+  font-family: Arial, Helvetica, sans-serif;
+  white-space: pre-wrap;
+  overflow-y: auto;
+}
+
+.textbox textarea {
+  background-color: #f8f8f8;
+  font-size: 25px;
+  resize: none;
+}
+
+.textbox p {
+  margin: 0;
+}
+
+.button {
+  width: 150px;
+  padding: 10px 20px;
+  display: block;
+  margin: 0 auto;
+  margin-top: 10px;
+  border: 1px solid #333;
+}

frontend/src/PagesAdmin/InterviewNotesAdminPage/InterviewNotesAdminPage.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Button } from '~/Components';
+import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
+import styles from './InterviewNotesAdminPage.module.scss';
+
+export function InterviewNotesPage() {
+  //TODO: interview notes from backen
+  const [editingMode, setEditingMode] = useState(false);
+  const [text, setText] = useState('Notater fra intervjuet her...'); //TODO: place the text from the backend here.
+  const posid = 1; //TODO: get the posid from the backend.
+
+  function handleOnClick() {
+    if (editingMode) {
+      setEditingMode(false);
+      //TODO: Save the text in the textbox and send it to the backend.
+    } else {
+      setEditingMode(true);
+      //TODO: Get the text from the backend, and place it in the textbox.
+    }
+  }
+
+  function handleTextarea(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    setText(e.target.value);
+  }
+
+  return (
+    <AdminPageLayout title="Interview Notes">
+      <div className={styles.container}>
+        <label htmlFor="INotes">Interview Notes for nummer {posid}</label>
+        {editingMode ? (
+          <textarea id="INotes" name="INotes" className={styles.textbox} value={text} onChange={handleTextarea}>
+            {text}
+          </textarea>
+        ) : (
+          <div className={styles.textbox}>
+            <p>{text}</p>
+          </div>
+        )}
+        <Button theme="samf" rounded={true} className={styles.button} onClick={handleOnClick}>
+          {editingMode ? 'Save' : 'Edit'}
+        </Button>
+      </div>
+    </AdminPageLayout>
+  );
+}

frontend/src/PagesAdmin/InterviewNotesAdminPage/index.ts

@@ -0,0 +1 @@
+export { InterviewNotesPage } from './InterviewNotesAdminPage';

frontend/src/PagesAdmin/index.ts

@@ -9,6 +9,7 @@ export { ImageAdminPage } from './ImageAdminPage';
 export { ImageFormAdminPage } from './ImageFormAdminPage';
 export { InformationAdminPage } from './InformationAdminPage';
 export { InformationFormAdminPage } from './InformationFormAdminPage';
+export { InterviewNotesPage } from './InterviewNotesAdminPage';
 export { OpeningHoursAdminPage } from './OpeningHoursAdminPage';
 export { RecruitmentAdminPage } from './RecruitmentAdminPage';
 export { RecruitmentGangAdminPage } from './RecruitmentGangAdminPage';

frontend/src/routes/frontend.ts

@@ -66,6 +66,8 @@ export const ROUTES_FRONTEND = {
   admin_recruitment_gang_position_edit: '/control-panel/recruitment/:recruitmentId/gang/:gangId/edit/:positionId',
   admin_recruitment_gang_position_applicants_overview:
     '/control-panel/recruitment/:recruitmentId/gang/:gangId/position/:positionId',
+  admin_recruitment_gang_position_applicants_interviewNotes:
+    '/control-panel/recruitment/:recruitmentId/gang/:gangId/position/:positionId/notesId', //fix when backend is done
   // ==================== //
   //      Development     //
   // ==================== //