MPDX-7955 - Add list filter functionality #989

dr-bizz · 2024-08-01T20:41:12Z

Description

In this PR, I added functionality to the list view filter buttons. This includes exporting contacts & emails, adding contacts to appeals and deleting appeals. All models are dynamically loaded and preloaded when the mouse is hovered over the button that opens the modal in question.

Fixes

Updated the panel contact number if the user searched to show how many contacts are under each appeal status.
Added the ability to load dynamic components on the filter panel buttons on the mouse hover

Export contacts & emails

These models already existed, so there was less work to get them working.

Add Contacts Modal

Created a new modal that allows the user to add contacts to the appeal.

Edited the<ContactsAutocomplete/> to exclude contact IDs so the user doesn't see contacts that are already a part of the appeal.
Refreshes the contacts list to show new contacts in the contact list.

Delete Appeal Modal

Created this modal to allow the user to delete the appeal.

after deletion, it redirects to the user back to the appeals page

Checklist:

I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
I have applied the appropriate labels. (Add the label "On Staging" to get the branch automatically merged into staging.)
I have requested a review from another person on the project

…s into folder

…components to be able to reuse them.

…ashes the initial appeal page.

…tyles to fit it in.

…info-functionality

…erm is updated.

… dependencies

… UX.

github-actions · 2024-08-01T20:43:08Z

Bundle sizes [mpdx-react]

Compared against 63b1170

Route	Size (gzipped)	Diff
`/accountLists/[accountListId]/contacts/[[...contactId]]`	105.44 KB	+1.06 KB
`/accountLists/[accountListId]/tools/appeals/[[...appealId]]`	105.41 KB	added
`/accountLists/[accountListId]/tools/appeals`	no change	removed
`/accountLists/[accountListId]/tools/appeals/[appealId]`	no change	removed

Dynamic import	Size (gzipped)	Diff
`../src/components/Contacts/ContactFlow/DynamicContactFlow.tsx -> ./ContactFlow`	55.31 KB	+14.65 KB
`../src/components/Contacts/ContactsList/DynamicContactsList.tsx -> ./ContactsList`	38.68 KB	+9.84 KB
`../src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel.tsx -> ./ContactsRightPanel`	140.23 KB	+4.31 KB
`../src/components/Shared/Filters/DynamicFilterPanel.tsx -> ./FilterPanel`	104.95 KB	+4.29 KB
`../src/components/Tool/Appeal/AppealDetails/EditAppealHeaderInfoModal/DynamicEditAppealHeaderInfoModal.tsx -> ./EditAppealHeaderInfoModal`	28.43 KB	added
`../src/components/Tool/Appeal/DynamicAppealsDetailsPage.tsx -> ./AppealsDetailsPage`	105.86 KB	added
`../src/components/Tool/Appeal/Flow/DynamicContactFlow.tsx -> ./ContactFlow`	55.31 KB	added
`../src/components/Tool/Appeal/InitialPage/DynamicAppealsInitialPage.tsx -> ./AppealsInitialPage`	79.71 KB	added
`../src/components/Tool/Appeal/List/AppealsListFilterPanel/AddContactToAppealModal/DynamicAddContactToAppealModal.tsx -> ./AddContactToAppealModal`	3.43 KB	added
`../src/components/Tool/Appeal/List/AppealsListFilterPanel/DeleteAppealModal/DynamicAddContactToAppealModal.tsx -> ./DeleteAppealModal`	2.25 KB	added
`../src/components/Tool/Appeal/List/AppealsListFilterPanel/DynamicAppealsListFilterPanel.tsx -> ./AppealsListFilterPanel`	3.06 KB	added
`../src/components/Tool/Appeal/List/ContactsList/DynamicContactsList.tsx -> ./ContactsList`	38.68 KB	added

github-actions · 2024-08-05T18:48:46Z

Preview branch generated at https://MPDX-7955-add-list-filter-functionality.d3dytjb8adxkk5.amplifyapp.com

caleballdrin

Great job! Just a couple of changes.

...s/Tool/Appeal/List/AppealsListFilterPanel/DeleteAppealModal/AddContactToAppealModal.test.tsx

caleballdrin · 2024-08-05T21:22:16Z

src/components/Tool/Appeal/List/AppealsListFilterPanel/AppealsListFilterPanel.tsx

+                onClick={handleClearAllClick}
+                variant="outlined"
+              >
+                {t('Clear All')}


I don't think this button is needed. It is not on the angular.

I know it's not on Angular, but when using it, I like to see all the contacts and be able to clear filters easily. Especially since we push people into the asked filter on load.

When I've used appeals, I've never thought of them as filters. I've thought of them more as categories. In Angular there is no Clear button and there is no option to not have a category/filter selected. The default is always the Asked category. There really is no need to see all the contacts at once. So I would suggest keeping the angular functionality.

caleballdrin · 2024-08-05T21:23:30Z

.../Tool/Appeal/List/AppealsListFilterPanel/AddContactToAppealModal/AddContactToAppealModal.tsx

+
+  const existingContactIds = data?.appeal?.contactIds ?? [];
+
+  const onSubmit = async (attributes: AddContactFormikSchema) => {


Could this also add the contact to the 'Asked' category?

Currently, there isn't a filter to set that. I think the issue is that I'm not using the correct filter to grab the asked. However, there isn't a filter for it, so I'm talking to Andrew about that one too.

I wonder if filters aren't the way it is being organized in the angular.

Yeah, I think it's the way graphQL handles the filtering in the backend.

…buttons

… as well as tests. Need to fix once staging API is merged with production.

Plus fixing types

dr-bizz · 2024-08-29T12:56:34Z

Closing this PR as I created a new PR to clean up the history, which I then split into 4 separate PRs to allow other devs to easily review the PRs.

dr-bizz added 29 commits July 30, 2024 15:44

1. Set up Appeal Detail pages - Creating Appeal Detail page

e69245c

1. Set up Appeal Context

ded9cb0

1. Create Appeal Detail pages

e470b6e

2. Clean up old files - Deleted old files and moved initial Page file…

6e4677e

…s into folder

3. Appeal Details Frame - Building main frame.

5441d11

3. MainPanel - Appeal header info and infinite scroll

cc6964f

3. List filters

bfae35c

3. List Contact row

019e0b9

3. Contact Right Panel. Context changes were needed on a few contact …

539f625

…components to be able to reuse them.

4. Flows View - Building Flows page

3f69a0f

4. Building Flows contact row and drag and drop functionality.

42f8478

5. Fixing GraphQL error as two queries were called the same

bf1813f

5. Fixing scrolling issue, as scroll was flashing too much

bfca9cb

Removing Starred filter from ListHeader

812849f

When filtering by search it no longer refreshes the whole page and fl…

520cab4

…ashes the initial appeal page.

Adding the mass actions back to the List Header.

f9da5c0

Allowing the StarContact to have it's size passed as a parameter.

f5c594b

Adding checkbox to FlowsRow. Had to move Star button and alter some s…

38fadaf

…tyles to fit it in.

Testing contactRow is selected

7345b3f

Adding Appeal Info Modal to allow users to edit the appeal settings.

32aa630

Fixing error with If statement and using PageEnum.

0df0933

Merge branch 'MPDX-7955-add-functionality' into MPDX-7955-add-header-…

5281f72

…info-functionality

Clear filters and make filter panel contact numbers update if searchT…

4604a00

…erm is updated.

Adding onMouseEnter to FilterPanelButtons.

25fd814

Adding Export functionality

9415c44

Fixing issue with contact List since appealId is not part of the memo…

e0d987d

… dependencies

You can now exclude contacts from the contactsAutoComplete, improving…

9a217e7

… UX.

Creating add contacts to appeal modal and adding it to the filter panel.

c72ff36

Delete Appeal modal and functionality

d4d5633

dr-bizz requested a review from caleballdrin August 1, 2024 20:43

fixing error with save button change

1e1115d

caleballdrin added the Preview Environment Add this label to create an Amplify Preview label Aug 5, 2024

caleballdrin requested changes Aug 5, 2024

View reviewed changes

dr-bizz added 17 commits August 6, 2024 09:50

fixup! 3. List Contact row

f420cd7

Delete Contact from Pledge

77d2c28

Renaming test

32ca50d

Add Appeal

af7ceb6

Edit Appeal - altered the add appeal modal to be edit & add appeal.

3967651

Delete contact from appeal and small improvements to list row action …

6581c0e

…buttons

Add Excluded contact to appeal

448b48f

fixup! Add Appeal

b3f0723

Moving files around to make the folder structure make more sense.

b9dd12b

Delete Pledge modal

ec4d592

Added the ability to add an appeal via a modal for the announcements

2f81a28

Moving AddAppealForm to it's own folder

7619c7c

Fixing successful message to be the same as the old MPDX

c471e11

Adding include and exclude logic to Add Appeal forms and in the modal…

f29b428

… as well as tests. Need to fix once staging API is merged with production.

fixup! Fixing successful message to be the same as the old MPDX

746ce6a

Appeal Tour functionality and tests.

767c81e

Bulk add excluded contacts to appeal

c9dcb7a

dr-bizz force-pushed the MPDX-7955-add-header-info-functionality branch from c2648a2 to 0d73ade Compare August 23, 2024 16:07

Adding List pledge and donations.

8931296

Plus fixing types

Base automatically changed from MPDX-7955-add-header-info-functionality to main August 26, 2024 12:54

dr-bizz mentioned this pull request Aug 26, 2024

MPDX 7955 add list filter functionality 2 #1006

Closed

3 tasks

dr-bizz closed this Aug 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MPDX-7955 - Add list filter functionality #989

MPDX-7955 - Add list filter functionality #989

dr-bizz commented Aug 1, 2024

github-actions bot commented Aug 1, 2024 •

edited

Loading

github-actions bot commented Aug 5, 2024

caleballdrin left a comment

caleballdrin Aug 5, 2024

dr-bizz Aug 13, 2024

caleballdrin Aug 13, 2024

caleballdrin Aug 5, 2024

dr-bizz Aug 13, 2024

caleballdrin Aug 13, 2024

dr-bizz Aug 14, 2024

dr-bizz commented Aug 29, 2024


		const existingContactIds = data?.appeal?.contactIds ?? [];

		const onSubmit = async (attributes: AddContactFormikSchema) => {

MPDX-7955 - Add list filter functionality #989

MPDX-7955 - Add list filter functionality #989

Conversation

dr-bizz commented Aug 1, 2024

Description

Fixes

Export contacts & emails

Add Contacts Modal

Delete Appeal Modal

Checklist:

github-actions bot commented Aug 1, 2024 • edited Loading

Bundle sizes [mpdx-react]

github-actions bot commented Aug 5, 2024

caleballdrin left a comment

Choose a reason for hiding this comment

caleballdrin Aug 5, 2024

Choose a reason for hiding this comment

dr-bizz Aug 13, 2024

Choose a reason for hiding this comment

caleballdrin Aug 13, 2024

Choose a reason for hiding this comment

caleballdrin Aug 5, 2024

Choose a reason for hiding this comment

dr-bizz Aug 13, 2024

Choose a reason for hiding this comment

caleballdrin Aug 13, 2024

Choose a reason for hiding this comment

dr-bizz Aug 14, 2024

Choose a reason for hiding this comment

dr-bizz commented Aug 29, 2024

github-actions bot commented Aug 1, 2024 •

edited

Loading