Pinafore-Web-Client-Frontend/routes/_components/AccountsListPage.html

73 lines
1.7 KiB
HTML
Raw Normal View History

<div class="accounts-page">
{{#if loading}}
<LoadingPage />
{{elseif accounts && accounts.length}}
<ul class="accounts-results">
{{#each accounts as account}}
<AccountSearchResult
:account
actions={{accountActions}}
on:click="onClickAction(event)"
/>
{{/each}}
</ul>
{{/if}}
</div>
<style>
.accounts-page {
padding: 20px 20px;
position: relative;
}
.accounts-results {
list-style: none;
box-sizing: border-box;
border: 1px solid var(--main-border);
border-radius: 2px;
}
@media (max-width: 767px) {
.accounts-page {
padding: 20px 10px;
}
}
</style>
<script>
import { store } from '../_store/store'
import LoadingPage from '../_components/LoadingPage.html'
import AccountSearchResult from '../_components/search/AccountSearchResult.html'
import { toast } from '../_utils/toast'
import { on } from '../_utils/eventBus'
// TODO: paginate
export default {
2018-04-20 06:38:01 +02:00
async oncreate () {
try {
await this.refreshAccounts()
} catch (e) {
toast.say('Error: ' + (e.name || '') + ' ' + (e.message || ''))
} finally {
this.set({loading: false})
}
on('refreshAccountsList', this, () => this.refreshAccounts())
},
data: () => ({
loading: true,
accounts: []
}),
store: () => store,
components: {
LoadingPage,
AccountSearchResult
},
methods: {
onClickAction (event) {
let { action, accountId } = event
action.onclick(accountId)
},
async refreshAccounts () {
let { accountsFetcher } = this.get()
let accounts = await accountsFetcher()
this.set({ accounts: accounts })
}
}
}
</script>