77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
<template>
|
|
<div class="account-list">
|
|
<div class="account-grid" v-if="accounts.length">
|
|
<account-card
|
|
v-for="(account, k) in accounts"
|
|
:key="k"
|
|
:account="account"
|
|
/>
|
|
</div>
|
|
<div v-else-if="fetched">
|
|
<awe-icon icon="inbox" /> Les comptes créés s'afficheront ici.
|
|
</div>
|
|
<fab-button :to="{ name: 'account-new' }" :margin="true">
|
|
<span slot="fulltext">créer un compte</span>
|
|
</fab-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
import { Getter } from 'vuex-class'
|
|
import { findContrastColor } from '@/utils'
|
|
import bus, { SYNC } from '@/utils/bus-event'
|
|
import accountService from '@/services/AccountService'
|
|
import IAccount from '@/models/IAccount'
|
|
import IColor from '@/models/IColor'
|
|
import IUser from '@/models/IUser'
|
|
import FabButton from '@/components/FabButton.vue'
|
|
import AccountCard from '@/components/AccountCard.vue'
|
|
|
|
@Component({
|
|
components: {
|
|
'fab-button': FabButton,
|
|
'account-card': AccountCard
|
|
}
|
|
})
|
|
export default class AccountList extends Vue {
|
|
@Getter
|
|
public user!: IUser | null
|
|
@Prop({ type: Boolean, default: false })
|
|
public archived!: boolean
|
|
public accounts: IAccount[] = []
|
|
public fetched: boolean = false
|
|
public textColor: string = ''
|
|
public async created(): Promise<void> {
|
|
this.getData()
|
|
bus.$on(SYNC, this.getData)
|
|
}
|
|
|
|
public beforeDestroy() {
|
|
bus.$off(SYNC, this.getData)
|
|
}
|
|
|
|
public async getData(): Promise<void> {
|
|
this.accounts = await accountService.getAll(this.archived)
|
|
this.fetched = true
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.account-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin: 0 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
justify-content: center;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 10px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|