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">{{ $t('Date') }}</th>
         <th scope="col">{{ $t('Subject') }}</th>
         <th scope="col">{{ $t('From') }}</th>
         <th scope="col"></th>
      </template>
      <template v-slot:tbody>
         <tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
            <td>{{ $d(n.date.datetime, 'long') }}</td>
            <td>
               <span class="unread">
                  <i class="fa fa-envelope-o"></i>
                  <a :href="getNotificationUrl(n)">{{ n.title }}</a>
               </span>
            </td>
            <td v-if="n.sender != null">{{ n.sender.text }}</td>
            <td v-else>{{ $t('automatic_notification')}}</td>
            <td>
               <a class="btn btn-sm btn-show"
                  :href="getEntityUrl(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: {
      getNotificationUrl(n) {
         return `/fr/notification/${n.id}/show`
      },
      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;
            case 'Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow':
               return appMessages.fr.the_workflow;
            default:
               throw 'notification type unknown';
         }
      },
      getEntityUrl(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}`
            case 'Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow':
               return `/fr/main/workflow/${n.relatedEntityId}/show`
            default:
               throw 'notification type unknown';
         }
      }
   }
}
</script>

<style lang="scss" scoped>
span.unread {
   font-weight: bold;
   i {
      margin-right: 0.5em;
   }
   a {
      text-decoration: unset;
   }
}
</style>