src/assets/css/app.css

@@ -67,10 +67,9 @@ table tr.at_risk:hover {
     color: grey;
 }
 .scroller {
-    height: 600px;
 }
-.scroller.small {
+.scroller {
-    height: 300px;
+    height: 600px;
 }
 
 .item {

src/components/CustomerComments.vue

@@ -9,13 +9,7 @@
             <v-progress-linear color="yellow" :active="comments_loading" indeterminate>
             </v-progress-linear>
             <v-list>
-                <RecycleScroller
+                <v-list-item v-for="item in comments" :key="item.id" :class="{ inactive : !item.active }">
-                        class="scroller small"
-                        item-size="50"
-                        :items="comments"
-                        v-slot="{ item }"
-                        key-field="id">
-                <v-list-item :class="{ inactive : !item.active }">
                     {{ item.comment }}
                     <template v-slot:append>
                         <v-icon v-if="item.actioned" icon="mdi-tick" color="green" title="Actioned"></v-icon>
@@ -23,7 +17,6 @@
                         <v-btn v-if="!item.active" variant="text" :loading="item.active_changing" @click="toggleActiveState(item)" size="small" icon="mdi-pause" title="Inactive"></v-btn>
                     </template>
                 </v-list-item>
-                </RecycleScroller>
             </v-list>
         </v-card-text>
     </v-card>

src/components/RecentOrders.vue

@@ -9,67 +9,43 @@
         </v-progress-linear>
         <v-container>
             <v-row dense>
-                <v-col cols=12>
+                <v-col cols=12 v-for="item in sortedOrders" :key="item.doc_no">
-                    <RecycleScroller :items="orders"
+                    <v-card density="compact" :class="{ 'bg-green-lighten-5' : item.doc_status == 'Live' }">
-                       class="scroller"
-                       :class="{ small : size_small }"
-                       :item-size="180"
-                       key-field="doc_no"
-                       v-slot="{ item }">
-
-                            <v-card class="ma-2"  density="compact" :class="{ 'bg-green-lighten-5' : item.doc_status == 'Live' }">
                         <v-row dense>
-                                    <v-col>
+                            <v-col cols=4>
                                 <v-card-title>
                                     Order: {{ item.doc_no }}
                                 </v-card-title>
                                 <v-card-subtitle>
-                                            Order Date : {{ formatDate(item.doc_date,"DD/MM/YYYY") }}<br/>
+                                    {{ formatDate(item.doc_date,"DD/MM/YYYY") }}
-                                            Delivery Date : {{ formatDate(item.req_del_date,"DD/MM/YYYY") }}<br/>
+                                    <v-icon v-if="item.doc_status == 'Completed'" icon="mdi-check"></v-icon>
-                                            <v-icon color="blue" v-if="item.doc_status == 'Completed'" icon="mdi-check"></v-icon>
                                     <v-icon v-if="item.doc_status == 'Live'" icon="mdi-play"></v-icon>
                                     {{ item.doc_status }}
-                                            <br/>
-                                            <v-icon color="blue-lighten-1" v-if="item.print_status == 'Printed'" icon="mdi-printer"></v-icon>
-                                            <v-icon v-if="item.print_status == 'Not printed'" icon="mdi-printer-off"></v-icon>
-                                            {{ item.print_status }}
                                 </v-card-subtitle>
-                                        <v-card-text>
-                                            {{ item.customer.acc_no }} - {{ item.customer.name }}
-                                        </v-card-text >
-                                    </v-col>
-                                    <v-col>
                                 <v-card-text>
                                     <!--<h5>Address :</h5>-->
                                     <template v-if="item.del_addr.id != 0 && item.del_addr.postal_name != ''">
                                         <h5>Delivery Address :</h5>
                                         <template  v-for="(v, k , index) in item.del_addr" :key="index">
-                                                    <span class="text-caption" v-if="k != 'id' && (v != '' || v != 0)">
+                                            <v-caption v-if="k != 'id' && (v != '' || v != 0)">
                                                 {{ v }}<br/>
-                                                    </span>
+                                            </v-caption>
                                         </template>
                                     </template>
                                 </v-card-text>
                             </v-col>
-                                    <v-col cols=5>
+                            <v-col>
-                                        <v-card-text  style="max-height:160px;overflow-y:scroll;">
+                                <v-card-text>
                                     <h5>Items :</h5>
-                                            <span class="text-caption" v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;">
+                                    <v-caption v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;">
                                         {{ i.code }} - {{ i.name }}
                                         <span v-if="i.quantity != 0">x {{ i.quantity }}</span><br/>
-                                            </span>
+                                    </v-caption>
                                 </v-card-text>
                             </v-col>
-                                    <v-col cols=1>
-                                        <v-btn size="small" color="warning" title="Add Complaint">
-                                            <v-icon>mdi-plus</v-icon>
-                                            <v-icon>mdi-exclamation</v-icon>
-                                        </v-btn>
-                                    </v-col>
                         </v-row>
 
                     </v-card>
-                    </RecycleScroller>
                 </v-col>
             </v-row>
         </v-container>
@@ -82,9 +58,7 @@ import methods from '@/CommonMethods.vue'
 export default {
     props:{
         customer: new Customer(),
-        doc_status: Number,
+        doc_status: Number
-        limit: Number,
-        size_small: Boolean
     },
     watch: {
         customer() {
@@ -127,8 +101,7 @@ export default {
             let url = this.$api_url + "/customers/" + this.customer.id + "/orders/recent"
             axios.get(url, {
                 params: {
-                    doc_status: this.doc_status,
+                    doc_status: this.doc_status
-                    limit: this.limit || 6
                 }
             })
                 .then(resp => {
@@ -142,11 +115,6 @@ export default {
                 })
 
         }
-    },
-    created() {
-        if (this.customer.id != "") {
-            this.getCustomerRecentOrders()
-        }
     }
 }
 </script>

src/router/index.js

@@ -6,7 +6,6 @@ const CustomerList = () => import('../views/customers/CustomerList.vue')
 const ContractList = () => import('../views/contracts/ContractList.vue')
 const ComplaintsList = () => import('../views/complaints/ComplaintsList.vue')
 const MedFeedsList = () => import('../views/medfeeds/MedFeedsList.vue')
-const OrderList = () => import('../views/salesorders/OrdersList.vue')
 const SOPPrintedList = () => import('../views/salesorders/SOPPrinted.vue')
 
 const routes = [
@@ -65,16 +64,6 @@ const routes = [
         name: 'complaintslistid',
         component: ComplaintsList
     },
-    {
-        path: '/customers/orders/list',
-        name: 'orderslist',
-        component: OrderList
-    },
-    {
-        path: '/customers/orders/list/:id',
-        name: 'orderslistid',
-        component: OrderList
-    },
     {
         path: '/sop/printed',
         name: 'sopprinted',

src/views/customers/CustomerList.vue

@@ -57,12 +57,12 @@
                 </v-list>
             </v-card>
             <br/>
-            <RecentOrders :customer="selected_cust" size_small doc_status=0></RecentOrders>
+            <RecentOrders :customer="selected_cust" doc_status="0"></RecentOrders>
         </v-col>
         <v-col cols="12" sm=12 lg=6>
             <CustomerComments :customer="selected_cust"></CustomerComments>
             <br/>
-            <RecentOrders :customer="selected_cust" doc_status=2></RecentOrders>
+            <RecentOrders :customer="selected_cust" doc_status="2"></RecentOrders>
         </v-col>
     </v-row>
 </template>
@@ -128,9 +128,7 @@ export default {
             let url = this.$api_url + "/customers/list"
             axios
                 .get(url,{ 
-                    params: { 
+                    params: { limit: this.limit, query: this.searchQuery }})
-                        limit: this.limit, 
-                        query: "" }})
                 .then(resp => {
                     this.customer_list = resp.data
                     this.listreceived = true

src/views/salesorders/OrdersList.vue

@@ -1,34 +0,0 @@
-<template>
-    <h3>Orders List</h3>
-    <v-row>
-        <v-col cols="8" xs="12" sm="12" md="8">
-                <RecentOrders :customer="customer" limit=20 doc_status="0"></RecentOrders>
-                <br/>
-                <RecentOrders :customer="customer" limit=20 doc_status="2"></RecentOrders>
-        </v-col>
-    </v-row>
-</template>
-<script>
-import Customer from '@/types/CustomerType.vue'
-import RecentOrders from '@/components/RecentOrders.vue'
-
-export default {
-    props: {
-        site_info: {},
-        user_info: {}
-    },
-    components:{
-        RecentOrders
-    },
-    data() {
-        return {
-            customer: new Customer()
-        }
-    },
-    created(){
-        let c_id = this.$route.params.id || 0
-        this.customer.id = c_id
-    }
-}
-
-</script>

src/views/salesorders/\

@@ -1,135 +0,0 @@
-<template>
-    <v-card>
-        <v-card-title>
-            {{ doc_types[doc_status] }} Orders - {{ customer.acc_no }} {{ customer.name }}
-            <v-btn v-if="customer.id != ''" size="smaller" icon="mdi-refresh" variant="text" color="green" @click="getCustomerRecentOrders" :loading="orders_loading"></v-btn>
-
-        </v-card-title>
-        <v-progress-linear color="blue" :active="orders_loading" indeterminate>
-        </v-progress-linear>
-        <v-container>
-            <v-row dense>
-                <v-col cols=12 v-for="item in sortedOrders" :key="item.doc_no">
-                    <v-card density="compact" :class="{ 'bg-green-lighten-5' : item.doc_status == 'Live' }">
-                        <v-row dense>
-                            <v-col>
-                                <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>
-                                    <v-icon v-if="item.doc_status == 'Live'" icon="mdi-play"></v-icon>
-                                    {{ item.doc_status }}
-                                </v-card-subtitle>
-                                <v-card-text>
-                                    {{ item.customer.acc_no }} - {{ item.customer.name }}
-                                </v-card-text>
-                            </v-col>
-                            <v-col>
-                                <v-card-text>
-                                    <!--<h5>Address :</h5>-->
-                                    <template v-if="item.del_addr.id != 0 && item.del_addr.postal_name != ''">
-                                        <h5>Delivery Address :</h5>
-                                        <template  v-for="(v, k , index) in item.del_addr" :key="index">
-                                            <span class="text-caption" v-if="k != 'id' && (v != '' || v != 0)">
-                                                {{ v }}<br/>
-                                            </span>
-                                        </template>
-                                    </template>
-                                </v-card-text>
-                            </v-col>
-                            <v-col cols=5>
-                                <v-card-text>
-                                    <h5>Items :</h5>
-                                    <span class="text-caption" v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;">
-                                        {{ i.code }} - {{ i.name }}
-                                        <span v-if="i.quantity != 0">x {{ i.quantity }}</span><br/>
-                                    </span>
-                                </v-card-text>
-                            </v-col>
-                            <v-col cols=1>
-                                <v-btn variant="text" icon="mdi-exclamation" color="red"></v-btn>
-                            </v-col>
-                        </v-row>
-
-                    </v-card>
-                </v-col>
-            </v-row>
-        </v-container>
-    </v-card>
-</template>
-<script>
-import axios from 'axios'
-import Customer from '@/types/CustomerType.vue'
-import methods from '@/CommonMethods.vue'
-export default {
-    props:{
-        customer: new Customer(),
-        doc_status: Number,
-        limit: Number 
-    },
-    watch: {
-        customer() {
-            this.getCustomerRecentOrders()
-        },
-    },
-    mixins: [methods],
-    data() {
-        return {
-            orders_loading: false,
-            orders: [],
-            doc_types: ["Live","","Completed"],
-        }
-    },
-    computed: {
-        prog_col(){
-            if (this.doc_status == 2){
-                return "green"
-            } else {
-                return "blue"
-            }
-        },
-        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(){
-            this.orders_loading = true
-            let url = this.$api_url + "/customers/" + this.customer.id + "/orders/recent"
-            axios.get(url, {
-                params: {
-                    doc_status: this.doc_status,
-                    limit: this.limit || 6
-                }
-            })
-                .then(resp => {
-                    this.orders = resp.data
-                })
-                .catch(err => {
-                    console.log(err)
-                })
-                .finally(() => {
-                    this.orders_loading = false
-                })
-
-        }
-    },
-    created() {
-        if (this.customer.id != "") {
-            this.getCustomerRecentOrders()
-        }
-    }
-}
-</script>