Merge remote-tracking branch 'origin/FKS-635-frontend-update-en-ressu…

…rs' into FKS-635-frontend-update-en-ressurs # Conflicts: # .github/workflows/deploy.yaml
FINTLabs · Oct 15, 2024 · 1cdad77 · 1cdad77
2 parents 5b7ef42 + 93d4f66
commit 1cdad77
Show file tree

Hide file tree

Showing 40 changed files with 411 additions and 1,007 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -84,7 +84,6 @@ jobs:
 #          - path: /ofk-no
 #            environment: api
 #            org: ofk-no
-
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

diff --git a/app/components/assignment/AssignedRolesSearch.tsx b/app/components/assignment/AssignedRolesSearch.tsx
diff --git a/app/components/assignment/AssignedRolesTable.tsx b/app/components/assignment/AssignedRolesTable.tsx
@@ -1,9 +1,11 @@
-import {Box, Button, Heading, Link, Pagination, Select, Table, VStack} from "@navikt/ds-react";
+import {Button, Heading, Link, Table, VStack} from "@navikt/ds-react";
 import type {IAssignedRoles} from "~/data/types";
 import React from "react";
 import {Outlet, useParams, useSearchParams} from "@remix-run/react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 export const AssignedRolesTable: any = (props: {
     assignedRoles: IAssignedRoles,
@@ -13,16 +15,9 @@ export const AssignedRolesTable: any = (props: {
     basePath?: string
 }) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const params = useParams()
-
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
+    const {fetching} = useLoadingState()
 
     return (
         <div>
@@ -41,7 +36,7 @@ export const AssignedRolesTable: any = (props: {
                         </Table.Row>
                     </Table.Header>
                     <Table.Body>
-                        {props.assignedRoles.roles.map((role) => (
+                        {fetching ? <TableSkeleton /> : props.assignedRoles.roles.map((role) => (
                             <Table.Row key={role.id}>
                                 <Table.HeaderCell scope="row">{role.roleName}</Table.HeaderCell>
                                 <Table.DataCell>{role.roleType}</Table.DataCell>
@@ -64,33 +59,7 @@ export const AssignedRolesTable: any = (props: {
                 </Table>
             </VStack>
 
-            <Box className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={props.size ? props.size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={props.assignedRoles.currentPage + 1} //Number(props.page) ? Number(props.page) : 1
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={props.assignedRoles.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Box>
+            <TablePagination currentPage={props.assignedRoles.currentPage} totalPages={props.assignedRoles.totalPages} size={props.size}/>
         </div>
     );
 };
diff --git a/app/components/assignment/AssignedUsersSearch.tsx b/app/components/assignment/AssignedUsersSearch.tsx
diff --git a/app/components/assignment/AssignedUsersTable.tsx b/app/components/assignment/AssignedUsersTable.tsx
@@ -1,9 +1,12 @@
-import {Box, Button, Heading, Link, Pagination, Select, Table, Tag, VStack} from "@navikt/ds-react";
+import {Button, Heading, Link, Table, Tag, VStack} from "@navikt/ds-react";
 import type {IAssignedUsers} from "~/data/types";
 import React from "react";
 import {Outlet, useParams, useSearchParams} from "@remix-run/react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {prepareQueryParams} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface AssignedUsersTableProps {
     assignedUsers: IAssignedUsers, size: string
@@ -12,16 +15,9 @@ interface AssignedUsersTableProps {
 
 export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUsersTableProps) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const params = useParams()
-
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
+    const {fetching} = useLoadingState()
 
     return (
         <div>
@@ -41,7 +37,7 @@ export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUs
                         </Table.Row>
                     </Table.Header>
                     <Table.Body>
-                        {assignedUsers.users.map((user) => (
+                        {fetching ? <TableSkeleton columns={5}/> : assignedUsers.users.map((user) => (
                             <Table.Row key={user.assigneeRef}>
                                 <Table.HeaderCell scope="row">{user.assigneeFirstName} {user.assigneeLastName}</Table.HeaderCell>
                                 <Table.DataCell>{user.assigneeUserType}</Table.DataCell>
@@ -72,34 +68,7 @@ export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUs
                 </Table>
             </VStack>
 
-            <Box className={"paginationWrapper"}>
-                <Select
-                    id="pagination-select"
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : '25'}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={assignedUsers.currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={assignedUsers.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Box>
+            <TablePagination currentPage={assignedUsers.currentPage} totalPages={assignedUsers.totalPages} size={size}/>
         </div>
     );
 };
diff --git a/app/components/assignment/NewAssignmentRoleSearch.tsx b/app/components/assignment/NewAssignmentRoleSearch.tsx
diff --git a/app/components/assignment/NewAssignmentRoleTable.tsx b/app/components/assignment/NewAssignmentRoleTable.tsx
@@ -1,9 +1,11 @@
-import {Box, Button, Heading, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
+import {Button, Heading, Link, Table, Tag} from "@navikt/ds-react";
 import type {IRole} from "~/data/types";
 import React from "react";
 import {Outlet, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 export const AssignRoleTable: any = (props: {
     isAssignedRoles: IRole[],
@@ -15,15 +17,8 @@ export const AssignRoleTable: any = (props: {
     basePath?: string
 }) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
-
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
+    const [searchParams] = useSearchParams()
+    const {fetching} = useLoadingState()
 
     return (
         <div>
@@ -39,7 +34,7 @@ export const AssignRoleTable: any = (props: {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {props.isAssignedRoles.map((role: IRole) => (
+                    {fetching ? <TableSkeleton /> : props.isAssignedRoles.map((role: IRole) => (
                         <Table.Row key={role.id}>
                             <Table.HeaderCell scope="row">{role.roleName} </Table.HeaderCell>
                             <Table.DataCell>{role.roleType}</Table.DataCell>
@@ -66,33 +61,7 @@ export const AssignRoleTable: any = (props: {
                     ))}
                 </Table.Body>
             </Table>
-            <Box className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={props.size ? props.size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={props.currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={props.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Box>
+            <TablePagination currentPage={props.currentPage} totalPages={props.totalPages} size={props.size}/>
         </div>
     );
 };
diff --git a/app/components/assignment/NewAssignmentUserSearch.tsx b/app/components/assignment/NewAssignmentUserSearch.tsx