hackforla / hackforla/311-data
DEV - validate filters form and load SR data on form submit
- Dominant language
- JavaScript
- Stars
- 73
- Forks
- 74
- PR merge metrics
- No merged PRs in 30d
Description
### Overview
We need data to be loaded when users submit a query with search criteria rather than on page load, per Blank Map user flows.
### More Info
On page load, we are loading the entire 2025 (or current year) dataset. This is an instance of overfetching, we have loaded more data into memory than we intend to use. The design team has provided us user flows on how to discourage overfetching by requiring users to select _all_ search criteria before submitting their data fetch:
Click to see: 🆎 Helpful abbreviations
SR = service request
NC = neighborhood council
Click to see: 🔍 All filter criteria
- 🏘️ Neighborhood Council
- address search can select a neighborhood council _IFF_ the searched address falls within an NC
- the neighborhood council dropdown will also result in the selection of a neighborhood council
- 📆 Date Range
- user selects a start-date and end-date from these dropdowns
- 🎯 Request Types
- user must select at least one option in this multi-select
- 📂 Request Status
- user must select at least one option in this multi-select
Click to see: ❌ Which features are NOT part of this ticket
This ticket will NOT implement:
- filtering HF or socrata data:
- https://github.com/hackforla/311-data/issues/2013
- https://github.com/hackforla/311-data/issues/1937
- updated date-selector
- https://github.com/hackforla/311-data/issues/1868
- address form bugs
- https://github.com/hackforla/311-data/issues/1931
- map zoom behavior changes
- https://github.com/hackforla/311-data/issues/1989
- new confirmation modals, error modals
- e.g. within "Finalized Handoff": https://github.com/hackforla/311-data/issues/1944#finalized-handoff
- new modals incoming
- https://github.com/hackforla/311-data/issues/2010
- https://github.com/hackforla/311-data/issues/2009
---
### Action Items
#### Dev Todo Items
Modify Form Elements
- [x] Add a new button, "Display Data"
- [x] Modify export button to appear under "Display Data"
- [x] Request status selection now is a multi-select (rather than Open, Closed, All radio buttons)
Modify Form Controls
- [x] Display Data button triggers form validation error messages if any validation is un-met, only fetches data if there are no validation errors
- [x] export button becomes disabled _until_ data is successfully fetched and loaded
Add Form Validations (see [Developer Resources: Input Validation](#validation))
- [x] either address search _or_ Neighborhood Council dropdown valid input required (e.g. one and only one NC must be selected)
- [x] a start date and end date must be selected
- [x] If both are missing → "Please select a date range"
- [x] If only start date is missing → "Please select a start date"
- [x] If only end date is missing → "Please select an end date"
- [x] at least one request type should be selected
- [x] at least one request status should be selected
Modify Data Flow
- [x] Remove data from being loaded in 's componentDidMount()
- ensure `Map/index.jsx::createRequestsTable()` is not called, as this triggers download of the HF parquet file
- ensure `Map/index.jsx::setData()` is not called, leaving it in will likely crash the component
- [x] Hook up the Display Data button's on-click to Redux so that it triggers data to be downloaded
- `createRequestsTable()` and `setData()` can be called when this Redux action is called
#### Ticket Bookkeeping
- [ ] https://github.com/hackforla/311-data/issues/1989
- [x] remove the dependency label
- [ ] move the ticket to New Issue Approval
- [x] add "ready for dev lead" label
---
### Resources/Instructions
#### Developer Resources: Input Validation
Click to see details on: 🚨 Form validation elements
> ### Error Hexcode `#DE2800`
> ```
> #DE2800
> ```
>
> ## Screenshot with designer notes on validation
>
>
> ## Screenshot of validation errors, zoomed in
>
#### Related Tickets
- https://github.com/hackforla/311-data/issues/1868
#### Figma
- Figma Section: [Hand-Off - Issue #1944](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=19963-7363&t=ZFvs38dxu9l9pe3G-1)
- Related Design Ticket: https://github.com/hackforla/311-data/issues/1944
#### Screenshots
Screenshot before proposed changes

Screenshot of Figma
## Entire Flow (reference only)
## Entire Flow (filtered for #2035 dev requirements)
## Search and Filters Modal (annotated)
- section in yellow designates that we do not need to implement new date-picker styles (see [What Not to Implement](#wont-do))
Screenshot of new feature from localhost
[insert screenshot here]
Contributor guide
Assessment
This issue has not been assessed yet.