display table with notifications datas, prepare others tabs to render datas

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

@@ -12,7 +12,7 @@
          <a class="nav-link"
             :class="{'active': activeTab === 'MyWorks'}"
             @click="selectTab('MyWorks')">
-            {{ $t('my_works') }}
+            {{ $t('my_works.tab') }}
             <!-- <span class="badge rounded-pill bg-danger counter">2</span> -->
          </a>
       </li>
@@ -20,28 +20,28 @@
          <a class="nav-link"
             :class="{'active': activeTab === 'MyEvaluations'}"
             @click="selectTab('MyEvaluations')">
-            {{ $t('my_evaluations') }}
+            {{ $t('my_evaluations.tab') }}
          </a>
       </li>
       <li class="nav-item">
          <a class="nav-link"
             :class="{'active': activeTab === 'MyTasks'}"
             @click="selectTab('MyTasks')">
-            {{ $t('my_task') }}
+            {{ $t('my_tasks.tab') }}
          </a>
       </li>
       <li class="nav-item">
          <a class="nav-link"
             :class="{'active': activeTab === 'MyAccompanyingCourses'}"
             @click="selectTab('MyAccompanyingCourses')">
-            {{ $t('my_accompanying_courses') }}
+            {{ $t('my_accompanying_courses.tab') }}
          </a>
       </li>
       <li class="nav-item">
          <a class="nav-link"
             :class="{'active': activeTab === 'MyNotifications'}"
             @click="selectTab('MyNotifications')">
-            {{ $t('my_notifications') }}
+            {{ $t('my_notifications.tab') }}
          </a>
       </li>
       <li class="nav-item loading ms-auto py-2" v-if="loading">
@@ -106,8 +106,8 @@ export default {
    },
    methods: {
       selectTab(tab) {
-         this.activeTab = tab;
          this.$store.dispatch('getByTab', tab);
+         this.activeTab = tab;
       }
    }
 }

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

@@ -1,12 +1,23 @@
 <template>
-   MyAccompanyingCourses
+   <h3>{{ $t('my_accompanying_courses.title') }}</h3>
+   <tab-table>
+      <template v-slot:thead>
+      </template>
+      <template v-slot:tbody>
+         <tr></tr>
+      </template>
+   </tab-table>
 </template>
 
 <script>
 import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
 
 export default {
    name: "MyAccompanyingCourses",
+   components: {
+      TabTable
+   },
    computed: {
       ...mapState([
          'accompanyingCourses',

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

@@ -1,12 +1,23 @@
 <template>
-   MyEvaluations
+   <h3>{{ $t('my_evaluations.title') }}</h3>
+   <tab-table>
+      <template v-slot:thead>
+      </template>
+      <template v-slot:tbody>
+         <tr></tr>
+      </template>
+   </tab-table>
 </template>
 
 <script>
 import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
 
 export default {
    name: "MyEvaluations",
+   components: {
+      TabTable
+   },
    computed: {
       ...mapState([
          'evaluations',

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

@@ -1,12 +1,44 @@
 <template>
-   MyNotifications
+   <h3>{{ $t('my_notifications.title') }}</h3>
+   <tab-table>
+      <template v-slot:thead>
+         <th scope="col">#</th>
+         <th scope="col">{{ $t('Date') }}</th>
+         <th scope="col">{{ $t('Subject') }}</th>
+         <th scope="col">{{ $t('Entity') }}</th>
+      </template>
+      <template v-slot:tbody>
+         <tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
+            <th scope="row">{{ i+1 }}</th>
+            <td>{{ $d(n.date.datetime, 'short') }}</td>
+            <td>
+               <span class="unread">
+                  <i class="fa fa-envelope-o"></i>
+                  {{ n.title }}
+               </span>
+            </td>
+            <td>
+               <a class="btn btn-sm btn-show"
+                  :href="linkEntity(n)">
+                  {{ $t('show_entity', { entity: getEntityName(n) }) }}
+               </a>
+            </td>
+         </tr>
+      </template>
+   </tab-table>
 </template>
 
 <script>
 import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
+import { appMessages } from 'ChillMainAssets/vuejs/HomepageWidget/js/i18n';
+
 
 export default {
    name: "MyNotifications",
+   components: {
+      TabTable
+   },
    computed: {
       ...mapState([
          'notifications',
@@ -15,9 +47,36 @@ export default {
          'isNotificationsLoaded',
       ])
    },
+   methods: {
+      getEntityName(n) {
+         switch (n.relatedEntityClass) {
+            case 'Chill\\ActivityBundle\\Entity\\Activity':
+               return appMessages.fr.the_activity;
+            case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod':
+               return appMessages.fr.the_course;
+            default:
+               throw 'notification type unknown';
+         }
+      },
+      linkEntity(n) {
+         switch (n.relatedEntityClass) {
+            case 'Chill\\ActivityBundle\\Entity\\Activity':
+               return `/fr/activity/${n.relatedEntityId}/show`
+            case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod':
+               return `/fr/parcours/${n.relatedEntityId}`
+            default:
+               throw 'notification type unknown';
+         }
+      }
+   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
+span.unread {
+   font-weight: bold;
+   i {
+      margin-right: 0.5em;
+   }
+}
 </style>

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

@@ -1,12 +1,34 @@
 <template>
-   MyTasks
+   <h3>{{ $t('my_tasks.title_warning') }}</h3>
+   
+   <tab-table>
+      <template v-slot:thead>
+      </template>
+      <template v-slot:tbody>
+         <tr></tr>
+      </template>
+   </tab-table>
+   
+   <h3>{{ $t('my_tasks.title_alert') }}</h3>
+   <tab-table>
+      <template v-slot:thead>
+      </template>
+      <template v-slot:tbody>
+         <tr></tr>
+      </template>
+   </tab-table>
+   
 </template>
 
 <script>
 import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
 
 export default {
    name: "MyTasks",
+   components: {
+      TabTable
+   },
    computed: {
       ...mapState([
          'tasks',

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

@@ -1,12 +1,23 @@
 <template>
-   MyWorks
+   <h3>{{ $t('my_works.title') }}</h3>
+   <tab-table>
+      <template v-slot:thead>
+      </template>
+      <template v-slot:tbody>
+         <tr></tr>
+      </template>
+   </tab-table>
 </template>
 
 <script>
 import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
 
 export default {
    name: "MyWorks",
+   components: {
+      TabTable
+   },
    computed: {
       ...mapState([
          'works',

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

@@ -0,0 +1,21 @@
+<template>
+   <table class="table table-striped table-hover">
+      <thead>
+         <tr>
+            <slot name="thead"></slot>
+         </tr>
+      </thead>
+      <tbody>
+         <slot name="tbody"></slot>
+      </tbody>
+   </table>
+</template>
+
+<script>
+export default {
+   name: "TabTable",
+   props: []
+}
+</script>
+
+<style scoped></style>

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

@@ -1,10 +1,32 @@
 const appMessages = {
     fr: {
-        my_works: "Actions d'accompagnement",
+        my_works: {
-        my_evaluations: "Évaluations",
+            tab: "Actions d'accompagnement",
-        my_task: "Tâches",
+            title: "Mes actions d'accompagnement qui arrivent à échéance",
-        my_accompanying_courses: "Parcours",
+        },
-        my_notifications: "Notifications",
+        my_evaluations: {
+            tab: "Évaluations",
+            title: "Mes évaluations qui arrivent à échéance",
+        },
+        my_tasks: {
+            tab: "Tâches",
+            title_warning: "Mes tâches avec date d'échéance dépassée",
+            title_alert: "Mes tâches avec date de rappel dépassée",
+        },
+        my_accompanying_courses: {
+            tab: "Parcours",
+            title: "Les parcours que l'on vient de m'attribuer",
+        },
+        my_notifications: {
+            tab: "Notifications",
+            title: "Mes notifications reçues (et non lues)",
+        },
+        Date: "Date",
+        Subject: "Objet",
+        Entity: "Associé à",
+        show_entity: "Voir {entity}",
+        the_activity: "l'échange",
+        the_course: "le parcours"
     }
 };