chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue

<template>
   <div class="alert alert-light">{{ $t('my_notifications.description') }}</div>
   <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>
         <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',
      ]),
      ...mapGetters([
         'isNotificationsLoaded',
      ]),
      noResults() {
         if (!this.isNotificationsLoaded) {
            return false;
         } else {
            return this.notifications.count === 0;
         }
      }
   },
   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 lang="scss" scoped>
span.unread {
   font-weight: bold;
   i {
      margin-right: 0.5em;
   }
}
</style>