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

switch to pnpm

Browse source
This commit is contained in:
Paul Wilde 2023-04-03 14:48:40 +01:00
parent e5ca7ae946
commit 88976c0c7b
7 changed files with 7511 additions and 289 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
\
View file

@ -1,168 +0,0 @@
<template>
<h3>Complaints</h3>
<v-tabs v-model="tab" >
<v-tab title="List" v-model="list"></v-tab>
<v-tab title="Edit" v-model="edit" v-if="edit"></v-tab>
<v-tab title="Report" v-model="report" v-if="report" ></v-tab>
</v-tabs>
<v-window v-model="tab">
<v-window-item v-model="list">
<v-col cols="12" xs="12" sm="12" md="12" lg=8>
<v-text-field
clearable
label="Search"
variant="outlined"
v-model="searchQuery"
density="compact"
append-inner-icon="mdi-magnify"></v-text-field>
<v-row justify="space-between">
<v-col cols=4>
<v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text" @click="showAddComplaint">Add</v-btn>
</v-col>
<v-col cols=3>
<v-btn align="end" variant="text" @click="showActive = !showActive">
Showing <span v-if="showActive">Active Only</span><span v-else>Inactive</span>
</v-btn>
</v-col>
</v-row>
<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>
<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-item value="edit">
<ComplaintEdit ref="edit" :setcomplaint="selected_cmplaint" @closetab="tab = 'list'" @complaintupdate="complaintUpdated"></ComplaintEdit>
</v-window-item>
</v-window>
<v-dialog v-model="showComplaintInfo">
<ComplaintInfo :in_complaint="selected_complaint" @return="doInfoReturn" />
</v-dialog>
</template>
<script>
import axios from 'axios'
import ComplaintInfo from '@/components/ComplaintInfo.vue'
export default {
props: {
site_info:{},
user_info:{}
},
components: {
ComplaintInfo
},
data() {
return {
tab: "list",
list: [],
listreceived: false,
showActive: true,
loading: true,
limit: 300,
searchQuery: "",
edit: false,
report: false,
showComplaintInfo: false,
selected_complaint: {}
}
},
computed: {
filteredComplaints() {
let query = this.searchQuery.toLowerCase()
if (!this.listreceived){
this.getComplaintsList()
}
let clist = this.list.filter(q =>
q.customer.name.toLowerCase().includes(query) ||
q.customer.acc_no.includes(query) ||
q.id == query ||
q.reason.toLowerCase().includes(query)
)
if (this.showActive) {
clist = clist.filter(q =>
q.active == true
)
}
return clist
}
},
methods: {
getComplaintsList(){
this.loading = true
let url = this.$api_url + "/customers/complaints/list"
let c_id = this.$route.params.id || ""
console.log("Getting Contracts list..." + c_id)
axios.get(url,{
params: {
limit: this.limit,
query: this.searchQuery,
c_id: c_id
}
}).then(resp => {
this.list = resp.data
console.log(this.list)
this.listreceived = true
}).catch(err => {
console.log(err)
}).finally(() => {
this.loading = false
})
},
showInfo(complaint) {
this.showComplaintInfo = true
this.selected_complaint = complaint
complaint.info_loaded = false
},
doInfoReturn(code) {
console.log(code)
},
showAddComplaint() {
this.edit = true
this.tab = "edit"
}
}
}
</script>
<style>
.scroller {
height:600px;
}
.item {
height: 100px;
overflow-y:hidden;
padding: 0 1em;
margin-bottom:2px;
display: flex;
align-items: center;
border-bottom: 1px solid #000;
}
</style>

41
package.json
View file

@ -9,38 +9,37 @@
}, },
"dependencies": { "dependencies": {
"@mdi/font": "5.9.55", "@mdi/font": "5.9.55",
"@vuepic/vue-datepicker": "^3.6.4", "@vuepic/vue-datepicker": "^3.6.8",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.2.2", "axios": "^1.3.4",
"core-js": "^3.8.3", "core-js": "^3.29.1",
"html2pdf.js": "^0.10.1",
"moment": "^2.29.4", "moment": "^2.29.4",
"roboto-fontface": "*", "roboto-fontface": "^0.10.0",
"sass": "^1.57.1", "sass": "^1.60.0",
"sass-loader": "^13.2.0", "sass-loader": "^13.2.2",
"scss": "^0.2.4", "scss": "^0.2.4",
"vue": "^3.2.13", "vue": "^3.2.47",
"vue-datepicker": "^1.3.0", "vue-datepicker": "^1.3.0",
"vue-meta": "^2.4.0", "vue-meta": "^2.4.0",
"vue-router": "^4.0.3", "vue-router": "^4.1.6",
"vue-splash": "^1.2.1", "vue-splash": "^1.2.1",
"vue-virtual-scroller": "^2.0.0-beta.7", "vue-virtual-scroller": "2.0.0-beta.8",
"vue3-html2pdf": "^1.1.2",
"vue3-print-nb": "^0.1.4", "vue3-print-nb": "^0.1.4",
"vuetify": "^3.0.0-beta.0", "vuetify": "^3.1.12",
"webfontloader": "^1.0.0", "webfontloader": "^1.6.28"
"xmldom": "^0.5.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.21.4",
"@babel/eslint-parser": "^7.12.16", "@babel/eslint-parser": "^7.21.3",
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-router": "~5.0.8",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.8",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.7.1",
"vue-cli-plugin-vuetify": "~2.5.8", "vue-cli-plugin-vuetify": "~2.5.8",
"webpack-plugin-vuetify": "^2.0.0-alpha.0" "webpack-plugin-vuetify": "^2.0.1"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,

7366
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

20
src/components/PrintButtons.vue
View file

@ -1,17 +1,19 @@
<template> <template>
<v-container class="button-container"> <v-container class="button-container">
<v-btn color="primary" @click="generatePdf()" class="mr-2">Create PDF</v-btn> <v-btn :loading="generating" color="primary" @click="generatePdf()" class="mr-2">Create PDF</v-btn>
<v-btn color="grey" v-print="printObj">Print</v-btn> <v-btn color="grey" v-print="printObj">Print</v-btn>
</v-container> </v-container>
</template> </template>
<script> <script>
import html2pdf from 'html2pdf.js'; import html2pdf from 'html2pdf.js';
export default { export default {
props: { props: {
scope: String scope: String,
filename: String
}, },
data() { data() {
return { return {
generating: false,
printObj: { printObj: {
id: this.scope, id: this.scope,
previewTitle: "Report Print", previewTitle: "Report Print",
@ -20,8 +22,16 @@ export default {
} }
}, },
methods:{ methods:{
async generatePdf() { generatePdf() {
html2pdf(document.getElementById(this.scope)) this.generating = true
setTimeout(() => {
let el = document.getElementById(this.scope)
let opts = {
filename: (this.filename || 'file' ) + ".pdf"
}
html2pdf().set(opts).from(el).save()
this.generating = false
},500)
} }
} }
} }

7
src/components/ReportLayout.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<PrintButtons :scope="scope" /> <PrintButtons :scope="scope" :filename="filename" />
<v-container> <v-container>
<v-card class="a4 page"> <v-card class="a4 page">
<div :id="scope" class="pdf-scope"> <div :id="scope" class="pdf-scope" >
<slot></slot> <slot></slot>
</div> </div>
</v-card> </v-card>
@ -13,7 +13,8 @@ import PrintButtons from './PrintButtons.vue'
import '@/assets/css/reports.css'; import '@/assets/css/reports.css';
export default { export default {
props: { props: {
scope: String scope: String,
filename: String
}, },
components: { components: {
PrintButtons PrintButtons

195
src/views/contracts/ContractList.vue
View file

@ -21,96 +21,98 @@
prepend-icon="mdi-plus" prepend-icon="mdi-plus"
variant="text" variant="text"
>Add</v-btn> >Add</v-btn>
<v-progress-linear indeterminate color="blue" :active="loading"></v-progress-linear> <v-progress-linear indeterminate color="blue" :active="loading"></v-progress-linear>
<v-card variant="outlined"> <v-card variant="outlined">
<RecycleScroller class="scroller" <RecycleScroller class="scroller"
:items="filteredContracts" :items="filteredContracts"
:item-size="130" :item-size="130"
v-slot="{ item }" v-slot="{ item }"
key-field="no" key-field="no"
> >
<v-row :class="[{inactive : !item.active}]" class="item"> <v-row :class="[{inactive : !item.active}]" class="item">
<v-col cols="4" > <v-col cols="4" >
<h3>Contract : {{ item.no }}</h3> <h3>Contract : {{ item.no }}</h3>
{{ item.customer.acc_no }} - {{ item.customer.name }} {{ item.customer.acc_no }} - {{ item.customer.name }}
<v-switch v-model="item.active" color="green" @change="setContractInactive(item)" label="Active"></v-switch> <v-switch v-model="item.active" color="green" @change="setContractInactive(item)" label="Active"></v-switch>
</v-col> </v-col>
<v-col > <v-col >
<template v-for="p in item.products" :key="p.code"> <template v-for="p in item.products" :key="p.code">
<span v-if="p.code != ''"> <span v-if="p.code != ''">
{{ p.code }} @ {{ p.price }}<br/> {{ p.code }} @ {{ p.price }}<br/>
</span> </span>
</template> </template>
</v-col> </v-col>
<v-col > <v-col >
<v-icon title="Start">mdi-play</v-icon>: {{ formatDate(item.start_date,"DD/MM/YYYY") }}<br/> <v-icon title="Start">mdi-play</v-icon>: {{ formatDate(item.start_date,"DD/MM/YYYY") }}<br/>
<v-icon title="Finish">mdi-flag-checkered</v-icon>: {{ formatDate(item.finish_date,"DD/MM/YYYY") }}<br/> <v-icon title="Finish">mdi-flag-checkered</v-icon>: {{ formatDate(item.finish_date,"DD/MM/YYYY") }}<br/>
<v-icon title="Duration">mdi-clock</v-icon>: {{ item.duration }} months <v-icon title="Duration">mdi-clock</v-icon>: {{ item.duration }} months
</v-col> </v-col>
<v-col> <v-col>
{{ item.tonnage_per_month }} per month<br/> {{ item.tonnage_per_month }} per month<br/>
= {{ formatNumber(item.tonnage_per_month * item.duration,2) }} total<br/> = {{ formatNumber(item.tonnage_per_month * item.duration,2) }} total<br/>
= {{ formatNumber(item.tonnage_per_month * item.remaining_duration,2) }} remaining<br/> = {{ formatNumber(item.tonnage_per_month * item.remaining_duration,2) }} remaining<br/>
</v-col> </v-col>
<v-col> <v-col>
<div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height"> <div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height">
<v-btn color="info"> <v-btn color="info">
More More
<v-overlay activator="parent" class="align-center justify-center"> <v-overlay activator="parent" class="align-center justify-center">
<v-card title="Info" width="600"> <v-card title="Info" width="600">
<v-card-subtitle>Comments</v-card-subtitle> <v-card-subtitle>Comments</v-card-subtitle>
<v-card-text>{{ item.comments}} </v-card-text> <v-card-text>{{ item.comments}} </v-card-text>
<v-card-subtitle>Office</v-card-subtitle> <v-card-subtitle>Office</v-card-subtitle>
<v-card-text>{{ item.office_comments}}</v-card-text> <v-card-text>{{ item.office_comments}}</v-card-text>
<v-card-subtitle>Agreed</v-card-subtitle> <v-card-subtitle>Agreed</v-card-subtitle>
<v-card-text>{{ formatDate(item.agree_date,"DD/MM/YYYY") }}</v-card-text> <v-card-text>{{ formatDate(item.agree_date,"DD/MM/YYYY") }}</v-card-text>
<v-card-subtitle>Products</v-card-subtitle> <v-card-subtitle>Products</v-card-subtitle>
<v-card-text> <v-card-text>
<template v-for="p in item.products" :key="p.code"> <template v-for="p in item.products" :key="p.code">
<span v-if="p.code != ''"> <span v-if="p.code != ''">
{{ p.code }} - {{ p.name }} @ {{ p.price }}<br/> {{ p.code }} - {{ p.name }} @ {{ p.price }}<br/>
</span> </span>
</template> </template>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn color="info"
target="blank"
@click="getContractPrint(item.no)"
class="ma-2 pa-2"
:loading="multiloading"
>
Multi
</v-btn>
<v-btn color="info" <v-btn color="info"
target="blank" target="blank"
@click="getContractPrint(item.no)" @click="getContractPrint(item.no,true)"
:loading="totalloading"
class="ma-2 pa-2" class="ma-2 pa-2"
:loading="item.multiloading"
> >
Multi Total
</v-btn> </v-btn>
<v-btn color="warning"
<v-btn color="info" v-if="site_info.features.editcontract"
target="blank" @click="showEditContract(item)"
@click="getContractPrint(item.no,true)" :loading="editloading"
:loading="item.totalloading"
class="ma-2 pa-2"
> >
Total Edit
</v-btn> </v-btn>
<v-btn color="warning" </v-card-actions>
v-if="site_info.features.editcontract" </v-card>
@click="showEditContract(item)" </v-overlay>
> </v-btn>
Edit <v-btn color="warning"
</v-btn> v-if="site_info.features.editcontract"
</v-card-actions> @click="showEditContract(item)"
</v-card> :loading="editloading"
</v-overlay> >
</v-btn> Edit
<v-btn color="warning" </v-btn>
v-if="site_info.features.editcontract" </div>
@click="showEditContract(item)" </v-col>
> </v-row>
Edit </RecycleScroller>
</v-btn> </v-card>
</div>
</v-col>
</v-row>
</RecycleScroller>
</v-card>
</v-col> </v-col>
</v-row> </v-row>
</v-window-item> </v-window-item>
@ -180,19 +182,26 @@ export default {
edit: false, edit: false,
report: false, report: false,
total: false, total: false,
content: "" content: "",
editloading: false,
multiloading: false,
totalloading: false
} }
}, },
mixins: [methods], mixins: [methods],
methods: { methods: {
async showEditContract(contract) { async showEditContract(contract) {
if ( contract != undefined ) { this.editloading = true
this.selected_contract = contract setTimeout(() => {
} else { if ( contract != undefined ) {
this.selected_contract = new ContractType() this.selected_contract = contract
} } else {
this.tab = "edit" this.selected_contract = new ContractType()
this.edit = true }
this.tab = "edit"
this.edit = true
this.editloading = false
},1000)
}, },
async getContractsList() { async getContractsList() {
this.loading = true this.loading = true
@ -213,12 +222,16 @@ export default {
}) })
}, },
getContractPrint(contract, total = false) { getContractPrint(contract, total = false) {
if (total){ this.totalloading = true } else { this.multiloading = true }
axios.get(this.$api_url + "/customers/contracts/" + contract + "/info") axios.get(this.$api_url + "/customers/contracts/" + contract + "/info")
.then(resp => { .then(resp => {
this.selected_contract = resp.data this.selected_contract = resp.data
this.total = total this.total = total
this.tab = "report" this.tab = "report"
this.report = true this.report = true
}).finally(() => {
this.totalloading = false
this.multiloading = false
}) })
}, },
findContract(id) { findContract(id) {

3
src/views/contracts/ContractMulti.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<ReportLayout scope="contract"> <ReportLayout scope="contract" :filename="filename">
<div class="letter"> <div class="letter">
<p><span class="text-bold">Date: </span>{{ current_date }}</p> <p><span class="text-bold">Date: </span>{{ current_date }}</p>
<p class="text-bold">Customer's Address:</p> <p class="text-bold">Customer's Address:</p>
@ -71,6 +71,7 @@ export default {
}, },
data(){ data(){
return { return {
filename: "Contract_" + this.contract.no,
current_date: Common.getDateNow(), current_date: Common.getDateNow(),
} }
}, },