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 #thead>
            <th scope="col">
                {{ $t("Date") }}
            </th>
            <th scope="col">
                {{ $t("Subject") }}
            </th>
            <th scope="col">
                {{ $t("From") }}
            </th>
            <th scope="col" />
        </template>
        <template #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" />
                        <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\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
                    return appMessages.fr.the_action;
                case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
                    return appMessages.fr.the_evaluation_document;
                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\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
                    return `/fr/person/accompanying-period/work/${n.relatedEntityId}/show`;
                case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
                    return `/fr/person/accompanying-period/work/evaluation/document/${n.relatedEntityId}/show`;
                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>