mgk/leads-db
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: Implement client-side selection state management

Browse source
This commit is contained in:
Lord_Devi 2024-09-20 00:09:01 -04:00
parent f93c11ddd9
commit 5423a1d40b
1 changed files with 49 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
leads/templates/leads/ids_data.html
View file

@ -23,7 +23,7 @@
<div>
<a href="{% url 'ids_data_import' %}" class="btn btn-primary">Import CSV</a>
<a href="{% url 'ids_data_delete_all' %}" class="btn btn-danger">Delete All</a>
<a href="{% url 'select_all_filtered' %}" class="btn btn-primary">Select All Filtered</a>
<a href="#" class="btn btn-primary" id="select-all-filtered">Select All Filtered</a>
<div class="dropdown d-inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" id="columnDropdown" data-bs-toggle="dropdown" aria-expanded="false">
Visible Columns
@ -176,7 +176,7 @@
{% csrf_token %}
<div class="mb-3">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deletionConfirmationModal">Delete Selected</button>
<button type="submit" class="btn btn-secondary" name="clear_selected">Clear Selected</button>
<button type="button" class="btn btn-secondary" id="clear-selected">Clear Selected</button>
</div>
<table class="table table-striped">
<thead>
@ -192,7 +192,7 @@
<tbody>
{% for data in page_obj %}
<tr>
<td><input type="checkbox" name="selected_ids" value="{{ data.id }}" {% if data.id in selected_ids %}checked{% endif %}></td>
<td><input type="checkbox" name="selected_ids" value="{{ data.id }}" class="row-checkbox"></td>
<td>{{ data.business_name }}</td>
{% for column in selected_columns %}
<td>{{ data|get_item:column.name }}</td>
@ -234,10 +234,17 @@
</div>
<script>
// Get the selected IDs from local storage or initialize an empty array
let selectedIds = JSON.parse(localStorage.getItem('selectedIds')) || [];
// Update the checkboxes based on the selected IDs
updateCheckboxes();
document.getElementById('select-all-checkbox').addEventListener('change', function() {
var checkboxes = document.getElementsByName('selected_ids');
var checkboxes = document.getElementsByClassName('row-checkbox');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
updateSelectedIds(checkboxes[i]);
}
});
@ -245,24 +252,48 @@
document.getElementById('bulk-action-form').submit();
});
// Update the selected IDs in the session whenever a checkbox is changed
document.querySelectorAll('input[name="selected_ids"]').forEach(function(checkbox) {
document.getElementById('clear-selected').addEventListener('click', function() {
selectedIds = [];
localStorage.setItem('selectedIds', JSON.stringify(selectedIds));
updateCheckboxes();
});
document.getElementById('select-all-filtered').addEventListener('click', function() {
var checkboxes = document.getElementsByClassName('row-checkbox');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
updateSelectedIds(checkboxes[i]);
}
});
// Update the selected IDs whenever a checkbox is changed
document.querySelectorAll('.row-checkbox').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var selectedIds = Array.from(document.querySelectorAll('input[name="selected_ids"]:checked')).map(function(checkbox) {
return checkbox.value;
});
fetch('{% url "update_selected_ids" %}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
body: JSON.stringify({ selected_ids: selectedIds })
});
updateSelectedIds(this);
});
});
function updateSelectedIds(checkbox) {
var id = checkbox.value;
if (checkbox.checked) {
if (!selectedIds.includes(id)) {
selectedIds.push(id);
}
} else {
var index = selectedIds.indexOf(id);
if (index > -1) {
selectedIds.splice(index, 1);
}
}
localStorage.setItem('selectedIds', JSON.stringify(selectedIds));
}
function updateCheckboxes() {
document.querySelectorAll('.row-checkbox').forEach(function(checkbox) {
checkbox.checked = selectedIds.includes(checkbox.value);
});
}
// Modify the checkbox behavior
// Update the selected IDs in the session whenever a checkbox is changed
document.querySelectorAll('input[name="selected_ids"]').forEach(function(checkbox) {