studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

content notification read working

Browse source
This commit is contained in:
isUnknown 2024-12-19 10:32:48 +01:00
parent ffb8252808
commit 94c5737245
21 changed files with 317 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/notifications/Comment.vue Normal file
View file

@ -0,0 +1,44 @@
<template>
<article
class="notification | bg-white rounded-lg | p-16 | flow"
:data-status="notification.isread == true ? 'read' : 'unread'"
data-type="comment"
@click="read(notification)"
>
<header>
<p class="flex">
<strong
class="notification__type | font-medium text-primary"
data-icon="comment"
>Commentaire</strong
>
<span class="notification__client | text-grey-700">{{
notification.location.project.title
}}</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 { useNotificationsStore } from "../../stores/notifications";
const { notification } = defineProps({ notification: Object });
const { formatDate } = useNotificationsStore();
</script>

42
src/components/notifications/Content.vue Normal file
View file

@ -0,0 +1,42 @@
<template>
<article
class="notification | bg-white rounded-lg | p-16 | flow"
:data-status="notification.isread == 'true' ? 'read' : 'unread'"
data-type="content"
@click="read(notification)"
title="Aller au contenu"
>
<header>
<p class="flex">
<strong
class="notification__type | font-medium text-primary"
data-icon="content"
>Contenu</strong
>
<span class="notification__client | text-grey-700">{{
notification.location.project.title
}}</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.text }}
</p>
</article>
</template>
<script setup>
import { useRouter } from "vue-router";
import { useNotificationsStore } from "../../stores/notifications";
const router = useRouter();
const { notification } = defineProps({ notification: Object });
const { formatDate, read } = useNotificationsStore();
</script>

49
src/components/notifications/Reply.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<article
class="notification | bg-white rounded-lg | p-16 | flow"
:data-status="notification.isread == true ? 'read' : 'unread'"
data-type="comment"
@click="read(notification)"
>
<header>
<p class="flex">
<strong
class="notification__type | font-medium text-primary"
data-icon="comment"
>Réponse à
{{
notification.location.parent.author.name
? notification.location.parent.author.name
: notification.location.parent.author.email
}}</strong
>
<span class="notification__client | text-grey-700">{{
notification.location.project.title
}}</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 { useNotificationsStore } from "../../stores/notifications";
const { notification } = defineProps({ notification: Object });
const { formatDate } = useNotificationsStore();
</script>