Skip to content

Instantly share code, notes, and snippets.

@iErik

iErik/central.vue

Created April 24, 2020 17:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iErik/7c3b7356fc75ddfd0d31b6a5d4c436c7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iErik/7c3b7356fc75ddfd0d31b6a5d4c436c7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iErik created this gist Apr 24, 2020.
    89 changes: 89 additions & 0 deletions central.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,89 @@
    <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>