index.vue

<template>
<main class="container">
  <h2 class="text-center mb-5 font-weight-light">{{ $t('inout') }}</h2>
  <NavigationLoader :isLoading="$apollo.queries.newMembers.loading" />
  <transition name="fade">
    <div class="alert alert-danger" v-if="error">{{ error }}</div>
  </transition>
  <transition name="fade">
    <div class="result" v-if="newMembers">
      <div class="row text-center">
        <div class="col-md-6 col-lg-4">
          <h2 class="h4 text-success">{{ $t('bienvenue') }}</h2>
          <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
        </div>
        <div class="col-md-6 col-lg-4">
          <h2 class="h4 text-danger">{{ $t('aurevoir') }}</h2>
          <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
        </div>
        <div class="col-lg-4">
          <h2 class="h4 text-info">{{ $t('revoila') }}</h2>
          <MemberList :members="newMembers['renew']" :displayPubkey="false" :displayHead="false" />
        </div>
      </div>
    </div>
  </transition>
</main>
</template>

<script>
import {LAST_EVENTS} from '@/graphql/queries.js'

const today = Math.round(Date.now() /1000)

export default {
  data() {
    return {
      breadcrumb: [
        {
          text: this.$t('accueil'),
          to: '/'
        }
      ],
      error: null
    }
  },
  methods: {
    addValue(arr,val) {
      if (arr.filter(function(e) { return e.uid === val.uid }).length == 0) {
        arr.push(val)
      }
      return arr
    }
  },
  apollo: {
    newMembers : {
      query: LAST_EVENTS,
      variables() {return {start:today-86400*2,end:today}},
      update (data) {
        let result = {'entrees':[],'sorties':[],'renew':[]}

        for (let i = 0; i < data.membersCount.length; i++) {
          for (let j =0; j < data.membersCount[i].idList.length; j++) {
            let member = data.membersCount[i].idList[j]
            member.member.inOut = member.inOut

            if (member.member.history.length==1) {
              this.addValue(result['entrees'],member.member)
            } else if (member.inOut) {
              this.addValue(result['renew'],member.member)
            } else {
              this.addValue(result['sorties'],member.member)
            }
          }
        }

        for (let list in result) {
          result[list].sort((a, b) => (a.uid.toLowerCase() > b.uid.toLowerCase()) ? 1 : -1)
        }
        
        return result
      },
      error (err) {this.error = err.message}
    }
  },
  mounted () {
    $nuxt.$emit('changeRoute',this.breadcrumb)
  }
}
</script>