designtopack/src/components/notifications/Comment.vue

<template>
  <article
    class="notification | bg-white rounded-lg | p-16 | flow"
    data-type="comment"
    @click="router.push(targetUri + '&comments=true')"
  >
    <header>
      <p class="flex">
        <strong
          class="notification__type | font-medium text-primary"
          data-icon="comment"
          >Commentaire</strong
        >
        <span class="notification__client | text-grey-700"
          >{{ project.title }}
          {{ project?.status === "unlisted" ? "(archivé)" : "" }}</span
        >
        <time
          datetime=""
          class="notification__date | text-grey-700 | ml-auto"
          >{{ formatDate(notification) }}</time
        >
      </p>
    </header>
    <p
      v-if="notification.type"
      class="notification__body | text-md font-medium | line-clamp"
    >
      {{
        notification.author.name
          ? notification.author.name
          : notification.author.email
      }}
      : {{ notification.text }}
    </p>
  </article>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useNotificationsStore } from "../../stores/notifications";
import { useProjectsStore } from "../../stores/projects";

const router = useRouter();
const { notification } = defineProps({ notification: Object });
const { formatDate } = useNotificationsStore();
const { getProjectByUuid } = useProjectsStore();

const project = getProjectByUuid(notification.location.project.uuid);
const targetUri = notification.location.dialoguri.replace(
  /\/projects\/([a-z0-9\-]+)/,
  "/projects/" + notification.target.slug
);
</script>