Feat: Basic setup for role view.

frontend/src/PagesAdmin/RoleAdminPage/RoleAdminPage.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from 'react-i18next';
+import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
+import { KEY } from '~/i18n/constants';
+
+export function RoleAdminPage() {
+  const { t } = useTranslation();
+
+  return (
+    <AdminPageLayout title={t(KEY.common_roles_view)}>
+      <div />
+    </AdminPageLayout>
+  );
+}

frontend/src/PagesAdmin/RoleAdminPage/index.ts

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

frontend/src/PagesAdmin/RolesAdminPage/RolesAdminPage.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { CrudButtons } from '~/Components';
+import { CrudButtons, Link } from '~/Components';
 import { Table } from '~/Components/Table';
 import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
 import type { RoleDto } from '~/dto';
@@ -40,7 +40,7 @@ export function RolesAdminPage() {
     return roles.map((r) => {
       return [
         {
-          content: r.name,
+          content: <Link url={r.id.toString()}>{r.name}</Link>,
           value: r.name,
         },
         {

frontend/src/PagesAdmin/index.ts

@@ -27,6 +27,7 @@ export { RecruitmentUnprocessedApplicantsPage } from './RecruitmentUnprocessedAp
 export { RecruitmentUsersWithoutInterviewGangPage } from './RecruitmentUsersWithoutInterviewGangPage';
 export { RecruitmentUsersWithoutThreeInterviewCriteriaPage } from './RecruitmentUsersWithoutThreeInterviewCriteriaPage';
 export { RolesAdminPage } from './RolesAdminPage';
+export { RoleAdminPage } from './RoleAdminPage';
 export { CreateInterviewRoomPage, RoomAdminPage } from './RoomAdminPage';
 export { SaksdokumentAdminPage } from './SaksdokumentAdminPage';
 export { SaksdokumentFormAdminPage } from './SaksdokumentFormAdminPage';

frontend/src/api.ts

@@ -34,6 +34,7 @@ import type {
   RecruitmentUnprocessedApplicationsDto,
   RecruitmentUserDto,
   RegistrationDto,
+  RoleDto,
   SaksdokumentDto,
   TextItemDto,
   UserDto,
@@ -504,6 +505,18 @@ export async function getRecruitment(id: string): Promise<AxiosResponse<Recruitm
   return response;
 }
 
+// Issue #1520 TODO: Setup backend later. Using test data now.
+export async function getRole(id: string): Promise<RoleDto> {
+  //const url = BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__api_, urlParams: ( pk: id ) }):
+  //const response = await axios.get(url, { withCredentials: true });
+  const role = {
+    id: 1,
+    name: 'Opptaksansvarlig',
+    permissions: ['samfundet.test_permission', 'samfundet.user_create'],
+  };
+  return role;
+}
+
 export async function postRecruitment(recruitmentData: RecruitmentDto): Promise<AxiosResponse> {
   const url = BACKEND_DOMAIN + ROUTES.backend.samfundet__recruitment_list;
   const response = await axios.post(url, recruitmentData, { withCredentials: true });

frontend/src/i18n/constants.ts

@@ -122,6 +122,7 @@ export const KEY = {
   common_email_subject: 'common_email_subject',
   common_total: 'common_total',
   common_roles: 'common_roles',
+  common_roles_view: 'common_roles_view',
   common_guests: 'common_guests',
   common_occasion: 'common_occasion',
   common_phonenumber: 'common_phonenumber',

frontend/src/i18n/translations.ts

@@ -81,6 +81,7 @@ export const nb = prepareTranslations({
   [KEY.common_login]: 'Logg inn',
   [KEY.common_users]: 'Brukere',
   [KEY.common_roles]: 'Roller',
+  [KEY.common_roles_view]: 'Rolle',
   [KEY.common_active]: 'Aktiv',
   [KEY.common_event]: 'Arrangement',
   [KEY.common_repeat]: 'Repeter',
@@ -528,6 +529,7 @@ export const en = prepareTranslations({
   [KEY.common_login]: 'Log in',
   [KEY.common_users]: 'Users',
   [KEY.common_roles]: 'Roles',
+  [KEY.common_roles_view]: 'Role',
   [KEY.common_active]: 'Active',
   [KEY.common_cancel]: 'Cancel',
   [KEY.common_venues]: 'Venues',

frontend/src/router/loaders.ts

@@ -1,6 +1,6 @@
 import type { LoaderFunctionArgs } from 'react-router-dom';
-import { getGang, getRecruitment, getRecruitmentPosition, getRecruitmentSeparatePosition } from '~/api';
-import type { GangDto, RecruitmentDto, RecruitmentPositionDto, RecruitmentSeparatePositionDto } from '~/dto';
+import { getGang, getRecruitment, getRecruitmentPosition, getRecruitmentSeparatePosition, getRole } from '~/api';
+import type { GangDto, RecruitmentDto, RecruitmentPositionDto, RecruitmentSeparatePositionDto, RoleDto } from '~/dto';
 
 export type RecruitmentLoader = {
   recruitment: RecruitmentDto | undefined;
@@ -18,6 +18,14 @@ export type SeparatePositionLoader = {
   separatePosition: RecruitmentSeparatePositionDto | undefined;
 };
 
+export type RoleLoader = {
+  role: RoleDto | undefined;
+};
+
+export async function roleLoader({ params }: LoaderFunctionArgs): Promise<RoleLoader> {
+  return { role: await getRole(params.roleId as string) };
+}
+
 export async function recruitmentLoader({ params }: LoaderFunctionArgs): Promise<RecruitmentLoader> {
   return { recruitment: (await getRecruitment(params.recruitmentId as string)).data };
 }

frontend/src/router/router.tsx

@@ -58,6 +58,7 @@ import {
   RecruitmentUnprocessedApplicantsPage,
   RecruitmentUsersWithoutInterviewGangPage,
   RecruitmentUsersWithoutThreeInterviewCriteriaPage,
+  RoleAdminPage,
   RolesAdminPage,
   RoomAdminPage,
   SaksdokumentAdminPage,
@@ -73,17 +74,20 @@ import { ROUTES } from '~/routes';
 import { t } from 'i18next';
 import { App } from '~/App';
 import { RecruitmentRecruiterDashboardPage } from '~/PagesAdmin/RecruitmentRecruiterDashboardPage/RecruitmentRecruiterDashboardPage';
+import { RoleDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
 import {
   type GangLoader,
   type PositionLoader,
   type RecruitmentLoader,
+  type RoleLoader,
   type SeparatePositionLoader,
   gangLoader,
   recruitmentGangLoader,
   recruitmentGangPositionLoader,
   recruitmentLoader,
+  roleLoader,
   separatePositionLoader,
 } from '~/router/loaders';
 import { dbT, lowerCapitalize } from '~/utils';
@@ -177,6 +181,14 @@ export const router = createBrowserRouter(
             path={ROUTES.frontend.admin_roles}
             element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_ROLE]} element={<RolesAdminPage />} />}
           />
+          <Route
+            path={ROUTES.frontend.admin_roles_view}
+            element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_ROLE]} element={<RoleAdminPage />} />}
+            loader={roleLoader}
+            handle={{
+              crumb: ({ pathname }: UIMatch, { role }: RoleLoader) => <Link url={pathname}>{role?.name}</Link>,
+            }}
+          />
         </Route>
         {/* Events */}
         <Route

frontend/src/routes/frontend.ts

@@ -43,6 +43,7 @@ export const ROUTES_FRONTEND = {
   admin_users: '/control-panel/users/',
   // Roles
   admin_roles: '/control-panel/roles/',
+  admin_roles_view: '/control-panel/roles/:roleId/',
   // Gangs:
   admin_gangs: '/control-panel/gangs/',
   admin_gangs_create: '/control-panel/gangs/create/',