feat: search bar in fav activity modal #1799
Conversation
xiaopeng0202
requested review from
mgaseta,
DerekRoberts and
SLDonnelly
as code owners
|
Sorry @xiaopeng0202 , for some reason I'm not seeing where I can access the fav activity modal?
And I have a feeling this would be tricky to fix, but the favourite activity tooltip is cut off by the navigation panel: |
oh, sorry, it's invisible from the nav bar, just try this link https://nr-spar-49-frontend.apps.silver.devops.gov.bc.ca/consep/favourite-activities |
|
@xiaopeng0202 Thanks! I can access it now. For the heading: please change to: (adding a "u" to "favorite") Similarly, please update the text below to read: You can favourite your activities by clicking on "Add favourite activity" or by clicking on the heart icon on each page. For the "My favourite activities" page - currently, only one favourite can be highlighted at any given time. Is that the intended behavior? The add favourite activity modal looks great and search bar is working for me. |
Updated. Oh for the highlighted part, we'd like to support multiple highlight? Could that be as many as 12? |
Yes, that sounds good to me - being able to highlight multiple favourite activities with a maximum of 12 |
sounds good, i will have a follow up PR |
frontend/src/views/CONSEP/FavouriteActivity/FavouriteActivityModal.tsx
Outdated
Show resolved
Hide resolved
| <Column sm={1} md={3} lg={4} xlg={4}> | ||
| <Dropdown | ||
| id="client-search-dropdown" | ||
| label="" | ||
| aria-label="Client Search Field Select Dropdown" | ||
| titleText="" | ||
| items={searchOptions} | ||
| selectedItem={searchOption} | ||
| onChange={(e: ComboBoxEvent) => { | ||
| setSearchOption(e.selectedItem); | ||
| }} | ||
| /> | ||
| </Column> | ||
| <Column sm={2} md={3} lg={10} xlg={10}> | ||
| <TextInput | ||
| id="client-search-input" | ||
| labelText="" | ||
| aria-label="Favourite Activity Search Input" | ||
| placeholder="Search for favourite activity" | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => { | ||
| setSearchWord(e.target.value); | ||
| }} | ||
| /> | ||
| </Column> | ||
| <Column sm={1} md={2} lg={2} xlg={2}> | ||
| <Button size="md" className="fav-activity-search-btn"> | ||
| Search | ||
| <Icons.Search className="fav-activity-search-btn-icon" /> | ||
| </Button> | ||
| </Column> |
There was a problem hiding this comment.
These columns needs to be inside a <Row> component.
There was a problem hiding this comment.
Not necessary, just a suggestion, but maybe we can add the suffix Type to the new types we create, so that we can look at it in the code and be sure that it's a type.
Description
Closes #1641
Changelog
New
How was this tested?
What gif/image best describes this PR or how it makes you feel?
Thanks for the PR!
Deployments, as required, will be available below:
Please create PRs in draft mode. Mark as ready to enable:
After merge, new images are deployed in: