Design changes to receipts and disbursements datatable - line number filter

[cnlucas]

Line_number currently doesn't work with more than one selection. Our current design makes it seem as if we should be able to support list inputs. We should redesign these section to support only one input.

Summary

Line-number selections on receipts and disbursement datatables should only support one selection. We need a design that will show the users to select one single line_number.

Current Situation

Completion Criteria

• [ ] Designs for A and B tables have been created that support a single line_number
• [ ] Front-end Implementation tickets are created

[JonellaCulmer]

@patphongs @cnlucas @rfultz Since we are limited to one selection for line number on our larger schedule datatables, I've modified the receipt type filter to deactivate other options after one option is selected.

[rfultz]

Hrm. Could be tricky.

We don't currently have a filter that works like a radio button (i.e., only one value can be chosen at a time and choosing another deselects the previous)

Should we create a new kind of filter that does that? Would it be valuable in other situations? If the db is changed to handle more than one line_number, will the new radio-type filter be left in the repo and unused?

The receipt type line_number filters are three separate filters. Do we have any other places on the site where one filter's value can change a separate filter? Could we make these three deselect each other but not deactivate each other?

[patphongs]

@JonellaCulmer I see multiple possible issues with this.

1. Deactivating other options issue: A typical single select drop down shows the selected option in the select box itself. If a user wants to go in and change their selection, they would simply click into the select box to make another selection.

With the deactivated options, the user would have to deselect the the option from the checkbox option first to reactivate the options then go into the dropdown to select another option. I don't think users are going to understand this.

2. Multiple select boxes issue: Here we are deactivating multiple select boxes and options at once when a single option is selected. But if I want to select another option, I'd have to find the one original check box that is checked, uncheck it to reactivate the list, and then click back into a select box to select another option. And that checkbox could be in multiple locations, on the top of the first, second, or last select box.

Can we simplify it to where all the line numbers are in one select box with headings. We do this for PACs SSF filters.

[JonellaCulmer]

@patphongs @rfultz Thanks for your feedback. So to summarize, make it a deselect and not deactivate, and combine all the filters into one dropdown with headers? I am a little concerned with combining all the line numbers together into one dropdown as it will now include 30 options, which is more than double what's in the PAC dropdown. It would be a relatively easy way to address both your concerns.

[JonellaCulmer]

@patphongs @rfultz @cnlucas Updated design for single dropdown for all line numbers:

Dropdown appearance

Full dropdown options for all receipts datatable

Please note the correct location for the checkmark on the longest option.

Full dropdown options for the disbursements datatable

Please note the correct location for the checkmark on the longest option.

[patphongs]

@JonellaCulmer Thanks for the updated designs. I tried it out in code form and can confirm that the dropdown text should extend out like in your comp. I just have a question regarding the new filter. When a line number is selected, where will the selected option appear when the dropdown is collapsed? Since I don't think we want to use the normal checkbox at the top of the dropdown for this new filter, we'll need a way for the user to know what filter was selected. Here's a crude mock up of what I mean. It doesn't necessarily need to appear inside the select box, but that's how a normal select box operates.

[JonellaCulmer]

@patphongs Based on how I understand it to work right now, it would cut off the text after a certain length, right?

[patphongs]

it would cut off the text after a certain length, right?

@JonellaCulmer I believe we could probably make it wrap, but this may make the select box grow taller or shorter depending on what's selected. @rfultz Do you have any suggestions about this?

[dorothyyeager]

The Audit search page offers some ways to use single select https://www.fec.gov/legal-resources/enforcement/audit-search/

[JonellaCulmer]

@patphongs Here are the updated mockups for the filter tags and dropdowns. The filter tags already include the section header such as "PACs and party committees". So we'd need to decide how we want the text to appear with the line number moved to the front of the line.

Filter tag before:

Filter tag after:

Dropdown without and with selection:

Dropdown (open):

Full dropdown text for receipts (moved line number and Form # added to section rows):

Full dropdown text for disbursements (moved line number and Form # added to section rows):

[patphongs]

Here are the updated mockups for the filter tags and dropdowns. The filter tags already include the section header such as "PACs and party committees". So we'd need to decide how we want the text to appear with the line number moved to the front of the line.

Thanks @JonellaCulmer, I think the designs look good. But one thing to note is the consecutive use of colons within the filter tag. In your example "PACs or party committees: Line 28a: Refunds of contributions made to individuals/persons other than political committees". The first use of the colon is to signify a heading, but the second is to just signify a subheading? Something about the use of two colons in one tag doesn't make sense to me. But at the same time, I'm not sure how it should be. Perhaps this is something content could help with?

[JonellaCulmer]

@dorothyyeager @AmyKort @kathycarothers @djgarr, does at least one of you have a moment to look at the filter tag mock-ups in my last comment and provide feedback? We will adjust the filter tags to match, based on how we plan to change the dropdown. Do you have issues with the double colon?

[kathycarothers]

When I first reviewed it, it made sense. If you didn't want all the colons you could do a - for the sub heading, But I don't have an issue. Not sure if you want the -

[JonellaCulmer]

Following a discussion in Slack, we're updating the filter tag to look like this:

@patphongs @rfultz @johnnyporkchops Please let me know if there are any downstream issues resulting from reformatting these filter tags. I can make additional mockups if needed.

[JonellaCulmer]

Closing in favor of implementation ticket: https://github.com/fecgov/fec-cms/issues/6073