106 lines
5 KiB
Vue
106 lines
5 KiB
Vue
<template>
|
|
<div class="notification-list">
|
|
<ul class="notif-title">
|
|
<li :class="category === 0 ? 'active' : choosing ? 'responsive-choice' : 'inactive'" @click="filter(0); choosing = !choosing;">
|
|
<i class="icon-notifications"></i>
|
|
<span>Toutes les notifications</span>
|
|
<i v-if="category === 0" class="icon-fleche-bas responsive-list"></i>
|
|
</li>
|
|
<li :class="category === 1 ? 'active' : choosing ? 'responsive-choice' : 'inactive'" @click="filter(1); choosing = !choosing;">
|
|
<i class="icon-echange"></i>
|
|
<span>Bourse aux échanges</span>
|
|
<i v-if="category === 1" class="icon-fleche-bas responsive-list"></i>
|
|
</li>
|
|
<li :class="category === 2 ? 'active' : choosing ? 'responsive-choice' : 'inactive'" @click="filter(2); choosing = !choosing;">
|
|
<i class="icon-faq-promos"></i>
|
|
<span>Bons de réduction</span>
|
|
<i v-if="category === 2" class="icon-fleche-bas responsive-list"></i>
|
|
</li>
|
|
<li :class="category === 3 ? 'active' : choosing ? 'responsive-choice' : 'inactive'" @click="filter(3); choosing = !choosing;">
|
|
<i class="icon-recettes"></i>
|
|
<span>Recettes</span>
|
|
<i v-if="category === 3" class="icon-fleche-bas responsive-list"></i>
|
|
</li>
|
|
<li :class="category === 4 ? 'active' : choosing ? 'responsive-choice' : 'inactive'" @click="filter(4); choosing = !choosing;">
|
|
<i class="icon-notif-infos"></i>
|
|
<span>Les infos du Club</span>
|
|
<i v-if="category === 4" class="icon-fleche-bas responsive-list"></i>
|
|
</li>
|
|
<li :class="category === 5 ? 'active' : choosing ? 'responsive-choice' : 'inactive'" @click="filter(5); choosing = !choosing;">
|
|
<i class="icon-repondre"></i>
|
|
<span>Messages</span>
|
|
<i v-if="category === 5" class="icon-fleche-bas responsive-list"></i>
|
|
</li>
|
|
</ul>
|
|
<ul class="notif-list">
|
|
<!-- TODO : Voir les notifs de bourses aux échanges et des messages quand ça sera fait -->
|
|
<li v-for="(notification, index) in notifications" :key="index">
|
|
<div v-if="notification.type === 1">
|
|
<figure>
|
|
<i class="icon-echange"></i>
|
|
</figure>
|
|
<span>A voir le texte de notif : {{ notification.content }}</span>
|
|
</div>
|
|
<div v-else-if="notification.type === 2">
|
|
<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 === 3">
|
|
<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 === 4">
|
|
<figure class="infos-color">
|
|
<i class="icon-notif-infos"></i>
|
|
</figure>
|
|
<span v-if="notification.notifiable.category_id === 4">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 === 5">
|
|
<figure>
|
|
<i class="icon-repondre"></i>
|
|
</figure>
|
|
<span>Nouveau message : {{ 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);
|
|
},
|
|
props: [
|
|
'dbnotifications'
|
|
],
|
|
data() {
|
|
return {
|
|
notifications: [],
|
|
baseNotifications: [],
|
|
category: 0,
|
|
choosing: false
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
filter(type) {
|
|
this.category = type;
|
|
// 0 = Toutes les notifications
|
|
if (type === 0)
|
|
this.notifications = JSON.parse(JSON.stringify(this.baseNotifications));
|
|
else
|
|
this.notifications = this.baseNotifications.filter(elem => elem.type === type);
|
|
}
|
|
}
|
|
}
|
|
</script>
|