Add interview group forms

backend/root/utils/routes.py

@@ -544,6 +544,8 @@
 samfundet__recruitment_list = 'samfundet:recruitment-list'
 samfundet__recruitment_detail = 'samfundet:recruitment-detail'
 samfundet__recruitment_gangs = 'samfundet:recruitment-gangs'
+samfundet__recruitment_sharedinterviewgroups_list = 'samfundet:recruitment_sharedinterviewgroups-list'
+samfundet__recruitment_sharedinterviewgroups_detail = 'samfundet:recruitment_sharedinterviewgroups-detail'
 samfundet__recruitment_for_recruiter_list = 'samfundet:recruitment_for_recruiter-list'
 samfundet__recruitment_for_recruiter_detail = 'samfundet:recruitment_for_recruiter-detail'
 samfundet__recruitment_stats_list = 'samfundet:recruitment_stats-list'

backend/samfundet/serializers.py

@@ -934,8 +934,6 @@ class Meta:
 
 
 class RecruitmentPositionSharedInterviewGroupSerializer(serializers.ModelSerializer):
-    positions = RecruitmentPositionForApplicantSerializer(many=True, read_only=True)
-
     class Meta:
         model = RecruitmentPositionSharedInterviewGroup
         fields = [
@@ -946,6 +944,11 @@ class Meta:
             'name_nb',
         ]
 
+    def to_representation(self, instance: RecruitmentPositionSharedInterviewGroup) -> dict:
+        data = super().to_representation(instance)
+        data['positions'] = RecruitmentPositionForApplicantSerializer(instance.positions, many=True).data
+        return data
+
 
 class RecruitmentApplicationForApplicantSerializer(CustomBaseSerializer):
     interview = ApplicantInterviewSerializer(read_only=True)

backend/samfundet/urls.py

@@ -41,6 +41,7 @@
 
 ########## Recruitment ##########
 router.register('recruitment', views.RecruitmentView, 'recruitment')
+router.register('recruitment-sharedinterviewgroup', views.RecruitmentSharedInterviewPositionsView, 'recruitment_sharedinterviewgroups')
 router.register('recruitment-for-recruiter', views.RecruitmentForRecruiterView, 'recruitment_for_recruiter')
 router.register('recruitment-stats', views.RecruitmentStatisticsView, 'recruitment_stats')
 router.register('recruitment-separateposition', views.RecruitmentSeparatePositionView, 'recruitment_separateposition')
@@ -90,7 +91,7 @@
     ),
     path(
         'recruitment-shared-interview-groups/<int:recruitment_id>/',
-        views.RecruitmentInterviewGroupView.as_view(),
+        views.RecruitmentSharedInterviewPositionsRecruitmentView.as_view(),
         name='recruitment_shared_interviews',
     ),
     path('recruitment-positions-gang-for-gangs/', views.RecruitmentPositionsPerGangForGangView.as_view(), name='recruitment_positions_gang_for_gangs'),

backend/samfundet/views.py

@@ -658,6 +658,13 @@ class RecruitmentForRecruiterView(ModelViewSet):
     queryset = Recruitment.objects.all()
 
 
+@method_decorator(ensure_csrf_cookie, 'dispatch')
+class RecruitmentSharedInterviewPositionsView(ModelViewSet):
+    permission_classes = (DjangoModelPermissionsOrAnonReadOnly,)
+    serializer_class = RecruitmentPositionSharedInterviewGroupSerializer
+    queryset = RecruitmentPositionSharedInterviewGroup.objects.all()
+
+
 @method_decorator(ensure_csrf_cookie, 'dispatch')
 class RecruitmentStatisticsView(ModelViewSet):
     permission_classes = (DjangoModelPermissions,)  # Allow read only to permissions on perms
@@ -1136,7 +1143,7 @@ def get_queryset(self) -> Response:
         return Recruitment.objects.filter(visible_from__lte=timezone.now(), actual_application_deadline__gte=timezone.now())
 
 
-class RecruitmentInterviewGroupView(APIView):
+class RecruitmentSharedInterviewPositionsRecruitmentView(APIView):
     permission_classes = [IsAuthenticated]
 
     def get(

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.module.scss

@@ -0,0 +1,8 @@
+@import "src/constants";
+
+@import "src/mixins";
+
+.button {
+  margin-top: 2rem;
+}
+

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx

@@ -1,7 +1,7 @@
 import { type ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { CrudButtons, Link, type Tab, TabView } from '~/Components';
+import { Button, CrudButtons, Link, type Tab, TabView } from '~/Components';
 import { Table } from '~/Components/Table';
 import { deleteRecruitmentSeparatePosition, getRecruitment, getRecruitmentGangs } from '~/api';
 import type { RecruitmentDto, RecruitmentGangDto, RecruitmentSeparatePositionDto } from '~/dto';
@@ -11,7 +11,9 @@ import { reverse } from '~/named-urls';
 import { ROUTES } from '~/routes';
 import { dbT, lowerCapitalize } from '~/utils';
 import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
-import { AppletContainer, RecruitmentInterviewGroupsList } from './components';
+import { AppletContainer, RecruitmentSharedInterviewPositionsList } from './components';
+
+import styles from './RecruitmentGangOverviewPage.module.scss';
 
 export function RecruitmentGangOverviewPage() {
   const { recruitmentId } = useParams();
@@ -124,7 +126,26 @@ export function RecruitmentGangOverviewPage() {
         label: t(KEY.recruitment_gangs_with_separate_positions),
         value: <Table columns={tableSeparatePositionColumns} data={tableSeparatePositionData ?? []} />,
       },
-      { key: 3, label: t(KEY.recruitment_interview_groups), value: <RecruitmentInterviewGroupsList /> },
+      {
+        key: 3,
+        label: t(KEY.recruitment_interview_group_create_header),
+        value: (
+          <>
+            <Button
+              className={styles.button}
+              theme="success"
+              rounded={true}
+              link={reverse({
+                pattern: ROUTES.frontend.admin_recruitment_sharedinterviewgroup_create,
+                urlParams: { recruitmentId: recruitmentId },
+              })}
+            >
+              {lowerCapitalize(`${t(KEY.common_create)} ${t(KEY.recruitment_interview_group)}`)}
+            </Button>{' '}
+            <RecruitmentSharedInterviewPositionsList />
+          </>
+        ),
+      },
     ];
   }, [gangs, recruitment, t, recruitmentId, navigate, deleteSeparatePositionHandler]);
 

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/RecruitmentInterviewGroupsList/RecruitmentInterviewGroupsList.tsx → frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/RecruitmentInterviewGroupsList/RecruitmentSharedInterviewPositionsList.tsx

@@ -2,20 +2,20 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { getRecruitmentSharedInterviewGroups, getRecruitmentStats } from '~/api';
-import type { RecruitmentSharedInterviewGroupDto, RecruitmentStatsDto } from '~/dto';
+import { getRecruitmentSharedInterviewPositionss, getRecruitmentStats } from '~/api';
+import type { RecruitmentSharedInterviewPositionsDto, RecruitmentStatsDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
-import styles from './RecruitmentInterviewGroupsList.module.scss';
-import { RecruitmentInterviewGroupComponent } from './components/RecruitmentInterviewGroupComponent/RecruitmentInterviewGroupComponent';
+import styles from './RecruitmentSharedInterviewPositionsList.module.scss';
+import { RecruitmentSharedInterviewPositionsComponent } from './components/RecruitmentSharedInterviewPositionsComponent/RecruitmentSharedInterviewPositionsComponent';
 
-export function RecruitmentInterviewGroupsList() {
+export function RecruitmentSharedInterviewPositionsList() {
   const { recruitmentId } = useParams();
-  const [interviewGroups, setInterviewGroups] = useState<RecruitmentSharedInterviewGroupDto[]>();
+  const [interviewGroups, setInterviewGroups] = useState<RecruitmentSharedInterviewPositionsDto[]>();
   const { t } = useTranslation();
 
   useEffect(() => {
     if (recruitmentId) {
-      getRecruitmentSharedInterviewGroups(recruitmentId)
+      getRecruitmentSharedInterviewPositionss(recruitmentId)
         .then((response) => {
           setInterviewGroups(response.data);
         })
@@ -28,8 +28,8 @@ export function RecruitmentInterviewGroupsList() {
 
   return (
     <div className={styles.container}>
-      {interviewGroups?.map((interviewGroup: RecruitmentSharedInterviewGroupDto) => {
-        return <RecruitmentInterviewGroupComponent interviewGroup={interviewGroup} key={interviewGroup.id} />;
+      {interviewGroups?.map((interviewGroup: RecruitmentSharedInterviewPositionsDto) => {
+        return <RecruitmentSharedInterviewPositionsComponent interviewGroup={interviewGroup} key={interviewGroup.id} />;
       })}
     </div>
   );

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/RecruitmentInterviewGroupsList/components/RecruitmentInterviewGroupComponent/RecruitmentInterviewGroupComponent.module.scss → frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/RecruitmentInterviewGroupsList/components/RecruitmentSharedInterviewPositionsComponent/RecruitmentSharedInterviewPositionsComponent.module.scss

@@ -16,3 +16,9 @@
   width: 100%;
   flex: 1;
 }
+
+.footer {
+  justify-content: end;
+  display: flex;
+  padding: 0.5em;
+}

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/RecruitmentInterviewGroupsList/components/RecruitmentSharedInterviewPositionsComponent/RecruitmentSharedInterviewPositionsComponent.tsx

@@ -0,0 +1,48 @@
+import { useTranslation } from 'react-i18next';
+import { Button, ExpandableHeader, Table } from '~/Components';
+import type { RecruitmentSharedInterviewPositionsDto, RecruitmentStatsDto } from '~/dto';
+import { KEY } from '~/i18n/constants';
+import { reverse } from '~/named-urls';
+import { ROUTES } from '~/routes';
+import { dbT } from '~/utils';
+import styles from './RecruitmentSharedInterviewPositionsComponent.module.scss';
+
+type RecruitmentSharedInterviewPositionsComponentProps = {
+  interviewGroup: RecruitmentSharedInterviewPositionsDto;
+};
+
+export function RecruitmentSharedInterviewPositionsComponent({
+  interviewGroup,
+}: RecruitmentSharedInterviewPositionsComponentProps) {
+  const interviewGroupHeader = dbT(interviewGroup, 'name') ?? 'N/A';
+  const { t } = useTranslation();
+
+  return (
+    <ExpandableHeader
+      showByDefault={true}
+      key={interviewGroup.id}
+      label={interviewGroupHeader}
+      className={styles.dropDownHeader}
+    >
+      <Table
+        className={styles.table}
+        data={interviewGroup.positions.map((position) => {
+          return { cells: [dbT(position, 'name'), dbT(position.gang, 'name')] };
+        })}
+      />
+      <div className={styles.footer}>
+        <Button
+          display="basic"
+          theme="blue"
+          rounded={true}
+          link={reverse({
+            pattern: ROUTES.frontend.admin_recruitment_sharedinterviewgroup_edit,
+            urlParams: { recruitmentId: interviewGroup.recruitment, sharedInterviewGroupId: interviewGroup.id },
+          })}
+        >
+          {t(KEY.common_edit)}
+        </Button>
+      </div>
+    </ExpandableHeader>
+  );
+}

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/RecruitmentInterviewGroupsList/components/RecruitmentSharedInterviewPositionsComponent/index.ts

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

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/index.ts

@@ -1,3 +1,3 @@
 export { AppletCard } from './AppletCard/AppletCard';
 export { AppletContainer } from './AppletContainer/AppletContainer';
-export { RecruitmentInterviewGroupsList } from './RecruitmentInterviewGroupsList/RecruitmentInterviewGroupsList';
+export { RecruitmentSharedInterviewPositionsList } from './RecruitmentInterviewGroupsList/RecruitmentSharedInterviewPositionsList';