Compare commits

..

2 commits

Author SHA1 Message Date
e2cff40cd7 orders now in recycle containers 2023-03-27 14:48:22 +01:00
5fed496a36 order list 2023-03-27 12:35:36 +01:00
7 changed files with 266 additions and 44 deletions

View file

@ -66,11 +66,12 @@ table tr.at_risk:hover {
background:lightgrey; background:lightgrey;
color: grey; color: grey;
} }
.scroller {
}
.scroller { .scroller {
height: 600px; height: 600px;
} }
.scroller.small {
height: 300px;
}
.item { .item {
height: 138px; height: 138px;

View file

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

View file

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

View file

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

View file

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

View file

@ -0,0 +1,34 @@
<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>

135
src/views/salesorders/\ Normal file
View file

@ -0,0 +1,135 @@
<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>