Merge pull request #78 from FINTLabs/FKS-658-frontend-lenke-inn-mot-r…

…essurstildeling-via-brukere Added rout to user assignment, back buttons in resource assignments a…
FINTLabs · May 6, 2024 · 3e83a41 · 3e83a41
2 parents 3a4969c + 54ce946
commit 3e83a41
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 60 deletions.
diff --git a/app/components/assignment/NewAssignmentRoleTable.tsx b/app/components/assignment/NewAssignmentRoleTable.tsx
@@ -25,7 +25,7 @@ export const AssignRoleTable: any = (props: {
     }
 
     return (
-        <div style={{marginTop: '3rem'}}>
+        <div>
             <Heading className={"heading"} size={"large"} level={"3"}>Grupper</Heading>
             <Outlet/>
             <Table>
@@ -55,7 +55,7 @@ export const AssignRoleTable: any = (props: {
                                         variant={"secondary"}
                                         icon={<PlusIcon/>}
                                         iconPosition="right"
-                                        href={`${props.basePath}/assignment/resource/${props.resourceId}/role/${role.id}/orgunit/${role.organisationUnitId}/assign?page=${searchParams.get("page") === null ? 0 : searchParams.get("page")}&search=${searchParams.get("search") === null ? 0 : searchParams.get("search")}`}
+                                        href={`${props.basePath}/assignment/resource/${props.resourceId}/role/${role.id}/orgunit/${role.organisationUnitId}/assign?page=${searchParams.get("page") === null ? 0 : searchParams.get("page")}&search=${searchParams.get("search") === null ? "" : searchParams.get("search")}`}
                                         underline={false}
                                     >
                                         Tildel

diff --git a/app/components/assignment/NewAssignmentUserTable.tsx b/app/components/assignment/NewAssignmentUserTable.tsx
@@ -25,7 +25,7 @@ export const AssignUserTable: any = (props: {
     }
 
     return (
-        <div style={{marginTop: '3rem'}}>
+        <div>
             <Heading className={"heading"} size={"large"} level={"3"}>Brukere</Heading>
             <Outlet/>
             <Table>
@@ -56,7 +56,7 @@ export const AssignUserTable: any = (props: {
                                         variant={"secondary"}
                                         icon={<PlusIcon/>}
                                         iconPosition="right"
-                                        href={`${props.basePath}/assignment/resource/${props.resourceId}/user/${user.id}/orgunit/${user.organisationUnitId}/assign?page=${searchParams.get("page") === null ? 0 : searchParams.get("page")}&search=${searchParams.get("search") === null ? 0 : searchParams.get("search")}`}
+                                        href={`${props.basePath}/assignment/resource/${props.resourceId}/user/${user.id}/orgunit/${user.organisationUnitId}/assign?page=${searchParams.get("page") === null ? 0 : searchParams.get("page")}&search=${searchParams.get("search") === null ? "" : searchParams.get("search")}`}
                                         underline={false}
                                     >
                                         Tildel

diff --git a/app/routes/assignment.resource.$id.role.tsx b/app/routes/assignment.resource.$id.role.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Alert, Box, Heading} from "@navikt/ds-react";
+import {Alert, Box, Button, Heading, Link, VStack} from "@navikt/ds-react";
 import type {LoaderFunctionArgs} from "@remix-run/router";
 import {json} from "@remix-run/node";
 import {Links, Meta, Scripts, useLoaderData, useParams, useRouteError} from "@remix-run/react";
@@ -8,10 +8,12 @@ import {AssignRoleTable} from "~/components/assignment/NewAssignmentRoleTable";
 import {SelectObjectType} from "~/components/assignment/SelectObjectType";
 import {fetchRoles} from "~/data/fetch-roles";
 import {NewAssignmentRoleSearch} from "~/components/assignment/NewAssignmentRoleSearch";
-import {fetchOrgUnits} from "~/data/fetch-resources";
+import {fetchOrgUnits, fetchResourceById} from "~/data/fetch-resources";
 import {fetchAssignedRoles} from "~/data/fetch-assignments";
 import {BASE_PATH} from "../../environment";
 import {AlertWithCloseButton} from "~/components/assignment/AlertWithCloseButton";
+import {ArrowLeftIcon} from "@navikt/aksel-icons";
+import {IResource} from "~/data/types";
 
 export async function loader({params, request}: LoaderFunctionArgs): Promise<Omit<Response, "json"> & {
     json(): Promise<any>
@@ -21,15 +23,19 @@ export async function loader({params, request}: LoaderFunctionArgs): Promise<Omi
     const page = url.searchParams.get("page") ?? "0";
     const search = url.searchParams.get("search") ?? "";
     const orgUnits = url.searchParams.get("orgUnits")?.split(",") ?? [];
-    const [responseRoles, responseOrgUnits, responseAssignments] = await Promise.all([
+    const [responseRoles, responseOrgUnits, responseAssignments, responseResource] = await Promise.all([
         fetchRoles(request.headers.get("Authorization"), size, page, search, orgUnits),
         fetchOrgUnits(request.headers.get("Authorization")),
-        fetchAssignedRoles(request.headers.get("Authorization"), params.id, "1000", "0", "", orgUnits)
+        fetchAssignedRoles(request.headers.get("Authorization"), params.id, "1000", "0", "", orgUnits),
+        fetchResourceById(request.headers.get("Authorization"), params.id),
+
     ]);
     const roleList: IRolePage = await responseRoles.json()
     const orgUnitTree: IUnitTree = await responseOrgUnits.json()
     const orgUnitList: IUnitItem[] = orgUnitTree.orgUnits
     const assignedRolesList: IAssignedRoles = await responseAssignments.json()
+    const resource: IResource = await responseResource.json()
+
 
     const assignedRolesMap: Map<number, IRole> = new Map(assignedRolesList.roles.map(role => [role.id, role]))
     const isAssignedRoles: IRole[] = roleList.roles.map(role => {
@@ -42,6 +48,7 @@ export async function loader({params, request}: LoaderFunctionArgs): Promise<Omi
 
     return json({
         responseCode: url.searchParams.get("responseCode") ?? undefined,
+        resource,
         roleList,
         orgUnitList,
         assignedRolesList,
@@ -58,30 +65,44 @@ export default function NewAssignmentForRole() {
         assignedRolesList: IAssignedRoles,
         isAssignedRoles: IRole[],
         basePath: string,
-        responseCode: string | undefined
+        responseCode: string | undefined,
+        resource: IResource
     }>();
     const params = useParams<string>()
 
     return (
-        <div className={"content"}>
-            <Heading className={"heading"} level="1" size="xlarge">Ny tildeling</Heading>
-            <section className={"toolbar"}>
-                <SelectObjectType/>
-                <section className={"filters"}>
-                    <NewAssignmentRoleSearch/>
+        <>
+            <Button as={Link}
+                    variant={"secondary"}
+                    icon={<ArrowLeftIcon title="tilbake" fontSize="1.5rem"/>}
+                    iconPosition={"left"}
+                    href={`${data.basePath}/resources/${params.id}/role-assignments`}
+            >
+                Tilbake
+            </Button>
+            <div className={"content"}>
+                <VStack className={"heading"} >
+                    <Heading level="1" size="xlarge">Ny tildeling </Heading>
+                    <Heading level="2" size="small">{data.resource.resourceName}</Heading>
+                </VStack>
+                <section className={"toolbar"}>
+                    <SelectObjectType/>
+                    <section className={"filters"}>
+                        <NewAssignmentRoleSearch/>
+                    </section>
                 </section>
-            </section>
-            <Box paddingBlock='8 0'>
-                <ResponseAlert responseCode={data.responseCode}/>
-            </Box>
-            <AssignRoleTable isAssignedRoles={data.isAssignedRoles}
-                             resourceId={params.id}
-                             rolesId={params.id}
-                             currentPage={data.roleList.currentPage}
-                             totalPages={data.roleList.totalPages}
-                             basePath={data.basePath}
-            />
-        </div>
+                <Box paddingBlock='8 0'>
+                    <ResponseAlert responseCode={data.responseCode}/>
+                </Box>
+                <AssignRoleTable isAssignedRoles={data.isAssignedRoles}
+                                 resourceId={params.id}
+                                 rolesId={params.id}
+                                 currentPage={data.roleList.currentPage}
+                                 totalPages={data.roleList.totalPages}
+                                 basePath={data.basePath}
+                />
+            </div>
+        </>
     );
 }
 

diff --git a/app/routes/assignment.resource.$id.user.tsx b/app/routes/assignment.resource.$id.user.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
-import {Alert, Box, Heading} from "@navikt/ds-react";
+import {Alert, Box, Button, Heading, Link, VStack} from "@navikt/ds-react";
 import {AssignUserTable} from "~/components/assignment/NewAssignmentUserTable";
 import type {LoaderFunctionArgs} from "@remix-run/router";
 import {fetchUsers} from "~/data/fetch-users";
 import {json} from "@remix-run/node";
 import {Links, Meta, Scripts, useLoaderData, useParams, useRouteError} from "@remix-run/react";
-import type {IAssignedUsers, IUnitItem, IUnitTree, IUser, IUserPage} from "~/data/types";
+import type {IAssignedUsers, IResource, IUnitItem, IUnitTree, IUser, IUserPage} from "~/data/types";
 import {SelectObjectType} from "~/components/assignment/SelectObjectType";
 import {NewAssignmentUserSearch} from "~/components/assignment/NewAssignmentUserSearch";
-import {fetchOrgUnits} from "~/data/fetch-resources";
+import {fetchOrgUnits, fetchResourceById} from "~/data/fetch-resources";
 import {fetchAssignedUsers} from "~/data/fetch-assignments";
 import {UserTypeFilter} from "~/components/user/UserTypeFilter";
 import {BASE_PATH} from "../../environment";
 import {AlertWithCloseButton} from "~/components/assignment/AlertWithCloseButton";
+import {ArrowLeftIcon} from "@navikt/aksel-icons";
 
 
 export async function loader({params, request}: LoaderFunctionArgs): Promise<Omit<Response, "json"> & {
@@ -24,15 +25,17 @@ export async function loader({params, request}: LoaderFunctionArgs): Promise<Omi
     const search = url.searchParams.get("search") ?? "";
     const userType = url.searchParams.get("userType") ?? "";
     const orgUnits = url.searchParams.get("orgUnits")?.split(",") ?? [];
-    const [responseUsers, responseOrgUnits, responseAssignments] = await Promise.all([
+    const [responseUsers, responseOrgUnits, responseAssignments, responseResource] = await Promise.all([
         fetchUsers(request.headers.get("Authorization"), size, page, search, userType, orgUnits),
         fetchOrgUnits(request.headers.get("Authorization")),
-        fetchAssignedUsers(request.headers.get("Authorization"), params.id, "1000", "0", "", "", orgUnits)
+        fetchAssignedUsers(request.headers.get("Authorization"), params.id, "1000", "0", "", "", orgUnits),
+        fetchResourceById(request.headers.get("Authorization"), params.id),
     ]);
     const userList: IUserPage = await responseUsers.json()
     const orgUnitTree: IUnitTree = await responseOrgUnits.json()
     const orgUnitList: IUnitItem[] = orgUnitTree.orgUnits
     const assignedUsersList: IAssignedUsers = await responseAssignments.json()
+    const resource: IResource = await responseResource.json()
 
     const assignedUsersMap: Map<number, IUser> = new Map(assignedUsersList.users.map(user => [user.id, user]))
     const isAssignedUsers: IUser[] = userList.users.map(user => {
@@ -44,17 +47,19 @@ export async function loader({params, request}: LoaderFunctionArgs): Promise<Omi
 
     return json({
         responseCode: url.searchParams.get("responseCode") ?? undefined,
+        resource,
         userList,
         orgUnitList,
         assignedUsersList,
         isAssignedUsers,
-        basePath: BASE_PATH === "/" ? "" : BASE_PATH
+        basePath: BASE_PATH === "/" ? "" : BASE_PATH,
     })
 }
 
 export default function NewAssignment() {
 
     const data = useLoaderData<{
+        resource: IResource,
         userList: IUserPage,
         orgUnitList: IUnitItem[]
         assignedUsersList: IAssignedUsers,
@@ -66,25 +71,38 @@ export default function NewAssignment() {
     const params = useParams<string>()
 
     return (
-        <div className={"content"}>
-            <Heading className={"heading"} level="1" size="xlarge">Ny tildeling</Heading>
-            <section className={"toolbar"}>
-                <SelectObjectType/>
-                <section className={"filters"}>
-                    <UserTypeFilter/>
-                    <NewAssignmentUserSearch/>
+        <>
+            <Button as={Link}
+                    variant={"secondary"}
+                    icon={<ArrowLeftIcon title="tilbake" fontSize="1.5rem"/>}
+                    iconPosition={"left"}
+                    href={`${data.basePath}/resources/${params.id}/user-assignments`}
+            >
+                Tilbake
+            </Button>
+            <div className={"content"}>
+                <VStack className={"heading"}>
+                    <Heading level="1" size="xlarge">Ny tildeling </Heading>
+                    <Heading level="2" size="small">{data.resource.resourceName}</Heading>
+                </VStack>
+                <section className={"toolbar"}>
+                    <SelectObjectType/>
+                    <section className={"filters"}>
+                        <UserTypeFilter/>
+                        <NewAssignmentUserSearch/>
+                    </section>
                 </section>
-            </section>
-            <Box paddingBlock='8 0'>
-                <ResponseAlert responseCode={data.responseCode}/>
-            </Box>
-            <AssignUserTable isAssignedUsers={data.isAssignedUsers}
-                             resourceId={params.id}
-                             currentPage={data.userList.currentPage}
-                             totalPages={data.userList.totalPages}
-                             basePath={data.basePath}
-            />
-        </div>
+                <Box paddingBlock='8 0'>
+                    <ResponseAlert responseCode={data.responseCode}/>
+                </Box>
+                <AssignUserTable isAssignedUsers={data.isAssignedUsers}
+                                 resourceId={params.id}
+                                 currentPage={data.userList.currentPage}
+                                 totalPages={data.userList.totalPages}
+                                 basePath={data.basePath}
+                />
+            </div>
+        </>
     );
 }
 

diff --git a/app/routes/assignment.user.$id.tsx b/app/routes/assignment.user.$id.tsx
@@ -0,0 +1,9 @@
+
+export default function NewAssignmentForUser() {
+
+    return (
+        <div>
+            <h1>Hello</h1>
+        </div>
+    );
+}
diff --git a/app/routes/resources.$id.role-assignments.tsx b/app/routes/resources.$id.role-assignments.tsx
@@ -48,7 +48,7 @@ export default function AssignedRoles() {
 
     return (
         <>
-            <Box paddingBlock="16 16">
+            <Box paddingBlock="16 8">
                 <Heading level="2" size="xlarge" align={"center"}>Tildelinger</Heading>
             </Box>
             <section className={"toolbar"}>

diff --git a/app/routes/resources.$id.user-assignments.tsx b/app/routes/resources.$id.user-assignments.tsx
@@ -50,7 +50,7 @@ export default function AssignedUsers() {
 
     return (
         <>
-            <Box paddingBlock="16 16">
+            <Box paddingBlock="16 8">
                 <Heading level="2" size="xlarge" align={"center"}>Tildelinger</Heading>
             </Box>
             <section className={"toolbar"}>

diff --git a/app/routes/users.$id.tsx b/app/routes/users.$id.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import UserInfo from "../components/user/UserInfo";
 import styles from "../components/user/user.css?url"
-import {Alert, Box, Heading} from "@navikt/ds-react";
+import {Alert, Box, Heading, LinkPanel} from "@navikt/ds-react";
 import {Links, Meta, Scripts, useLoaderData, useRouteError} from "@remix-run/react";
 import {IAssignmentPage, IUser} from "~/data/types";
 import {fetchUserById} from "~/data/fetch-users";
 import {json} from "@remix-run/node";
 import {LoaderFunctionArgs} from "@remix-run/router";
 import {fetchAssignmentsForUser} from "~/data/fetch-assignments";
 import {AssignmentsForUserTable} from "~/components/user/AssignmentsForUserTable";
+import {BASE_PATH} from "../../environment";
 
 export function links() {
     return [{rel: 'stylesheet', href: styles}]
@@ -25,18 +26,22 @@ export async function loader({params, request}: LoaderFunctionArgs) {
     ]);
     return json({
         user: await user.json(),
-        assignments: await assignments.json()
+        assignments: await assignments.json(),
+        basePath: BASE_PATH === "/" ? "" : BASE_PATH,
     })
 }
 
 export default function Users() {
-    const data = useLoaderData<{ user: IUser, assignments: IAssignmentPage }>();
+    const data = useLoaderData<{ user: IUser, assignments: IAssignmentPage, basePath: string }>();
 
     return (
         <section className={"content"}>
-            <div className={"toolbar"}>
-                <Heading className={"heading"} level="1" size="xlarge">Brukerinformasjon</Heading>
-            </div>
+            <Box className={"filters"}>
+                <LinkPanel href={`${data.basePath}/assignment/user/${data.user.id}`} border>
+                    <LinkPanel.Title>Ny tildeling</LinkPanel.Title>
+                </LinkPanel>
+            </Box>
+                <Heading className={"heading"} level="1" size="xlarge" align={"center"}>Brukerinformasjon</Heading>
             <UserInfo user={data.user}/>
             <section className={"toolbar"} style={{marginTop: '3rem'}}>
                 <Heading className={"heading"} level="1" size="large">Brukeren er tildelt følgende ressurser:</Heading>

diff --git a/app/styles/main.css b/app/styles/main.css
@@ -26,7 +26,7 @@ body {
 .toolbar {
     display: flex;
     justify-content: space-between;
-    /*margin-bottom: 2.5em;*/
+    margin-top: 2.5em;
 }
 
 .searchField {