diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index a279ca2..8897f6d 100644 --- 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 deleted file mode 100644 index 4834728..0000000 --- a/app/components/assignment/AssignedRolesSearch.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import {Search} from "@navikt/ds-react"; -import React, {useState} from "react"; -import {Form, useParams, useSubmit} from "@remix-run/react"; - -export const AssignedRolesSearch = () => { - - const submit = useSubmit(); - const [searchString, setSearchString] = useState("") - const params = useParams(); - - return ( -
{ - submit({search: searchString}, {method: "GET", action: `/resources/${params.id}/role-assignments`}) - event.preventDefault() - }}> - setSearchString(event)} - onClear={event => { - submit({search: ""}, {method: "GET", action: `/resources/${params.id}/role-assignments`}) - }} - /> - - ); -}; \ No newline at end of file diff --git a/app/components/assignment/AssignedRolesTable.tsx b/app/components/assignment/AssignedRolesTable.tsx index ccb1e25..4e54204 100644 --- 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) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const {fetching} = useLoadingState() return (
@@ -41,7 +36,7 @@ export const AssignedRolesTable: any = (props: { - {props.assignedRoles.roles.map((role) => ( + {fetching ? : props.assignedRoles.roles.map((role) => ( {role.roleName} {role.roleType} @@ -64,33 +59,7 @@ export const AssignedRolesTable: any = (props: { - - - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={props.assignedRoles.totalPages} - size="small" - prevNextTexts - /> - +
); }; \ No newline at end of file diff --git a/app/components/assignment/AssignedUsersSearch.tsx b/app/components/assignment/AssignedUsersSearch.tsx deleted file mode 100644 index b620f73..0000000 --- a/app/components/assignment/AssignedUsersSearch.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import {Search} from "@navikt/ds-react"; -import React, {useState} from "react"; -import {Form, useParams, useSearchParams, useSubmit} from "@remix-run/react"; -import {handleClearSearchFieldString, handleSearchFieldString} from "~/components/common/CommonFunctions"; - -export const AssignedUsersSearch = () => { - - const submit = useSubmit(); - const [searchString, setSearchString] = useState("") - const params = useParams(); - const [, setSearchParams] = useSearchParams() - - return ( -
handleSearchFieldString(event, setSearchParams, searchString)} - > - setSearchString(event)} - onClear={() => { - handleClearSearchFieldString(setSearchParams) - }} - /> - - ); -}; \ No newline at end of file diff --git a/app/components/assignment/AssignedUsersTable.tsx b/app/components/assignment/AssignedUsersTable.tsx index 8746b93..d95a33e 100644 --- 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) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const {fetching} = useLoadingState() return (
@@ -41,7 +37,7 @@ export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUs - {assignedUsers.users.map((user) => ( + {fetching ? : assignedUsers.users.map((user) => ( {user.assigneeFirstName} {user.assigneeLastName} {user.assigneeUserType} @@ -72,34 +68,7 @@ export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUs - - - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={assignedUsers.totalPages} - size="small" - prevNextTexts - /> - +
); }; \ No newline at end of file diff --git a/app/components/assignment/NewAssignmentRoleSearch.tsx b/app/components/assignment/NewAssignmentRoleSearch.tsx deleted file mode 100644 index cae16b9..0000000 --- a/app/components/assignment/NewAssignmentRoleSearch.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import {Search} from "@navikt/ds-react"; -import React, {useState} from "react"; -import {Form, useParams, useSubmit} from "@remix-run/react"; - - -export const NewAssignmentRoleSearch = () => { - - const submit = useSubmit(); - const params = useParams(); - const [searchString, setSearchString] = useState(""); - - return ( -
{ - submit({search: searchString}, {method: "GET", action: `/assignment/resource/${params.id}/role`}) - event.preventDefault() - }}> - setSearchString(event)} - onClear={event => { - submit({search: ""}, {method: "GET", action: `/assignment/resource/${params.id}/role`}) - }} - /> - - ); -}; \ No newline at end of file diff --git a/app/components/assignment/NewAssignmentRoleTable.tsx b/app/components/assignment/NewAssignmentRoleTable.tsx index 8971997..fe2de3a 100644 --- 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) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const [searchParams] = useSearchParams() + const {fetching} = useLoadingState() return (
@@ -39,7 +34,7 @@ export const AssignRoleTable: any = (props: { - {props.isAssignedRoles.map((role: IRole) => ( + {fetching ? : props.isAssignedRoles.map((role: IRole) => ( {role.roleName} {role.roleType} @@ -66,33 +61,7 @@ export const AssignRoleTable: any = (props: { ))} - - - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={props.totalPages} - size="small" - prevNextTexts - /> - +
); }; \ No newline at end of file diff --git a/app/components/assignment/NewAssignmentUserSearch.tsx b/app/components/assignment/NewAssignmentUserSearch.tsx deleted file mode 100644 index ee342f1..0000000 --- a/app/components/assignment/NewAssignmentUserSearch.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import {Search} from "@navikt/ds-react"; -import React, {useState} from "react"; -import {Form, useParams, useSubmit} from "@remix-run/react"; - - -export const NewAssignmentUserSearch = () => { - - const submit = useSubmit(); - const params = useParams(); - const [searchString, setSearchString] = useState(""); - - return ( -
{ - submit({search: searchString}, {method: "GET", action: `/assignment/resource/${params.id}/user`}) - event.preventDefault() - }}> - setSearchString(event)} - onClear={event => { - submit({search: ""}, {method: "GET", action: `/assignment/resource/${params.id}/user`}) - }} - /> - - ); -}; \ No newline at end of file diff --git a/app/components/assignment/NewAssignmentUserTable.tsx b/app/components/assignment/NewAssignmentUserTable.tsx index 90c807b..f5d25a9 100644 --- a/app/components/assignment/NewAssignmentUserTable.tsx +++ b/app/components/assignment/NewAssignmentUserTable.tsx @@ -1,9 +1,11 @@ -import {Box, Button, Heading, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react"; -import type {IUser, IUserItem} from "~/data/types"; +import {Button, Heading, Link, Table, Tag} from "@navikt/ds-react"; +import type {IUserItem} 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"; interface AssignUserTableProps { @@ -22,15 +24,8 @@ export const AssignUserTable = ({ currentPage, basePath, }: AssignUserTableProps) => { - const [searchParams, setSearchParams] = useSearchParams() - - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const [searchParams] = useSearchParams() + const {fetching} = useLoadingState() return (
@@ -48,7 +43,7 @@ export const AssignUserTable = ({ - {isAssignedUsers.map((user: IUserItem) => ( + {fetching ? : isAssignedUsers.map((user: IUserItem) => ( {user.fullName} {user.userType} @@ -77,33 +72,7 @@ export const AssignUserTable = ({ ))} - - - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={totalPages} - size="small" - prevNextTexts - /> - +
); }; \ No newline at end of file diff --git a/app/components/common/Buttons/SeeInfoButton.tsx b/app/components/common/Buttons/SeeInfoButton.tsx new file mode 100644 index 0000000..21da017 --- /dev/null +++ b/app/components/common/Buttons/SeeInfoButton.tsx @@ -0,0 +1,36 @@ +import React, {useEffect, useMemo} from "react"; +import {useNavigate, useNavigation} from "@remix-run/react"; +import {Button} from "@navikt/ds-react"; +import {InformationSquareIcon} from "@navikt/aksel-icons"; + +type SeeInfoButtonProps = { + id: string + url: string +} + +export const SeeInfoButton = ({id, url}: SeeInfoButtonProps) => { + const navigate = useNavigate(); + const navigation = useNavigation() + const isLoading = useMemo(() => navigation.state === "loading" && navigation.location.pathname.endsWith(url), [navigation, url]) + + return ( + + ) +} \ No newline at end of file diff --git a/app/components/common/CommonFunctions.ts b/app/components/common/CommonFunctions.ts index 07398a9..0167661 100644 --- a/app/components/common/CommonFunctions.ts +++ b/app/components/common/CommonFunctions.ts @@ -1,6 +1,7 @@ import React from "react"; import {SetURLSearchParams} from "react-router-dom"; import {ICookie} from "~/data/types"; +import {Navigation} from "@remix-run/react"; // Discovers all query params and formats them. Returns a string prepared for insertion in an url. export const prepareQueryParams = (searchParams: URLSearchParams): string => { diff --git a/app/components/common/Search.tsx b/app/components/common/Search.tsx new file mode 100644 index 0000000..ca467a2 --- /dev/null +++ b/app/components/common/Search.tsx @@ -0,0 +1,46 @@ +import {Search as AkselSearch} from "@navikt/ds-react"; +import React, {useState} from "react"; +import {Form, useSearchParams} from "@remix-run/react"; +import { + filterResetPageParam, + handleClearSearchFieldString, + handleSearchFieldString +} from "~/components/common/CommonFunctions"; +import {useLoadingState} from "~/components/common/customHooks"; + +type SearchInputProps = { + label: string + id: string +} + +export const Search = ({label, id}: SearchInputProps) => { + const [searchString, setSearchString] = useState("") + const [searchParams, setSearchParams] = useSearchParams() + const {searching} = useLoadingState() + const pageParam = searchParams.get("page") + + return ( +
{ + handleSearchFieldString(event, setSearchParams, searchString) + setSearchString("") + filterResetPageParam(pageParam, setSearchParams) + }} + > + setSearchString(event)} + onClear={() => { + handleClearSearchFieldString(setSearchParams) + }} + > + +
+ ); +}; \ No newline at end of file diff --git a/app/components/common/Table/TablePagination.tsx b/app/components/common/Table/TablePagination.tsx new file mode 100644 index 0000000..6ee4fab --- /dev/null +++ b/app/components/common/Table/TablePagination.tsx @@ -0,0 +1,52 @@ +import {Form, useSearchParams} from "@remix-run/react"; +import {Select, Pagination as AkselPagination} from "@navikt/ds-react"; +import React from "react"; +import {setSizeCookieClientSide} from "~/components/common/CommonFunctions"; + +type PaginationProps = { + currentPage: number + totalPages?: number + size?: string | number | readonly string[] | undefined +} + +export const TablePagination = ({totalPages = 1, size = 25, currentPage}: PaginationProps) => { + const [, setSearchParams] = useSearchParams() + const handleChangeRowsPerPage = (event: React.ChangeEvent) => { + setSizeCookieClientSide(event.target.value) + setSearchParams(searchParams => { + searchParams.set("page", "0") + return searchParams; + }) + } + + return ( +
+ + { + setSearchParams(searchParams => { + searchParams.set("page", (e - 1).toString()); + return searchParams; + }) + }} + count={Math.max(totalPages, 1)} + size="small" + prevNextTexts + /> + + ) +} \ No newline at end of file diff --git a/app/components/common/Table/TableSkeleton.tsx b/app/components/common/Table/TableSkeleton.tsx new file mode 100644 index 0000000..087ca76 --- /dev/null +++ b/app/components/common/Table/TableSkeleton.tsx @@ -0,0 +1,26 @@ +import {Skeleton, Table} from "@navikt/ds-react"; +import React from "react"; + +type LoadingSpinnerProps = { + columns?: number + rows?: number + height?: number +} + +const SkeletonRow = ({ columns = 4, height = 50 }: LoadingSpinnerProps) => ( + + {Array.from({ length: columns }).map((_, index) => ( + + + + ))} + +); + +export const TableSkeleton = ({ rows = 4, columns = 4, height = 50 }: LoadingSpinnerProps) => ( + <> + {Array.from({ length: rows }).map((_, index) => ( + + ))} + +); \ No newline at end of file diff --git a/app/components/common/customHooks.tsx b/app/components/common/customHooks.tsx new file mode 100644 index 0000000..7c2f8e3 --- /dev/null +++ b/app/components/common/customHooks.tsx @@ -0,0 +1,23 @@ +import {useMemo} from 'react'; +import {useLocation, useNavigation} from "@remix-run/react"; + +export const useLoadingState = () => { + const navigation = useNavigation() + const location = useLocation() + + const loading = useMemo(() => + navigation.state === "loading", + [navigation.state]) + + const fetching = useMemo(() => + navigation.state === "loading" && + navigation.location?.pathname.endsWith(location.pathname) && + new URLSearchParams(navigation.location?.search).toString() !== new URLSearchParams(location.search).toString(), + [location, navigation]) + + const searching = useMemo(() => + navigation.state === "loading" && new URLSearchParams(navigation.location?.search).has("search"), + [navigation.state, navigation.location]) + + return {loading, fetching, searching}; +} diff --git a/app/components/resource-admin/ResourceAdminTable.tsx b/app/components/resource-admin/ResourceAdminTable.tsx index 936a4f4..d3a55bd 100644 --- a/app/components/resource-admin/ResourceAdminTable.tsx +++ b/app/components/resource-admin/ResourceAdminTable.tsx @@ -1,10 +1,14 @@ -import {Button, Dropdown, HStack, Link, Pagination, Select, Table} from "@navikt/ds-react"; -import {FunnelIcon, InformationSquareIcon, MinusIcon, TrashIcon} from "@navikt/aksel-icons"; -import {Form, Outlet, useNavigate, useSearchParams} from "@remix-run/react"; +import {Button, Dropdown, HStack, Link, Table} from "@navikt/ds-react"; +import {FunnelIcon, MinusIcon, TrashIcon} from "@navikt/aksel-icons"; +import {Outlet, useSearchParams} from "@remix-run/react"; import type {IResourceAdminList} from "~/data/types"; import React from "react"; -import {prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions"; +import {prepareQueryParams} from "~/components/common/CommonFunctions"; import {StatusTag} from "~/components/resource-admin/StatusTag"; +import {TableSkeleton} from "~/components/common/Table/TableSkeleton"; +import {TablePagination} from "~/components/common/Table/TablePagination"; +import {useLoadingState} from "~/components/common/customHooks"; +import {SeeInfoButton} from "~/components/common/Buttons/SeeInfoButton"; interface ResourceTableProps { resourcePage: IResourceAdminList, @@ -13,9 +17,8 @@ interface ResourceTableProps { } export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTableProps) => { - - const navigate = useNavigate(); const [searchParams, setSearchParams] = useSearchParams() + const {fetching} = useLoadingState() const setStatusFilter = (event: string) => { setSearchParams(searchParams => { @@ -28,14 +31,6 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable }); }; - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } - return ( <> @@ -73,18 +68,18 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable - Slett + {/*Slett*/} Se mer informasjon - {resourcePage.resources.map((resource) => ( + {fetching ? : resourcePage.resources.map((resource) => ( {resource.resourceName} {resource.resourceType} {} - +{/* {resource.status === "DELETED" ? : @@ -93,7 +88,7 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable {} } - + */} {/* + ))} -
- - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={resourcePage.totalPages} - size="small" - prevNextTexts - /> - + ); }; \ No newline at end of file diff --git a/app/components/resource-admin/ResourceSearch.tsx b/app/components/resource-admin/ResourceSearch.tsx deleted file mode 100644 index a050218..0000000 --- a/app/components/resource-admin/ResourceSearch.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import {Search} from "@navikt/ds-react"; -import {Form, useSearchParams, useSubmit} from "@remix-run/react"; -import {filterResetPageParam} from "~/components/common/CommonFunctions"; -import {useState} from "react"; -import {handleClearSearchFieldString, handleSearchFieldString} from "~/components/common/CommonFunctions"; - -export const ResourceSearch = () => { - - const [searchString, setSearchString] = useState("") - const [searchParams, setSearchParams] = useSearchParams() - - const pageParam = searchParams.get("page") - return ( -
{ - filterResetPageParam(pageParam, setSearchParams) - handleSearchFieldString(event, setSearchParams, searchString) - setSearchString("") - }} - > - setSearchString(event)} - onClear={() => { - handleClearSearchFieldString(setSearchParams) - }} - /> - - ); -}; \ No newline at end of file diff --git a/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx b/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx index ba9748d..837ffc0 100644 --- a/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx +++ b/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx @@ -1,5 +1,5 @@ -import {Button, Pagination, Select, Table} from "@navikt/ds-react"; -import {Form, useNavigate, useSearchParams} from "@remix-run/react"; +import {Button, Table} from "@navikt/ds-react"; +import {useNavigate, useSearchParams} from "@remix-run/react"; import React from "react"; import { IResourceModuleAccessRole, @@ -7,7 +7,9 @@ import { IResourceModuleUsersPage } from "~/data/resourceModuleAdmin/types"; import {IUnitItem} from "~/data/types"; -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"; interface ResourceModuleAdminUsersTableI { usersPage: IResourceModuleUsersPage @@ -17,16 +19,8 @@ interface ResourceModuleAdminUsersTableI { const ResourceModuleAdminUsersTable = ({usersPage}: ResourceModuleAdminUsersTableI) => { const navigate = useNavigate() - - const [params, setSearchParams] = useSearchParams() - - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const [params] = useSearchParams() + const {fetching} = useLoadingState() return (
@@ -39,47 +33,28 @@ const ResourceModuleAdminUsersTable = ({usersPage}: ResourceModuleAdminUsersTabl - {usersPage.users.map((user: IResourceModuleUser, index) => { - return ( - - {user.firstName + " " + user.lastName} - {user.userName} - - - - ) - })} + {fetching ? + : usersPage.users.map((user: IResourceModuleUser, index) => { + return ( + + {user.firstName + " " + user.lastName} + {user.userName} + + + + ) + })} {usersPage.users.length > 0 && -
- - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={usersPage.totalPages} - size="small" - prevNextTexts - /> - + }
) diff --git a/app/components/resource-module-admin/ResourceModuleSearch.tsx b/app/components/resource-module-admin/ResourceModuleSearch.tsx index af4701e..4b4505a 100644 --- a/app/components/resource-module-admin/ResourceModuleSearch.tsx +++ b/app/components/resource-module-admin/ResourceModuleSearch.tsx @@ -1,23 +1,12 @@ -import {Search} from "@navikt/ds-react"; -import {useSearchParams} from "@remix-run/react"; -import React, {useState} from "react"; +import React from "react"; +import {Search} from "~/components/common/Search"; const ResourceModuleSearch = () => { - const [searchValue, setSearchValue] = useState("") - const [, setSearchParams] = useSearchParams() - - const handleSearch = (event: React.FormEvent) => { - setSearchParams(searchParams => { - searchValue ? searchParams.set("name", searchValue) : searchParams.delete("name") - return searchParams - }) - event.preventDefault() // Prevent refresh of page - } - return ( -
handleSearch(event)}> - setSearchValue(event)} /> - + ) } diff --git a/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx b/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx index 6e16691..3a1700f 100644 --- a/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx +++ b/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx @@ -1,6 +1,6 @@ -import {Alert, Button, Pagination, Select, Table} from "@navikt/ds-react"; +import {Alert, Table} from "@navikt/ds-react"; import React, {useState} from "react"; -import {Form, useSearchParams} from "@remix-run/react"; +import {useSearchParams} from "@remix-run/react"; import { IResourceModuleAccessRole, IResourceModuleOrgUnitDetail, @@ -8,19 +8,21 @@ import { } from "~/data/resourceModuleAdmin/types"; import {TrashIcon} from "@navikt/aksel-icons"; import DeleteOrgUnitInAssignment from "~/components/resource-module-admin/administer/DeleteOrgUnitInAssignment"; -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"; interface RoleAssignmentTableProps { selectedRole: IResourceModuleAccessRole userAssignmentsPaginated: IResourceModuleUserAssignmentsPaginated } -const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}:RoleAssignmentTableProps) => { +const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}: RoleAssignmentTableProps) => { const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) const [orgUnit, setOrgUnit] = useState() const [scopeId, setScopeId] = useState("") - - const [params, setSearchParams] = useSearchParams() + const {fetching} = useLoadingState() + const [params] = useSearchParams() const toggleDeleteOrgUnitModal = (scopeId: number, orgUnit: IResourceModuleOrgUnitDetail) => { setOrgUnit(orgUnit) @@ -28,14 +30,6 @@ const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}:RoleAssign setIsDeleteModalOpen(true) } - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } - return (
{isDeleteModalOpen && orgUnit && ( @@ -66,7 +60,7 @@ const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}:RoleAssign - {userAssignmentsPaginated?.accessRoles.length !== 0 ? ( + {fetching ? :userAssignmentsPaginated?.accessRoles.length !== 0 ? ( userAssignmentsPaginated?.accessRoles.map((scope) => scope.orgUnits.map((orgUnit) => ( 0 && -
- - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={userAssignmentsPaginated.totalPages} - size="small" - prevNextTexts - /> - + }
) diff --git a/app/components/resource/ResourceSearch.tsx b/app/components/resource/ResourceSearch.tsx index 2c08293..d6f1616 100644 --- a/app/components/resource/ResourceSearch.tsx +++ b/app/components/resource/ResourceSearch.tsx @@ -1,39 +1,6 @@ -import {Search} from "@navikt/ds-react"; -import {useState} from "react"; -import {Form, useSearchParams} from "@remix-run/react"; -import { - filterResetPageParam, - handleClearSearchFieldString, - handleSearchFieldString -} from "~/components/common/CommonFunctions"; +import React from "react"; +import {Search} from "~/components/common/Search"; export const ResourceSearch = () => { - - const [searchString, setSearchString] = useState("") - const [searchParams, setSearchParams] = useSearchParams() - - const pageParam = searchParams.get("page") - - return ( -
{ - handleSearchFieldString(event, setSearchParams, searchString) - setSearchString("") - filterResetPageParam(pageParam, setSearchParams) - }} - > - setSearchString(event)} - onClear={() => { - handleClearSearchFieldString(setSearchParams) - }} - /> - - ); + return }; \ No newline at end of file diff --git a/app/components/resource/ResourceTable.tsx b/app/components/resource/ResourceTable.tsx index c3059d3..7400b15 100644 --- a/app/components/resource/ResourceTable.tsx +++ b/app/components/resource/ResourceTable.tsx @@ -1,9 +1,10 @@ -import {Button, Pagination, Select, Table} from "@navikt/ds-react"; -import {InformationSquareIcon} from "@navikt/aksel-icons"; -import {Form, useNavigate, useSearchParams} from "@remix-run/react"; +import {Table} from "@navikt/ds-react"; import type {IResourceList} from "~/data/types"; import React from "react"; -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"; +import {SeeInfoButton} from "~/components/common/Buttons/SeeInfoButton"; interface ResourceTableProps { resourcePage: IResourceList @@ -11,17 +12,7 @@ interface ResourceTableProps { } export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => { - - const navigate = useNavigate(); - const [, setSearchParams] = useSearchParams() - - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const {fetching} = useLoadingState() return ( <> @@ -34,60 +25,21 @@ export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => { - {resourcePage.resources.map((resource) => ( + {fetching ? : resourcePage.resources.map((resource) => ( {resource.resourceName} {resource.resourceType} - + ))} -
- - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={resourcePage.totalPages} - size="small" - prevNextTexts - /> - + ); }; \ No newline at end of file diff --git a/app/components/role/AssignResourceToRoleTable.tsx b/app/components/role/AssignResourceToRoleTable.tsx index 22e1c6c..645ae61 100644 --- a/app/components/role/AssignResourceToRoleTable.tsx +++ b/app/components/role/AssignResourceToRoleTable.tsx @@ -1,10 +1,12 @@ -import {Box, Button, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react"; +import {Button, Link, Table, Tag} from "@navikt/ds-react"; import type {IResourceForList} from "~/data/types"; import React from "react"; import {Outlet, useSearchParams} from "@remix-run/react"; import {PlusIcon} 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 AssignResourceToRoleTableProps { isAssignedResources: IResourceForList[], @@ -27,15 +29,8 @@ export const AssignResourceToRoleTable = ( basePath }: AssignResourceToRoleTableProps) => { - const [searchParams, setSearchParams] = useSearchParams() - - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const [searchParams] = useSearchParams() + const {fetching} = useLoadingState() return (
@@ -50,7 +45,7 @@ export const AssignResourceToRoleTable = ( - {isAssignedResources.map((resource: IResourceForList) => ( + {fetching ? : isAssignedResources.map((resource: IResourceForList) => ( {resource.resourceName} @@ -77,33 +72,7 @@ export const AssignResourceToRoleTable = ( - - - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={totalPages} - size="small" - prevNextTexts - /> - +
); }; \ No newline at end of file diff --git a/app/components/role/AssignmentsForRoleTable.tsx b/app/components/role/AssignmentsForRoleTable.tsx index 95c542d..e35999a 100644 --- a/app/components/role/AssignmentsForRoleTable.tsx +++ b/app/components/role/AssignmentsForRoleTable.tsx @@ -1,9 +1,10 @@ -import {Button, Link, Pagination, Select, Table} from "@navikt/ds-react"; -import type {IAssignmentPage, IResource, IResourceAssignment} from "~/data/types"; -import {Form, Outlet, useParams, useSearchParams} from "@remix-run/react"; +import {Button, Link, Table} from "@navikt/ds-react"; +import type {IAssignmentPage, IResourceAssignment} from "~/data/types"; +import {Outlet, useParams, useSearchParams} from "@remix-run/react"; import React from "react"; import {TrashIcon} from "@navikt/aksel-icons"; -import {prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions"; +import {prepareQueryParams} from "~/components/common/CommonFunctions"; +import {TablePagination} from "~/components/common/Table/TablePagination"; interface AssignmentsForRoleTableProps { @@ -18,17 +19,9 @@ export const AssignmentsForRoleTable = ({ basePath }: AssignmentsForRoleTableProps) => { - const [searchParams, setSearchParams] = useSearchParams() + const [searchParams] = useSearchParams() const params = useParams() - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } - return ( <> @@ -67,33 +60,7 @@ export const AssignmentsForRoleTable = ({ -
- - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={assignmentsForRole.totalPages} - size="small" - prevNextTexts - /> - + ); }; \ No newline at end of file diff --git a/app/components/role/MemberTable.tsx b/app/components/role/MemberTable.tsx index 085c299..abf4cb9 100644 --- a/app/components/role/MemberTable.tsx +++ b/app/components/role/MemberTable.tsx @@ -1,8 +1,9 @@ -import {Pagination, Select, Table} from "@navikt/ds-react"; -import {Form, useSearchParams} from "@remix-run/react"; +import {Table} from "@navikt/ds-react"; import type {IMemberPage} from "~/data/types"; import React from "react"; -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"; interface MembersTableProps { @@ -11,16 +12,7 @@ interface MembersTableProps { } export const MemberTable = ({ memberPage, size }: MembersTableProps) => { - - const [, setSearchParams] = useSearchParams() - - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const {fetching} = useLoadingState() return ( <> @@ -32,7 +24,7 @@ export const MemberTable = ({ memberPage, size }: MembersTableProps) => { - {memberPage.members.map((member) => ( + {fetching ? : memberPage.members.map((member) => ( {member.firstName} {member.lastName} {member.userType} @@ -61,34 +53,7 @@ export const MemberTable = ({ memberPage, size }: MembersTableProps) => { -
- - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={memberPage.totalPages} - size="small" - prevNextTexts - /> - + ); }; \ No newline at end of file diff --git a/app/components/role/RoleSearch.tsx b/app/components/role/RoleSearch.tsx index 54eb2de..afb2e83 100644 --- a/app/components/role/RoleSearch.tsx +++ b/app/components/role/RoleSearch.tsx @@ -1,39 +1,6 @@ -import {Search} from "@navikt/ds-react"; -import React, {useState} from "react"; -import {Form, useSearchParams} from "@remix-run/react"; -import { - filterResetPageParam, - handleClearSearchFieldString, - handleSearchFieldString -} from "~/components/common/CommonFunctions"; +import React from "react"; +import { Search } from "~/components/common/Search"; -export const RoleSearch = () => { - - const [searchString, setSearchString] = useState("") - const [searchParams, setSearchParams] = useSearchParams() - - const pageParam = searchParams.get("page") - - return ( -
{ - handleSearchFieldString(event, setSearchParams, searchString) - setSearchString("") - filterResetPageParam(pageParam, setSearchParams) - }} - > - setSearchString(event)} - onClear={() => { - handleClearSearchFieldString(setSearchParams) - }} - /> - - ); -}; \ No newline at end of file +export const RoleSearch = () => ( + +); \ No newline at end of file diff --git a/app/components/role/RoleTable.tsx b/app/components/role/RoleTable.tsx index 56ea17f..6f6e62e 100644 --- a/app/components/role/RoleTable.tsx +++ b/app/components/role/RoleTable.tsx @@ -1,26 +1,18 @@ -import {Button, Pagination, Select, Table} from "@navikt/ds-react"; -import {InformationSquareIcon} from "@navikt/aksel-icons"; -import {Form, useNavigate, useSearchParams} from "@remix-run/react"; +import {Table} from "@navikt/ds-react"; import type {IRoleList} from "~/data/types"; import React from "react"; -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"; +import {SeeInfoButton} from "~/components/common/Buttons/SeeInfoButton"; interface RoleTableProps { rolePage: IRoleList size: string } -export const RoleTable = ({ rolePage, size }: RoleTableProps) => { - const navigate = useNavigate(); - const [, setSearchParams] = useSearchParams() - - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } +export const RoleTable = ({rolePage, size}: RoleTableProps) => { + const {fetching} = useLoadingState() return ( <> @@ -34,64 +26,21 @@ export const RoleTable = ({ rolePage, size }: RoleTableProps) => { - {rolePage.roles.map((role) => ( - - {role.roleName} - {role.organisationUnitName} - {role.roleType} - - - - - ))} + {fetching ? : + rolePage.roles.map((role) => ( + + {role.roleName} + {role.organisationUnitName} + {role.roleType} + + + + + ))} -
- - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={rolePage.totalPages} - size="small" - prevNextTexts - /> - + ); }; \ No newline at end of file diff --git a/app/components/user/AssignResourceToUserTable.tsx b/app/components/user/AssignResourceToUserTable.tsx index b655a32..cfc85f5 100644 --- a/app/components/user/AssignResourceToUserTable.tsx +++ b/app/components/user/AssignResourceToUserTable.tsx @@ -1,11 +1,12 @@ -import {Box, Button, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react"; -import type {IResource, IResourceAssignment, IResourceForList} from "~/data/types"; +import {Button, Link, Table, Tag} from "@navikt/ds-react"; +import type {IResourceForList} from "~/data/types"; import React from "react"; import {Outlet, useSearchParams} from "@remix-run/react"; import {PlusIcon} from "@navikt/aksel-icons"; import {prepareQueryParams} from "~/components/common/CommonFunctions"; -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"; interface AssignResourceToUserTableProps { isAssignedResources: IResourceForList[] @@ -26,15 +27,8 @@ export const AssignResourceToUserTable = ({ basePath }: AssignResourceToUserTableProps) => { - const [searchParams, setSearchParams] = useSearchParams() - - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const [searchParams] = useSearchParams() + const {fetching} = useLoadingState() return (
@@ -47,7 +41,7 @@ export const AssignResourceToUserTable = ({ - {isAssignedResources.map((resource: IResourceForList) => ( + {fetching ? : isAssignedResources.map((resource: IResourceForList) => ( {resource.resourceName} @@ -73,33 +67,7 @@ export const AssignResourceToUserTable = ({ ))} - - - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={totalPages} - size="small" - prevNextTexts - /> - +
); }; \ No newline at end of file diff --git a/app/components/user/AssignmentsForUserTable.tsx b/app/components/user/AssignmentsForUserTable.tsx index 486086d..e950c84 100644 --- a/app/components/user/AssignmentsForUserTable.tsx +++ b/app/components/user/AssignmentsForUserTable.tsx @@ -1,9 +1,12 @@ -import {Button, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react"; +import {Button, Link, Table, Tag} from "@navikt/ds-react"; import type {IAssignmentPage} from "~/data/types"; -import {Form, Outlet, useParams, useSearchParams} from "@remix-run/react"; +import {Outlet, useParams, useSearchParams} from "@remix-run/react"; import React from "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 AssignmentsForUserTableProps { assignmentsForUser: IAssignmentPage @@ -13,16 +16,9 @@ interface AssignmentsForUserTableProps { export const AssignmentsForUserTable = ({assignmentsForUser, size, basePath}: AssignmentsForUserTableProps) => { - const [searchParams, setSearchParams] = useSearchParams() + const [searchParams] = useSearchParams() const params = useParams() - - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const {fetching} = useLoadingState() return ( <> @@ -38,7 +34,7 @@ export const AssignmentsForUserTable = ({assignmentsForUser, size, basePath}: As - {assignmentsForUser.resources.map((resource) => ( + {fetching ? : assignmentsForUser.resources.map((resource) => ( {resource.resourceName} {resource.resourceType} @@ -69,34 +65,7 @@ export const AssignmentsForUserTable = ({assignmentsForUser, size, basePath}: As -
- - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={assignmentsForUser.totalPages} - size="small" - prevNextTexts - /> - + ); }; \ No newline at end of file diff --git a/app/components/user/UserSearch.tsx b/app/components/user/UserSearch.tsx index f63a9d4..156bc1a 100644 --- a/app/components/user/UserSearch.tsx +++ b/app/components/user/UserSearch.tsx @@ -1,40 +1,8 @@ -import {Search} from "@navikt/ds-react"; -import React, {useState} from "react"; -import {Form, useSearchParams} from "@remix-run/react"; -import { - filterResetPageParam, - handleClearSearchFieldString, - handleSearchFieldString -} from "~/components/common/CommonFunctions"; - +import React from "react"; +import {Search} from "~/components/common/Search"; export const UserSearch = () => { - - const [searchString, setSearchString] = useState("") - const [searchParams, setSearchParams] = useSearchParams() - - const pageParam = searchParams.get("page") - return ( -
{ - handleSearchFieldString(event, setSearchParams, searchString) - setSearchString("") - filterResetPageParam(pageParam, setSearchParams) - }} - > - setSearchString(event)} - onClear={() => { - handleClearSearchFieldString(setSearchParams) - }} - /> - + ); }; \ No newline at end of file diff --git a/app/components/user/UserTable.tsx b/app/components/user/UserTable.tsx index e276753..c32b51e 100644 --- a/app/components/user/UserTable.tsx +++ b/app/components/user/UserTable.tsx @@ -1,9 +1,10 @@ -import {Button, Pagination, Select, Table} from "@navikt/ds-react"; -import {InformationSquareIcon} from "@navikt/aksel-icons"; -import {Form, useNavigate, useSearchParams} from "@remix-run/react"; +import {Table} from "@navikt/ds-react"; import {IUserItem, IUserPage} from "~/data/types"; import React from "react"; -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"; +import {SeeInfoButton} from "~/components/common/Buttons/SeeInfoButton"; interface UserTableProps { userPage: IUserPage @@ -11,17 +12,7 @@ interface UserTableProps { } export const UserTable = ({userPage, size}: UserTableProps) => { - - const navigate = useNavigate(); - const [, setSearchParams] = useSearchParams() - - const handleChangeRowsPerPage = (event: React.ChangeEvent) => { - setSizeCookieClientSide(event.target.value) - setSearchParams(searchParams => { - searchParams.set("page", "0") - return searchParams; - }) - } + const {fetching} = useLoadingState() return ( <> @@ -35,64 +26,23 @@ export const UserTable = ({userPage, size}: UserTableProps) => { - {userPage.users.map((user: IUserItem) => ( + {fetching ? : userPage.users.map((user: IUserItem) => ( {user.fullName} {user.organisationUnitName} {user.userType} - + url={`/users/${user.id}/orgunit/${user.organisationUnitId}`} + /> ))} -
- - { - setSearchParams(searchParams => { - searchParams.set("page", (e - 1).toString()); - return searchParams; - }) - }} - count={userPage.totalPages || 1} - size="small" - prevNextTexts - /> - + ); }; \ No newline at end of file diff --git a/app/data/fetch-roles.ts b/app/data/fetch-roles.ts index 466b464..0189238 100644 --- a/app/data/fetch-roles.ts +++ b/app/data/fetch-roles.ts @@ -37,8 +37,8 @@ export const fetchRoleById = async (request: Request, id: string | undefined) => } -export const fetchMembers = async (request: Request, id: string | undefined, size: string, page: string, search: string) => { - const response = await fetch(`${ROLE_API_URL}${BASE_PATH}/api/roles/${id}/members?size=${size}&page=${page}&search=${search}`, { +export const fetchMembers = async (request: Request, id: string | undefined, size: string, page: string, name: string) => { + const response = await fetch(`${ROLE_API_URL}${BASE_PATH}/api/roles/${id}/members?size=${size}&page=${page}&name=${name}`, { headers: request.headers }); diff --git a/app/routes/resource-admin._index.tsx b/app/routes/resource-admin._index.tsx index ce876cd..640c573 100644 --- a/app/routes/resource-admin._index.tsx +++ b/app/routes/resource-admin._index.tsx @@ -4,7 +4,7 @@ import {Links, Meta, Scripts, useLoaderData, useNavigate, useRouteError} from "@ import {IResourceAdminList, IUnitItem, IUnitTree} from "~/data/types"; import type {LoaderFunctionArgs} from "@remix-run/router"; import {fetchApplicationCategory, fetchOrgUnits, fetchResourcesForAdmin} from "~/data/fetch-resources"; -import {ResourceSearch} from "~/components/resource-admin/ResourceSearch"; +import {Search} from "~/components/common/Search"; import {ResourceAdminTable} from "~/components/resource-admin/ResourceAdminTable"; import ChipsFilters from "~/components/common/ChipsFilters"; import {ResourceSelectApplicationCategory} from "~/components/resource-admin/ResourceSelectApplicationCategory"; @@ -85,6 +85,7 @@ export default function ResourceAdminIndex() { Opprett ny ressurs + @@ -101,10 +102,9 @@ export default function ResourceAdminIndex() { ))} */} - - + - + {/**/} diff --git a/app/routes/resource-module-admin._index.tsx b/app/routes/resource-module-admin._index.tsx index c07f21b..5a92f71 100644 --- a/app/routes/resource-module-admin._index.tsx +++ b/app/routes/resource-module-admin._index.tsx @@ -25,7 +25,7 @@ export async function loader({request}: LoaderFunctionArgs) { const size = Number(url.searchParams.get("size") ?? "10"); const page = Number(url.searchParams.get("page") ?? "0"); const orgunits: string[] = url.searchParams.get("orgUnits")?.split(",") ?? [""]; - const name = url.searchParams.get("name") ?? ""; + const name = url.searchParams.get("search") ?? ""; const role = url.searchParams.get("accessroleid") ?? ""; const responseUsersPage = await fetchUsersWithAssignment(auth, page, size, orgunits, name, role); diff --git a/app/routes/resource-module-admin.opprett-ny-tildeling.tsx b/app/routes/resource-module-admin.opprett-ny-tildeling.tsx index 76e470d..85685aa 100644 --- a/app/routes/resource-module-admin.opprett-ny-tildeling.tsx +++ b/app/routes/resource-module-admin.opprett-ny-tildeling.tsx @@ -55,7 +55,7 @@ export async function loader({request}: LoaderFunctionArgs) { const itemsPerPage = url.searchParams.get("size") ?? "10"; const currentPage = url.searchParams.get("page") ?? "0"; const orgUnitIds = url.searchParams.get("orgUnits")?.split(",") ?? []; - const name = url.searchParams.get("name") ?? ""; + const name = url.searchParams.get("search") ?? ""; const roleFilter = url.searchParams.get("accessroleid") ?? "" const usersPageResponse = await fetchUsersWhoCanGetAssignments(auth, Number(currentPage), Number(itemsPerPage), orgUnitIds, name, roleFilter); diff --git a/app/routes/roles.$id.members.tsx b/app/routes/roles.$id.members.tsx index b3b3ea1..fedcc56 100644 --- a/app/routes/roles.$id.members.tsx +++ b/app/routes/roles.$id.members.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import {Alert, Box, Detail, Heading, Tabs, VStack} from "@navikt/ds-react"; +import {Alert, Box, Detail, Heading, HStack, Tabs, VStack} from "@navikt/ds-react"; import {Link, Links, Meta, Scripts, useLoaderData, useRouteError} from "@remix-run/react"; -import {LoaderFunctionArgs} from "@remix-run/router"; +import {LoaderFunctionArgs} from "@remix-run/router"; import {fetchMembers} from "~/data/fetch-roles"; import {json} from "@remix-run/node"; import {MemberTable} from "~/components/role/MemberTable"; import {getSizeCookieFromRequestHeader} from "~/components/common/CommonFunctions"; +import {Search} from "~/components/common/Search"; +import ChipsFilters from "~/components/common/ChipsFilters"; export async function loader({params, request}: LoaderFunctionArgs) { const url = new URL(request.url); @@ -24,7 +26,7 @@ export async function loader({params, request}: LoaderFunctionArgs) { export const handle = { // @ts-ignore - breadcrumb: ({ params, data }) => Medlemmer + breadcrumb: ({params, data}) => Medlemmer } export default function Members() { @@ -37,15 +39,22 @@ export default function Members() { Medlemmer av gruppen - Antall medlemmer i gruppen: {members.totalItems} + + Antall medlemmer i gruppen: {members.totalItems} + + + + + - + ); } + export function ErrorBoundary() { const error: any = useRouteError(); // console.error(error); diff --git a/app/routes/users._index.tsx b/app/routes/users._index.tsx index 4bedf0d..f65f0d7 100644 --- a/app/routes/users._index.tsx +++ b/app/routes/users._index.tsx @@ -41,7 +41,6 @@ export default function UsersIndex() { orgUnitList: IUnitItem[] size: string }>(); - const [searchParams,] = useSearchParams() const size = data.size return ( diff --git a/app/styles/main.css b/app/styles/main.css index 957d1af..6f2749e 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -157,4 +157,8 @@ table { .navds-tag-in-table{ margin: var(--a-spacing-3) var(--a-spacing-5); -} \ No newline at end of file +} + +button { + white-space: nowrap; +} diff --git a/cypress/e2e/ressurser/forvalte-ressurser/slettRessurs.cy.ts b/cypress/e2e/ressurser/forvalte-ressurser/slettRessurs.cy.ts index 3b5c386..2fba9ab 100644 --- a/cypress/e2e/ressurser/forvalte-ressurser/slettRessurs.cy.ts +++ b/cypress/e2e/ressurser/forvalte-ressurser/slettRessurs.cy.ts @@ -1,3 +1,4 @@ +/* describe('Test delete resource', () => { it('Navigate to resource-admin and click delete on resource in table', () => { cy.goToResourceAdmin(); @@ -41,4 +42,4 @@ describe('Test delete resource', () => { }); }); -}); \ No newline at end of file +});*/ diff --git a/cypress/e2e/ressurser/resource.cy.ts b/cypress/e2e/ressurser/resource.cy.ts index 8c78694..a08c66f 100644 --- a/cypress/e2e/ressurser/resource.cy.ts +++ b/cypress/e2e/ressurser/resource.cy.ts @@ -50,7 +50,7 @@ describe('Check the resource details page', () => { it('Pagination (select number of rows in table)', () => { cy.get('#pagination').should('be.visible') - cy.get('#pagination-select').should('exist').select('5') + cy.get('#select-number-of-rows').should('exist').select('5') cy.wait(1000) });