feat(class): landing class page

frontend/src/views/ClassDashboardView.vue

@@ -22,16 +22,38 @@
       </div>
 
       <!-- Trimester selector -->
-      <div class="flex gap-2 mb-6">
-        <button 
-          v-for="t in [1, 2, 3]" 
-          :key="t"
-          @click="selectTrimester(t)"
-          class="btn"
-          :class="trimester === t ? 'btn-primary' : 'btn-secondary'"
-        >
-          Trimestre {{ t }}
-        </button>
+      <div class="mb-6">
+        <div class="flex flex-wrap gap-2 items-center">
+          <!-- Vision annuelle -->
+          <button 
+            @click="selectTrimester(null)"
+            class="btn"
+            :class="trimester === null ? 'btn-primary' : 'btn-secondary'"
+          >
+            📊 Vision annuelle
+          </button>
+          
+          <!-- Séparateur visuel -->
+          <div class="border-l border-gray-300 h-8 mx-1"></div>
+          
+          <!-- Trimestres individuels -->
+          <button 
+            v-for="t in [1, 2, 3]" 
+            :key="t"
+            @click="selectTrimester(t)"
+            class="btn"
+            :class="trimester === t ? 'btn-primary' : 'btn-secondary'"
+          >
+            Trimestre {{ t }}
+          </button>
+        </div>
+        
+        <!-- Indicateur de période affichée -->
+        <div class="mt-3 text-center">
+          <p class="text-sm font-medium text-gray-600">
+            {{ trimester === null ? '📊 Toutes les évaluations de l\'année' : `📅 Évaluations du trimestre ${trimester}` }}
+          </p>
+        </div>
       </div>
 
       <!-- Stats principales - Grid 4 colonnes -->
@@ -78,11 +100,11 @@
       <!-- Domaines et Compétences en 2 colonnes -->
       <div v-if="stats" class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
         <!-- Domaines -->
-        <div v-if="stats.domains_stats?.length" class="bg-white rounded-xl shadow-md p-6">
+        <div v-if="sortedDomainsStats.length" class="bg-white rounded-xl shadow-md p-6">
           <h2 class="text-lg font-semibold text-gray-800 mb-4">Évaluations par domaine</h2>
           <p class="text-xs text-gray-500 mb-4">Perspective enseignant : ce qui a été évalué</p>
           <div class="space-y-4">
-            <div v-for="domain in stats.domains_stats" :key="domain.id" class="space-y-1">
+            <div v-for="domain in sortedDomainsStats" :key="domain.id" class="space-y-1">
               <div class="flex justify-between text-sm">
                 <span class="font-medium text-gray-700 truncate" :title="domain.name">{{ domain.name }}</span>
                 <span class="font-bold" :style="{ color: domain.color || '#6B7280' }">
@@ -93,7 +115,7 @@
                 <div 
                   class="h-2 rounded-full transition-all duration-1000 ease-out"
                   :style="{ 
-                    width: `${getRelativeWidth(domain, stats.domains_stats)}%`,
+                    width: `${getRelativeWidth(domain, sortedDomainsStats)}%`,
                     backgroundColor: domain.color || '#6B7280'
                   }"
                 ></div>
@@ -110,11 +132,11 @@
         </div>
 
         <!-- Compétences -->
-        <div v-if="stats.competences_stats?.length" class="bg-white rounded-xl shadow-md p-6">
+        <div v-if="sortedCompetencesStats.length" class="bg-white rounded-xl shadow-md p-6">
           <h2 class="text-lg font-semibold text-gray-800 mb-4">Évaluations par compétence</h2>
           <p class="text-xs text-gray-500 mb-4">Perspective enseignant : ce qui a été évalué</p>
           <div class="space-y-4">
-            <div v-for="competence in stats.competences_stats" :key="competence.id" class="space-y-1">
+            <div v-for="competence in sortedCompetencesStats" :key="competence.id" class="space-y-1">
               <div class="flex justify-between text-sm">
                 <span class="font-medium text-gray-700 truncate" :title="competence.name">{{ competence.name }}</span>
                 <span class="font-bold" :style="{ color: competence.color || '#6B7280' }">
@@ -125,7 +147,7 @@
                 <div 
                   class="h-2 rounded-full transition-all duration-1000 ease-out"
                   :style="{ 
-                    width: `${getRelativeWidth(competence, stats.competences_stats)}%`,
+                    width: `${getRelativeWidth(competence, sortedCompetencesStats)}%`,
                     backgroundColor: competence.color || '#6B7280'
                   }"
                 ></div>
@@ -218,7 +240,7 @@ const classesStore = useClassesStore()
 const loading = ref(true)
 const classData = ref(null)
 const stats = ref(null)
-const trimester = ref(1)
+const trimester = ref(null)  // null = vision annuelle par défaut
 const sortColumn = ref('name')
 const sortDirection = ref('asc')
 
@@ -305,5 +327,21 @@ function getRelativeWidth(item, allItems) {
   return ((item.total_points_possible || 0) / maxPoints) * 100
 }
 
+// Tri des domaines et compétences
+const sortedDomainsStats = computed(() => {
+  if (!stats.value?.domains_stats) return []
+  // Trier par nom alphabétiquement
+  return [...stats.value.domains_stats].sort((a, b) => 
+    a.name.localeCompare(b.name, 'fr', { sensitivity: 'base' })
+  )
+})
+
+const sortedCompetencesStats = computed(() => {
+  if (!stats.value?.competences_stats) return []
+  // Les compétences sont déjà triées par order_index côté backend
+  // On retourne une copie pour être cohérent
+  return [...stats.value.competences_stats]
+})
+
 onMounted(fetchData)
 </script>