Move state and territory filter #6490

patphongs · 2024-09-25T21:45:48Z

Summary (required)

Resolves Move state or territory filter and other adjustments on receipts and individual contributions datatables #6196

Per ticket specifications, re-arrange filters and update text accordingly.

Required reviewers

1 UX
1 front end developer

Impacted areas of the application

General components of the application that this PR will affect:

Individual contributions datatable filters
Receipt datatable filters

Screenshots

Receipts datatable

Individual contributions datatable

How to test

Checkout this branch
npm run build-production
./manage.py runserver
Check the Individual contributions datatable filters: http://localhost:8000/data/receipts/individual-contributions/
Check the Receipts datatable filters: http://localhost:8000/data/receipts/

codecov · 2024-09-25T21:46:24Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.48%. Comparing base (738f129) to head (5a7c86a).
Report is 172 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #6490   +/-   ##
========================================
  Coverage    80.48%   80.48%           
========================================
  Files          234      234           
  Lines         5093     5093           
========================================
  Hits          4099     4099           
  Misses         994      994

Flag	Coverage Δ
	`80.48% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

JonellaCulmer · 2024-10-01T21:29:05Z

@patphongs, I'm hoping we can handle each of the updated sections the same way. Here are (mostly) screenshots of the Time period accordion but the changes affect multiple sections. I'd like to change the margin-top (5) and padding-top (10) in two areas, as well as the line height in the paragraphs (1.5). This removes some of the extra space above the new paragraphs and tightens up the text a bit. There's also a type: accross. Please let me know if I should present this all differently to you.

Accordion padding top (10)

Label margin top (5)

Small typo

Line height (1.5)

rfultz · 2025-01-07T13:45:30Z

fec/data/templates/partials/individual-contributions-filter.jinja

    {% import 'macros/filters/committee-types.jinja' as committee_type %}
    {{ committee_type.field(committee_type='recipient_committee_type', organization_type='recipient_committee_org_type', designation='recipient_committee_designation') }}
  </div>
  <button type="button" class="js-accordion-trigger accordion__button">Contribution details</button>
  <div class="accordion__content">
+    <label class="label--help u-margin--top">When searching by contribution details and across multiple time periods, choose one or more fields: <br /> ecipient name or ID, contributor name or ID, city, ZIP code, occupation, employer, or image number.</label>


'ecipient'? 😄

The issue ticket is inconsistent on 'occupation or employer, or' vs 'occupation or employer, or'

rfultz · 2025-01-07T13:46:26Z

fec/data/templates/partials/receipts-filter.jinja

@@ -34,6 +34,7 @@ Filter receipts
  <legend class="label u-margin--top">Source details</legend>
  {{ typeahead.field(name = 'contributor_name', title = 'Name or ID', dataset='committees', allow_text=True, minor_label_text = True, helper_text = 'Limit 10 source names or IDs') }}
  {{ text.field(name = 'contributor_city', title = 'City', minor_label_text = True, helper_text = 'Limit 10 cities') }}
+  {{ states.field('contributor_state', minor_label_text = True, helper_text = 'When searching by state or territory, and across multiple time periods, choose one or more fields: recipient name or ID, source name or ID, city, ZIP code, occupation, employer, or image number.', restricted_field = True) }}


The issue ticket is inconsistent on 'occupation or employer, or' vs 'occupation or employer, or'

rfultz · 2025-01-07T13:46:31Z

fec/data/templates/partials/receipts-filter.jinja

@@ -42,22 +43,21 @@ Filter receipts
 <div class="js-accordion accordion--neutral restricted-fields" data-content-prefix="filter" data-open-first="true">
  <button type="button" class="js-accordion-trigger accordion__button">Time period</button>
  <div class="accordion__content">
-    {{ years.cycles('two_year_transaction_period', 'Report time period', multi_time_period_label="When searching multiple time periods, choose one or more fields: recipient name or ID, source name or ID, city, ZIP code, occupation or employer, or image number.")  }}
+    <label class="label--help u-margin--top">When searching accross multiple time periods, choose one or more fields: <br /> recipient name or ID, source name or ID, city, ZIP code, occupation, employer, or image number.</label>


Can we remove a c from 'accross'?

The issue ticket is inconsistent on 'occupation or employer, or' vs 'occupation or employer, or'

rfultz · 2025-01-07T13:46:36Z

fec/data/templates/partials/receipts-filter.jinja

  <button type="button" class="js-accordion-trigger accordion__button">Recipient committee type</button>
  <div class="accordion__content">
+    <label class="label--help u-margin--top">When searching by recipient committee type and across multiple time periods, choose one or more fields: <br /> recipient name or ID, source name or ID, city, ZIP code, occupation, employer, or image number.</label>


The issue ticket is inconsistent on 'occupation or employer, or' vs 'occupation or employer, or'

rfultz · 2025-01-07T13:46:43Z

fec/data/templates/partials/receipts-filter.jinja

    {% import 'macros/filters/committee-types.jinja' as committee_type %}
    {{ committee_type.field(committee_type='recipient_committee_type', organization_type='recipient_committee_org_type', designation='recipient_committee_designation') }}
  </div>
  <button type="button" class="js-accordion-trigger accordion__button">Receipt details</button>
  <div class="accordion__content">
+    <label class="label--help u-margin--top">When searching by receipt details and across multiple time periods, choose one or more fields: <br /> recipient name or ID, source name or ID, city, ZIP code, occupation, employer, or image number.</label>


The issue ticket is inconsistent on 'occupation or employer, or' vs 'occupation or employer, or'

rfultz · 2025-01-07T13:47:00Z

fec/data/templates/partials/individual-contributions-filter.jinja

  <button type="button" class="js-accordion-trigger accordion__button">Recipient committee type</button>
  <div class="accordion__content">
+    <label class="label--help u-margin--top">When searching by recipient committee type and across multiple time periods, choose one or more fields: <br /> recipient name or ID, contributor name or ID, city, ZIP code, occupation or employer, or image number.</label>


The issue ticket is inconsistent on 'occupation or employer, or' vs 'occupation or employer, or'

rfultz · 2025-01-07T13:47:23Z

fec/data/templates/partials/individual-contributions-filter.jinja

  {{ text.field(name = 'contributor_city', title = 'City', minor_label_text = True, helper_text = 'Limit 10 cities') }}
+  {{ states.field('contributor_state', minor_label_text = True, helper_text = 'When searching by state or territory, and across multiple time periods, choose one or more fields: recipient name or ID, contributor name or ID, city, ZIP code, occupation, employer, or image number.', restricted_field = True) }}


The issue ticket is inconsistent on 'occupation or employer, or' vs 'occupation or employer, or'

rfultz · 2025-01-07T13:47:28Z

fec/data/templates/partials/individual-contributions-filter.jinja

  {{ text.field(name = 'contributor_occupation', title = 'Occupation', minor_label_text = True, helper_text = 'Use the employer field to search by occupation in reports filed before 2003. Limit 10 occupations') }}
  {{ text.field(name = 'contributor_employer', title = 'Employer', minor_label_text = True, helper_text = 'Limit 10 employers') }}
  {{ text.field(name = 'image_number', title = 'Image number') }}
 </div>
 <div class="js-accordion accordion--neutral restricted-fields" data-content-prefix="filter" data-open-first="true">
  <button type="button" class="js-accordion-trigger accordion__button">Time period</button>
  <div class="accordion__content">
-    {{ years.cycles('two_year_transaction_period', 'Report time period', multi_time_period_label="When searching multiple time periods, choose one or more fields: recipient name or ID, contributor name, city, ZIP code, occupation or employer, or image number.")  }}
+    <label class="label--help u-margin--top">When searching accross multiple time periods, choose one or more fields: <br /> recipient name or ID, contributor name or ID, city, ZIP code, occupation or employer, or image number.</label>


Can we remove a c from 'accross'?

The issue ticket is inconsistent on 'occupation or employer, or' vs 'occupation or employer, or'

rfultz · 2025-01-07T13:52:31Z

fec/fec/static/js/pages/datatable-individual-contributions.js

@@ -19,7 +19,7 @@ $(function() {
    useExport: true,
    rowCallback: modalRenderRow,
    error400Message:
-      '<p>You&#39;re trying to search across multiple time periods. Filter by recipient name or ID, contributor details, or image number for results.</p>',
+      '<p><p>You&#39;re trying to search across multiple time periods. Filter by recipient name or ID, other contributor details, or image number.</p>',


patphongs added 2 commits September 25, 2024 17:10

move state filter and update text

9757abd

update text and rearrange filters

5a7c86a

patphongs added the Please review label Sep 25, 2024

patphongs requested review from rfultz and JonellaCulmer September 25, 2024 21:46

patphongs mentioned this pull request Oct 7, 2024

Move state or territory filter and other adjustments on receipts and individual contributions datatables #6196

Open

1 task

patphongs removed the Please review label Nov 5, 2024

rfultz added the Work: Front-end label Dec 11, 2024

rfultz requested changes Jan 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move state and territory filter #6490

Move state and territory filter #6490

patphongs commented Sep 25, 2024 •

edited

Loading

codecov bot commented Sep 25, 2024 •

edited

Loading

JonellaCulmer commented Oct 1, 2024

rfultz Jan 7, 2025

rfultz Jan 7, 2025

rfultz Jan 7, 2025

rfultz Jan 7, 2025

rfultz Jan 7, 2025

rfultz Jan 7, 2025

rfultz Jan 7, 2025

rfultz Jan 7, 2025

rfultz Jan 7, 2025

		{{ text.field(name = 'contributor_city', title = 'City', minor_label_text = True, helper_text = 'Limit 10 cities') }}
		{{ states.field('contributor_state', minor_label_text = True, helper_text = 'When searching by state or territory, and across multiple time periods, choose one or more fields: recipient name or ID, contributor name or ID, city, ZIP code, occupation, employer, or image number.', restricted_field = True) }}

Move state and territory filter #6490

Are you sure you want to change the base?

Move state and territory filter #6490

Conversation

patphongs commented Sep 25, 2024 • edited Loading

Summary (required)

Required reviewers

Impacted areas of the application

Screenshots

Receipts datatable

Individual contributions datatable

How to test

codecov bot commented Sep 25, 2024 • edited Loading

Codecov Report

JonellaCulmer commented Oct 1, 2024

Accordion padding top (10)

Label margin top (5)

Small typo

Line height (1.5)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patphongs commented Sep 25, 2024 •

edited

Loading

codecov bot commented Sep 25, 2024 •

edited

Loading