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_interview_notes}
+          element={<InterviewNotesPage />}
+        />
         {/* TODO ADD PERMISSIONS */}
         <Route
           path={ROUTES.frontend.admin_recruitment_gang_overview}

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

@@ -0,0 +1,32 @@
+.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 #cccccccc;
+  border-radius: 4px;
+  resize: none;
+  padding: 12px 20px;
+  white-space: pre-wrap;
+  overflow-y: auto;
+}
+
+.button {
+  width: 150px;
+  padding: 10px 20px;
+  display: block;
+  margin: 0 auto;
+  margin-top: 10px;
+  border: 1px solid #33333333;
+}

frontend/src/PagesAdmin/InterviewNotesAdminPage/InterviewNotesAdminPage.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '~/Components';
+import { TextAreaField } from '~/Components/TextAreaField/TextAreaField';
+import { KEY } from '~/i18n/constants';
+import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
+import styles from './InterviewNotesAdminPage.module.scss';
+
+export function InterviewNotesPage() {
+  //TODO: interview notes from backend
+  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.
+  const { t } = useTranslation();
+
+  function handleOnClick() {
+    //TODO: Save the text in the textbox and send it to the backend
+    editingMode ? setEditingMode(false) : setEditingMode(true);
+  }
+
+  function handleTextarea(value: string) {
+    setText(value);
+  }
+
+  //TODO: make handleSave function to save the text in the textbox and send it to the backend
+
+  return (
+    <AdminPageLayout title={t(KEY.recruitment_interview_notes)}>
+      <div className={styles.container}>
+        <label htmlFor="INotes">
+          {t(KEY.recruitment_applicant)} {posid}
+        </label>
+        {editingMode ? (
+          <TextAreaField value={text} onChange={handleTextarea}></TextAreaField>
+        ) : (
+          <div className={styles.textbox}>
+            <p>{text}</p>
+          </div>
+        )}
+        <Button theme="samf" rounded={true} className={styles.button} onClick={handleOnClick}>
+          {editingMode ? t(KEY.common_save) : t(KEY.common_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/i18n/constants.ts

@@ -156,6 +156,7 @@ export const KEY = {
   recruitment_applicant: 'recruitment_applicant',
   recruitment_interview_time: 'recruitment_interview_time',
   recruitment_interview_location: 'recruitment_interview_location',
+  recruitment_interview_notes: 'recruitment_interview_notes',
   recruitment_priority: 'recruitment_priority',
   recruitment_recruiter_priority: 'recruitment_recruiter_priority',
   recruitment_recruiter_status: 'recruitment_recruiter_status',

frontend/src/i18n/translations.ts

@@ -144,6 +144,7 @@ export const nb: Record<KeyValues, string> = {
   [KEY.recruitment_applicant]: 'Søker',
   [KEY.recruitment_interview_time]: 'Intervjutid',
   [KEY.recruitment_interview_location]: 'Intervjusted',
+  [KEY.recruitment_interview_notes]: 'Intervju notater',
   [KEY.recruitment_priority]: 'Søkers prioritet',
   [KEY.recruitment_recruiter_priority]: 'Prioritet',
   [KEY.recruitment_recruiter_status]: 'Status',
@@ -367,6 +368,7 @@ export const en: Record<KeyValues, string> = {
   [KEY.recruitment_applicant]: 'Applicant',
   [KEY.recruitment_interview_time]: 'Intervjutid',
   [KEY.recruitment_interview_location]: 'Intervjusted',
+  [KEY.recruitment_interview_notes]: 'Interview notes',
   [KEY.recruitment_priority]: 'Søkers prioritet',
   [KEY.recruitment_recruiter_priority]: 'Prioritet',
   [KEY.recruitment_recruiter_status]: 'Status',

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_interview_notes:
+    '/control-panel/recruitment/:recruitmentId/gang/:gangId/position/:positionId/notesId', //fix when backend is done
   // ==================== //
   //      Development     //
   // ==================== //