104 lines
4.7 KiB
Vue
104 lines
4.7 KiB
Vue
<template>
|
|
<div class="notification-list">
|
|
<ul class="notif-title">
|
|
<li v-for="type of notificationtype" :key="type.value" :class="category === type.value ? 'active' : choosing ? 'responsive-choice' : 'inactive'" @click="filter(type.value); choosing = !choosing;">
|
|
<i v-if="type.value == notificationtype.reduction.value" class="icon-faq-promos"></i>
|
|
<i v-else-if="type.value == notificationtype.recipe.value" class="icon-recettes"></i>
|
|
<i v-else-if="type.value == notificationtype.info.value" class="icon-notif-infos"></i>
|
|
<i v-else-if="type.value == notificationtype.message.value" class="icon-repondre"></i>
|
|
<i v-else class="icon-notifications"></i>
|
|
<span>{{ type.label }}</span>
|
|
<i v-if="category === type.value" class="icon-fleche-bas responsive-list"></i>
|
|
</li>
|
|
</ul>
|
|
<ul class="notif-list">
|
|
<li v-for="(notification, index) in notifications" :key="index">
|
|
<div v-if="notification.type === notificationtype.reduction.value">
|
|
<figure class="reductions-color">
|
|
<i class="icon-faq-promos"></i>
|
|
</figure>
|
|
<span>Nouvelle réduction : <a :href="notification.content">Les Promos</a></span>
|
|
</div>
|
|
<div v-else-if="notification.type === notificationtype.recipe.value">
|
|
<figure class="recipes-color">
|
|
<i class="icon-recettes"></i>
|
|
</figure>
|
|
<span>Nouvelle recette : <a :href="notification.content">{{ notification.notifiable.title }}</a></span>
|
|
</div>
|
|
<div v-else-if="notification.type === notificationtype.info.value">
|
|
<figure class="infos-color">
|
|
<i class="icon-notif-infos"></i>
|
|
</figure>
|
|
<span v-if="notification.notifiable.type === articlecategory.sondage.value">
|
|
Nouveau sondage : <a :href="notification.content">{{ notification.notifiable.title }}</a>
|
|
</span>
|
|
<span v-else>
|
|
Nouvel article : <a :href="notification.content">{{ notification.notifiable.title }}</a>
|
|
</span>
|
|
</div>
|
|
<div v-else-if="notification.type === notificationtype.message.value">
|
|
<figure class="messages-color">
|
|
<i class="icon-repondre"></i>
|
|
</figure>
|
|
<span>Nouveau message : <a :href="notification.content" v-html="formatMessage(notification, 60)"></a></span>
|
|
</div>
|
|
<div v-else>
|
|
<figure class="exchange-color">
|
|
<i class="icon-repondre"></i>
|
|
</figure>
|
|
<span>{{ notification.content }}</span>
|
|
</div>
|
|
<div class="line-notif" v-if="index !== notifications.length - 1"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
this.notifications = JSON.parse(this.dbnotifications);
|
|
this.baseNotifications = JSON.parse(this.dbnotifications);
|
|
this.notificationtype = JSON.parse(this.dbnotificationtype);
|
|
this.articlecategory = JSON.parse(this.dbarticlecategory);
|
|
this.category = this.notificationtype.all.value;
|
|
},
|
|
props: [
|
|
'dbnotifications',
|
|
'dbnotificationtype',
|
|
'dbarticlecategory'
|
|
],
|
|
data() {
|
|
return {
|
|
notificationtype: {},
|
|
articlecategory: {},
|
|
notifications: [],
|
|
baseNotifications: [],
|
|
category: 0,
|
|
choosing: false
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
filter(type) {
|
|
this.category = type;
|
|
if (type === this.notificationtype.all.value)
|
|
this.notifications = JSON.parse(JSON.stringify(this.baseNotifications));
|
|
else
|
|
this.notifications = this.baseNotifications.filter(elem => elem.type === type);
|
|
},
|
|
truncate(input, length = 15) {
|
|
if (input.length > length) {
|
|
return input.substring(0, length) + '...';
|
|
}
|
|
return input;
|
|
},
|
|
formatMessage(notification, length = 15)
|
|
{
|
|
return this.truncate(notification.notifiable.message, length) + '<br>' + notification.notifiable.created_at;
|
|
}
|
|
}
|
|
}
|
|
</script>
|