Ross
333 lines
15 KiB
HTML
333 lines
15 KiB
HTML
{% extends app_name|add:'/base.html' %}
|
|
|
|
{% load crispy_forms_tags %}
|
|
{% load render_table from django_tables2 %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between mb-2 align-items-center flex-column flex-md-row">
|
|
<div class="mb-2 mb-md-0">
|
|
<div class="btn-toolbar" role="toolbar">
|
|
<div class="btn-group me-2" role="group">
|
|
<button id="delete-selected-btn" class="btn btn-danger btn-sm"
|
|
hx-post="{% url 'generic:bulk_delete_questions' %}"
|
|
hx-include="[name='selection']:checked"
|
|
hx-vals='{"app":"{{ app_name|escapejs }}"}'
|
|
hx-target="#action-result"
|
|
hx-swap="innerHTML"
|
|
hx-confirm="Are you sure you want to delete the selected questions? This action cannot be undone.">Delete selected</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button id="button-select-add-exam" class="btn btn-outline-primary btn-sm"
|
|
hx-get="{% url 'generic:generic_exam_htmx' %}?type={{ app_name }}"
|
|
hx-target="#action-result"
|
|
hx-swap="innerHTML">Add to exam</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="action-result" class="mt-2 mt-md-0"></div>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div>
|
|
<button class="btn btn-outline-secondary btn-sm" id="toggle-row-selection" type="button">Enable row selection</button>
|
|
<div id="selection-controls" class="btn-group ms-2" role="group" style="display:none;">
|
|
<button class="btn btn-sm btn-outline-primary" id="select-all">Select all</button>
|
|
<button class="btn btn-sm btn-outline-secondary" id="clear-selection">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<small class="text-muted">Selected: <span id="selected-count">0</span></small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
{% render_table table %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Minibar: small visible strip when panel is collapsed -->
|
|
<div id="bottom-filter-minibar" class="bottom-filter-minibar">
|
|
<div class="position-relative">
|
|
<button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-controls="#bottom-filter-body">
|
|
<i class="bi bi-funnel-fill"></i> Filters
|
|
</button>
|
|
{# show active filters count if available via GET params #}
|
|
{% comment %} Compute active filters count (excluding 'page') using supported template tags {% endcomment %}
|
|
{% with request.GET|length as param_count %}
|
|
{% if param_count > 0 %}
|
|
{% if request.GET.page %}
|
|
{% with param_count|add:"-1" as active_count %}
|
|
{# active_count may be a string; only show badge when not zero #}
|
|
{% if active_count != "0" %}
|
|
<span class="badge bg-primary filter-count-badge">{{ active_count }}</span>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% else %}
|
|
<span class="badge bg-primary filter-count-badge">{{ param_count }}</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary filter-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="false" aria-controls="#bottom-filter-body">Filters</button>
|
|
|
|
<div class="floating-filter shadow-lg">
|
|
<div id="bottom-filter-body" class="collapse">
|
|
<div class="container-fluid">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="fw-bold">Filters</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="true">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- filter body collapsible so minibar stays visible -->
|
|
<div class="filter-body mt-2">
|
|
<form action="" method="get">
|
|
<div class="row g-3">
|
|
{% for field in filter.form.visible_fields %}
|
|
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
|
|
<div class="filter-card">
|
|
<div class="form-group mb-1">
|
|
{{ field.label_tag }}
|
|
</div>
|
|
<div class="form-group mb-1">
|
|
{{ field }}
|
|
</div>
|
|
{% if field.errors %}
|
|
<div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>
|
|
{% endif %}
|
|
{% if field.help_text %}
|
|
<div class="filter-help">{{ field.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="mt-3 d-flex gap-2 filter-actions">
|
|
<button class="btn btn-primary btn-sm" type="submit"><i class="bi bi-search"></i> Apply</button>
|
|
<a class="btn btn-outline-secondary btn-sm" href="?"><i class="bi bi-arrow-counterclockwise"></i> Reset</a>
|
|
<button class="btn btn-light btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body">Close</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating filter bar (fixed at bottom) -->
|
|
<style>
|
|
.floating-filter {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1030;
|
|
background: var(--bs-body-bg);
|
|
border-top: 1px solid rgba(0,0,0,0.08);
|
|
padding: 0.5rem 0.75rem 1rem 0.75rem;
|
|
}
|
|
.floating-filter .filter-body {
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
padding-top: .5rem;
|
|
}
|
|
.floating-filter .filter-toggle {
|
|
position: fixed;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
z-index: 1040;
|
|
}
|
|
/* minibar/tab styling - small visible handle so panel isn't fully hidden */
|
|
.bottom-filter-minibar {
|
|
position: fixed;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
z-index: 1045;
|
|
background: transparent;
|
|
}
|
|
.bottom-filter-minibar .btn { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
|
|
|
|
/* pretty filter cards */
|
|
.filter-card {
|
|
background: var(--bs-white);
|
|
border: 1px solid rgba(0,0,0,0.04);
|
|
border-radius: .5rem;
|
|
padding: .5rem;
|
|
height: 100%;
|
|
}
|
|
.filter-card .form-group { margin-bottom: 0; }
|
|
.filter-card label { font-weight: 600; font-size: .9rem; }
|
|
.filter-help { font-size: .8rem; color: #6c757d; }
|
|
.filter-actions { padding-top: .5rem; }
|
|
|
|
/* active filter count badge on minibar */
|
|
.filter-count-badge {
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -6px;
|
|
}
|
|
|
|
/* Dark mode overrides */
|
|
.floating-filter {
|
|
background: #0f1720; /* near-black */
|
|
color: #e6eef6;
|
|
border-top-color: rgba(255,255,255,0.06);
|
|
}
|
|
.bottom-filter-minibar .btn {
|
|
background: rgba(255,255,255,0.02);
|
|
color: #e6eef6;
|
|
border-color: rgba(255,255,255,0.06);
|
|
}
|
|
.filter-card {
|
|
background: #0b1220;
|
|
border-color: rgba(255,255,255,0.04);
|
|
color: #e6eef6;
|
|
}
|
|
/* target common form-control/form-select/select/textarea so native selects and bootstrap styles
|
|
are overridden for dark theme inside filter cards */
|
|
.filter-card .form-control,
|
|
.filter-card .form-select,
|
|
.filter-card input,
|
|
.filter-card select,
|
|
.filter-card textarea {
|
|
background: #07101a !important;
|
|
color: #f1f5f9 !important;
|
|
border-color: rgba(255,255,255,0.06) !important;
|
|
}
|
|
/* options in native multi-selects */
|
|
.filter-card select option,
|
|
.filter-card .form-select option {
|
|
background: #07101a !important;
|
|
color: #f1f5f9 !important;
|
|
}
|
|
/* placeholder color */
|
|
.filter-card .form-control::placeholder { color: rgba(255,255,255,0.5) !important; }
|
|
.filter-help { color: #9fb0c7; }
|
|
.badge.bg-primary.filter-count-badge { background: #0d6efd; color: #fff; }
|
|
.btn-outline-secondary { color: #e6eef6; border-color: rgba(255,255,255,0.06); }
|
|
.btn-light { background: #111827; color: #e6eef6; border-color: rgba(255,255,255,0.04); }
|
|
.filter-card label { color: #e6eef6; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const toggleBtn = document.getElementById('toggle-row-selection');
|
|
const selectionControls = document.getElementById('selection-controls');
|
|
const selectAllBtn = document.getElementById('select-all');
|
|
const clearBtn = document.getElementById('clear-selection');
|
|
const selectedCountSpan = document.getElementById('selected-count');
|
|
const table = document.querySelector('.table-responsive table');
|
|
let selectionEnabled = false;
|
|
|
|
function findRowCheckboxes() {
|
|
if (!table) return [];
|
|
return Array.from(table.querySelectorAll('input[type="checkbox"]'));
|
|
}
|
|
|
|
function updateSelectedCount() {
|
|
const checks = findRowCheckboxes();
|
|
const count = checks.filter(c => c.checked).length;
|
|
selectedCountSpan.textContent = count;
|
|
// update row highlight based on checkbox state
|
|
checks.forEach(cb => {
|
|
const tr = cb.closest('tr');
|
|
if (tr) tr.classList.toggle('table-active', cb.checked);
|
|
});
|
|
}
|
|
|
|
function setCheckboxesDisabled(disabled) {
|
|
findRowCheckboxes().forEach(cb => {
|
|
cb.disabled = disabled;
|
|
});
|
|
}
|
|
|
|
function hideSelectionColumn() {
|
|
if (!table) return;
|
|
// hide any th/td that contains the selection checkbox
|
|
table.querySelectorAll('th, td').forEach(function(cell) {
|
|
if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
|
|
cell.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function showSelectionColumn() {
|
|
if (!table) return;
|
|
table.querySelectorAll('th, td').forEach(function(cell) {
|
|
if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
|
|
cell.style.display = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
// disable checkboxes by default and hide the selection column
|
|
setCheckboxesDisabled(true);
|
|
hideSelectionColumn();
|
|
|
|
// row click toggling
|
|
document.addEventListener('click', function(e) {
|
|
if (!selectionEnabled) return;
|
|
// ignore clicks on inputs, anchors, buttons
|
|
const tag = e.target.tagName.toLowerCase();
|
|
if (['input','a','button','select','textarea','label'].includes(tag)) return;
|
|
const tr = e.target.closest('tr');
|
|
if (!tr || !table || !table.contains(tr)) return;
|
|
const cb = tr.querySelector('input[type="checkbox"]');
|
|
if (cb && !cb.disabled) {
|
|
cb.checked = !cb.checked;
|
|
// reflect highlight immediately
|
|
tr.classList.toggle('table-active', cb.checked);
|
|
updateSelectedCount();
|
|
}
|
|
});
|
|
|
|
if (toggleBtn) {
|
|
toggleBtn.addEventListener('click', function() {
|
|
selectionEnabled = !selectionEnabled;
|
|
if (selectionEnabled) {
|
|
toggleBtn.textContent = 'Disable row selection';
|
|
selectionControls.style.display = '';
|
|
setCheckboxesDisabled(false);
|
|
showSelectionColumn();
|
|
} else {
|
|
toggleBtn.textContent = 'Enable row selection';
|
|
selectionControls.style.display = 'none';
|
|
setCheckboxesDisabled(true);
|
|
hideSelectionColumn();
|
|
// clear any selected checkboxes
|
|
findRowCheckboxes().forEach(cb => cb.checked = false);
|
|
updateSelectedCount();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (selectAllBtn) {
|
|
selectAllBtn.addEventListener('click', function() {
|
|
findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = true; });
|
|
updateSelectedCount();
|
|
});
|
|
}
|
|
|
|
if (clearBtn) {
|
|
clearBtn.addEventListener('click', function() {
|
|
findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = false; });
|
|
updateSelectedCount();
|
|
});
|
|
}
|
|
|
|
// Keep count updated if checkboxes are toggled directly
|
|
document.addEventListener('change', function(e) {
|
|
if (e.target && e.target.matches('input[type="checkbox"]')) updateSelectedCount();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |