From d86fde9d198dd6453e4b2b524bde5b9bf2bdd467 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@wilde.cloud>
Date: Wed, 22 Mar 2023 13:13:29 +0000
Subject: [PATCH] better recent orders layout

---
 src/components/RecentOrders.vue      | 59 +++++++++++++++++++---------
 src/views/customers/CustomerList.vue |  3 +-
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/components/RecentOrders.vue b/src/components/RecentOrders.vue
index 75b35fc..363afc6 100644
--- a/src/components/RecentOrders.vue
+++ b/src/components/RecentOrders.vue
@@ -1,24 +1,39 @@
 <template>
-    <h3>Recent Orders - {{ customer.acc_no }} {{ customer.name }}</h3>
+    <h3>{{ doc_types[doc_status] }} 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-col cols=12 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-row>
+                        <v-col cols=4>
+                            <v-card-title>
+                                Order: {{ item.doc_no }}
+                            </v-card-title>
+                            <v-card-subtitle>
+                                {{ formatDate(item.doc_date,"DD/MM/YYYY") }}
+                                <v-icon v-if="item.doc_status == 'Completed'" icon="mdi-check"></v-icon>
+                                {{ item.doc_status }}
+                            </v-card-subtitle>
+                            <v-card-text>
+                                <h5>Address :</h5>
+                                <template v-for="(k,v, index) in item.del_addr" :key="index">
+                                    <v-caption v-if="k != '' || k != 0">
+                                        {{ k }} <br/>
+                                    </v-caption>
+                                </template>
+                            </v-card-text>
+                        </v-col>
+                        <v-col cols=8>
+                            <v-card-text>
+                                <h5>Items :</h5>
+                                    <v-caption v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;">
+                                        {{ i.code }} - {{ i.name }} x {{ i.quantity }}<br/>
+                                    </v-caption>
+                            </v-card-text>
+                        </v-col>
+                    </v-row>
                 </v-card>
             </v-col>
         </v-row>
@@ -30,18 +45,20 @@ import Customer from '@/types/CustomerType.vue'
 import methods from '@/CommonMethods.vue'
 export default {
     props:{
-        customer: new Customer()
+        customer: new Customer(),
+        doc_status: Number
     },
     watch: {
         customer() {
             this.getCustomerRecentOrders(this.customer.acc_no)
-        }
+        },
     },
     mixins: [methods],
     data() {
         return {
             orders_loading: false,
-            orders: []
+            orders: [],
+            doc_types: ["Live","","Completed"]
         }
     },
     computed: {
@@ -63,7 +80,11 @@ export default {
         getCustomerRecentOrders(acc_no){
             this.orders_loading = true
             let url = this.$api_url + "/customers/" + acc_no + "/orders/recent"
-            axios.get(url)
+            axios.get(url, {
+                params: {
+                    doc_status: this.doc_status
+                }
+            })
                 .then(resp => {
                     this.orders = resp.data
                 })
diff --git a/src/views/customers/CustomerList.vue b/src/views/customers/CustomerList.vue
index 5ed3923..0aad15e 100644
--- a/src/views/customers/CustomerList.vue
+++ b/src/views/customers/CustomerList.vue
@@ -46,7 +46,8 @@
             <CustomerComments :customer="selected_cust"></CustomerComments>
         </v-col>
         <v-col cols="12" sm=12 lg=6>
-            <RecentOrders :customer="selected_cust"></RecentOrders>
+            <RecentOrders :customer="selected_cust" doc_status="2"></RecentOrders>
+            <RecentOrders :customer="selected_cust" doc_status="0"></RecentOrders>
         </v-col>
     </v-row>
 </template>