restructure applicant admin

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/RecruitmentApplicantAdminPage.module.scss

@@ -11,12 +11,12 @@
   }
 }
 
+.infoContainer {
+  margin-top: 1em;
+}
+
 .withdrawContainer {
   display: flex;
   flex-direction: row;
   justify-content: center;
 }
-
-.withdrawnText {
-  color: $red-samf;
-}

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/RecruitmentApplicantAdminPage.tsx

@@ -1,21 +1,24 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { BackButton, Button, Link, SamfundetLogoSpinner } from '~/Components';
-import { Table } from '~/Components/Table';
+import { BackButton, SamfundetLogoSpinner } from '~/Components';
 import { Text } from '~/Components/Text/Text';
-import { getRecruitmentApplicationsForRecruiter, withdrawRecruitmentApplicationRecruiter } from '~/api';
+import { getRecruitmentApplicationsForRecruiter } from '~/api';
 import type { InterviewDto } from '~/dto';
 import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
-import { reverse } from '~/named-urls';
 import { ROUTES } from '~/routes';
 import { dbT } from '~/utils';
 import { AdminPage } from '../AdminPageLayout';
 import styles from './RecruitmentApplicantAdminPage.module.scss';
-import { RecruitmentInterviewNotesForm } from './RecruitmentInterviewNotesForm';
+import {
+  RecruitmentApplicantAllApplications,
+  RecruitmentApplicantInfo,
+  RecruitmentApplicantWithdraw,
+  RecruitmentInterviewNotesForm,
+} from './components';
 
 export function RecruitmentApplicantAdminPage() {
   const { t } = useTranslation();
@@ -35,18 +38,8 @@ export function RecruitmentApplicantAdminPage() {
 
   const recruitmentApplication = data?.data.application;
   const applicant = data?.data.user;
-  const otherRecruitmentApplications = data?.data.other_applications;
   const interviewNotes = recruitmentApplication?.interview?.notes;
 
-  const adminWithdraw = useMutation({
-    mutationFn: (id: string) => {
-      return withdrawRecruitmentApplicationRecruiter(id);
-    },
-    onSuccess: () => {
-      toast.success(t(KEY.common_update_successful));
-    },
-  });
-
   if (isLoading) {
     return (
       <div>
@@ -63,20 +56,7 @@ export function RecruitmentApplicantAdminPage() {
     <AdminPage title={`${applicant?.first_name} ${applicant?.last_name}`}>
       <div className={classNames(styles.infoContainer)}>
         <BackButton />
-        <Table
-          data={[
-            {
-              cells: [
-                t(KEY.common_phonenumber),
-                applicant?.phone_number ? applicant?.phone_number : t(KEY.common_not_set),
-              ],
-            },
-            { cells: [t(KEY.common_email), applicant?.email ? applicant?.email : t(KEY.common_not_set)] },
-            {
-              cells: [t(KEY.common_campus), applicant?.campus ? dbT(applicant?.campus, 'name') : t(KEY.common_not_set)],
-            },
-          ]}
-        />
+        <RecruitmentApplicantInfo applicant={data?.data.user} />
       </div>
       <div className={classNames(styles.infoContainer)}>
         <Text size="l" as="strong" className={styles.textBottom}>
@@ -85,95 +65,23 @@ export function RecruitmentApplicantAdminPage() {
         <Text>{recruitmentApplication?.application_text}</Text>
       </div>
       <div className={styles.withdrawContainer}>
-        {recruitmentApplication?.withdrawn ? (
-          <Text as="i" size="l" className={styles.withdrawnText}>
-            {t(KEY.recruitment_withdrawn)}
-          </Text>
-        ) : (
-          <Button
-            theme="samf"
-            onClick={() => {
-              if (recruitmentApplication?.id) {
-                adminWithdraw.mutate(recruitmentApplication.id);
-              }
-            }}
-          >
-            {t(KEY.recruitment_withdraw_application)}
-          </Button>
-        )}
+        <RecruitmentApplicantWithdraw application={data?.data.application} />
       </div>
       <div className={classNames(styles.infoContainer)}>
         <RecruitmentInterviewNotesForm initialData={initialData} />
       </div>
-
+      <div className={classNames(styles.infoContainer)}>
+        <Text size="l" as="strong" className={styles.textBottom}>
+          {t(KEY.recruitment_applications)} {t(KEY.common_in)}{' '}
+          {dbT(data?.data.application.recruitment_position.gang, 'name')}
+        </Text>
+        <RecruitmentApplicantAllApplications applications={data?.data.other_applications} />
+      </div>
       <div className={classNames(styles.infoContainer)}>
         <Text size="l" as="strong" className={styles.textBottom}>
           {t(KEY.recruitment_all_applications)}
         </Text>
-        <Table
-          columns={[
-            '#',
-            t(KEY.common_recruitmentposition),
-            t(KEY.common_gang),
-            t(KEY.recruitment_recruiter_status),
-            t(KEY.recruitment_interview_time),
-          ]}
-          data={
-            otherRecruitmentApplications
-              ? otherRecruitmentApplications.map((element) => {
-                  return {
-                    cells: [
-                      {
-                        sortable: true,
-                        content: (
-                          <Link
-                            target={'frontend'}
-                            url={reverse({
-                              pattern: ROUTES.frontend.admin_recruitment_applicant,
-                              urlParams: {
-                                applicationID: element.id,
-                              },
-                            })}
-                          >
-                            {element.applicant_priority}
-                          </Link>
-                        ),
-                      },
-                      {
-                        content: (
-                          <Link
-                            target={'frontend'}
-                            url={reverse({
-                              pattern: ROUTES.frontend.admin_recruitment_applicant,
-                              urlParams: {
-                                applicationID: element.id,
-                              },
-                            })}
-                          >
-                            {dbT(element.recruitment_position, 'name')}
-                          </Link>
-                        ),
-                      },
-                      {
-                        content: (
-                          <Link
-                            url={reverse({
-                              pattern: ROUTES.frontend.information_page_detail,
-                              urlParams: { slugField: element.recruitment_position.gang.name_nb.toLowerCase() },
-                            })}
-                          >
-                            {dbT(element.recruitment_position.gang, 'name')}
-                          </Link>
-                        ),
-                      },
-                      element.recruiter_priority ? element.recruiter_priority : t(KEY.common_not_set),
-                      element.interview_time ? element.interview_time : t(KEY.common_not_set),
-                    ],
-                  };
-                })
-              : []
-          }
-        />
+        <RecruitmentApplicantAllApplications applications={data?.data.other_applications} />
       </div>
     </AdminPage>
   );

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantAllApplications/RecruitmentApplicantAllApplications.tsx

@@ -0,0 +1,82 @@
+import { useTranslation } from 'react-i18next';
+import { Link, Table } from '~/Components';
+import type { RecruitmentApplicationDto } from '~/dto';
+import { KEY } from '~/i18n/constants';
+import { reverse } from '~/named-urls';
+import { ROUTES } from '~/routes';
+import { dbT } from '~/utils';
+
+type Props = {
+  applications: RecruitmentApplicationDto[] | undefined;
+};
+
+export function RecruitmentApplicantAllApplications({ applications }: Props) {
+  const { t } = useTranslation();
+
+  const tableColumns = [
+    { content: '#', sortable: true, hideSortButton: true },
+    { content: t(KEY.common_recruitmentposition), sortable: true, hideSortButton: true },
+    { content: t(KEY.common_gang), sortable: true, hideSortButton: true },
+    { content: t(KEY.recruitment_recruiter_status), sortable: true, hideSortButton: true },
+    { content: t(KEY.recruitment_interview_time), sortable: true, hideSortButton: true },
+  ];
+  function applicationToRow(application: RecruitmentApplicationDto) {
+    return {
+      cells: [
+        {
+          value: application.applicant_priority,
+          content: (
+            <Link
+              target="frontend"
+              url={reverse({
+                pattern: ROUTES.frontend.admin_recruitment_applicant,
+                urlParams: {
+                  applicationID: application.id,
+                },
+              })}
+            >
+              {application.applicant_priority}
+            </Link>
+          ),
+        },
+        {
+          value: dbT(application.recruitment_position, 'name'),
+          content: (
+            <Link
+              target="frontend"
+              url={reverse({
+                pattern: ROUTES.frontend.admin_recruitment_applicant,
+                urlParams: {
+                  applicationID: application.id,
+                },
+              })}
+            >
+              {dbT(application.recruitment_position, 'name')}
+            </Link>
+          ),
+        },
+        {
+          content: (
+            <Link
+              url={reverse({
+                pattern: ROUTES.frontend.information_page_detail,
+                urlParams: { slugField: application.recruitment_position.gang.name_nb.toLowerCase() },
+              })}
+            >
+              {dbT(application.recruitment_position.gang, 'name')}
+            </Link>
+          ),
+        },
+        application.recruiter_priority ? application.recruiter_priority : t(KEY.common_not_set),
+        application.interview_time ? application.interview_time : t(KEY.common_not_set),
+      ],
+    };
+  }
+
+  return (
+    <Table
+      columns={tableColumns}
+      data={applications ? applications.map((application) => applicationToRow(application)) : []}
+    />
+  );
+}

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantAllApplications/index.ts

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

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantInfo/RecruitmentApplicantInfo.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+import { Table } from '~/Components';
+import type { RecruitmentUserDto } from '~/dto';
+import { KEY } from '~/i18n/constants';
+import { dbT } from '~/utils';
+
+type Props = {
+  applicant: RecruitmentUserDto | undefined;
+};
+
+export function RecruitmentApplicantInfo({ applicant }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Table
+      data={[
+        {
+          cells: [t(KEY.common_phonenumber), applicant?.phone_number ? applicant?.phone_number : t(KEY.common_not_set)],
+        },
+        { cells: [t(KEY.common_email), applicant?.email ? applicant?.email : t(KEY.common_not_set)] },
+        {
+          cells: [t(KEY.common_campus), applicant?.campus ? dbT(applicant?.campus, 'name') : t(KEY.common_not_set)],
+        },
+      ]}
+    />
+  );
+}

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantInfo/index.ts

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

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantWithdraw/RecruitmentApplicantWithdraw.module.scss

@@ -0,0 +1,8 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+
+.withdrawnText {
+  color: $red-samf;
+}

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantWithdraw/RecruitmentApplicantWithdraw.tsx

@@ -0,0 +1,46 @@
+import { useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { Button, Text } from '~/Components';
+import { withdrawRecruitmentApplicationRecruiter } from '~/api';
+import type { RecruitmentApplicationDto } from '~/dto';
+import { KEY } from '~/i18n/constants';
+import styles from './RecruitmentApplicantWithdraw.module.scss';
+
+type Props = {
+  application: RecruitmentApplicationDto | undefined;
+};
+
+export function RecruitmentApplicantWithdraw({ application }: Props) {
+  const { t } = useTranslation();
+
+  const adminWithdraw = useMutation({
+    mutationFn: (id: string) => {
+      return withdrawRecruitmentApplicationRecruiter(id);
+    },
+    onSuccess: () => {
+      toast.success(t(KEY.common_update_successful));
+    },
+  });
+
+  return (
+    <>
+      {application?.withdrawn ? (
+        <Text as="i" size="l" className={styles.withdrawnText}>
+          {t(KEY.recruitment_withdrawn)}
+        </Text>
+      ) : (
+        <Button
+          theme="samf"
+          onClick={() => {
+            if (application?.id) {
+              adminWithdraw.mutate(application.id);
+            }
+          }}
+        >
+          {t(KEY.recruitment_withdraw_application)}
+        </Button>
+      )}
+    </>
+  );
+}

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantWithdraw/index.ts

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

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentInterviewNotesForm/index.ts

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

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

@@ -0,0 +1,4 @@
+export { RecruitmentApplicantAllApplications } from './RecruitmentApplicantAllApplications';
+export { RecruitmentApplicantInfo } from './RecruitmentApplicantInfo';
+export { RecruitmentInterviewNotesForm } from './RecruitmentInterviewNotesForm';
+export { RecruitmentApplicantWithdraw } from './RecruitmentApplicantWithdraw';

frontend/src/i18n/constants.ts

@@ -176,6 +176,7 @@ export const KEY = {
   common_processed: 'common_processed',
   common_rejected: 'common_rejected',
   common_it: 'common_it',
+  common_in: 'common_in',
   common_will: 'common_will',
   common_get: 'common_get',
   common_count: 'common_count',
@@ -375,6 +376,7 @@ export const KEY = {
   recruitment_admitted: 'recruitment_admitted',
   recruitment_statistics: 'recruitment_statistics',
   recruitment_applications: 'recruitment_applications',
+
   recruitment_applications_processed: 'recruitment_applications_processed',
   recruitment_automatic_rejection: 'recruitment_automatic_rejection',
   recruitment_rejection_email: 'recruitment_rejection_email',