704 possibility to access interview notes from overview page (#739)

* Created interviewnotes page

* fix css for InterviewNotes page

* added TODOs for getting notes from backend

* fixed route names

* added translations for interview notes and deleted p-lock.json

* fixed interview notes page

* Improved css and tsx file

* Fixed darkmode

frontend/src/AppRoutes.tsx

@@ -48,6 +48,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';
@@ -186,6 +187,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,28 @@
+@import 'src/mixins';
+
+@import 'src/constants';
+
+.container {
+  color: $black;
+  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;
+
+  @include theme-dark {
+    background-color: $black;
+    color: $theme-dark-color;
+  }
+}
+
+.button {
+  width: 150px;
+  margin: 0 auto;
+  margin-top: 10px;
+}

frontend/src/PagesAdmin/InterviewNotesAdminPage/InterviewNotesAdminPage.tsx

@@ -0,0 +1,38 @@
+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 handleEditSave() {
+    if (editingMode) {
+      //TODO: save the text in the textbox and send it to the backend
+    }
+    setEditingMode(!editingMode);
+  }
+
+  //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>
+        <TextAreaField value={text} onChange={setText} disabled={!editingMode}></TextAreaField>
+        <Button theme="samf" rounded={true} className={styles.button} onClick={handleEditSave}>
+          {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

@@ -157,6 +157,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

@@ -145,6 +145,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',
@@ -369,6 +370,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     //
   // ==================== //