Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add notification button
  • Loading branch information
DispatchCommit committed Jul 16, 2019
1 parent 80f90f6 commit 5c2be43
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 28 deletions.
92 changes: 67 additions & 25 deletions components/Notifications/index.vue
Expand Up @@ -17,11 +17,15 @@
icon
flat
>
<v-badge right color="red">
<v-badge
:value="notificationCount > 0"
color="red"
right
>
<template #badge>
<span>{{ notifications.length }}</span>
</template>
<v-icon class="ml-1">notifications</v-icon>
<v-icon class="ml-1">notifications</v-icon>
</v-badge>
</v-btn>
</template>
Expand All @@ -47,6 +51,7 @@
color="#222"
>
<v-list single-line :style="{ background: 'transparent' }">

<v-list-tile v-for="notification in notifications" :key="notification.id">
<v-list-tile-action>
<v-icon>{{ notification.icon }}</v-icon>
Expand All @@ -56,6 +61,16 @@
<v-list-tile-sub-title>{{ notification.message }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>

<v-list-tile v-if="notificationCount === 0">
<v-list-tile-action>
<v-icon>done</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>No Notifications</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>

</v-list>
</v-sheet>
</v-card>
Expand All @@ -65,27 +80,54 @@
</template>

<script>
export default {
name: 'Notifications',
data() {
return {
username: 'Notifications',
notificationMenu: false,
notifications: [
{
id: 0,
icon: 'mail',
title: 'Admin',
message: 'Coming Soon ™',
},
]
}
},
methods: {},
computed: {},
}
import { auth, db } from '@/plugins/firebase.js'
export default {
name: 'Notifications',
data() {
return {
username: 'Notifications',
notificationMenu: false,
notifications: [],
unsubscribeNotifications: null,
}
},
methods: {
getNotifications () {
const notificationsRef = db.collection('notifications');
const query = notificationsRef.where('read', '==', false).limit(5);
// const query = notificationsRef.where('read', '==', false).orderBy('timestamp', 'desc').limit(5);
this.unsubscribeNotifications = query.onSnapshot( snapshot => this.updateNotifications(snapshot) );
},
updateNotifications (snapshot) {
let notifications = [];
snapshot.forEach(doc => {
let data = doc.data();
let id = doc.id;
notifications.push( { id, ...data} );
console.log( { id, ...data} );
});
this.notifications = notifications;
},
},
computed: {
notificationCount () {
return this.notifications.length;
},
},
created () {
this.getNotifications();
},
beforeDestroy () {
this.unsubscribeNotifications();
},
}
</script>
4 changes: 1 addition & 3 deletions layouts/default.vue
Expand Up @@ -32,7 +32,7 @@

<v-spacer />

<!--<notifications />-->
<notifications />

<user />

Expand All @@ -51,7 +51,6 @@
<script>
import User from '~/components/User'
import UserList from '~/components/UserList'
import LoginDialog from '~/components/LoginDialog'
import Notifications from '~/components/Notifications'
import { mapState } from 'vuex'
Expand All @@ -60,7 +59,6 @@
components: {
User,
UserList,
LoginDialog,
Notifications,
},
Expand Down

0 comments on commit 5c2be43

Please sign in to comment.