Added donation service filter

src/components/Suggestions.vue

@@ -32,6 +32,13 @@
         <input v-model="maxDays" id="maxDays" placeholder="60" type="number" min="1" step="1" max="365" class="validate">
         <label class="active" for="maxDays">Period (in days)</label>
       </div>
+      <div class="input-field col l6">
+        <select multiple v-model="filters.providers">
+          <option value="" disabled selected>All</option>
+          <option v-for="provider in providers" :key="provider.id" :value="provider.id">{{ provider.label }}</option>
+        </select>
+        <label>Donation services</label>
+      </div>
     </div>
     <div v-if="isLoading" class="progress">
       <div class="indeterminate"></div>
@@ -60,7 +67,7 @@
               rel="noopener noreferrer"
               :class="['waves-effect', 'waves-light', 'btn-small']">
               <span :title="mean.summary">{{ mean.provider }}</span>
-            </a>
+            </a>&nbsp;
 
           </template>
         </div>
@@ -90,8 +97,10 @@ export default {
       retributeProfiles: this.$store.state.cache.retributeProfiles || {},
       loadingRetributeProfiles: [],
       filters: {
-        retributeOnly: true
-      }
+        retributeOnly: true,
+        providers: [],
+      },
+      providers: this.$store.state.cache.providers || []
     }
   },
   computed: {
@@ -109,7 +118,13 @@ export default {
       let suggestions = this.allSuggestions.filter((s) => {
         let f = true
         if (self.filters.retributeOnly != null) {
-          f = !!this.retributeProfiles[s.fullId] === self.filters.retributeOnly
+          f = f && !!this.retributeProfiles[s.fullId] === self.filters.retributeOnly
+        }
+        if (self.filters.providers.length > 0) {
+          let p = this.retributeProfiles[s.fullId]
+          f = f && p && p.means.filter((m) => {
+            return self.filters.providers.indexOf(m.provider) > -1
+          }).length > 0
         }
         return f
       })
@@ -129,6 +144,7 @@ export default {
       this.isLoadingSources = false
       this.isLoadingRetribute = false
       this.results = {}
+      this.providers = null
       this.aggregatedSuggestions = {}
       this.retributeProfiles = {}
       this.loadingRetributeProfiles = {}
@@ -161,9 +177,11 @@ export default {
       } else {
         accounts = this.accounts
         this.retributeProfiles = {}
+        this.providers = null
         this.loadingRetributeProfiles = []
       }
       this.isLoadingSources = true
+      await this.fetchProviders()
       accounts.forEach((a) => {
         let r = {isLoading: true, progress: 'indeterminate', status: ''}
         let promise = a._source.fetch({account: a, store: this.$store, results: r, vue: this, maxDays: this.maxDays})
@@ -175,6 +193,12 @@ export default {
       }
       this.isLoadingSources = false
     },
+    async fetchProviders () {
+      const client = axios.create()
+      let url = config.RetributeAPIUrl + `v1/providers`
+      const response = await axios.get(url)
+      this.providers = response.data
+    },
     async lookupAll () {
       let self = this
       const toLoad = this.missingRetributeProfiles.filter((p) => {
@@ -265,6 +289,16 @@ export default {
         this.$store.commit('setRecursiveState', {key: 'cache.retributeProfiles', value: this.retributeProfiles})
       },
       deep: true
+    },
+    providers: {
+      handler (v) {
+        this.$store.commit('setRecursiveState', {key: 'cache.providers', value: this.providers})
+        this.$nextTick(()=> {
+          let elems = document.querySelectorAll('select')
+          M.FormSelect.init(elems, {})
+        })
+      },
+      immediate: true
     }
   }
 }