From b66ea936c3d611162fc663b2f925a0a36f3a915e Mon Sep 17 00:00:00 2001
From: Mathias Aas <54811233+Mathias-a@users.noreply.github.com>
Date: Tue, 24 Sep 2024 21:10:52 +0200
Subject: [PATCH] 1355 frontend for submitting interview rooms (#1385)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Create page for room overview

* Add table of interview rooms

* Create page for creating rooms

* Add edit and delete room functionality
---------

Co-authored-by: Snorre Sæther <112980079+Snorre98@users.noreply.github.com>
---
 frontend/package.json                         |   2 -
 .../RecruitmentGangOverviewPage.tsx           |  10 ++
 .../CreateInterviewRoomPage.tsx               | 146 ++++++++++++++++++
 .../CreateInterviewRoomPage/index.ts          |   1 +
 .../RoomAdminPage/RoomAdminPage.tsx           |  86 +++++++++++
 .../src/PagesAdmin/RoomAdminPage/index.ts     |   2 +
 frontend/src/PagesAdmin/index.ts              |   5 +-
 frontend/src/api.ts                           |  41 +++++
 frontend/src/dto.ts                           |  10 ++
 frontend/src/i18n/constants.ts                |   1 +
 frontend/src/i18n/translations.ts             |   3 +
 frontend/src/router/router.tsx                |   6 +
 frontend/src/routes/frontend.ts               |   3 +
 frontend/yarn.lock                            |   6 +-
 14 files changed, 315 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/CreateInterviewRoomPage.tsx
 create mode 100644 frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/index.ts
 create mode 100644 frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx
 create mode 100644 frontend/src/PagesAdmin/RoomAdminPage/index.ts

diff --git a/frontend/package.json b/frontend/package.json
index dd1acb16f..64d674784 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,7 +24,6 @@
     "build-storybook-dev": "storybook build",
     "cypress:open": "cypress open",
     "cypress:run": "yarn run cypress run",
-
     "biome//": "echo Biome is configured for entire repo.",
     "biome:check": "biome check",
     "biome:ci": "biome ci",
@@ -34,7 +33,6 @@
     "lint:fix-unsafe": "biome lint --write --unsafe",
     "format:check": "biome format",
     "format:fix": "biome format --write",
-
     "stylelint:check": "stylelint --config .stylelintrc src/**/*.{css,scss}",
     "tsc:check": "tsc",
     "tsc:watch": "tsc --watch",
diff --git a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx
index abf2bc643..7a5f1d97b 100644
--- a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx
@@ -153,6 +153,16 @@ export function RecruitmentGangOverviewPage() {
       >
         {t(KEY.common_edit)}
       </Button>
+      <Button
+        theme="samf"
+        rounded={true}
+        link={reverse({
+          pattern: ROUTES.frontend.admin_recruitment_room_overview,
+          urlParams: { recruitmentId },
+        })}
+      >
+        {t(KEY.recruitment_create_room)}
+      </Button>
       <Button
         theme="success"
         rounded={true}
diff --git a/frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/CreateInterviewRoomPage.tsx b/frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/CreateInterviewRoomPage.tsx
new file mode 100644
index 000000000..f2c90feda
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/CreateInterviewRoomPage.tsx
@@ -0,0 +1,146 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { SamfundetLogoSpinner } from '~/Components';
+import { SamfForm } from '~/Forms/SamfForm';
+import { SamfFormField } from '~/Forms/SamfFormField';
+import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
+import { getInterviewRoom, postInterviewRoom, putInterviewRoom } from '~/api';
+import type { InterviewRoomDto } from '~/dto';
+import { STATUS } from '~/http_status_codes';
+import { KEY } from '~/i18n/constants';
+import { reverse } from '~/named-urls';
+import { ROUTES } from '~/routes';
+
+type FormType = {
+  name: string;
+  location: string;
+  start_time: string;
+  end_time: string;
+};
+
+export function CreateInterviewRoomPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const { recruitmentId, roomId } = useParams();
+  const [showSpinner, setShowSpinner] = useState<boolean>(true);
+  const [room, setRoom] = useState<Partial<InterviewRoomDto>>();
+
+  useEffect(() => {
+    if (roomId) {
+      getInterviewRoom(roomId)
+        .then((data) => {
+          setRoom(data.data);
+          setShowSpinner(false);
+        })
+        .catch((data) => {
+          if (data.request.status === STATUS.HTTP_404_NOT_FOUND) {
+            navigate(
+              reverse({
+                pattern: ROUTES.frontend.admin_recruitment_room_overview,
+                urlParams: { recruitmentId: recruitmentId },
+              }),
+              { replace: true },
+            );
+          }
+          toast.error(t(KEY.common_something_went_wrong));
+        });
+    } else {
+      setShowSpinner(false);
+    }
+  }, [roomId, recruitmentId, navigate, t]);
+
+  const initialData: Partial<InterviewRoomDto> = {
+    name: room?.name,
+    location: room?.location,
+    start_time: room?.start_time,
+    end_time: room?.end_time,
+  };
+
+  const submitText = roomId ? t(KEY.common_save) : t(KEY.common_create);
+
+  if (showSpinner) {
+    return (
+      <div>
+        <SamfundetLogoSpinner />
+      </div>
+    );
+  }
+
+  function handleOnSubmit(data: InterviewRoomDto) {
+    const updatedRoom = {
+      ...data,
+      recruitment: recruitmentId,
+    };
+
+    if (roomId) {
+      putInterviewRoom(roomId, updatedRoom)
+        .then(() => {
+          toast.success(t(KEY.common_update_successful));
+          navigate(
+            reverse({
+              pattern: ROUTES.frontend.admin_recruitment_room_overview,
+              urlParams: { recruitmentId: recruitmentId },
+            }),
+          );
+        })
+        .catch((error) => {
+          toast.error(t(KEY.common_something_went_wrong));
+          console.error(error);
+        });
+    } else {
+      postInterviewRoom(updatedRoom)
+        .then(() => {
+          navigate(
+            reverse({
+              pattern: ROUTES.frontend.admin_recruitment_room_overview,
+              urlParams: { recruitmentId: recruitmentId },
+            }),
+          );
+          toast.success(t(KEY.common_creation_successful));
+        })
+        .catch((error) => {
+          toast.error(t(KEY.common_something_went_wrong));
+          console.error(error);
+        });
+    }
+  }
+
+  return (
+    <AdminPageLayout title={`${roomId ? t(KEY.common_edit) : t(KEY.common_create)}`} header={true}>
+      <div>
+        <SamfForm<FormType> onSubmit={handleOnSubmit} initialData={initialData} submitText={submitText}>
+          <div>
+            <SamfFormField<string, FormType> field="name" type="text" label={t(KEY.common_name)} required={true} />
+          </div>
+          <div>
+            <SamfFormField<string, FormType>
+              field="location"
+              type="text"
+              label={t(KEY.recruitment_interview_location)}
+              required={true}
+            />
+          </div>
+          <div>
+            <SamfFormField<string, FormType>
+              field="start_time"
+              type="date_time"
+              label={t(KEY.start_time)}
+              required={true}
+            />
+          </div>
+          <div>
+            <SamfFormField<string, FormType>
+              field="end_time"
+              type="date_time"
+              label={t(KEY.end_time)}
+              required={true}
+            />
+          </div>
+        </SamfForm>
+      </div>
+    </AdminPageLayout>
+  );
+}
diff --git a/frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/index.ts b/frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/index.ts
new file mode 100644
index 000000000..884880e21
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/index.ts
@@ -0,0 +1 @@
+export { CreateInterviewRoomPage } from './CreateInterviewRoomPage';
diff --git a/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx b/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx
new file mode 100644
index 000000000..1618e6bc6
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useRouteLoaderData } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { Button, CrudButtons, Table } from '~/Components';
+import { deleteInterviewRoom, getInterviewRoomsForRecruitment } from '~/api';
+import type { InterviewRoomDto } from '~/dto';
+import { useCustomNavigate } from '~/hooks';
+import { KEY } from '~/i18n/constants';
+import { reverse } from '~/named-urls';
+import type { RecruitmentLoader } from '~/router/loaders';
+import { ROUTES } from '~/routes';
+
+export function RoomAdminPage() {
+  const [interviewRooms, setInterviewRooms] = useState<InterviewRoomDto[] | undefined>();
+  const data = useRouteLoaderData('recruitment') as RecruitmentLoader | undefined;
+  const navigate = useCustomNavigate();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (data?.recruitment?.id) {
+      getInterviewRoomsForRecruitment(data.recruitment.id.toString()).then((response) =>
+        setInterviewRooms(response.data),
+      );
+    }
+  }, [data?.recruitment?.id]);
+
+  if (!interviewRooms) {
+    return <p>No rooms found</p>;
+  }
+
+  const columns = [
+    { content: 'Room Name', sortable: true },
+    { content: 'Location', sortable: true },
+    { content: 'Start Time', sortable: true },
+    { content: 'End Time', sortable: true },
+    { content: 'Recruitment', sortable: true },
+    { content: 'Gang', sortable: true },
+    { content: 'Actions', sortable: false },
+  ];
+
+  const tableData = interviewRooms.map((room) => [
+    room.name,
+    room.location,
+    new Date(room.start_time),
+    new Date(room.end_time),
+    room.recruitment,
+    room.gang !== undefined ? room.gang : 'N/A',
+    {
+      content: (
+        <CrudButtons
+          key={`edit-room-${room.id}`}
+          onEdit={() =>
+            navigate({
+              url: reverse({
+                pattern: ROUTES.frontend.admin_recruitment_room_edit,
+                urlParams: { recruitmentId: data?.recruitment?.id, roomId: room.id.toString() },
+              }),
+            })
+          }
+          onDelete={() => {
+            deleteInterviewRoom(room.id.toString()).then(() => {
+              toast.success('Interview room deleted');
+              setInterviewRooms(interviewRooms.filter((r) => r.id !== room.id));
+            });
+          }}
+        />
+      ),
+    },
+  ]);
+
+  return (
+    <>
+      <Button
+        link={reverse({
+          pattern: ROUTES.frontend.admin_recruitment_room_create,
+          urlParams: { recruitmentId: data?.recruitment?.id },
+        })}
+        theme="samf"
+      >
+        {t(KEY.common_create)}
+      </Button>
+      <Table columns={columns} data={tableData} defaultSortColumn={0} />
+    </>
+  );
+}
diff --git a/frontend/src/PagesAdmin/RoomAdminPage/index.ts b/frontend/src/PagesAdmin/RoomAdminPage/index.ts
new file mode 100644
index 000000000..6ee984d91
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoomAdminPage/index.ts
@@ -0,0 +1,2 @@
+export { CreateInterviewRoomPage } from './CreateInterviewRoomPage';
+export { RoomAdminPage } from './RoomAdminPage';
diff --git a/frontend/src/PagesAdmin/index.ts b/frontend/src/PagesAdmin/index.ts
index 59afa2410..8d55ecfe4 100644
--- a/frontend/src/PagesAdmin/index.ts
+++ b/frontend/src/PagesAdmin/index.ts
@@ -22,15 +22,16 @@ export { RecruitmentGangOverviewPage } from './RecruitmentGangOverviewPage';
 export { RecruitmentOverviewPage } from './RecruitmentOverviewPage';
 export { RecruitmentPositionFormAdminPage } from './RecruitmentPositionFormAdminPage';
 export { RecruitmentPositionOverviewPage } from './RecruitmentPositionOverviewPage';
+export { RecruitmentRecruiterDashboardPage } from './RecruitmentRecruiterDashboardPage';
+export { RecruitmentSeparatePositionFormAdminPage } from './RecruitmentSeparatePositionFormAdminPage';
 export { RecruitmentUnprocessedApplicantsPage } from './RecruitmentUnprocessedApplicantsPage';
 export { RecruitmentUsersWithoutInterviewGangPage } from './RecruitmentUsersWithoutInterviewGangPage';
 export { RecruitmentUsersWithoutThreeInterviewCriteriaPage } from './RecruitmentUsersWithoutThreeInterviewCriteriaPage';
 export { RolesAdminPage } from './RolesAdminPage';
+export { CreateInterviewRoomPage, RoomAdminPage } from './RoomAdminPage';
 export { SaksdokumentAdminPage } from './SaksdokumentAdminPage';
 export { SaksdokumentFormAdminPage } from './SaksdokumentFormAdminPage';
 export { SultenMenuAdminPage } from './SultenMenuAdminPage';
 export { SultenMenuItemFormAdminPage } from './SultenMenuItemFormAdminPage';
 export { SultenReservationAdminPage } from './SultenReservationAdminPage';
 export { UsersAdminPage } from './UsersAdminPage';
-export { RecruitmentRecruiterDashboardPage } from './RecruitmentRecruiterDashboardPage';
-export { RecruitmentSeparatePositionFormAdminPage } from './RecruitmentSeparatePositionFormAdminPage';
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index ee0306396..340334443 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -13,6 +13,7 @@ import type {
   ImagePostDto,
   InformationPageDto,
   InterviewDto,
+  InterviewRoomDto,
   KeyValueDto,
   MenuDto,
   MenuItemDto,
@@ -937,6 +938,46 @@ export async function putRecruitmentApplicationInterview(
   const response = await axios.put<InterviewDto>(url, interview, { withCredentials: true });
   return response;
 }
+
+// ############################################################
+//                       Interview rooms
+// ############################################################
+
+export async function getInterviewRoomsForRecruitment(
+  recruitmentId: string,
+): Promise<AxiosResponse<InterviewRoomDto[]>> {
+  const url =
+    BACKEND_DOMAIN +
+    reverse({
+      pattern: ROUTES.backend.samfundet__interview_rooms_list,
+      queryParams: { recruitment: recruitmentId },
+    });
+  return await axios.get(url, { withCredentials: true });
+}
+
+export async function getInterviewRoom(id: string): Promise<AxiosResponse<InterviewRoomDto>> {
+  const url =
+    BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__interview_rooms_detail, urlParams: { pk: id } });
+  return await axios.get(url, { withCredentials: true });
+}
+
+export async function postInterviewRoom(data: Partial<InterviewRoomDto>): Promise<AxiosResponse> {
+  const url = BACKEND_DOMAIN + ROUTES.backend.samfundet__interview_rooms_list;
+  return await axios.post(url, data, { withCredentials: true });
+}
+
+export async function putInterviewRoom(id: string, data: Partial<InterviewRoomDto>): Promise<AxiosResponse> {
+  const url =
+    BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__interview_rooms_detail, urlParams: { pk: id } });
+  return await axios.put(url, data, { withCredentials: true });
+}
+
+export async function deleteInterviewRoom(id: string): Promise<AxiosResponse> {
+  const url =
+    BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__interview_rooms_detail, urlParams: { pk: id } });
+  return await axios.delete(url, { withCredentials: true });
+}
+
 // ############################################################
 //                       Purchase Feedback
 // ############################################################
diff --git a/frontend/src/dto.ts b/frontend/src/dto.ts
index 3d25004f1..e98da3f11 100644
--- a/frontend/src/dto.ts
+++ b/frontend/src/dto.ts
@@ -537,6 +537,16 @@ export type RecruitmentStatsDto = {
   campus_stats: RecruitmentCampusStatDto[];
 };
 
+export type InterviewRoomDto = {
+  id: number;
+  name: string;
+  location: string;
+  start_time: string;
+  end_time: string;
+  recruitment: string;
+  gang?: number;
+};
+
 // ############################################################
 //                       Purchase Feedback
 // ############################################################
diff --git a/frontend/src/i18n/constants.ts b/frontend/src/i18n/constants.ts
index a37b79dde..0a6d276ba 100644
--- a/frontend/src/i18n/constants.ts
+++ b/frontend/src/i18n/constants.ts
@@ -296,6 +296,7 @@ export const KEY = {
   recruitment_all_applications: 'recruitment_all_applications',
   recruitment_not_applied: 'recruitment_not_applied',
   recruitment_will_be_anonymized: 'recruitment_will_be_anonymized',
+  recruitment_create_room: 'recruitment_create_room',
   shown_application_deadline: 'shown_application_deadline',
   actual_application_deadline: 'actual_application_deadline',
   recruitment_number_of_applications: 'recruitment_number_of_applications',
diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts
index 7c52d7738..c7d3616f5 100644
--- a/frontend/src/i18n/translations.ts
+++ b/frontend/src/i18n/translations.ts
@@ -360,6 +360,7 @@ export const nb = prepareTranslations({
   [KEY.admin_information_confirm_delete]: 'Er du sikker du vil slette denne informasjonssiden?',
   [KEY.admin_information_confirm_cancel]: 'Er du sikker på at du vil gå tilbake uten å lagre?',
   [KEY.admin_gangsadminpage_abbreviation]: 'Forkortelse',
+  [KEY.recruitment_create_room]: 'Opprett rom',
 
   // CommandMenu:
   [KEY.command_menu_label]: 'Global kommando meny',
@@ -763,6 +764,8 @@ export const en = prepareTranslations({
   [KEY.error_recruitment_form_4]: 'Group reprioritization deadline cannot be before the reprioritization deadline',
   [KEY.recruitment_dashboard_description]:
     'Here you have an overview of your job as a recruiter for the recruitment, here you can see your upcomming interviews, the positions you have a responsibility for, and setting the time you are available to host an interview',
+  [KEY.recruitment_create_room]: 'Create room',
+
   // Admin:
   [KEY.admin_organizer]: 'Organizer',
   [KEY.admin_saksdokument]: 'Case document',
diff --git a/frontend/src/router/router.tsx b/frontend/src/router/router.tsx
index b2a2dc243..8352bf12a 100644
--- a/frontend/src/router/router.tsx
+++ b/frontend/src/router/router.tsx
@@ -34,6 +34,7 @@ import {
   AdminLayout,
   ClosedPeriodAdminPage,
   ClosedPeriodFormAdminPage,
+  CreateInterviewRoomPage,
   EventCreatorAdminPage,
   EventsAdminPage,
   GangsAdminPage,
@@ -59,6 +60,7 @@ import {
   RecruitmentUsersWithoutInterviewGangPage,
   RecruitmentUsersWithoutThreeInterviewCriteriaPage,
   RolesAdminPage,
+  RoomAdminPage,
   SaksdokumentAdminPage,
   SaksdokumentFormAdminPage,
   SultenMenuAdminPage,
@@ -498,6 +500,7 @@ export const router = createBrowserRouter(
                 },
               }}
             />
+
             <Route
               path={ROUTES.frontend.admin_recruitment_users_without_interview}
               element={<RecruitmentUsersWithoutInterviewGangPage />}
@@ -518,6 +521,9 @@ export const router = createBrowserRouter(
                 },
               }}
             />
+            <Route path={ROUTES.frontend.admin_recruitment_room_overview} element={<RoomAdminPage />} />
+            <Route path={ROUTES.frontend.admin_recruitment_room_create} element={<CreateInterviewRoomPage />} />
+            <Route path={ROUTES.frontend.admin_recruitment_room_edit} element={<CreateInterviewRoomPage />} />
             <Route
               path={ROUTES.frontend.admin_recruitment_gang_overview}
               element={<PermissionRoute required={[]} element={<RecruitmentGangOverviewPage />} />}
diff --git a/frontend/src/routes/frontend.ts b/frontend/src/routes/frontend.ts
index 48debc467..e027e3401 100644
--- a/frontend/src/routes/frontend.ts
+++ b/frontend/src/routes/frontend.ts
@@ -85,6 +85,9 @@ export const ROUTES_FRONTEND = {
   admin_recruitment_gang_separateposition_edit:
     '/control-panel/recruitment/:recruitmentId/separateposition/edit/:separatePositionId',
   admin_recruitment_recruiter_dashboard: '/control-panel/recruitment/:recruitmentId/recruiter/dashboard/',
+  admin_recruitment_room_overview: '/control-panel/recruitment/:recruitmentId/room-overview/',
+  admin_recruitment_room_create: '/control-panel/recruitment/:recruitmentId/room/create/',
+  admin_recruitment_room_edit: '/control-panel/recruitment/:recruitmentId/room/edit/:roomId/',
 
   admin_recruitment_gang_position_applicants_overview:
     '/control-panel/recruitment/:recruitmentId/gang/:gangId/position/:positionId',
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 07425141c..5882eb70e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7349,9 +7349,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001541":
-  version: 1.0.30001547
-  resolution: "caniuse-lite@npm:1.0.30001547"
-  checksum: 10c0/bd8ef400fdd6a76aa5a4bc490a5b9b8adffbff1657d36ee1516b4be30315f1a3cfaa51ab872a46d5e7db17424eaa335593cd27e640248b4df3897b113650a7d3
+  version: 1.0.30001662
+  resolution: "caniuse-lite@npm:1.0.30001662"
+  checksum: 10c0/4af44610db30b9e63443d984be9d48ab93eef584609b3e87201c10972b9daff0b52674e3ed01f7b7b240460763428a3aa8ef7328d14b76ed31ed464203677007
   languageName: node
   linkType: hard