hackforla / hackforla/311-data

DEV - validate filters form and load SR data on form submit

Open
#2,035 14 comments 0 reactions 1 assignee Claimed by @githelsui View on GitHub
Complexity: Medium p-feature: data p-feature: Search/Filter Modal ready for dev lead Role: Frontend size: 2pt
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



#### What Not to Implement

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
> Image
>
> ## Screenshot of validation errors, zoomed in
> Image


#### 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

![Image](https://github.com/user-attachments/assets/ad284d70-9d14-4370-b740-b207a8b3a47e)

Screenshot of Figma

## Entire Flow (reference only)

Image

## Entire Flow (filtered for #2035 dev requirements)

Image

## 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))
Image

Screenshot of new feature from localhost


[insert screenshot here]

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.