101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
<template>
|
|
<section class="section">
|
|
<div class="container">
|
|
<header class="is-clearfix">
|
|
<div class="control is-grouped is-pulled-right">
|
|
<div class="control">
|
|
<a class="button" :class="{ 'is-loading': loading }" @click="fetchCustomers()">
|
|
<span class="icon is-small">
|
|
<i class="fa fa-refresh"></i>
|
|
</span>
|
|
<span>Reload</span>
|
|
</a>
|
|
|
|
</div>
|
|
<div class="control has-addons">
|
|
<a class="button" :class="{ 'is-primary': mode === 'cards' }" @click="setMode('cards')">
|
|
<span class="icon is-small">
|
|
<i class="fa fa-th-large"></i>
|
|
</span>
|
|
<span>Cards</span>
|
|
</a>
|
|
<a class="button" :class="{ 'is-primary': mode === 'table' }" @click="setMode('table')">
|
|
<span class="icon is-small">
|
|
<i class="fa fa-table"></i>
|
|
</span>
|
|
<span>Table</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="columns is-multiline" v-if="mode === 'cards'">
|
|
<div class="column is-one-third" v-for="customer in customers">
|
|
<customer-card :customer="customer"></customer-card>
|
|
</div>
|
|
</div>
|
|
|
|
<customer-table v-if="mode === 'table'">
|
|
<customer-row v-for="customer in customers" :customer="customer"></customer-row>
|
|
</customer-table>
|
|
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters } from 'vuex';
|
|
import CustomerCard from '../components/CustomerCard.vue';
|
|
import CustomerTable from '../components/CustomerTable.vue';
|
|
import CustomerRow from '../components/CustomerRow.vue';
|
|
|
|
export default {
|
|
name: 'customers-page',
|
|
components: {
|
|
CustomerCard,
|
|
CustomerTable,
|
|
CustomerRow,
|
|
},
|
|
data() {
|
|
return {
|
|
mode: 'cards',
|
|
loading: false,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('customers', [
|
|
'customers',
|
|
'updatedAt',
|
|
]),
|
|
...mapGetters('customers', [
|
|
'shouldUpdate'
|
|
]),
|
|
},
|
|
methods: {
|
|
setMode(mode) {
|
|
this.mode = (mode === 'table') ? 'table' : 'cards';
|
|
},
|
|
fetchCustomers() {
|
|
this.loading = true;
|
|
|
|
this.$store.dispatch('customers/fetchCustomers')
|
|
.then(() => this.loading = false);
|
|
}
|
|
},
|
|
created() {
|
|
if (this.shouldUpdate(30)) {
|
|
this.loading = true;
|
|
|
|
this.$store.dispatch('customers/fetchCustomers')
|
|
.then(() => this.loading = false);
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
margin-bottom: 30px;
|
|
}
|
|
</style>
|