vue homepage_widget: improve translations, titles, tabs order, add no data statement

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue

@@ -1,5 +1,7 @@
 <template>
    
+   <h2>{{ $t('main_title') }}</h2>
+   
    <ul class="nav nav-tabs">
       <li class="nav-item">
          <a class="nav-link"
@@ -8,6 +10,14 @@
             <i class="fa fa-home"></i>
          </a>
       </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyAccompanyingCourses'}"
+            @click="selectTab('MyAccompanyingCourses')">
+            {{ $t('my_accompanying_courses.tab') }}
+            <tab-counter :count="state.accompanyingCourses.count"></tab-counter>
+         </a>
+      </li>
       <li class="nav-item">
          <a class="nav-link"
             :class="{'active': activeTab === 'MyWorks'}"
@@ -33,14 +43,6 @@
             <tab-counter :count="state.tasks.alert.count"></tab-counter>
          </a>
       </li>
-      <li class="nav-item">
-         <a class="nav-link"
-            :class="{'active': activeTab === 'MyAccompanyingCourses'}"
-            @click="selectTab('MyAccompanyingCourses')">
-            {{ $t('my_accompanying_courses.tab') }}
-            <tab-counter :count="state.accompanyingCourses.count"></tab-counter>
-         </a>
-      </li>
       <li class="nav-item">
          <a class="nav-link"
             :class="{'active': activeTab === 'MyNotifications'}"

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue

@@ -1,6 +1,7 @@
 <template>
-   <h2>{{ $t('my_accompanying_courses.title') }}</h2>
+   <div class="alert alert-light">{{ $t('my_accompanying_courses.description') }}</div>
-   <tab-table>
+   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
       <template v-slot:thead>
       </template>
       <template v-slot:tbody>
@@ -24,7 +25,14 @@ export default {
       ]),
       ...mapGetters([
          'isAccompanyingCoursesLoaded',
-      ])
+      ]),
+      noResults() {
+         if (!this.isAccompanyingCoursesLoaded) {
+            return false;
+         } else {
+            return this.accompanyingCourses.count === 0;
+         }
+      }
    },
 }
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue

@@ -1,6 +1,7 @@
 <template>
-   <h2>{{ $t('my_evaluations.title') }}</h2>
+   <div class="alert alert-light">{{ $t('my_evaluations.description') }}</div>
-   <tab-table>
+   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
       <template v-slot:thead>
       </template>
       <template v-slot:tbody>
@@ -24,7 +25,14 @@ export default {
       ]),
       ...mapGetters([
          'isEvaluationsLoaded',
-      ])
+      ]),
+      noResults() {
+         if (!this.isEvaluationsLoaded) {
+            return false;
+         } else {
+            return this.evaluations.count === 0;
+         }
+      }
    },
 }
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue

@@ -1,6 +1,7 @@
 <template>
-   <h2>{{ $t('my_notifications.title') }}</h2>
+   <div class="alert alert-light">{{ $t('my_notifications.description') }}</div>
-   <tab-table>
+   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
       <template v-slot:thead>
          <th scope="col">#</th>
          <th scope="col">{{ $t('Date') }}</th>
@@ -45,7 +46,14 @@ export default {
       ]),
       ...mapGetters([
          'isNotificationsLoaded',
-      ])
+      ]),
+      noResults() {
+         if (!this.isNotificationsLoaded) {
+            return false;
+         } else {
+            return this.notifications.count === 0;
+         }
+      }
    },
    methods: {
       getEntityName(n) {

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue

@@ -1,7 +1,8 @@
 <template>
-   <h2>{{ $t('my_tasks.title_warning') }}</h2>
    
-   <tab-table>
+   <div class="alert alert-light">{{ $t('my_tasks.description_alert') }}</div>
+   <span v-if="noResultsWarning" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
       <template v-slot:thead>
       </template>
       <template v-slot:tbody>
@@ -9,8 +10,9 @@
       </template>
    </tab-table>
    
-   <h2>{{ $t('my_tasks.title_alert') }}</h2>
+   <div class="alert alert-light">{{ $t('my_tasks.description_warning') }}</div>
-   <tab-table>
+   <span v-if="noResultsAlert" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
       <template v-slot:thead>
       </template>
       <template v-slot:tbody>
@@ -36,7 +38,21 @@ export default {
       ...mapGetters([
          'isTasksWarningLoaded',
          'isTasksAlertLoaded',
-      ])
+      ]),
+      noResultsAlert() {
+         if (!this.isTasksAlertLoaded) {
+            return false;
+         } else {
+            return this.tasks.alert.count === 0;
+         }
+      },
+      noResultsWarning() {
+         if (!this.isTasksWarningLoaded) {
+            return false;
+         } else {
+            return this.tasks.warning.count === 0;
+         }
+      }
    },
 }
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue

@@ -1,7 +1,8 @@
 <template>
 <div class="accompanying_course_work">
-   <h2>{{ $t('my_works.title') }}</h2>
+   <div class="alert alert-light">{{ $t('my_works.description') }}</div>
-   <tab-table>
+   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
       <template v-slot:thead>
          <th scope="col">#</th>
          <th scope="col">{{ $t('StartDate') }}</th>
@@ -48,7 +49,14 @@ export default {
       ]),
       ...mapGetters([
          'isWorksLoaded',
-      ])
+      ]),
+      noResults() {
+         if (!this.isWorksLoaded) {
+            return false;
+         } else {
+            return this.works.count === 0;
+         }
+      }
    },
    methods: {
       getEntityName(w) {

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js

@@ -1,25 +1,26 @@
 const appMessages = {
     fr: {
+        main_title: "Vue d'ensemble",
         my_works: {
-            tab: "Actions d'accompagnement",
+            tab: "Mes actions",
-            title: "Mes actions d'accompagnement qui arrivent à échéance",
+            description: "Liste des actions d'accompagnement dont je suis référent et qui arrivent à échéance.",
         },
         my_evaluations: {
-            tab: "Évaluations",
+            tab: "Mes évaluations",
-            title: "Mes évaluations qui arrivent à échéance",
+            description: "Liste des évaluations dont je suis référent et qui arrivent à échéance.",
         },
         my_tasks: {
-            tab: "Tâches",
+            tab: "Mes tâches",
-            title_warning: "Mes tâches avec date d'échéance dépassée",
+            description_alert: "Liste des tâches auxquelles je suis assigné et dont la date de rappel est dépassée.",
-            title_alert: "Mes tâches avec date de rappel dépassée",
+            description_warning: "Liste des tâches auxquelles je suis assigné et dont la date d'échéance est dépassée.",
         },
         my_accompanying_courses: {
-            tab: "Parcours",
+            tab: "Mes parcours",
-            title: "Les parcours que l'on vient de m'attribuer",
+            description: "Liste des parcours d'accompagnement que l'on vient de m'attribuer.",
         },
         my_notifications: {
-            tab: "Notifications",
+            tab: "Mes notifications",
-            title: "Mes notifications reçues (et non lues)",
+            description: "Liste des notifications reçues et non lues.",
         },
         Date: "Date",
         Subject: "Objet",
@@ -30,8 +31,7 @@ const appMessages = {
         the_action: "l'action",
         StartDate: "Date d'ouverture",
         SocialAction: "Action d'accompagnement",
-
+        no_data: "Aucun résultats"
-
     }
 };