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

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>