feature/AB#31737 Enhanced Date Filter#2017
Conversation
…fined values. The previous "FromDate" and "ToDate" are hidden unless the quick date range selection is set to "Custom" Quick date range calculates the predefined values and sets "FromDate" and "ToDate" to utilize existing fuctions/logic Clearing all filters DOES NOT reset the quick date range filter (change in acceptance) Reviewing initial performance improvements
There was a problem hiding this comment.
Pull request overview
Adds a “Quick Date Range” selector to the Grant Applications action bar to drive the existing Submitted From/To date filters, showing the manual date inputs only when “Custom” is selected and persisting the selection in localStorage.
Changes:
- Introduces a quick date range dropdown (Today / Last X / All time / Custom) and hides manual date inputs unless “Custom” is selected.
- Updates GrantApplications
Index.jsto compute preset ranges, persist selection, and reload the table when ranges change. - Adds CSS for the custom date range container layout.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| applications/Unity.GrantManager/src/Unity.GrantManager.Web/Views/Shared/Components/ActionBar/Default.css | Adds styling for the custom date range container wrapper. |
| applications/Unity.GrantManager/src/Unity.GrantManager.Web/Views/Shared/Components/ActionBar/Default.cshtml | Adds the Quick Date Range dropdown and nests From/To inputs under a hidden “Custom” container. |
| applications/Unity.GrantManager/src/Unity.GrantManager.Web/Pages/GrantApplications/Index.js | Implements quick range logic, localStorage persistence, and table reload behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const range = getDateRange(defaultQuickDateRange); | ||
| if (range?.fromDate && range?.toDate) { | ||
| UIElements.submittedFromInput.val(range.fromDate); | ||
| UIElements.submittedToInput.val(range.toDate); | ||
| grantTableFilters.submittedFromDate = range.fromDate; | ||
| grantTableFilters.submittedToDate = range.toDate; |
There was a problem hiding this comment.
initializeSubmittedFilterDates() sets the dropdown to savedRange, but when no FromDate/ToDate are in localStorage it always computes dates from defaultQuickDateRange. This breaks the "All time" option (and any other preset) after refresh: the UI can show alltime while the filters are silently set to the default range. Use savedRange to derive the range (and for alltime, ensure both filters remain null/empty).
| const range = getDateRange(defaultQuickDateRange); | |
| if (range?.fromDate && range?.toDate) { | |
| UIElements.submittedFromInput.val(range.fromDate); | |
| UIElements.submittedToInput.val(range.toDate); | |
| grantTableFilters.submittedFromDate = range.fromDate; | |
| grantTableFilters.submittedToDate = range.toDate; | |
| // No saved dates: derive range from the saved quick range selection | |
| if (savedRange === 'alltime') { | |
| // "All time" should have no date bounds | |
| UIElements.submittedFromInput.val(''); | |
| UIElements.submittedToInput.val(''); | |
| grantTableFilters.submittedFromDate = null; | |
| grantTableFilters.submittedToDate = null; | |
| } else { | |
| const range = getDateRange(savedRange); | |
| if (range?.fromDate && range?.toDate) { | |
| UIElements.submittedFromInput.val(range.fromDate); | |
| UIElements.submittedToInput.val(range.toDate); | |
| grantTableFilters.submittedFromDate = range.fromDate; | |
| grantTableFilters.submittedToDate = range.toDate; | |
| } |
| // Reset date range filters | ||
| $('#quickDateRange').val(defaultQuickDateRange); | ||
| toggleCustomDateInputs(defaultQuickDateRange === 'custom'); | ||
|
|
||
| const range = getDateRange(defaultQuickDateRange); | ||
| if (range) { | ||
| UIElements.submittedFromInput.val(range.fromDate); | ||
| UIElements.submittedToInput.val(range.toDate); | ||
| grantTableFilters.submittedFromDate = range.fromDate; | ||
| grantTableFilters.submittedToDate = range.toDate; | ||
|
|
||
| localStorage.setItem('GrantApplications_FromDate', range.fromDate); | ||
| localStorage.setItem('GrantApplications_ToDate', range.toDate); | ||
| localStorage.setItem('GrantApplications_QuickRange', defaultQuickDateRange); | ||
| } |
There was a problem hiding this comment.
The reset-to-default-view action is resetting #quickDateRange back to last6months and overwriting GrantApplications_QuickRange in localStorage. This conflicts with the PR description/acceptance note that clearing all filters should not reset the quick date range filter—either update the implementation to preserve the current quick range or update the PR description/behavior expectation to match.
| //If the values for FromDate and ToDate are being set outside of the | ||
| //quick drop down handler, custom SHOULD be shown, but set just in case | ||
| $('#quickDateRange').val('custom'); | ||
| localStorage.setItem('GrantApplications_QuickRange', 'custom'); |
There was a problem hiding this comment.
handleInputFilterChange() forces the quick range to custom but does not call toggleCustomDateInputs(true). If the date inputs are changed programmatically (or a change event fires while the custom container is hidden), the dropdown can switch to "Custom" while the custom inputs remain hidden, leaving the UI in an inconsistent state.
| localStorage.setItem('GrantApplications_QuickRange', 'custom'); | |
| localStorage.setItem('GrantApplications_QuickRange', 'custom'); | |
| // Ensure the custom date inputs are visible when quick range is set to custom | |
| toggleCustomDateInputs(true); |
| <label class="form-label" for="SubmittedFromDate">Submission Date From</label> | ||
| <input | ||
| abp-data-datepicker="false" | ||
| type="date" | ||
| id="submittedFromDate" | ||
| name="SubmittedFromDate" | ||
| value="" | ||
| class="form-control date-input-filter" | ||
| min="1900-01-01" | ||
| max="2100-01-01"> | ||
| </div> | ||
| <div class="mb-3 date-input-filter-div"> | ||
| <label class="form-label" for="SubmittedToDate">Submission Date To</label> | ||
| <input | ||
| abp-data-datepicker="false" | ||
| type="date" | ||
| id="submittedToDate" | ||
| name="SubmittedToDate" |
There was a problem hiding this comment.
The label for attributes for the date inputs don't match the inputs' ids (for="SubmittedFromDate" vs id="submittedFromDate", and similarly for To). This breaks label-to-control association for screen readers and click-to-focus behavior. Update the for values to match the corresponding input ids.
| return true; | ||
| } | ||
|
|
||
| // Returns a formated { fromDate, toDate } for the filter fields. |
There was a problem hiding this comment.
Spelling: "formated" in the comment should be "formatted".
| // Returns a formated { fromDate, toDate } for the filter fields. | |
| // Returns a formatted { fromDate, toDate } for the filter fields. |
Added the quick date range select drop down next to search with predefined values.
The previous "FromDate" and "ToDate" are hidden unless the quick date range selection is set to "Custom"
Quick date range calculates the predefined values and sets "FromDate" and "ToDate" to utilize existing fuctions/logic
Clearing all filters DOES NOT reset the quick date range filter (change in acceptance)