Ceratic/MediaCollectorLibary
1
0
Fork 0
mirror of https://github.com/ceratic/MediaCollectorLibary.git synced 2026-05-13 23:56:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

better filter?

Browse Source
This commit is contained in:
Lars Behrends
2025-10-24 19:13:00 +02:00
parent e78c073f21
commit db0fd4e728
5 changed files with 226 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
resources/views/movies/index.twig
View File

@@ -20,19 +20,13 @@
{% if available_filters.genres %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Genres</h6>
{% for genre in available_filters.genres %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="genres[]"
value="{{ genre }}"
id="genre_{{ genre|lower|replace({' ': '_'}) }}"
{{ genre in filters.genres ? 'checked' : '' }}>
<label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
<select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
{% for genre in available_filters.genres %}
<option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
{{ genre }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -40,19 +34,13 @@
{% if available_filters.directors %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Directors</h6>
{% for director in available_filters.directors %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="directors[]"
value="{{ director }}"
id="director_{{ director|lower|replace({' ': '_'}) }}"
{{ director in filters.directors ? 'checked' : '' }}>
<label class="form-check-label small" for="director_{{ director|lower|replace({' ': '_'}) }}">
<select class="form-select select2" name="directors[]" multiple data-placeholder="Select directors...">
{% for director in available_filters.directors %}
<option value="{{ director }}" {{ director in filters.directors ? 'selected' : '' }}>
{{ director }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -378,19 +366,55 @@
</div>
</div>
<style>
/* Custom styles for Select2 integration */
.select2-container {
z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
}
.select2-selection {
min-height: 38px;
}
.select2-selection__choice {
background-color: #0d6efd !important;
border: none !important;
color: white !important;
}
.select2-selection__choice__remove {
color: white !important;
margin-right: 5px;
}
.select2-selection__choice__remove:hover {
color: #f8f9fa !important;
}
</style>
<script>
$(document).ready(function() {
// Initialize Select2 for all select2 elements
$('.select2').select2({
width: '100%',
allowClear: true,
placeholder: function() {
return $(this).data('placeholder');
}
});
// Auto-submit filter form when Select2 selection changes
$('.select2').on('change', function() {
document.getElementById('filterForm').submit();
});
});
document.getElementById('per_page')?.addEventListener('change', function() {
const url = new URL(window.location);
url.searchParams.set('per_page', this.value);
url.searchParams.set('page', '1'); // Reset to first page
window.location = url.toString();
});
// Auto-submit filter form when checkboxes change
document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
document.getElementById('filterForm').submit();
});
});
</script>
{% endblock %}