Merge pull request #85 from FINTLabs/FKS-779-frontend-Bekreftelsesmod…

…al-for-sletting-av-tildeling-mot-gruppe FKS-779-frontend-Bekreftelsesmodal-for-sletting-av-tildeling-mot-gruppe
FINTLabs · May 14, 2024 · 4f2d2e7 · 4f2d2e7
2 parents 28136df + cd3f694
commit 4f2d2e7
Show file tree

Hide file tree

Showing 4 changed files with 224 additions and 121 deletions.
diff --git a/app/components/role/AssignmentsForRoleTable.tsx b/app/components/role/AssignmentsForRoleTable.tsx
@@ -1,20 +1,24 @@
-import {Pagination, Select, Table} from "@navikt/ds-react";
-import type {IAssignmentPage} from "~/data/types";
-import {Form, useSearchParams} from "@remix-run/react";
+import {Button, Link, Pagination, Select, Table} from "@navikt/ds-react";
+import type {IAssignmentPage, IResource} from "~/data/types";
+import {Form, Outlet, useParams, useSearchParams} from "@remix-run/react";
 import React from "react";
+import {TrashIcon} from "@navikt/aksel-icons";
 
 
 interface AssignmentsForRoleTableProps {
     assignmentsForRole: IAssignmentPage,
-    size: string
+    size: string,
+    basePath?: string
 }
 
 export const AssignmentsForRoleTable  = ({
     assignmentsForRole,
-    size
+    size,
+    basePath
 }: AssignmentsForRoleTableProps) => {
 
-    const [, setSearchParams] = useSearchParams()
+    const [searchParams, setSearchParams] = useSearchParams()
+    const params = useParams()
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSearchParams(searchParams => {
@@ -23,28 +27,45 @@ export const AssignmentsForRoleTable  = ({
             return searchParams;
         })
     }
+
     return (
         <>
+            <Outlet/>
+
             <Table>
                 <Table.Header>
                     <Table.Row>
                         <Table.HeaderCell scope="col">Ressurs</Table.HeaderCell>
                         <Table.HeaderCell scope="col">Ressurstype</Table.HeaderCell>
                         <Table.HeaderCell scope="col">Tildelt av</Table.HeaderCell>
+                        <Table.HeaderCell scope="col" align={"center"}>Fjern tildeling</Table.HeaderCell>
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
 
-                    {assignmentsForRole.resources.map((resource) => (
+                    {assignmentsForRole.resources.map((resource: IResource) => (
                         <Table.Row key={resource.id}>
-                            <Table.HeaderCell scope="row">{resource.resourceName}</Table.HeaderCell>
+                            <Table.DataCell scope="row">{resource.resourceName}</Table.DataCell>
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
                             <Table.DataCell>{resource.assignerDisplayname ? resource.assignerDisplayname : resource.assignerUsername}</Table.DataCell>
+                            <Table.DataCell align={"center"}>
+                                <Button
+                                    as={Link}
+                                    className={"buttonOutlined"}
+                                    variant={"secondary"}
+                                    icon={<TrashIcon title="søppelbøtte" fontSize="1.5rem"/>}
+                                    iconPosition={"right"}
+                                    href={`${basePath}/roles/${params.id}/assignments/${resource.assignmentRef}/delete?page=${searchParams.get("page") === null ? 0 : searchParams.get("page")}`}
+                                >
+                                    Slett
+                                </Button>
+                            </Table.DataCell>
                         </Table.Row>
 
                     ))}
                 </Table.Body>
             </Table>
+
             <Form className={"paginationWrapper"}>
                 <Select
                     style={{marginBottom: '1.5rem'}}

diff --git a/app/data/types.ts b/app/data/types.ts
@@ -15,24 +15,24 @@ export interface IOrgUnit {
 }
 
 export interface IMeInfo {
-    "firstName": string;
-    "lastName": string;
-    "organisationId": string;
-    "mail": string;
+    "firstName": string
+    "lastName": string
+    "organisationId": string
+    "mail": string
 }
 
 export interface IUser {
-    "id": number;
-    "firstName": string;
-    "lastName": string;
-    "fullName": string;
-    "userType": string;
-    "assignmentRef": number;
-    "assignerUsername": string;
-    "assignerDisplayname": string;
-    "organisationUnitId": string;
-    "organisationUnitName": string;
-    assigned: boolean;
+    "id": number
+    "firstName": string
+    "lastName": string
+    "fullName": string
+    "userType": string
+    "assignmentRef": number
+    "assignerUsername": string
+    "assignerDisplayname": string
+    "organisationUnitId": string
+    "organisationUnitName": string
+    assigned: boolean
     roles?: IUserRole[] // Optional to allow use of same type
 }
 
@@ -57,151 +57,152 @@ export interface IOrgUnitForScope {
 
 // -----------------------
 export interface IUserPage {
-    totalItems: number;
-    totalPages?: number | any;
-    currentPage: number;
-    size: string;
-    users: IUser[];
+    totalItems: number
+    totalPages?: number | any
+    currentPage: number
+    size: string
+    users: IUser[]
 
 }
 
 export interface IUserItem {
-    "id": number;
-    "fullName": string;
-    "organisationUnitName": string;
-    "organisationUnitId": string;
-    "userType": string;
+    "id": number
+    "fullName": string
+    "organisationUnitName": string
+    "organisationUnitId": string
+    "userType": string
 }
 
 export interface IRole {
-    "id": number;
-    "roleName": string;
-    "roleType": string;
-    "assignmentRef": number;
-    "assignerUsername": string;
-    "assignerDisplayname": string;
-    "organisationUnitId": string;
-    "organisationUnitName": string;
-    assigned: boolean;
+    "id": number
+    "roleName": string
+    "roleType": string
+    "assignmentRef": number
+    "assignerUsername": string
+    "assignerDisplayname": string
+    "organisationUnitId": string
+    "organisationUnitName": string
+    assigned: boolean
 }
 
 export interface IRoleItem {
-    "id": number,
-    "roleName": string,
-    "roleType": string,
-    "roleSubType": string,
-    "aggregatedRole": boolean,
-    "organisationUnitId": string,
-    "organisationUnitName": string,
+    "id": number
+    "roleName": string
+    "roleType": string
+    "roleSubType": string
+    "aggregatedRole": boolean
+    "organisationUnitId": string
+    "organisationUnitName": string
 }
 
 export interface IRolePage {
-    totalItems: number;
-    totalPages: number | any;
-    currentPage: number;
-    roles: IRole[]; //IRoleItem[];
+    totalItems: number
+    totalPages: number | any
+    currentPage: number
+    roles: IRole[] //IRoleItem[]
 }
 
 export interface IMemberPage {
-    totalItems: number;
-    totalPages: number | any;
-    currentPage: number;
-    size: number;
-    members: IMemberItem[];
+    totalItems: number
+    totalPages: number | any
+    currentPage: number
+    size: number
+    members: IMemberItem[]
 }
 
 export interface IMemberItem {
-    id: number;
-    firstName: string;
-    lastName: string;
-    userType: string;
-    userName?: null;
+    id: number
+    firstName: string
+    lastName: string
+    userType: string
+    userName?: null
 }
 
 export interface IAssignmentPage {
-    totalItems: number;
-    totalPages: number | any;
-    currentPage: number;
-    resources: IResource[];
+    totalItems: number
+    totalPages: number | any
+    currentPage: number
+    resources: IResource[]
 }
 
 export interface IAssignedUsers {
-    totalItems: number;
-    totalPages: number | any;
-    currentPage: number;
-    size: string;
-    users: IUser[];
+    totalItems: number
+    totalPages: number | any
+    currentPage: number
+    size: string
+    users: IUser[]
 }
 
 export interface IAssignedResources {
-    totalItems: number;
-    totalPages: number | any;
-    currentPage: number;
-    size: string;
-    resources: IResource[];
+    totalItems: number
+    totalPages: number | any
+    currentPage: number
+    size: string
+    resources: IResource[]
 }
 
 export interface IAssignedRoles {
-    totalItems: number;
-    totalPages: number | any;
-    currentPage: number;
-    roles: IRole[];
+    totalItems: number
+    totalPages: number | any
+    currentPage: number
+    roles: IRole[]
 }
 
 export interface IResourceItem {
-    id: number;
-    resourceId: string;
-    orgunitId: string;
-    orgUnitName: string;
-    resourceLimit: number;
+    id: number
+    resourceId: string
+    orgunitId: string
+    orgUnitName: string
+    resourceLimit: number
 }
 
 export interface IResource {
-    id: number;
-    resourceId: string;
-    identityProviderGroupName: string;
-    resourceName: string;
-    resourceType: string;
-    resourceLimit: number;
-    applicationAccessType: string;
-    applicationAccessRole: string;
-    accessType: string;
-    "platform": [],
-    "resourceOwnerOrgUnitId": string,
-    "resourceOwnerOrgUnitName": string,
-    validForOrgUnits: IResourceItem[];
-    validForRoles: string;
-    "assignerUsername": string;
-    "assignerDisplayname": string;
-    assigned: boolean;
+    id: number
+    resourceId: string
+    identityProviderGroupName: string
+    resourceName: string
+    resourceType: string
+    resourceLimit: number
+    applicationAccessType: string
+    applicationAccessRole: string
+    accessType: string
+    "platform": []
+    "resourceOwnerOrgUnitId": string
+    "resourceOwnerOrgUnitName": string
+    validForOrgUnits: IResourceItem[]
+    validForRoles: string
+    "assignmentRef": number
+    "assignerUsername": string
+    "assignerDisplayname": string
+    assigned: boolean
 }
 
 export interface IResourcePage {
-    totalItems: number;
-    totalPages: number | any;
-    currentPage: number;
+    totalItems: number
+    totalPages: number | any
+    currentPage: number
     size: string
-    resources: IResource[];
+    resources: IResource[]
 }
 
 export type IResponse<T> = {
-    data: T;
-    errorMessage: string | undefined;
+    data: T
+    errorMessage: string | undefined
 }
 
 export interface IUnitItem {
-    id: number;
-    name: string;
-    organisationUnitId: string;
-    parentName: string | null;
-    parentRef: string;
-    childrenRef: string[];
+    id: number
+    name: string
+    organisationUnitId: string
+    parentName: string | null
+    parentRef: string
+    childrenRef: string[]
     isChecked?: boolean // Optional to be used in "Tildel Rettigheter" tab. Not required in most other places, but feel free to use if necessary.
 }
 
 export interface IUnitTree {
-    totalItems: number;
-    totalPages: number | any;
-    currentPage: number;
-    orgUnits: IUnitItem[];
+    totalItems: number
+    totalPages: number | any
+    currentPage: number
+    orgUnits: IUnitItem[]
 }