-
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.
## Tracking Info Resolves #93 ## Changes Implemented the card/list view toggle button at the top of the page and the list view for units. Also replaced paginator with V2 button version. ## Testing Tested by switching between unit and list views and trying the paginator on varying numbers of pages. ## Confirmation of Change The implemented list view: <img width="1427" alt="Screenshot 2024-05-22 at 1 03 12 PM" src="https://github.com/TritonSE/USHS-Housing-Portal/assets/35088854/b3dd9ec8-a4e6-4712-acaf-295cd2e70e78"> <img width="1427" alt="Screenshot 2024-05-22 at 1 03 19 PM" src="https://github.com/TritonSE/USHS-Housing-Portal/assets/35088854/b6a640b8-cb9a-4fb5-8d8a-484978dc3f27"> **The paginator:** <img width="348" alt="Screenshot 2024-05-22 at 1 03 42 PM" src="https://github.com/TritonSE/USHS-Housing-Portal/assets/35088854/f6e1359f-3bb2-4301-84e0-6d9467972047"> <img width="1032" alt="Screenshot 2024-05-22 at 1 03 54 PM" src="https://github.com/TritonSE/USHS-Housing-Portal/assets/35088854/33e142a8-7296-4a5b-83a4-7d2622413ff9"> <img width="1056" alt="Screenshot 2024-05-22 at 1 04 00 PM" src="https://github.com/TritonSE/USHS-Housing-Portal/assets/35088854/f338a6e6-a56a-4fa0-aa03-70526089efe3"> <img width="1063" alt="Screenshot 2024-05-22 at 1 04 06 PM" src="https://github.com/TritonSE/USHS-Housing-Portal/assets/35088854/6cdfcb4c-edbf-46e2-9b21-86300807c774"> --------- Co-authored-by: Philip Zhang <[email protected]>
- Loading branch information
1 parent
2d3228d
commit fcc8dac
Showing
14 changed files
with
644 additions
and
138 deletions.
There are no files selected for viewing
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,216 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| const NumPageButton = styled.button` | ||
| width: 25px; | ||
| height: 24px; | ||
| border-radius: 4px; | ||
| border: 1px solid #eeeeee; | ||
| opacity: 0px; | ||
| background: #f5f5f5; | ||
| align-content: center; | ||
| &:hover { | ||
| cursor: pointer; | ||
| background: #f5f5f5; | ||
| } | ||
| &.active { | ||
| background: #ec8537; | ||
| color: #ffffff; | ||
| border-color: #ec8537; | ||
| } | ||
| `; | ||
|
|
||
| const ButtonWrapper = styled.div` | ||
| display: flex; | ||
| flex-direction: row; | ||
| //width: 341.87px; | ||
| height: 24px; | ||
| justify-content: space-between; | ||
| gap: 20px; | ||
| opacity: 0px; | ||
| `; | ||
|
|
||
| const NavButton = styled(NumPageButton)``; | ||
|
|
||
| const NavButtonIcon = styled.img` | ||
| width: 24px; | ||
| height: 24px; | ||
| flex-shrink: 0; | ||
| border-radius: 4px; | ||
| border: 0; | ||
| `; | ||
|
|
||
| const EllipsesWrapper = styled.div` | ||
| width: 24px; | ||
| height: 24px; | ||
| `; | ||
|
|
||
| type PaginationProps = { | ||
| totalPages: number; | ||
| currPage: number; | ||
| setPageNumber: (newPageNumber: number) => void; | ||
| }; | ||
|
|
||
| const BUTTONS_PER_PAGE = 5; | ||
|
|
||
| export const Pagination = (props: PaginationProps) => { | ||
| const pages = []; | ||
|
|
||
| const handleClick = (increase: boolean): void => { | ||
| if (increase && props.currPage !== props.totalPages) { | ||
| props.setPageNumber(props.currPage + 1); | ||
| } | ||
|
|
||
| if (!increase && props.currPage > 1) { | ||
| props.setPageNumber(props.currPage - 1); | ||
| } | ||
| }; | ||
|
|
||
| //case 1: num pages < buttons per page -> show all | ||
| if (props.totalPages <= BUTTONS_PER_PAGE) { | ||
| for (let i = 1; i <= props.totalPages; i++) { | ||
| pages.push( | ||
| <NumPageButton | ||
| key={i} | ||
| onClick={() => { | ||
| props.setPageNumber(i); | ||
| }} | ||
| className={props.currPage === i ? "active" : ""} | ||
| > | ||
| {i} | ||
| </NumPageButton>, | ||
| ); | ||
| } | ||
| } | ||
| //case 2: on page 1-3 -> show first 4 ... and last | ||
| else if (props.currPage <= BUTTONS_PER_PAGE - 2) { | ||
| for (let i = 1; i <= props.totalPages; i++) { | ||
| //add button for first three pages | ||
| if (i <= BUTTONS_PER_PAGE - 1) { | ||
| pages.push( | ||
| <NumPageButton | ||
| key={i} | ||
| onClick={() => { | ||
| props.setPageNumber(i); | ||
| }} | ||
| className={props.currPage === i ? "active" : ""} | ||
| > | ||
| {i} | ||
| </NumPageButton>, | ||
| ); | ||
| } else if (i === props.totalPages) { | ||
| pages.push(<EllipsesWrapper>...</EllipsesWrapper>); | ||
| pages.push( | ||
| <NumPageButton | ||
| key={i} | ||
| onClick={() => { | ||
| props.setPageNumber(i); | ||
| }} | ||
| className={props.currPage === i ? "active" : ""} | ||
| > | ||
| {i} | ||
| </NumPageButton>, | ||
| ); | ||
| } | ||
| } | ||
| } | ||
| //case 3: on page end - 4 + 1-> show first ... last 4 | ||
| else if (props.currPage > props.totalPages - BUTTONS_PER_PAGE + 2) { | ||
| //add button for first three pages | ||
| for (let i = 1; i <= props.totalPages; i++) { | ||
| if (i >= props.totalPages - BUTTONS_PER_PAGE + 2) { | ||
| pages.push( | ||
| <NumPageButton | ||
| key={i} | ||
| onClick={() => { | ||
| props.setPageNumber(i); | ||
| }} | ||
| className={props.currPage === i ? "active" : ""} | ||
| > | ||
| {i} | ||
| </NumPageButton>, | ||
| ); | ||
| } else if (i === 1) { | ||
| pages.push( | ||
| <NumPageButton | ||
| key={i} | ||
| onClick={() => { | ||
| props.setPageNumber(i); | ||
| }} | ||
| className={props.currPage === i ? "active" : ""} | ||
| > | ||
| {i} | ||
| </NumPageButton>, | ||
| ); | ||
| pages.push(<EllipsesWrapper>...</EllipsesWrapper>); | ||
| } | ||
| } | ||
| } | ||
| //case 4: middle -> show first ... middle - 1, middle, middle + 1, ... last | ||
| else { | ||
| for (let i = 1; i <= props.totalPages; i++) { | ||
| if (i === 1) { | ||
| pages.push( | ||
| <NumPageButton | ||
| key={i} | ||
| onClick={() => { | ||
| props.setPageNumber(i); | ||
| }} | ||
| className={props.currPage === i ? "active" : ""} | ||
| > | ||
| {i} | ||
| </NumPageButton>, | ||
| ); | ||
| pages.push(<EllipsesWrapper>...</EllipsesWrapper>); | ||
| } else if (i === props.currPage - 1 || i === props.currPage || i === props.currPage + 1) { | ||
| pages.push( | ||
| <NumPageButton | ||
| key={i} | ||
| onClick={() => { | ||
| props.setPageNumber(i); | ||
| }} | ||
| className={props.currPage === i ? "active" : ""} | ||
| > | ||
| {i} | ||
| </NumPageButton>, | ||
| ); | ||
| } else if (i === props.totalPages) { | ||
| pages.push(<EllipsesWrapper>...</EllipsesWrapper>); | ||
| pages.push( | ||
| <NumPageButton | ||
| key={i} | ||
| onClick={() => { | ||
| props.setPageNumber(i); | ||
| }} | ||
| className={props.currPage === i ? "active" : ""} | ||
| > | ||
| {i} | ||
| </NumPageButton>, | ||
| ); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <ButtonWrapper> | ||
| <NavButton> | ||
| <NavButtonIcon | ||
| src={"/ic_caretleft.svg"} | ||
| onClick={() => { | ||
| handleClick(false); | ||
| }} | ||
| /> | ||
| </NavButton> | ||
| {pages} | ||
| <NavButton> | ||
| <NavButtonIcon | ||
| src={"/ic_caretright.svg"} | ||
| onClick={() => { | ||
| handleClick(true); | ||
| }} | ||
| /> | ||
| </NavButton> | ||
| </ButtonWrapper> | ||
| ); | ||
| }; |
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
Oops, something went wrong.