psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

added customer complaints list

Browse source
This commit is contained in:
Paul Wilde 2023-03-27 11:14:16 +01:00
parent c5805185c7
commit a1426eec60
5 changed files with 125 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
package-lock.json generated
View file

@ -2217,9 +2217,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "18.15.7", "version": "18.15.10",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.7.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.10.tgz",
"integrity": "sha512-LFmUbFunqmBn26wJZgZPYZPrDR1RwGOu2v79Mgcka1ndO6V0/cwjivPTc4yoK6n9kmw4/ls1r8cLrvh2iMibFA==" "integrity": "sha512-9avDaQJczATcXgfmMAW3MIWArOO7A+m90vuCFLr8AotWf8igO/mRoYukrk2cqZVtv38tHs33retzHEilM7FpeQ=="
}, },
"node_modules/@types/normalize-package-data": { "node_modules/@types/normalize-package-data": {
"version": "2.4.1", "version": "2.4.1",
@ -3974,9 +3974,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001469", "version": "1.0.30001470",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001470.tgz",
"integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==", "integrity": "sha512-065uNwY6QtHCBOExzbV6m236DDhYCCtPmQUCoQtwkVqzud8v5QPidoMr6CoMkC2nfp6nksjttqWQRRh75LqUmA==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -5242,9 +5242,9 @@
"dev": true "dev": true
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.339", "version": "1.4.340",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.339.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.340.tgz",
"integrity": "sha512-MSXHBJGcbBydq/DQDlpBeUKnJ6C7aTiNCTRpfDV5Iz0sNr/Ng6RJFloq82AAicp/SrmDq4zF6XsKG0B8Xwn1UQ==" "integrity": "sha512-zx8hqumOqltKsv/MF50yvdAlPF9S/4PXbyfzJS6ZGhbddGkRegdwImmfSVqCkEziYzrIGZ/TlrzBND4FysfkDg=="
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
"version": "8.0.0", "version": "8.0.0",
@ -8299,9 +8299,15 @@
} }
}, },
"node_modules/nanoid": { "node_modules/nanoid": {
"version": "3.3.4", "version": "3.3.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"bin": { "bin": {
"nanoid": "bin/nanoid.cjs" "nanoid": "bin/nanoid.cjs"
}, },

3
src/assets/css/app.css
View file

@ -81,3 +81,6 @@ table tr.at_risk:hover {
align-items: center; align-items: center;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
.clickable {
cursor:pointer;
}

5
src/router/index.js
View file

@ -59,6 +59,11 @@ const routes = [
name: 'complaintslist', name: 'complaintslist',
component: ComplaintsList component: ComplaintsList
}, },
{
path: '/customers/complaints/list/:id',
name: 'complaintslistid',
component: ComplaintsList
},
{ {
path: '/sop/printed', path: '/sop/printed',
name: 'sopprinted', name: 'sopprinted',

116
src/views/complaints/ComplaintsList.vue
View file

@ -5,56 +5,65 @@
<v-tab title="Edit" v-model="edit" v-if="edit" /> <v-tab title="Edit" v-model="edit" v-if="edit" />
<v-tab title="Report" v-model="report" v-if="report" /> <v-tab title="Report" v-model="report" v-if="report" />
</v-tabs> </v-tabs>
<v-window v-model="tab"> <v-window v-model="tab">
<v-window-item v-model="list"> <v-window-item v-model="list">
<v-col cols="12" xs="12" sm="12" md="12" lg=8> <v-col cols="12" xs="12" sm="12" md="12" lg=8>
<v-text-field <v-text-field
clearable clearable
label="Search" label="Search"
variant="outlined" variant="outlined"
v-model="searchQuery" v-model="searchQuery"
density="compact" density="compact"
append-inner-icon="mdi-magnify"></v-text-field> append-inner-icon="mdi-magnify"></v-text-field>
<v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text">Add</v-btn> <v-row justify="space-between">
<v-progress-linear indeterminate color="orange" :active="loading"></v-progress-linear>
<v-card variant="outlined">
<RecycleScroller class="scroller"
:items="filteredComplaints"
:item-size="100"
v-slot="{ item }"
key-field="id">
<v-row dense class="item" :class="{ 'bg-red-lighten-4' : item.at_risk }">
<v-col cols="4">
Complaint : {{ item.id }}<br/>
<span class="text-caption">
Complaint Date : {{ item.complaint_date }}<br/>
Sales Order: {{ item.sop.doc_no }}<br/>
</span>
</v-col>
<v-col cols="4" class="text-body-2">
{{ item.customer.acc_no }} - {{ item.customer.name }}<br/>
Reason : {{ item.reason }}<br/>
Driver : {{ item.driver.name }}
</v-col>
<v-col cols=4> <v-col cols=4>
<div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height"> <v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text">Add</v-btn>
<v-row> </v-col>
<v-icon icon="mdi-exclamation" v-if="item.at_risk" color="red" title="At Risk"></v-icon> <v-col cols=3>
<v-icon icon="mdi-play" v-if="item.active" title="Active"></v-icon> <v-btn align="end" variant="text" @click="showActive = !showActive">
</v-row> Showing <span v-if="showActive">Active Only</span><span v-else>Inactive</span>
<v-btn @click="showInfo(item)" color="blue-lighten-1">View</v-btn> </v-btn>
<v-btn v-if="site_info.features.editcomplaint" color="orange-lighten-2">Edit</v-btn>
</div>
</v-col> </v-col>
</v-row> </v-row>
</RecycleScroller> <v-progress-linear indeterminate color="orange" :active="loading"></v-progress-linear>
</v-card> <v-card variant="outlined">
</v-col> <RecycleScroller class="scroller"
</v-window-item> :items="filteredComplaints"
</v-window> :item-size="100"
<v-dialog v-model="showComplaintInfo"> v-slot="{ item }"
<ComplaintInfo :in_complaint="selected_complaint" @return="doInfoReturn" /> key-field="id">
</v-dialog> <v-row dense class="item" :class="{ 'bg-red-lighten-4' : item.at_risk }">
<v-col cols="4">
Complaint : {{ item.id }}<br/>
<span class="text-caption">
Complaint Date : {{ item.complaint_date }}<br/>
Sales Order: {{ item.sop.doc_no }}<br/>
</span>
</v-col>
<v-col cols="4" class="text-body-2">
{{ item.customer.acc_no }} - {{ item.customer.name }}<br/>
Reason : {{ item.reason }}<br/>
Driver : {{ item.driver.name }}
</v-col>
<v-col cols=4>
<div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height">
<v-row>
<v-icon icon="mdi-exclamation" v-if="item.at_risk" color="red" title="At Risk"></v-icon>
<v-icon icon="mdi-play" v-if="item.active" title="Active"></v-icon>
</v-row>
<v-btn @click="showInfo(item)" color="blue-lighten-1">View</v-btn>
<v-btn v-if="site_info.features.editcomplaint" color="orange-lighten-2">Edit</v-btn>
</div>
</v-col>
</v-row>
</RecycleScroller>
</v-card>
</v-col>
</v-window-item>
</v-window>
<v-dialog v-model="showComplaintInfo">
<ComplaintInfo :in_complaint="selected_complaint" @return="doInfoReturn" />
</v-dialog>
</template> </template>
<script> <script>
import axios from 'axios' import axios from 'axios'
@ -62,6 +71,7 @@ import ComplaintInfo from '@/components/ComplaintInfo.vue'
export default { export default {
props: { props: {
site_info:{}, site_info:{},
user_info:{}
}, },
components: { components: {
ComplaintInfo ComplaintInfo
@ -105,16 +115,22 @@ export default {
getComplaintsList(){ getComplaintsList(){
this.loading = true this.loading = true
let url = this.$api_url + "/customers/complaints/list" let url = this.$api_url + "/customers/complaints/list"
console.log("Getting Complaint list...") let c_id = this.$route.params.id || ""
console.log("Getting Contracts list..." + c_id)
axios.get(url,{ axios.get(url,{
params: { params: {
limit: this.limit, limit: this.limit,
query: this.searchQuery query: this.searchQuery,
c_id: c_id
} }
}).then(resp => { }).then(resp => {
this.list = resp.data this.list = resp.data
this.loading = false console.log(this.list)
this.listreceived = true this.listreceived = true
}).catch(err => {
console.log(err)
}).finally(() => {
this.loading = false
}) })
}, },
showInfo(complaint) { showInfo(complaint) {

51
src/views/customers/CustomerList.vue
View file

@ -1,6 +1,5 @@
<template> <template>
<v-text-field <v-text-field
clearable
label="Search" label="Search"
variant="outlined" variant="outlined"
v-model="searchQuery" v-model="searchQuery"
@ -22,27 +21,37 @@
key-field="acc_no" key-field="acc_no"
v-slot="{ item }" v-slot="{ item }"
> >
<v-list-item > <v-list-item >
<template v-slot:title > <v-sheet class="clickable" @click="getCustomerInfo(item)" rounded :class="{ 'bg-error' : item.at_risk }">
<v-card @click="getCustomerInfo(item)"> <v-icon v-if="item.acc_no == selected_cust.acc_no">mdi-checkbox-marked-outline</v-icon>
<v-icon v-else>mdi-checkbox-blank-outline</v-icon>
{{ item.acc_no }} - {{ item.name }}: {{ item.acc_no }} - {{ item.name }}:
<span class="text-caption">{{ item.address.line_1 }}, {{ item.address.line_2 }}, <br/> <span class="text-caption">{{ item.address.line_1 }}, {{ item.address.line_2 }}, <br/>
{{ item.address.city }}, {{ item.address.county}}, {{ item.address.postcode }}, {{ item.address.city }}, {{ item.address.county}}, {{ item.address.postcode }},
</span> </span>
</v-card> </v-sheet>
<template v-slot:append>
<v-btn-toggle>
<v-btn @click.prevent="viewOrders(item)" color="blue-lighten-1" title="View Orders">
<v-icon>mdi-cart-outline</v-icon>
</v-btn>
<v-btn @click.prevent="goToContracts(item)" color="blue-lighten-1" title="View Contracts">
<v-icon>mdi-file-edit-outline</v-icon>
<v-badge v-if="item.contract_count > 0" color="blue-lighten-4" floating :content="item.contract_count">
</v-badge>
</v-btn>
<v-btn @click.prevent="goToMedFeeds(item)" color="orange-lighten-1" title="View Med Feeds">
<v-icon>mdi-pill</v-icon>
<v-badge v-if="item.medfeed_count > 0" color="orange-lighten-4" floating :content="item.medfeed_count">
</v-badge>
</v-btn>
<v-btn @click.prevent="goToComplaints(item)" color="orange-lighten-1" title="View Complaints">
<v-icon>mdi-exclamation-thick</v-icon>
<v-badge v-if="item.complaint_count > 0" color="red-lighten-4" floating :content="item.complaint_count">
</v-badge>
</v-btn>
</v-btn-toggle>
</template> </template>
<template v-slot:append>
<v-btn @click.prevent="goToContracts(item)" class="text-none" color="blue-lighten-1" title="View Contracts">
Contracts
<v-badge v-if="item.contract_count > 0" color="blue-lighten-4" floating :content="item.contract_count">
</v-badge>
</v-btn>
<v-btn @click.prevent="goToMedFeeds(item)" class="text-none" color="orange-lighten-1" title="View Med Feeds">
Med Feeds
<v-badge v-if="item.medfeed_count > 0" color="orange-lighten-4" floating :content="item.medfeed_count">
</v-badge>
</v-btn>
</template>
</v-list-item> </v-list-item>
</RecycleScroller> </RecycleScroller>
</v-list> </v-list>
@ -108,6 +117,12 @@ export default {
goToMedFeeds(c){ goToMedFeeds(c){
this.$router.push('/customers/medicated-feeds/list/' + c.id) this.$router.push('/customers/medicated-feeds/list/' + c.id)
}, },
goToComplaints(c){
this.$router.push('/customers/complaints/list/' + c.id)
},
viewOrders(c){
this.$router.push('/customers/orders/list/' + c.id)
},
async getCustomerList() { async getCustomerList() {
this.customers_loading = true this.customers_loading = true
let url = this.$api_url + "/customers/list" let url = this.$api_url + "/customers/list"
@ -126,7 +141,7 @@ export default {
} }
} }
</script> </script>
<style> <style scoped>
.scroller { .scroller {
height: 300px; height: 300px;
} }