diff --git a/src/components/Suggestions.vue b/src/components/Suggestions.vue index 21ae71a4e538d0a1dd1bc8c5f6bf3c0661313d22..d34b037284693c28171dae2d7c1a363742c63259 100644 --- a/src/components/Suggestions.vue +++ b/src/components/Suggestions.vue @@ -5,7 +5,7 @@ <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.fullId"> + <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> @@ -28,17 +28,25 @@ </button> </h2> <div class="row"> - <div class="input-field col l3"> + <div class="input-field col l4"> <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"> + <div class="input-field col l4"> <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 class="input-field col l4"> + <select multiple v-model="filters.accounts"> + <option + v-for="account in accounts" + :key="account.id" + :value="account.id">{{ account._source.getDisplayName(account) }}</option> + </select> + <label>Accounts</label> + </div> </div> <div v-if="isLoading" class="progress"> <div class="indeterminate"></div> @@ -102,7 +110,7 @@ import axios from 'axios' export default { data () { let filters = this.$store.state.cache.suggestionFilters || {} - filters = defaults(filters, {providers: [], retributeOnly: true}) + filters = defaults(filters, {providers: [], retributeOnly: true, accounts: []}) return { sources: sources.sources, maxDays: this.$store.state.cache.maxDays || 60, @@ -139,6 +147,15 @@ export default { return self.filters.providers.indexOf(m.provider) > -1 }).length > 0 } + let accountFilters = self.filters.accounts.filter((a) => { + return !!a + }) + if (accountFilters.length > 0) { + + f = f && s.accounts && accountFilters.filter((a) => { + return s.accounts.indexOf(a) > -1 + }).length > 0 + } return f }) return orderBy(suggestions, ['weight', 'id'], ['desc', 'asc'])