Suggestions.vue

<template>
  <div>
    <ul class="collection with-header">
      <li class="collection-header">
        <router-link to="/connect" class="secondary-content">Add another account</router-link>
        <h5>Connected accounts</h5>
      </li>
      <li class="collection-item avatar" v-for="account in accounts" :key="account.id">
        <img v-if="account._source.getAvatar(account)" :src="account._source.getAvatar(account)" alt="" class="circle">
        <span class="title">{{ account._source.getDisplayName(account) }}</span>
        <p>{{ account._source.label }}</p>
        <div v-if="isLoading && results[account.id] && results[account.id].results.isLoading">
          <div class="progress">
            <div v-if="results[account.id].results.progress === 'indeterminate'" :class="indeterminate"></div>
            <div v-else class="determinate" :style="{width: `${results[account.id].results.progress}%`}"></div>
          </div>
          {{ results[account.id].results.status }}
        </div>
        <a @click="fetch(account.id)" class="secondary-content"><i class="material-icons">refresh</i></a>
      </li>
    </ul>
    <h2>Suggestions</h2>
    <button
      @click="fetch()"
      :class="['waves-effect', 'waves-light', {disabled: isLoading}, 'btn-small']" :disabled="isLoading">
      <i class="material-icons left">refresh</i>Fetch data
    </button>
    <div v-if="isLoading" class="progress">
      <div class="indeterminate"></div>
    </div>
  </div>

</template>

<script>
import sources from '@/sources'
export default {
  data () {
    return {
      isLoading: false,
      results: {}
    }
  },
  computed: {
    accounts () {
      return this.$store.getters.sortedAccounts.map((a) => {
        a._source = sources.sources[a.source]
        return a
      })
    }
  },
  methods: {
    async fetch (id) {
      let accounts
      if (id) {
        accounts = this.accounts.filter((a) => {
          return a.id == id
        })
      } else {
        accounts = this.accounts
      }
      this.isLoading = true
      accounts.forEach((a) => {
        let r = {isLoading: true, progress: 'indeterminate', status: ''}
        let promise = a._source.fetch({account: a, store: this.$store, results: r, vue: this})
        this.$set(this.results, a.id, {account: a, promise, results: r})
      })
      const keys = Object.keys(this.results)
      for(let i = 0; i < keys.length; i++){
        await this.results[keys[i]].promise
      }
      this.isLoading = false
    }
  }
}
</script>