704 possibility to access interview notes from overview page3 (#986)

* Edit interview notes

* Add putRecruitmentAdmissionInterview to edit interview in backend

* Add help functions and util functions

* Make putRecruitmentAdmissionInterview allow numbers

* Edit comment on util func filterRecruitmentAdmission

---------

Co-authored-by: Robin <[email protected]>

backend/samfundet/serializers.py

@@ -698,6 +698,7 @@ def update(self, instance: RecruitmentAdmission, validated_data: dict) -> Recrui
         interview_instance = instance.interview
         interview_instance.interview_location = interview_data.get('interview_location', interview_instance.interview_location)
         interview_instance.interview_time = interview_data.get('interview_time', interview_instance.interview_time)
+        interview_instance.notes = interview_data.get('notes', interview_instance.notes)
         interview_instance.save()
 
         # Update other fields of RecruitmentAdmission instance

frontend/src/PagesAdmin/InterviewNotesAdminPage/InterviewNotesAdminPage.tsx

@@ -1,35 +1,72 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
 import { Button } from '~/Components';
 import { TextAreaField } from '~/Components/TextAreaField/TextAreaField';
+import { getRecruitmentAdmissionsForGang, putRecruitmentAdmissionInterview } from '~/api';
+import { InterviewDto, RecruitmentAdmissionDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
 import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
 import styles from './InterviewNotesAdminPage.module.scss';
+import { filterRecruitmentAdmission, getNameUser } from './utils';
 
 export function InterviewNotesPage() {
-  //TODO: interview notes from backend
+  const recruitmentId = useParams().recruitmentId;
+  const gangId = useParams().gangId;
+  const positionId = useParams().positionId;
+  const interviewId = useParams().interviewId;
   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 [recruitmentAdmission, setRecruitmentAdmission] = useState<RecruitmentAdmissionDto[]>([]);
+  const [interview, setInterview] = useState<InterviewDto | null>(null);
+  const [disabled, setdisabled] = useState<boolean>(true);
+  const [nameUser, setNameUser] = useState<string>('');
   const { t } = useTranslation();
 
-  function handleEditSave() {
-    if (editingMode) {
-      //TODO: save the text in the textbox and send it to the backend
+  useEffect(() => {
+    if (positionId && recruitmentId && gangId && interviewId) {
+      getRecruitmentAdmissionsForGang(gangId, recruitmentId).then((response) => {
+        const admission = filterRecruitmentAdmission(response.data, positionId, interviewId);
+        if (admission.length !== 0) {
+          setdisabled(false);
+          setRecruitmentAdmission(admission);
+          setInterview(admission[0].interview);
+          setNameUser(getNameUser(admission[0]));
+        }
+      });
+    }
+  }, [recruitmentId, positionId, gangId, interviewId]);
+
+  async function handleEditSave() {
+    if (editingMode && interview) {
+      try {
+        await putRecruitmentAdmissionInterview(interview.id, interview);
+        toast.success(t(KEY.common_save_successful));
+      } catch (error) {
+        toast.error(t(KEY.common_something_went_wrong));
+      }
     }
     setEditingMode(!editingMode);
   }
 
-  //TODO: make handleSave function to save the text in the textbox and send it to the backend
+  function handleUpdateNotes(value: string) {
+    const updatedNotes = value;
+    const updatedInterview: InterviewDto = { ...recruitmentAdmission[0].interview, notes: updatedNotes };
+    setInterview(updatedInterview);
+  }
 
   return (
     <AdminPageLayout title={t(KEY.recruitment_interview_notes)}>
       <div className={styles.container}>
         <label htmlFor="INotes">
-          {t(KEY.recruitment_applicant)} {posId}
+          {t(KEY.recruitment_applicant)}: {nameUser}
         </label>
-        <TextAreaField value={text} onChange={setText} disabled={!editingMode}></TextAreaField>
-        <Button theme="samf" rounded={true} className={styles.button} onClick={handleEditSave}>
+        <TextAreaField
+          value={interview ? interview.notes : ' '}
+          onChange={handleUpdateNotes}
+          disabled={!editingMode}
+        ></TextAreaField>
+        <Button theme="samf" rounded={true} className={styles.button} onClick={handleEditSave} disabled={disabled}>
           {editingMode ? t(KEY.common_save) : t(KEY.common_edit)}
         </Button>
       </div>

frontend/src/PagesAdmin/InterviewNotesAdminPage/utils.ts

@@ -0,0 +1,20 @@
+import { RecruitmentAdmissionDto } from '~/dto';
+
+/** Filtrer recruitmentadmission based on positionId, InterviewId and interview time */
+export function filterRecruitmentAdmission(
+  recruitmentAdmissions: RecruitmentAdmissionDto[],
+  positionId: string,
+  interviewId: string,
+): RecruitmentAdmissionDto[] {
+  return recruitmentAdmissions.filter(
+    (admission) =>
+      admission.recruitment_position &&
+      admission.recruitment_position.toString() === positionId &&
+      admission.interview.id.toString() === interviewId &&
+      admission.interview.interview_time !== null,
+  );
+}
+
+export function getNameUser(admission: RecruitmentAdmissionDto): string {
+  return admission.user.first_name ? admission.user.first_name + ' ' + admission.user.last_name : '';
+}

frontend/src/api.ts

@@ -11,6 +11,7 @@ import {
   ImageDto,
   ImagePostDto,
   InformationPageDto,
+  InterviewDto,
   KeyValueDto,
   MenuDto,
   MenuItemDto,
@@ -713,3 +714,17 @@ export async function putRecruitmentAdmission(
 
   return response;
 }
+
+export async function putRecruitmentAdmissionInterview(
+  interviewId: string | number,
+  interview: Partial<InterviewDto>,
+): Promise<AxiosResponse> {
+  const url =
+    BACKEND_DOMAIN +
+    reverse({
+      pattern: ROUTES.backend.samfundet__interview_detail,
+      urlParams: { pk: interviewId.toString() },
+    });
+  const response = await axios.put<InterviewDto>(url, interview, { withCredentials: true });
+  return response;
+}

frontend/src/i18n/constants.ts

@@ -114,6 +114,7 @@ export const KEY = {
   common_long_description: 'common_long_description',
   common_short_description: 'common_short_description',
   common_back_to_samfundet: 'common_back_to_samfundet',
+  common_save_successful: 'common_save_successful',
   common_delete_successful: 'common_delete_successful',
   common_update_successful: 'common_update_successful',
   common_creation_successful: 'common_creation_successful',

frontend/src/i18n/translations.ts

@@ -100,6 +100,7 @@ export const nb: Record<KeyValues, string> = {
   [KEY.common_long_description]: 'Lang beskrivelse',
   [KEY.common_short_description]: 'Kort beskrivelse',
   [KEY.common_back_to_samfundet]: 'Tilbake til samfundet.no',
+  [KEY.common_save_successful]: 'Lagring var vellykket',
   [KEY.common_delete_successful]: 'Slettingen var vellykket',
   [KEY.common_update_successful]: 'Oppdateringen var vellykket',
   [KEY.common_see_in_django_admin]: 'Se i django admin-panel',
@@ -380,6 +381,7 @@ export const en: Record<KeyValues, string> = {
   [KEY.common_long_description]: 'Long description',
   [KEY.common_short_description]: 'Short description',
   [KEY.common_back_to_samfundet]: 'Back to samfundet.no',
+  [KEY.common_save_successful]: 'Saving was successful',
   [KEY.common_delete_successful]: 'Deletion was successful',
   [KEY.common_update_successful]: 'The update was successful',
   [KEY.common_see_in_django_admin]: 'See in django admin-panel',

frontend/src/routes/frontend.ts

@@ -70,7 +70,7 @@ export const ROUTES_FRONTEND = {
   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
+    '/control-panel/recruitment/:recruitmentId/gang/:gangId/position/:positionId/interview-notes/:interviewId',
   admin_sulten_menu: '/control-panel/lyche/menu',
   // ==================== //
   //      Development     //