feat: improve assessments filters

This commit is contained in:
2025-08-07 15:33:03 +02:00
parent 666f1a85bf
commit 2a7a4cd595
6 changed files with 674 additions and 47 deletions

View File

@@ -183,7 +183,7 @@
</a>
{% endmacro %}
{# Macro pour filtres standardisés #}
{# Macro pour filtres standardisés - Version classique (conservée pour compatibilité) #}
{% macro filter_section(filters, current_values={}) %}
<div class="filter-section">
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
@@ -210,4 +210,86 @@
{% endif %}
</div>
</div>
{% endmacro %}
{# Macro pour filtres simplifiés et discrets #}
{% macro simple_filter_section(filters_config, current_values={}, total_items=0, filtered_items=0) %}
<div class="bg-gray-50 rounded-lg p-4 mb-6 border border-gray-200">
<!-- Filtres compacts en une ligne -->
<div class="flex flex-wrap items-center gap-4 text-sm">
<div class="flex items-center text-gray-600">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd"/>
</svg>
<span id="filtered-count">{{ filtered_items }}</span>/<span class="text-gray-500">{{ total_items }}</span>
</div>
<!-- Filtre Trimestre -->
{% if filters_config.trimester %}
<div class="flex items-center gap-1">
<span class="text-gray-500 text-xs">Trimestre:</span>
<button type="button" data-filter="trimester" data-value=""
class="filter-btn px-2 py-1 text-xs rounded border {% if not current_values.get('trimester-filter') %}bg-blue-600 text-white border-blue-600{% else %}bg-white text-gray-600 border-gray-300 hover:bg-gray-50{% endif %} transition-colors">
Tous
</button>
{% for i in range(1, 4) %}
<button type="button" data-filter="trimester" data-value="{{ i }}"
class="filter-btn px-2 py-1 text-xs rounded border {% if current_values.get('trimester-filter') == i|string %}bg-blue-600 text-white border-blue-600{% else %}bg-white text-gray-600 border-gray-300 hover:bg-gray-50{% endif %} transition-colors">
T{{ i }}
</button>
{% endfor %}
</div>
{% endif %}
<!-- Filtre Classe -->
{% if filters_config.class_options %}
<div class="flex items-center gap-1">
<span class="text-gray-500 text-xs">Classe:</span>
{% for option in filters_config.class_options %}
<button type="button" data-filter="class" data-value="{{ option.value }}"
class="filter-btn px-2 py-1 text-xs rounded border {% if current_values.get('class-filter') == option.value %}bg-blue-600 text-white border-blue-600{% else %}bg-white text-gray-600 border-gray-300 hover:bg-gray-50{% endif %} transition-colors">
{{ option.label }}
</button>
{% endfor %}
</div>
{% endif %}
<!-- Filtre État de correction -->
{% if filters_config.correction %}
<div class="flex items-center gap-1">
<span class="text-gray-500 text-xs">État:</span>
<button type="button" data-filter="correction" data-value=""
class="filter-btn px-2 py-1 text-xs rounded border {% if not current_values.get('correction-filter') %}bg-blue-600 text-white border-blue-600{% else %}bg-white text-gray-600 border-gray-300 hover:bg-gray-50{% endif %} transition-colors">
Toutes
</button>
<button type="button" data-filter="correction" data-value="not_started"
class="filter-btn px-2 py-1 text-xs rounded border {% if current_values.get('correction-filter') == 'not_started' %}bg-red-500 text-white border-red-500{% else %}bg-white text-red-600 border-red-200 hover:bg-red-50{% endif %} transition-colors">
Non commencées
</button>
<button type="button" data-filter="correction" data-value="incomplete"
class="filter-btn px-2 py-1 text-xs rounded border {% if current_values.get('correction-filter') == 'incomplete' %}bg-orange-500 text-white border-orange-500{% else %}bg-white text-orange-600 border-orange-200 hover:bg-orange-50{% endif %} transition-colors">
En cours
</button>
<button type="button" data-filter="correction" data-value="complete"
class="filter-btn px-2 py-1 text-xs rounded border {% if current_values.get('correction-filter') == 'complete' %}bg-green-500 text-white border-green-500{% else %}bg-white text-green-600 border-green-200 hover:bg-green-50{% endif %} transition-colors">
Terminées
</button>
</div>
{% endif %}
</div>
<!-- Reset discret et contenu additionnel -->
<div class="flex items-center justify-between mt-2">
<div id="active-filter-tags" class="flex flex-wrap gap-1">
<!-- Tags générés par JavaScript -->
</div>
<div class="flex items-center gap-2">
<button type="button" id="reset-filters" class="text-xs text-gray-500 hover:text-gray-700 hidden">
Effacer
</button>
{% if caller %}
{{ caller() }}
{% endif %}
</div>
</div>
</div>
{% endmacro %}