nuxt-frontend/pages/manager/members/control.vue

<template>
  <div>
    <div class="pa-6">
      <page-header class="d-flex justify-space-between">
        <div class="subtitle-1">
          <span class="mr-4 display-1">
            Ledencontrole
            <small class="font-weight-light">( {{ changes.length }})</small>
          </span>
        </div>
      </page-header>
    </div>

    <members-changes :items="changes" :users="users" />
  </div>
</template>

<script>
import PageHeader from '~/components/UI/PageHeader/PageHeader'
import MembersChanges from '~/components/Members/MembersChanges'

export default {
  layout: `${process.env.CUSTOMER}Admin`,
  middleware: 'allowSuperAdminOrAdmin',
  components: {
    PageHeader,
    MembersChanges,
  },

  async asyncData({ $axios, store }) {
    try {
      if (store.getters.isSuperAdminOrAdmin) {
        await store.dispatch('members/pullData')
        const response = await $axios.get('/admin/users/getList')
        return { users: response.data }
      }
      return { users: [] }
    } catch (error) {
      console.log('Data -> error', error)
    }
  },

  data() {
    return {
      users: [],
    }
  },

  computed: {
    allMembers() {
      return this.$store.getters['members/membersFiltered']
    },

    changes() {
      const tmp = []

      // cycle members
      this.allMembers.forEach((member) => {
        member['changes'] = []
        let found = null

        // cycle addresses, contacts, summaries
        // const properties = [
        //   'addresses',
        //   'contacts',
        //   'contributions',
        //   'summaries',
        // ]

        // Doesn't work due to a vuex error
        // properties.forEach((property) => {
        //   if (member[property].length) {
        //     member[property].some((item) => {
        //       if (!item.approved_at) {
        //         if (!member[property].includes(property)) {
        //           member[property].push(property)
        //         }
        //         found = true
        //       }
        //     })
        //   }
        // })

        if (member.addresses.length) {
          member.addresses.some((a) => {
            if (!a.approved_at) {
              if (!member['changes'].includes('Addresses')) {
                member['changes'].push('Addresses')
              }
              found = true
            }
          })
        }

        if (member.contacts.length) {
          member.contacts.some((c) => {
            if (!c.approved_at) {
              if (!member['changes'].includes('Contacts')) {
                member['changes'].push('Contacts')
              }
              found = true
            }
          })
        }

        if (member.contributions.length) {
          member.contributions.some((c) => {
            if (!c.approved_at) {
              if (!member['changes'].includes('Contributions')) {
                member['changes'].push('Contributions')
              }
              found = true
            }
          })
        }

        if (member.summaries.length) {
          member.summaries.some((s) => {
            if (!s.approved_at) {
              if (!member['changes'].includes('Werknemers')) {
                member['changes'].push('Werknemers')
              }
              found = true
            }
          })
        }

        if (found) {
          tmp.push(member)
        }
      })

      return tmp
    },
  },
}
</script>