@@ -67,15 +67,60 @@ export const CippUniversalSearch = React.forwardRef(
6767
6868CippUniversalSearch . displayName = "CippUniversalSearch" ;
6969
70- const Results = ( { items = [ ] , searchValue } ) => (
71- < Grid container spacing = { 2 } mt = { 2 } >
72- { items . slice ( 0 , 9 ) . map ( ( item , key ) => (
73- < Grid item xs = { 12 } sm = { 6 } md = { 4 } key = { key } >
74- < ResultsRow match = { item } searchValue = { searchValue } />
70+ const Results = ( { items = [ ] , searchValue } ) => {
71+ const [ currentPage , setCurrentPage ] = useState ( 1 ) ;
72+ const resultsPerPage = 9 ; // Number of results per page
73+ const totalResults = items . length ; // Total number of results
74+ const totalPages = Math . ceil ( totalResults / resultsPerPage ) ; // Total pages
75+
76+ // Calculate the results to display for the current page
77+ const startIndex = ( currentPage - 1 ) * resultsPerPage ;
78+ const endIndex = startIndex + resultsPerPage ;
79+ const displayedResults = items . slice ( startIndex , endIndex ) ;
80+
81+ const handleNextPage = ( ) => {
82+ if ( currentPage < totalPages ) {
83+ setCurrentPage ( currentPage + 1 ) ;
84+ }
85+ } ;
86+
87+ const handlePreviousPage = ( ) => {
88+ if ( currentPage > 1 ) {
89+ setCurrentPage ( currentPage - 1 ) ;
90+ }
91+ } ;
92+
93+ return (
94+ < >
95+ < Typography variant = "body2" color = "textSecondary" mt = { 2 } >
96+ { totalResults } results (Page { currentPage } of { totalPages } )
97+ </ Typography >
98+ < Grid container spacing = { 2 } mt = { 2 } >
99+ { displayedResults . map ( ( item , key ) => (
100+ < Grid item xs = { 12 } sm = { 6 } md = { 4 } key = { key } >
101+ < ResultsRow match = { item } searchValue = { searchValue } />
102+ </ Grid >
103+ ) ) }
75104 </ Grid >
76- ) ) }
77- </ Grid >
78- ) ;
105+ < Box display = "flex" justifyContent = "space-between" mt = { 2 } >
106+ < Button
107+ variant = "outlined"
108+ disabled = { currentPage === 1 }
109+ onClick = { handlePreviousPage }
110+ >
111+ Previous
112+ </ Button >
113+ < Button
114+ variant = "outlined"
115+ disabled = { currentPage === totalPages }
116+ onClick = { handleNextPage }
117+ >
118+ Next
119+ </ Button >
120+ </ Box >
121+ </ >
122+ ) ;
123+ } ;
79124
80125const ResultsRow = ( { match, searchValue } ) => {
81126 const highlightMatch = ( text ) => {
@@ -118,7 +163,7 @@ const ResultsRow = ({ match, searchValue }) => {
118163 href = { `identity/administration/users/user?tenantFilter=${
119164 currentTenantInfo . data ?. find ( ( tenant ) => tenant . customerId === match . _tenantId )
120165 ?. defaultDomainName || match . _tenantId
121- } &userId=${ match . userPrincipalName } `}
166+ } &userId=${ match . id } `}
122167 variant = "outlined"
123168 color = "primary"
124169 size = "small"
0 commit comments