Merge pull request #90 from FINTLabs/FKS-810-frontend-Paginering-og-s…

…ize-m-f-lge-som-params-p-gruppe-ressurs-tildeling FKS-810-frontend-Paginering-og-size-m-f-lge-som-params-p-gruppe-ressurs-tildeling
FINTLabs · May 23, 2024 · 22cf8cd · 22cf8cd
2 parents 2fb1464 + 4d4f26b
commit 22cf8cd
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 22 deletions.
diff --git a/app/components/common/ChipsFilters.tsx b/app/components/common/ChipsFilters.tsx
@@ -1,17 +1,24 @@
 import {Chips} from "@navikt/ds-react";
 import {useSearchParams} from "@remix-run/react";
 import {useEffect, useState} from "react";
-import {handleClearNameFieldString, handleClearSearchFieldString} from "~/components/common/CommonFunctions";
+import {
+    filterResetPageParam,
+    handleClearNameFieldString,
+    handleClearSearchFieldString
+} from "~/components/common/CommonFunctions";
 
 const ChipsFilters = () => {
     const [searchParams, setSearchParams] = useSearchParams();
+
     const [orgUnits, setOrgUnits] = useState<string | undefined>()
     const [accessRoleId, setAccessRoleId] = useState<string | undefined>()
     const [name, setName] = useState<string | undefined>()
     const [userType, setUserType] = useState<string | undefined>()
     const [search, setSearchName] = useState<string | undefined>()
     const [orgUnitName, setOrgUnitName] = useState<string | undefined>()
 
+    const pageParam = searchParams.get("page")
+
     useEffect(() => {
         const orgsParam = searchParams.get("orgUnits")
         const accessRoleIdParam = searchParams.get("accessroleid")
@@ -33,6 +40,7 @@ const ChipsFilters = () => {
             searchParams.delete(filterToRemove)
             return searchParams
         })
+        filterResetPageParam(pageParam, setSearchParams)
         switch (filterToRemove) {
             case "orgUnits":
                 setOrgUnits(undefined)

diff --git a/app/components/org-unit-filter/OrgUnitFilterModal.tsx b/app/components/org-unit-filter/OrgUnitFilterModal.tsx
@@ -4,6 +4,7 @@ import {Buldings3Icon} from "@navikt/aksel-icons"
 import type {IUnitItem} from "~/data/types";
 import OrgUnitTree from "~/components/org-unit-filter/OrgUnitTree";
 import {useSearchParams} from "@remix-run/react";
+import {filterResetPageParam} from "~/components/common/CommonFunctions";
 
 interface OrgUnitFilterModalProps {
     orgUnitList: IUnitItem[]
@@ -13,7 +14,9 @@ const OrgUnitFilterModal = ({orgUnitList}: OrgUnitFilterModalProps) => {
     const ref = useRef<HTMLDialogElement>(null)
     const [aggregated, setAggregated] = useState(false)
     const [orgUnitsFilter, setOrgUnitsFilter] = useState<IUnitItem[]>([])
-    const [, setSearchParams] = useSearchParams()
+    const [searchParams, setSearchParams] = useSearchParams()
+
+    const pageParam = searchParams.get("page")
 
 
     const handleOpen = () => {
@@ -31,6 +34,7 @@ const OrgUnitFilterModal = ({orgUnitList}: OrgUnitFilterModalProps) => {
             prev.set("orgUnits", `${[orgUnitsToString]}`);
             return prev;
         });
+        filterResetPageParam(pageParam, setSearchParams)
         ref.current?.close()
         reset()
     }

diff --git a/app/components/resource-admin/ResourceSearch.tsx b/app/components/resource-admin/ResourceSearch.tsx
@@ -1,28 +1,28 @@
 import {Search} from "@navikt/ds-react";
 import React, {useState} from "react";
-import {Form, useSubmit} from "@remix-run/react";
+import {Form, useSearchParams, useSubmit} from "@remix-run/react";
+import {filterResetPageParam} from "~/components/common/CommonFunctions";
 
 export const ResourceSearch = () => {
 
     const submit = useSubmit();
     const [searchString, setSearchString] = useState("")
+    const [searchParams, setSearchParams] = useSearchParams()
 
-    const handleSearch = () => {
-    }
-
+    const pageParam = searchParams.get("page")
     return (
         <Form className={"searchField"}
               onSubmit={event => {
                   submit({search: searchString}, {method: "GET", action: "/resource-admin"})
                   event.preventDefault()
-                  handleSearch()
+                  filterResetPageParam(pageParam, setSearchParams)
               }}>
             <Search
                 role="search"
                 label="Søk etter ressurs"
                 variant="secondary"
                 onChange={event => setSearchString(event)}
-                onClear={event => {
+                onClear={() => {
                     submit({search: ""}, {method: "GET", action: "/resource-admin"})
                 }}
             />

diff --git a/app/components/resource/ResourceSearch.tsx b/app/components/resource/ResourceSearch.tsx
@@ -1,26 +1,25 @@
 import {Search} from "@navikt/ds-react";
 import React, {useState} from "react";
 import {Form, useSearchParams} from "@remix-run/react";
-import {handleClearSearchFieldString, handleSearchFieldString} from "~/components/common/CommonFunctions";
+import {
+    filterResetPageParam,
+    handleClearSearchFieldString,
+    handleSearchFieldString
+} from "~/components/common/CommonFunctions";
 
 export const ResourceSearch = () => {
 
     const [searchString, setSearchString] = useState("")
-    const [, setSearchParams] = useSearchParams()
+    const [searchParams, setSearchParams] = useSearchParams()
 
-    const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
-        setSearchParams(searchParams => {
-            searchString ? searchParams.set("search", searchString) : searchParams.delete("search")
-            return searchParams
-        })
-        event.preventDefault() // Prevent refresh of page
-    }
+    const pageParam = searchParams.get("page")
 
     return (
         <Form className={"searchField"}
               onSubmit={event => {
                   handleSearchFieldString(event, setSearchParams, searchString)
                   setSearchString("")
+                  filterResetPageParam(pageParam, setSearchParams)
               }}
         >
             <Search

diff --git a/app/components/role/RoleSearch.tsx b/app/components/role/RoleSearch.tsx
@@ -1,18 +1,25 @@
 import {Search} from "@navikt/ds-react";
 import React, {useState} from "react";
 import {Form, useSearchParams} from "@remix-run/react";
-import {handleClearSearchFieldString, handleSearchFieldString} from "~/components/common/CommonFunctions";
+import {
+    filterResetPageParam,
+    handleClearSearchFieldString,
+    handleSearchFieldString
+} from "~/components/common/CommonFunctions";
 
 export const RoleSearch = () => {
 
     const [searchString, setSearchString] = useState("")
-    const [, setSearchParams] = useSearchParams()
+    const [searchParams, setSearchParams] = useSearchParams()
+
+    const pageParam = searchParams.get("page")
 
     return (
         <Form className={"searchField"}
               onSubmit={(event) => {
                   handleSearchFieldString(event, setSearchParams, searchString)
                   setSearchString("")
+                  filterResetPageParam(pageParam, setSearchParams)
               }}
         >
             <Search

diff --git a/app/components/user/UserSearch.tsx b/app/components/user/UserSearch.tsx
@@ -1,19 +1,26 @@
 import {Search} from "@navikt/ds-react";
 import React, {useState} from "react";
 import {Form, useSearchParams} from "@remix-run/react";
-import {handleClearSearchFieldString, handleSearchFieldString} from "~/components/common/CommonFunctions";
+import {
+    filterResetPageParam,
+    handleClearSearchFieldString,
+    handleSearchFieldString
+} from "~/components/common/CommonFunctions";
 
 
 export const UserSearch = () => {
 
     const [searchString, setSearchString] = useState("")
-    const [, setSearchParams] = useSearchParams()
+    const [searchParams, setSearchParams] = useSearchParams()
+
+    const pageParam = searchParams.get("page")
 
     return (
         <Form className={"searchField"}
               onSubmit={event => {
                   handleSearchFieldString(event, setSearchParams, searchString)
                   setSearchString("")
+                  filterResetPageParam(pageParam, setSearchParams)
               }}
         >
             <Search

diff --git a/app/components/user/UserTypeFilter.tsx b/app/components/user/UserTypeFilter.tsx
@@ -1,16 +1,20 @@
 import {Select} from "@navikt/ds-react";
 import React from "react";
 import {Form, useSearchParams} from "@remix-run/react";
+import {filterResetPageParam} from "~/components/common/CommonFunctions";
 
 export const UserTypeFilter = () => {
-
     const [currentSearchParams, setSearchParams] = useSearchParams()
+    const [searchParams,] = useSearchParams();
+
+    const pageParam = searchParams.get("page")
 
     const setUserTypeFilter = (event: string) => {
         setSearchParams(searchParams => {
             searchParams.set("userType", event);
             return searchParams;
         })
+        filterResetPageParam(pageParam, setSearchParams)
     }
 
     return (