Skip to content

Instantly share code, notes, and snippets.

@iErik
Created April 24, 2020 17:33
Show Gist options
  • Save iErik/7c3b7356fc75ddfd0d31b6a5d4c436c7 to your computer and use it in GitHub Desktop.
Save iErik/7c3b7356fc75ddfd0d31b6a5d4c436c7 to your computer and use it in GitHub Desktop.
<template>
<page-template title="Central de Notificações">
<notification-center
:notification-types="notificationTypes"
:pagination="pagination"
:items="notifications"
@paginate="paginate"
/>
<div v-if="!isLoading" v-observe-visibility="observePagination" />
</page-template>
</template>
<script>
import { ObserveVisibility } from 'vue-observe-visibility'
import { mapActions, mapState } from 'vuex'
import { PageTemplate } from '@/components/templates'
import { NotificationCenter } from '@/components/organisms'
export default {
name: 'NotificationCentral',
layout: 'internal',
components: {
PageTemplate,
NotificationCenter
},
directives: {
ObserveVisibility
},
data: () => ({
isLoading: true,
loadingPagination: false
}),
computed: {
...mapState({
notificationTypes: state => state.notifications.notificationTypes,
notifications: state => state.notifications.pagination.items,
pagination: ({
notifications: {
pagination: { items, ...data }
}
}) => data
})
},
async mounted() {
await Promise.all([
this.paginateNotifications(),
this.getNotificationTypes()
])
this.isLoading = false
},
beforeDestroy() {
this.clearPagination()
},
methods: {
...mapActions({
paginateNotifications: 'notifications/PAGINATE',
clearPagination: 'notifications/CLEAR_PAGINATION',
getNotificationTypes: 'notifications/GET_TYPES'
}),
observePagination(isVisible) {
if (this.loadingPagination) return
const { perPage, total } = this.pagination
if (isVisible && perPage < total)
this.paginate({ ...this.pagination, perPage: perPage + 10 })
},
async paginate({ perPage, archived, types }) {
this.loadingPagination = true
await this.paginateNotifications({ perPage, archived, types })
this.loadingPagination = false
}
},
head: () => ({ title: 'Castlight - Central de Notificações' })
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment