Skip to content

feature/AB#31737 Enhanced Date Filter #2017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JamesPasta merged 2 commits into from
Feb 20, 2026
Merged

feature/AB#31737 Enhanced Date Filter #2017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48bac3b
Added the quick date range select drop down next to search with prede…
DavidBrightBcGov Feb 19, 2026
3a9799a
Fixed an option chaining flagged by Sonarqube
DavidBrightBcGov Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 134 additions & 31 deletions applications/Unity.GrantManager/src/Unity.GrantManager.Web/Pages/GrantApplications/Index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@

const formatter = createNumberFormatter();
const l = abp.localization.getResource('GrantManager');
const defaultQuickDateRange = 'last6months';

let dt = $('#GrantApplicationsTable');
let dataTable;

Expand Down Expand Up @@ -92,6 +94,22 @@
dt.search('');
dt.order(initialSortOrder).draw();

// 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);
}
Comment on lines +97 to +111
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.

// Close the dropdown
dt.buttons('.grp-savedStates')
.container()
Expand Down Expand Up @@ -164,50 +182,41 @@ const listColumns = getColumns();
}

function initializeSubmittedFilterDates() {

const fromDate = localStorage.getItem('GrantApplications_FromDate');
const toDate = localStorage.getItem('GrantApplications_ToDate');
const savedRange = localStorage.getItem('GrantApplications_QuickRange') || defaultQuickDateRange;

// Check if localStorage has values and use them
// Set the dropdown value
$('#quickDateRange').val(savedRange);

// Show/hide custom date inputs based on saved selection
toggleCustomDateInputs(savedRange === 'custom');

// If we have saved dates, use them
if (fromDate && toDate) {
UIElements.submittedFromInput.val(fromDate);
UIElements.submittedToInput.val(toDate);
grantTableFilters.submittedFromDate = fromDate;
grantTableFilters.submittedToDate = toDate;
return;
} else {
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;
Comment on lines +202 to +207
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Suggested change
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;
}

Copilot uses AI. Check for mistakes.
}
}

let dtToday = new Date();
let month = dtToday.getMonth() + 1;
let day = dtToday.getDate();
let year = dtToday.getFullYear();
if (month < 10)
month = '0' + month.toString();
if (day < 10)
day = '0' + day.toString();
let todayDate = year + '-' + month + '-' + day;

let dtSixMonthsAgo = new Date();
dtSixMonthsAgo.setMonth(dtSixMonthsAgo.getMonth() - 6);
let minMonth = dtSixMonthsAgo.getMonth() + 1;
let minDay = dtSixMonthsAgo.getDate();
let minYear = dtSixMonthsAgo.getFullYear();
if (minMonth < 10)
minMonth = '0' + minMonth.toString();
if (minDay < 10)
minDay = '0' + minDay.toString();
let suggestedMinDate = minYear + '-' + minMonth + '-' + minDay;

UIElements.submittedToInput.attr({ 'max': todayDate });
UIElements.submittedToInput.val(todayDate);
UIElements.submittedFromInput.attr({ 'max': todayDate });
UIElements.submittedFromInput.val(suggestedMinDate);
grantTableFilters.submittedFromDate = suggestedMinDate;
grantTableFilters.submittedToDate = todayDate;
// Set max date to today for both inputs
const today = formatDate(new Date());
UIElements.submittedToInput.attr({ 'max': today });
UIElements.submittedFromInput.attr({ 'max': today });
}

function bindUIEvents() {
UIElements.inputFilter.on('change', handleInputFilterChange);
UIElements.inputFilter.on('change', handleInputFilterChange);
$('#quickDateRange').on('change', handleQuickDateRangeChange);
}

function validateDate(dateValue, element) {
Expand Down Expand Up @@ -243,6 +252,55 @@ const listColumns = getColumns();
return true;
}

// Returns a formated { fromDate, toDate } for the filter fields.
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spelling: "formated" in the comment should be "formatted".

Suggested change
// Returns a formated { fromDate, toDate } for the filter fields.
// Returns a formatted { fromDate, toDate } for the filter fields.

Copilot uses AI. Check for mistakes.
// Null if 'custom' or no input provided (assumes custom is default break)
function getDateRange(rangeType) {
let today = new Date();
const toDate = formatDate(new Date());
let fromDate;

switch (rangeType) {
case 'today':
fromDate = toDate;
break;
case 'last7days':
fromDate = formatDate(new Date(today.setDate(today.getDate() - 7)));
break;
case 'last30days':
fromDate = formatDate(new Date(today.setDate(today.getDate() - 30)));
break;
case 'last3months':
fromDate = formatDate(new Date(today.setMonth(today.getMonth() - 3)));
break;
case 'last6months':
fromDate = formatDate(new Date(today.setMonth(today.getMonth() - 6)));
break;
case 'alltime':
fromDate = null;
return { fromDate: null, toDate: null };
case 'custom':
default:
return null; // Don't modify dates for custom
}

return { fromDate, toDate };
}
function formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}

function toggleCustomDateInputs(show) {
if (show) {
$('#customDateInputs').show();
} else {
$('#customDateInputs').hide();
}
}


// =====================
// Input filter change handler
// =====================
Expand All @@ -255,13 +313,58 @@ const listColumns = getColumns();
grantTableFilters.submittedFromDate = UIElements.submittedFromInput.val();
grantTableFilters.submittedToDate = UIElements.submittedToInput.val();

//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');
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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);

Copilot uses AI. Check for mistakes.

const dtInstance = $('#GrantApplicationsTable').DataTable();

localStorage.setItem("GrantApplications_FromDate", grantTableFilters.submittedFromDate);
localStorage.setItem("GrantApplications_ToDate", grantTableFilters.submittedToDate);

dtInstance.ajax.reload(null, true);
}

function handleQuickDateRangeChange() {
const selectedRange = $(this).val();

localStorage.setItem('GrantApplications_QuickRange', selectedRange);

if (selectedRange === 'custom') {
// Show the custom date inputs and don't modify their values
toggleCustomDateInputs(true);
return;
}

// Hide custom date inputs for preset ranges
toggleCustomDateInputs(false);

// Get the date range for the selected option
const range = getDateRange(selectedRange);

if (range) {
// Populate the hidden date fields
UIElements.submittedFromInput.val(range.fromDate || '');
UIElements.submittedToInput.val(range.toDate || '');
grantTableFilters.submittedFromDate = range.fromDate;
grantTableFilters.submittedToDate = range.toDate;

// Save to localStorage
if (range.fromDate && range.toDate) {
localStorage.setItem('GrantApplications_FromDate', range.fromDate);
localStorage.setItem('GrantApplications_ToDate', range.toDate);
} else {
// For "All time", clear the date filters
localStorage.removeItem('GrantApplications_FromDate');
localStorage.removeItem('GrantApplications_ToDate');
}

// Reload the table with new filters
const dtInstance = $('#GrantApplicationsTable').DataTable();
dtInstance.ajax.reload(null, true);
}
}

function initializeDataTableAndEvents() {
dataTable = initializeDataTable({
Expand Down
58 changes: 36 additions & 22 deletions ....GrantManager/src/Unity.GrantManager.Web/Views/Shared/Components/ActionBar/Default.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,43 @@
<div class="search-action-bar_search-wrapper">
<input type="search" id="search" placeholder="Search" class="tbl-search">
<div class="mb-3 date-input-filter-div">
<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">
<label class="form-label" for="quickDateRange">Quick Date Range</label>
<select id="quickDateRange" class="form-control">
<option value="today">Today</option>
<option value="last7days">Last 7 days</option>
<option value="last30days">Last 30 days</option>
<option value="last3months">Last 3 months</option>
<option value="last6months" selected>Last 6 months</option>
<option value="alltime">All time</option>
<option value="custom">Custom Ranges</option>
</select>
</div>
<div class="mb-3 custom-date-range-container-div" id="customDateInputs" style="display: none;">
<div class="mb-3 date-input-filter-div">
<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"
Comment on lines +33 to +50
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
value=""
class="form-control date-input-filter"
min="1900-01-01"
max="2100-01-01">
</div>
</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"
value=""
class="form-control date-input-filter"
min="1900-01-01"
max="2100-01-01">
</div>
</div>

<div class="btn-group" id="app_custom_buttons">
Expand Down
6 changes: 6 additions & 0 deletions ...ity.GrantManager/src/Unity.GrantManager.Web/Views/Shared/Components/ActionBar/Default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,9 @@
margin-bottom: -10px;
padding-bottom: 0px !important;
}

.custom-date-range-container-div {
display: inline-block;
padding: 0px;
margin: 0px;
}
Loading