159 lines
6.0 KiB
JavaScript
159 lines
6.0 KiB
JavaScript
(function($) {
|
|
// Masar Date Range Filter Layout Fix v3
|
|
// Forces a horizontal layout for the Date Range Filter in Django Admin Sidebar
|
|
|
|
function initDateRangeDropdown() {
|
|
console.log("Masar Date Filter: Initializing v3...");
|
|
|
|
// Find all "Greater Than or Equal" inputs (the start date of the range)
|
|
var $gteInputs = $('input[name$="__gte"]');
|
|
|
|
if ($gteInputs.length === 0) {
|
|
return; // Not found yet
|
|
}
|
|
|
|
$gteInputs.each(function() {
|
|
var $gte = $(this);
|
|
if ($gte.data('masar-processed')) return;
|
|
$gte.data('masar-processed', true);
|
|
|
|
var name = $gte.attr('name');
|
|
var prefix = name.substring(0, name.lastIndexOf('__gte'));
|
|
var $lte = $('input[name="' + prefix + '__lte"]');
|
|
|
|
if ($lte.length === 0) return;
|
|
|
|
// Locate the container in the sidebar.
|
|
// Usually it's inside a <li class="... field-created_at ..."> or similar.
|
|
// We want to find the direct parent that holds these inputs.
|
|
var $parent = $gte.parent();
|
|
|
|
// Create our custom flex wrapper
|
|
var $wrapper = $('<div class="masar-date-filter-row"></div>');
|
|
$wrapper.css({
|
|
'display': 'flex',
|
|
'flex-direction': 'row',
|
|
'align-items': 'center',
|
|
'gap': '3px',
|
|
'width': '100%',
|
|
'margin-bottom': '10px'
|
|
});
|
|
|
|
// Create the Quick Select Dropdown
|
|
var $select = $('<select class="form-control custom-select admin-date-dropdown">' +
|
|
'<option value="any">Any</option>' +
|
|
'<option value="today">Today</option>' +
|
|
'<option value="7days">7 Days</option>' +
|
|
'<option value="month">Month</option>' +
|
|
'<option value="custom">Custom</option>' +
|
|
'</select>');
|
|
|
|
$select.css({
|
|
'width': '34%',
|
|
'min-width': '60px',
|
|
'height': '30px',
|
|
'padding': '0 4px',
|
|
'font-size': '11px'
|
|
});
|
|
|
|
// Style inputs
|
|
var inputStyle = {
|
|
'width': '33%',
|
|
'min-width': '0',
|
|
'height': '30px',
|
|
'padding': '4px',
|
|
'font-size': '11px'
|
|
};
|
|
$gte.css(inputStyle).attr('placeholder', 'Start');
|
|
$lte.css(inputStyle).attr('placeholder', 'End');
|
|
|
|
// --- RESTRUCTURING DOM ---
|
|
// 1. Insert wrapper before the start input
|
|
$gte.before($wrapper);
|
|
|
|
// 2. Move elements into wrapper
|
|
$wrapper.append($select);
|
|
$wrapper.append($gte);
|
|
$wrapper.append($lte);
|
|
|
|
// 3. Cleanup: Hide any left-over text nodes (like "-", "From", "To") or <br> in the parent
|
|
$parent.contents().filter(function() {
|
|
return (this.nodeType === 3 && $.trim($(this).text()) !== '') || this.tagName === 'BR';
|
|
}).remove();
|
|
|
|
// Logic for Dropdown Changes
|
|
// Helper to format date as YYYY-MM-DD
|
|
function formatDate(d) {
|
|
var year = d.getFullYear();
|
|
var month = ('0' + (d.getMonth() + 1)).slice(-2);
|
|
var day = ('0' + d.getDate()).slice(-2);
|
|
return year + '-' + month + '-' + day;
|
|
}
|
|
|
|
var gteVal = $gte.val();
|
|
var lteVal = $lte.val();
|
|
if (gteVal || lteVal) {
|
|
$select.val('custom');
|
|
} else {
|
|
$select.val('any');
|
|
}
|
|
|
|
$select.on('change', function() {
|
|
var val = $(this).val();
|
|
var today = new Date();
|
|
|
|
if (val === 'custom') {
|
|
// Do nothing, let user edit
|
|
} else {
|
|
if (val === 'any') {
|
|
$gte.val('');
|
|
$lte.val('');
|
|
} else {
|
|
var startStr = '';
|
|
var endStr = formatDate(today);
|
|
|
|
if (val === 'today') {
|
|
startStr = formatDate(today);
|
|
} else if (val === '7days') {
|
|
var past = new Date();
|
|
past.setDate(today.getDate() - 7);
|
|
startStr = formatDate(past);
|
|
} else if (val === 'month') {
|
|
var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
startStr = formatDate(firstDay);
|
|
}
|
|
$gte.val(startStr);
|
|
$lte.val(endStr);
|
|
}
|
|
// Trigger Form Submit (Changes URL)
|
|
// Try to find the filter form
|
|
var $form = $gte.closest('form'); // Usually #changelist-search
|
|
if ($form.length) {
|
|
$form.submit();
|
|
} else {
|
|
// Sometimes filters are links, but date range usually has a button or relies on form
|
|
// If there is an "Apply" button nearby?
|
|
var $applyBtn = $parent.closest('.admindatefilter').find('input[type="submit"], button');
|
|
if ($applyBtn.length) {
|
|
$applyBtn.click();
|
|
} else {
|
|
// Fallback: reload page with query params (complex, skip for now, rely on standard form)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
// Run immediately
|
|
initDateRangeDropdown();
|
|
|
|
// And retry a few times to catch slow rendering
|
|
setTimeout(initDateRangeDropdown, 200);
|
|
setTimeout(initDateRangeDropdown, 500);
|
|
setTimeout(initDateRangeDropdown, 1000);
|
|
});
|
|
|
|
})(django.jQuery);
|