cmc_fe/src/components/RecentOrders.vue

80 lines
2.3 KiB
Vue

<template>
<h3>Recent Orders - {{ customer.acc_no }} {{ customer.name }}</h3>
<v-progress-linear color="blue" :active="orders_loading" indeterminate>
</v-progress-linear>
<v-container>
<v-row>
<v-col cols=4 v-for="item in sortedOrders" :key="item.id">
<v-card>
<v-card-title>
Order: {{ item.doc_no }}
</v-card-title>
<v-card-subtitle>
{{ formatDate(item.doc_date,"DD/MM/YYYY") }}
</v-card-subtitle>
<v-card-text>
<v-list>
<v-list-item v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;">
{{ i.code }} - {{ i.name }} x {{ i.quantity }}
</v-list-item>
</v-list>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import axios from 'axios'
import Customer from '@/types/CustomerType.vue'
import methods from '@/CommonMethods.vue'
export default {
props:{
customer: new Customer()
},
watch: {
customer() {
this.getCustomerRecentOrders(this.customer.acc_no)
}
},
mixins: [methods],
data() {
return {
orders_loading: false,
orders: []
}
},
computed: {
sortedOrders() {
let sorted = this.orders
sorted.sort((a, b) => {
if (a.doc_date < b.doc_date){
return 1
}
if (a.doc_date > b.doc_date){
return -1
}
return 0
})
return sorted
}
},
methods: {
getCustomerRecentOrders(acc_no){
this.orders_loading = true
let url = this.$api_url + "/customers/" + acc_no + "/orders/recent"
axios.get(url)
.then(resp => {
this.orders = resp.data
})
.catch(err => {
console.log(err)
})
.finally(() => {
this.orders_loading = false
})
}
}
}
</script>