Create page for creating rooms

frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/CreateInterviewRoomPage.tsx

@@ -0,0 +1,41 @@
+import { useRouteLoaderData } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { SamfForm } from '~/Forms/SamfForm';
+import { SamfFormField } from '~/Forms/SamfFormField';
+import { postInterviewRoom } from '~/api';
+import type { InterviewRoomDto } from '~/dto';
+import { useCustomNavigate } from '~/hooks';
+import type { RecruitmentLoader } from '~/router/loaders';
+import { ROUTES } from '~/routes';
+
+export function CreateInterviewRoomPage() {
+  const data = useRouteLoaderData('recruitment') as RecruitmentLoader | undefined;
+  const navigation = useCustomNavigate();
+  if (!data?.recruitment?.id) {
+    return <p>No recruitment id found</p>;
+  }
+
+  const initialData: Partial<InterviewRoomDto> = {
+    recruitment: Number(data.recruitment.id),
+  };
+  // ROUTES.frontend.admin_recruitment_room_overview, { recruitmentId: data.recruitment }
+  function handleSubmit(data: InterviewRoomDto) {
+    try {
+      postInterviewRoom(data).then(() => {
+        toast.success('Interview room created');
+        navigation({ url: ROUTES.frontend.admin_recruitment_room_overview });
+      });
+    } catch (error) {
+      toast.error('Failed to create interview room');
+    }
+  }
+
+  return (
+    <SamfForm<InterviewRoomDto> initialData={initialData} onSubmit={handleSubmit}>
+      <SamfFormField type="text" field={'name'} />
+      <SamfFormField type="text" field={'location'} />
+      <SamfFormField type="date_time" field={'start_time'} />
+      <SamfFormField type="date_time" field={'end_time'} />
+    </SamfForm>
+  );
+}

frontend/src/PagesAdmin/RoomAdminPage/CreateInterviewRoomPage/index.ts

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

frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx

@@ -1,13 +1,16 @@
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useRouteLoaderData } from 'react-router-dom';
-import { Table } from '~/Components';
+import { Button, Table } from '~/Components';
 import { getInterviewRoomsForRecruitment } from '~/api';
 import type { InterviewRoomDto } from '~/dto';
+import { KEY } from '~/i18n/constants';
 import type { RecruitmentLoader } from '~/router/loaders';
 
 export function RoomAdminPage() {
   const [interviewRooms, setInterviewRooms] = useState<InterviewRoomDto[] | undefined>();
   const data = useRouteLoaderData('recruitment') as RecruitmentLoader | undefined;
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (data?.recruitment?.id) {
@@ -39,5 +42,12 @@ export function RoomAdminPage() {
     room.gang !== undefined ? room.gang : 'N/A',
   ]);
 
-  return <Table columns={columns} data={tableData} defaultSortColumn={0} />;
+  return (
+    <>
+      <Button link="" theme="samf">
+        {t([KEY.common_create])}
+      </Button>
+      <Table columns={columns} data={tableData} defaultSortColumn={0} />
+    </>
+  );
 }

frontend/src/PagesAdmin/RoomAdminPage/index.ts

@@ -1 +1,2 @@
+export { CreateInterviewRoomPage } from './CreateInterviewRoomPage';
 export { RoomAdminPage } from './RoomAdminPage';

frontend/src/PagesAdmin/index.ts

@@ -26,7 +26,7 @@ export { RecruitmentRecruiterDashboardPage } from './RecruitmentRecruiterDashboa
 export { RecruitmentUnprocessedApplicantsPage } from './RecruitmentUnprocessedApplicantsPage';
 export { RecruitmentUsersWithoutInterviewGangPage } from './RecruitmentUsersWithoutInterviewGangPage';
 export { RecruitmentUsersWithoutThreeInterviewCriteriaPage } from './RecruitmentUsersWithoutThreeInterviewCriteriaPage';
-export { RoomAdminPage } from './RoomAdminPage';
+export { CreateInterviewRoomPage, RoomAdminPage } from './RoomAdminPage';
 export { SaksdokumentAdminPage } from './SaksdokumentAdminPage';
 export { SaksdokumentFormAdminPage } from './SaksdokumentFormAdminPage';
 export { SultenMenuAdminPage } from './SultenMenuAdminPage';

frontend/src/api.ts

@@ -895,8 +895,13 @@ export async function putRecruitmentApplicationInterview(
   return response;
 }
 
+// ############################################################
+//                       Interview rooms
+// ############################################################
 
-export async function getInterviewRoomsForRecruitment(recruitmentId: string): Promise<AxiosResponse<InterviewRoomDto[]>> {
+export async function getInterviewRoomsForRecruitment(
+  recruitmentId: string,
+): Promise<AxiosResponse<InterviewRoomDto[]>> {
   const url =
     BACKEND_DOMAIN +
     reverse({
@@ -906,6 +911,11 @@ export async function getInterviewRoomsForRecruitment(recruitmentId: string): Pr
   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 });
+}
+
 // ############################################################
 //                       Purchase Feedback
 // ############################################################

frontend/src/router/router.tsx

@@ -34,6 +34,7 @@ import {
   AdminLayout,
   ClosedPeriodAdminPage,
   ClosedPeriodFormAdminPage,
+  CreateInterviewRoomPage,
   EventCreatorAdminPage,
   EventsAdminPage,
   GangsAdminPage,
@@ -57,6 +58,7 @@ import {
   RecruitmentUnprocessedApplicantsPage,
   RecruitmentUsersWithoutInterviewGangPage,
   RecruitmentUsersWithoutThreeInterviewCriteriaPage,
+  RoomAdminPage,
   SaksdokumentAdminPage,
   SaksdokumentFormAdminPage,
   SultenMenuAdminPage,
@@ -70,7 +72,6 @@ import { ROUTES } from '~/routes';
 import { t } from 'i18next';
 import { App } from '~/App';
 import { RecruitmentRecruiterDashboardPage } from '~/PagesAdmin/RecruitmentRecruiterDashboardPage/RecruitmentRecruiterDashboardPage';
-import { RoomAdminPage } from '~/PagesAdmin/RoomAdminPage/RoomAdminPage';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
 import {
@@ -455,7 +456,8 @@ export const router = createBrowserRouter(
                 },
               }}
             />
-            <Route path={ROUTES.frontend.admin_recruitment_room_create} element={<RoomAdminPage />} />
+            <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_gang_overview}
               element={<PermissionRoute required={[]} element={<RecruitmentGangOverviewPage />} />}

frontend/src/routes/frontend.ts

@@ -80,6 +80,7 @@ export const ROUTES_FRONTEND = {
   admin_recruitment_gang_position_create: '/control-panel/recruitment/:recruitmentId/gang/:gangId/create/',
   admin_recruitment_gang_position_edit: '/control-panel/recruitment/:recruitmentId/gang/:gangId/edit/:positionId',
   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/',