-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
40 changed files
with
1,401 additions
and
333 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 13 additions & 4 deletions
17
deployment/frontend/src/components/dashboard/UserProfile.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 28 additions & 6 deletions
34
deployment/frontend/src/components/dashboard/_shared/Pagination.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,38 @@ | ||
| import React from 'react' | ||
| import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline' | ||
| import type { SearchInput } from '@/schema/search.schema' | ||
| import Spinner from '@/components/_shared/Spinner' | ||
|
|
||
| export default function Pagination({ setQuery, query, isLoading, count }: { | ||
| setQuery: React.Dispatch<React.SetStateAction<SearchInput>>, | ||
| query: SearchInput, | ||
| isLoading?: boolean, | ||
| count?: number | ||
| }) { | ||
|
|
||
| const handlePageChange = (page: number) => { | ||
|
|
||
| if (setQuery && query && (page >= 0 && page < count!)) { | ||
| const updateQuery: SearchInput = { page: { ...query.page, start: page }, search: query.search } | ||
| setQuery(updateQuery) | ||
| } | ||
| } | ||
|
|
||
| export default function Pagination() { | ||
| return ( | ||
| <div className='flex font-acumin gap-x-2 items-center self-end'> | ||
| <div className=' text-gray-300 font-light text-sm'>1-50 of 29,097</div> | ||
| <div> | ||
| {isLoading ? <Spinner className="mx-auto my-2" /> : | ||
| <div className=' text-gray-300 font-light text-sm'>{`${query.page.start}-${query.page.rows > count! ? count : (query.page.start + query.page.rows)} of ${count}`}</div>} | ||
|
|
||
| <button | ||
| onClick={() => handlePageChange(query.page.start - query.page.rows)} | ||
| > | ||
| <ChevronLeftIcon className='w-5 h-5 text-wri-gray' /> | ||
| </div> | ||
| <div> | ||
| </button> | ||
| <button | ||
| onClick={() => handlePageChange(query.page.start + query.page.rows)} | ||
| > | ||
| <ChevronRightIcon className='w-5 h-5 text-wri-black' /> | ||
| </div> | ||
| </button> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 49 additions & 9 deletions
58
deployment/frontend/src/components/dashboard/_shared/SearchHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,63 @@ | ||
| import React from 'react' | ||
| import React, { useRef } from 'react' | ||
| import TableHeader from './TableHeader' | ||
| import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; | ||
| import type { SearchInput } from '@/schema/search.schema'; | ||
|
|
||
| function LeftNode({ placeholder, setQuery, query }: | ||
| { | ||
| placeholder?: string, | ||
| setQuery: React.Dispatch<React.SetStateAction<SearchInput>>, | ||
| query: SearchInput | ||
| }) { | ||
|
|
||
| const inputRef = useRef<HTMLInputElement>(null) | ||
|
|
||
| const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault() | ||
| if (inputRef.current) { | ||
| const updateQuery: SearchInput = { page: { ...query.page, start: 0 }, search: inputRef.current.value } | ||
| setQuery && setQuery(updateQuery) | ||
| } | ||
| } | ||
|
|
||
| function LeftNode({ placeholder }: { placeholder?: string }) { | ||
| return ( | ||
| <div className=' px-2 py-4 gap-x-2 flex flex-row items-center min-w-fit w-full bg-white'> | ||
| <div className='grow shrink basis-auto'><input type="text" placeholder={`${placeholder ? placeholder : "Search by keywords"}`} className=' focus:outline-none outline-none border-none focus:border-none focus:ring-0 focus:ring-offset-0 placeholder:text-[14px] text-[14px] font-light w-full' /></div> | ||
| <div className=' my-auto'><MagnifyingGlassIcon className='w-4 h-4 text-wri-black' /></div> | ||
| </div> | ||
| <form onSubmit={(e) => handleSubmit(e)} className='w-full'> | ||
| <div className=' px-2 py-4 gap-x-2 flex flex-row items-center min-w-fit w-full bg-white'> | ||
| <div className='grow shrink basis-auto'><input type="search" ref={inputRef} placeholder={`${placeholder ? placeholder : "Search by keywords"}`} className=' focus:outline-none outline-none border-none focus:border-none focus:ring-0 focus:ring-offset-0 placeholder:text-[14px] text-[14px] font-light w-full' /></div> | ||
| <button | ||
| type='submit' | ||
| className=' my-auto'> | ||
| <MagnifyingGlassIcon className='w-4 h-4 text-wri-black' /> | ||
| </button> | ||
| </div> | ||
| </form> | ||
| ) | ||
| } | ||
|
|
||
| export default function SearchHeader( | ||
| { RightNode, | ||
| rightStyle, | ||
| leftStyle, | ||
| placeholder }: | ||
| { RightNode?: React.ReactNode, rightStyle?: string, leftStyle?: string, placeholder?: string }) { | ||
| setQuery, | ||
| query, | ||
| placeholder, | ||
| Pagination | ||
| }: | ||
| { | ||
| RightNode?: React.ReactNode, | ||
| rightStyle?: string, | ||
| leftStyle?: string, | ||
| placeholder?: string, | ||
| setQuery: React.Dispatch<React.SetStateAction<SearchInput>>, | ||
| query: SearchInput, | ||
| Pagination: React.ReactNode | ||
| }) { | ||
| return ( | ||
| <TableHeader rightNode={RightNode} leftNode={<LeftNode placeholder={placeholder} />} rightStyle={rightStyle} leftstyle={leftStyle} /> | ||
| <TableHeader | ||
| rightNode={RightNode} | ||
| leftNode={<LeftNode placeholder={placeholder} setQuery={setQuery} query={query} />} | ||
| rightStyle={rightStyle} leftstyle={leftStyle} | ||
| Pagination={Pagination} | ||
| /> | ||
| ) | ||
| } |
Oops, something went wrong.