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

<template>
  <div class="alert alert-light">
    {{ trans(MY_NOTIFICATIONS_DESCRIPTION) }}
  </div>
  <span v-if="noResults" class="chill-no-data-statement">
    {{ trans(NO_DATA) }}
  </span>
  <tab-table v-else>
    <template #thead>
      <th scope="col">
        {{ trans(DATE) }}
      </th>
      <th scope="col">
        {{ trans(SUBJECT) }}
      </th>
      <th scope="col">
        {{ trans(FROM) }}
      </th>
      <th scope="col" />
    </template>
    <template #tbody>
      <tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
        <td>{{ $d(new Date(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>
          {{ trans(AUTOMATIC_NOTIFICATION) }}
        </td>
        <td>
          <a class="btn btn-sm btn-show" :href="getEntityUrl(n)">
            {{ trans(SHOW_ENTITY, { entity: getEntityName(n) }) }}
          </a>
        </td>
      </tr>
    </template>
  </tab-table>
</template>

<script lang="ts" setup>
import { computed, ComputedRef } from "vue";
import { useStore } from "vuex";
import TabTable from "./TabTable.vue";
import { Notification } from "ChillPersonAssets/types";

import {
  MY_NOTIFICATIONS_DESCRIPTION,
  DATE,
  FROM,
  SUBJECT,
  SHOW_ENTITY,
  THE_ACTIVITY,
  THE_COURSE,
  THE_ACTION,
  THE_EVALUATION_DOCUMENT,
  THE_WORKFLOW,
  NO_DATA,
  AUTOMATIC_NOTIFICATION,
  trans,
} from "translator";
import { PaginationResponse } from "ChillMainAssets/lib/api/apiMethods";
const store = useStore();

const notifications: ComputedRef<PaginationResponse<Notification>> = computed(
  () => store.state.homepage.notifications,
);
const isNotificationsLoaded = computed(
  () => store.getters.isNotificationsLoaded,
);

const noResults = computed(() => {
  if (!isNotificationsLoaded.value) {
    return false;
  } else {
    return notifications.value.count === 0;
  }
});

function getNotificationUrl(n: Notification): string {
  return `/fr/notification/${n.id}/show`;
}

function getEntityName(n: Notification): string {
  switch (n.relatedEntityClass) {
    case "Chill\\ActivityBundle\\Entity\\Activity":
      return trans(THE_ACTIVITY);
    case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
      return trans(THE_COURSE);
    case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
      return trans(THE_ACTION);
    case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
      return trans(THE_EVALUATION_DOCUMENT);
    case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
      return trans(THE_WORKFLOW);
    default:
      throw "notification type unknown";
  }
}

function getEntityUrl(n: Notification): string {
  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>