Add interview group forms

backend/root/utils/routes.py

@@ -543,6 +543,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'
@@ -564,6 +566,7 @@
 samfundet__interview_list = 'samfundet:interview-list'
 samfundet__interview_detail = 'samfundet:interview-detail'
 samfundet__api_root = 'samfundet:api-root'
+samfundet__api_root = 'samfundet:api-root'
 samfundet__schema = 'samfundet:schema'
 samfundet__swagger_ui = 'samfundet:swagger_ui'
 samfundet__redoc = 'samfundet:redoc'

backend/samfundet/serializers.py

@@ -879,8 +879,6 @@ class Meta:
 
 
 class RecruitmentPositionSharedInterviewGroupSerializer(serializers.ModelSerializer):
-    positions = RecruitmentPositionForApplicantSerializer(many=True, read_only=True)
-
     class Meta:
         model = RecruitmentPositionSharedInterviewGroup
         fields = [
@@ -891,6 +889,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.RecruitmentSharedInterviewGroupView, '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.RecruitmentInterviewGroupRecruitmentView.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

@@ -633,6 +633,13 @@ class RecruitmentForRecruiterView(ModelViewSet):
     queryset = Recruitment.objects.all()
 
 
+@method_decorator(ensure_csrf_cookie, 'dispatch')
+class RecruitmentSharedInterviewGroupView(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
@@ -1111,7 +1118,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 RecruitmentInterviewGroupRecruitmentView(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';
@@ -13,6 +13,8 @@ import { dbT, lowerCapitalize } from '~/utils';
 import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
 import { AppletContainer, RecruitmentInterviewGroupsList } from './components';
 
+import styles from './RecruitmentGangOverviewPage.module.scss';
+
 export function RecruitmentGangOverviewPage() {
   const { recruitmentId } = useParams();
   const navigate = useCustomNavigate();
@@ -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_groups),
+        value: (
+          <>
+            <RecruitmentInterviewGroupsList />
+            <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>{' '}
+          </>
+        ),
+      },
     ];
   }, [gangs, recruitment, t, recruitmentId, navigate, deleteSeparatePositionHandler]);
 

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/RecruitmentInterviewGroupsList/components/RecruitmentInterviewGroupComponent/RecruitmentInterviewGroupComponent.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/RecruitmentInterviewGroupComponent/RecruitmentInterviewGroupComponent.tsx

@@ -1,5 +1,9 @@
-import { ExpandableHeader, Table } from '~/Components';
+import { useTranslation } from 'react-i18next';
+import { Button, ExpandableHeader, Table } from '~/Components';
 import type { RecruitmentSharedInterviewGroupDto, RecruitmentStatsDto } from '~/dto';
+import { KEY } from '~/i18n/constants';
+import { reverse } from '~/named-urls';
+import { ROUTES } from '~/routes';
 import { dbT } from '~/utils';
 import styles from './RecruitmentInterviewGroupComponent.module.scss';
 
@@ -9,6 +13,8 @@ type RecruitmentInterviewGroupComponentProps = {
 
 export function RecruitmentInterviewGroupComponent({ interviewGroup }: RecruitmentInterviewGroupComponentProps) {
   const interviewGroupHeader = dbT(interviewGroup, 'name') ?? 'N/A';
+  const { t } = useTranslation();
+
   return (
     <ExpandableHeader
       showByDefault={true}
@@ -22,6 +28,19 @@ export function RecruitmentInterviewGroupComponent({ interviewGroup }: Recruitme
           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/RecruitmentInterviewGroupFormAdminPage/RecruitmentInterviewGroupForm.tsx

@@ -0,0 +1,168 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { z } from 'zod';
+import {
+  Button,
+  Checkbox,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Textarea,
+} from '~/Components';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
+import { MultiSelect } from '~/Components/MultiSelect';
+import {
+  getRecruitmentPositions,
+  postRecruitmentSharedInterviewGroup,
+  putRecruitmentPosition,
+  putRecruitmentSharedInterviewGroup,
+} from '~/api';
+import { KEY } from '~/i18n/constants';
+import { reverse } from '~/named-urls';
+import { ROUTES } from '~/routes';
+import { NON_EMPTY_STRING } from '~/schema/strings';
+import styles from './RecruitmentInterviewGroupFormAdminPage.module.scss';
+
+const schema = z.object({
+  name_nb: NON_EMPTY_STRING,
+  name_en: NON_EMPTY_STRING,
+  recruitment: NON_EMPTY_STRING,
+  positions: z.number().array(),
+});
+
+type SchemaType = z.infer<typeof schema>;
+
+interface FormProps {
+  initialData: Partial<SchemaType>;
+  sharedInterviewGroupId?: string;
+  recruitmentId?: string;
+}
+
+export function RecruitmentInterviewGroupForm({ initialData, recruitmentId, sharedInterviewGroupId }: FormProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const form = useForm<SchemaType>({
+    resolver: zodResolver(schema),
+    defaultValues: initialData,
+  });
+
+  const [positionOptions, setPositionOptions] = useState<DropdownOption<number>[]>([]);
+
+  const submitText = sharedInterviewGroupId ? t(KEY.common_save) : t(KEY.common_create);
+
+  useEffect(() => {
+    console.log(initialData);
+  }, [initialData]);
+
+  useEffect(() => {
+    if (recruitmentId) {
+      getRecruitmentPositions(recruitmentId).then((response) => {
+        setPositionOptions(
+          response.data
+            .filter(
+              (position) =>
+                !position.shared_interview_group ||
+                (sharedInterviewGroupId && Number.parseInt(sharedInterviewGroupId) === position.shared_interview_group),
+            )
+            .map((position) => {
+              return { value: position.id, label: `${position.name_nb} ${position.gang.name_nb}` };
+            }),
+        );
+      });
+    }
+  }, [recruitmentId, sharedInterviewGroupId]);
+
+  const onSubmit = (data: SchemaType) => {
+    const updatedSharedInterviewGroup = {
+      ...data,
+      recruitment: recruitmentId ?? '',
+    };
+
+    const action = sharedInterviewGroupId
+      ? putRecruitmentSharedInterviewGroup(sharedInterviewGroupId, updatedSharedInterviewGroup)
+      : postRecruitmentSharedInterviewGroup(updatedSharedInterviewGroup);
+
+    action
+      .then(() => {
+        toast.success(sharedInterviewGroupId ? t(KEY.common_update_successful) : t(KEY.common_creation_successful));
+        navigate(
+          reverse({
+            pattern: ROUTES.frontend.admin_recruitment_gang_overview,
+            urlParams: { recruitmentId },
+          }),
+        );
+      })
+      .catch((error) => {
+        toast.error(t(KEY.common_something_went_wrong));
+        console.error(error);
+      });
+  };
+
+  useEffect(() => {
+    form.reset(initialData);
+  }, [initialData, form]);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.wrapper}>
+          <div className={styles.row}>
+            <FormField
+              control={form.control}
+              name="name_nb"
+              render={({ field }) => (
+                <FormItem className={styles.item}>
+                  <FormLabel>{`${t(KEY.common_name)} ${t(KEY.common_norwegian)}`}</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="name_en"
+              render={({ field }) => (
+                <FormItem className={styles.item}>
+                  <FormLabel>{`${t(KEY.common_name)} ${t(KEY.common_english)}`}</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className={styles.row}>
+            <FormField
+              control={form.control}
+              name="positions"
+              render={({ field }) => (
+                <FormItem className={styles.item}>
+                  <FormLabel>{`${t(KEY.common_name)} ${t(KEY.common_english)}`}</FormLabel>
+                  <FormControl>
+                    <MultiSelect {...field} options={positionOptions} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <Button type="submit" rounded={true} theme="green">
+            {submitText}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

frontend/src/PagesAdmin/RecruitmentInterviewGroupFormAdminPage/RecruitmentInterviewGroupFormAdminPage.module.scss

@@ -0,0 +1,32 @@
+@import 'src/mixins';
+
+@import 'src/constants';
+
+.wrapper {
+  margin: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  gap: 1em;
+  @include for-tablet-up {
+    flex-direction: row;
+  }
+}
+
+.spinner {
+  display: flex;
+  justify-content: center;
+  margin-top: 20%;
+}
+
+.item {
+  flex-grow: 1;
+  max-width: 50%;
+}