mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Fairuz
189 lines
12 KiB
Vue
189 lines
12 KiB
Vue
<template>
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="row" v-if="!isEdit">
|
|
<div class="col">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto p-r-0" v-if="!editable"><div class="icon-thumbnail icon-35 mr-0 bg-master-lightest light">{{index + 1}}</div></div>
|
|
<div class="col-auto" v-if="editable">
|
|
<div @click="$emit('remove')" class="pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="25" height="25"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#e74c3c"><path d="M18.87987,153.12013c2.23887,2.23819 5.86807,2.23819 8.10693,0l59.0132,-59.0132l59.0132,59.0132c2.24964,2.17277 5.82555,2.1417 8.03709,-0.06984c2.21154,-2.21154 2.24261,-5.78745 0.06984,-8.03709l-59.0132,-59.0132l59.0132,-59.0132c1.49042,-1.43949 2.08815,-3.57117 1.56346,-5.57571c-0.52469,-2.00454 -2.09015,-3.57 -4.09469,-4.09469c-2.00454,-0.52469 -4.13622,0.07305 -5.57571,1.56346l-59.0132,59.0132l-59.0132,-59.0132c-2.24964,-2.17277 -5.82555,-2.1417 -8.03709,0.06984c-2.21154,2.21154 -2.24261,5.78745 -0.06984,8.03709l59.0132,59.0132l-59.0132,59.0132c-2.23819,2.23887 -2.23819,5.86807 0,8.10693z"></path></g></g></svg>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto bg-master-lightest padding-20 d-none d-sm-inline hide">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="20" height="20"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#cccccc"><path d="M17.2,37.84c-5.65719,0 -10.32,4.66281 -10.32,10.32v75.68c0,5.65719 4.66281,10.32 10.32,10.32h101.38594c4.31344,0 8.47906,-1.6125 11.65031,-4.54187l0.14781,-0.13438l31.86031,-36.34844l-0.14781,0.16125c4.00437,-4.00438 4.00437,-10.58875 0,-14.59313l0.16125,0.16125l-31.87375,-36.34844l-0.14781,-0.13437c-3.17125,-2.91594 -7.33687,-4.54188 -11.65031,-4.54188zM17.2,44.72h101.38594c2.58,0 5.0525,0.98094 6.96063,2.70094l31.605,36.06625l0.08062,0.08063c1.37063,1.37062 1.37063,3.49375 0,4.86437l-0.08062,0.08063l-31.605,36.05281c-1.90813,1.73344 -4.38063,2.71437 -6.96063,2.71437h-101.38594c-1.935,0 -3.44,-1.505 -3.44,-3.44v-75.68c0,-1.94844 1.49156,-3.44 3.44,-3.44zM127.28,72.24c-7.56531,0 -13.76,6.19469 -13.76,13.76c0,7.56531 6.19469,13.76 13.76,13.76c7.56531,0 13.76,-6.19469 13.76,-13.76c0,-7.56531 -6.19469,-13.76 -13.76,-13.76zM127.28,79.12c3.84313,0 6.88,3.03688 6.88,6.88c0,3.84313 -3.03687,6.88 -6.88,6.88c-3.84312,0 -6.88,-3.03687 -6.88,-6.88c0,-3.84312 3.03688,-6.88 6.88,-6.88z"></path></g></g></svg>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin bold fs-12">{{product.description}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="muted m-b-0">{{product.stockCode}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-7 mt-2 mt-md-0">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<p class="m-b-0 small muted">Unit Price</p>
|
|
<p class="m-b-0 bold">{{product.unit_price}}</p>
|
|
</div>
|
|
<div class="col-auto text-center">
|
|
<p class="m-b-0 small muted">Quantity</p>
|
|
<p class="m-b-0 bold">{{product.quantity}}</p>
|
|
</div>
|
|
<div class="col text-right">
|
|
<p class="m-b-0 small muted">Total</p>
|
|
<p class="m-b-0 bold text-success">{{currency}} {{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2)}}</p>
|
|
<p class="m-b-0 text-complete text-underline pointer" v-if="editable" @click="isEdit = !isEdit">Edit this item?</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="isEdit">
|
|
<div class="col padding-25 bg-master-lightest">
|
|
<div class="row">
|
|
<div class="col-4 p-r-5">
|
|
<div class="form-group form-group-default b-rad-none">
|
|
<label>Stock Code</label>
|
|
<input id="stock_code" name="stock_code" type="text" class="form-control b-rad-none" v-model="product.stockCode" />
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<div class="form-group form-group-default b-rad-none required">
|
|
<label>description</label>
|
|
<input id="desc" name="desc" class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<div class="col-6 p-r-5">
|
|
<div class="form-group form-group-default b-rad-none required">
|
|
<label>Unit Price</label>
|
|
<input id="unit_price" name="unit_price" type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
|
|
</div>
|
|
</div>
|
|
<div class="col-6 p-l-5">
|
|
<div class="form-group form-group-default b-rad-none no-padding no-border">
|
|
<div class="row no-margin">
|
|
<div id="minus-quantity" name="minus-quantity" class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa fa-minus"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col no-padding">
|
|
<label class="p-t-5 p-l-5 text-center">Quantity</label>
|
|
<input id="quantity" name="quantity" type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
|
|
</div>
|
|
<div id="add-quantity" name="add-quantity" class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa fa-plus"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-5">
|
|
<p class="m-b-0 small">Total</p>
|
|
<h6 class="no-margin bold text-complete">{{currency}} {{productTotal.toFixed(3)}}</h6>
|
|
</div>
|
|
<div class="col text-right">
|
|
<button class="btn btn-lg btn-outline-success b-rad-none" @click="updateProduct()">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import formHandler from '../../../general/mixins/formHandler';
|
|
export default {
|
|
props: {
|
|
editable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
currency:{
|
|
type: String,
|
|
required: true
|
|
},
|
|
index:{
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
isEdit: false,
|
|
product: {
|
|
stockCode: '',
|
|
description: '',
|
|
unit_price: 0,
|
|
},
|
|
products: []
|
|
}
|
|
},
|
|
created() {
|
|
this.product = this.data;
|
|
this.product.unit_price = (Math.round((this.product.unit_price+ Number.EPSILON) * 1000) / 1000).toFixed(3)
|
|
},
|
|
computed: {
|
|
productTotal(){
|
|
return this.product.quantity * parseFloat((this.product.unit_price).toString().replace(',', ''));
|
|
},
|
|
},
|
|
methods: {
|
|
updateQuantity(type){
|
|
if(!this.interval){
|
|
this.interval = setInterval(() => type === 'add' ? this.product.quantity++ : this.product.quantity > 1 ? this.product.quantity--:null , 80)
|
|
}
|
|
},
|
|
clearInterval(){
|
|
clearInterval(this.interval);
|
|
this.interval = false;
|
|
},
|
|
updateProduct(){
|
|
this.isEdit = !this.isEdit;
|
|
|
|
this.$emit('change', {
|
|
stockCode: this.product.stockCode,
|
|
description: this.product.description,
|
|
quantity: this.product.quantity,
|
|
unit_price: parseFloat((this.product.unit_price).toString().replace(',', '')),
|
|
total: this.productTotal
|
|
}, this.index);
|
|
},
|
|
onlyEnglish(event){
|
|
let value = event.target.value,
|
|
regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
|
|
|
|
event.preventDefault();
|
|
|
|
if(regex.test(value)){
|
|
this.product.description = value.replace(regex, '');
|
|
}
|
|
},
|
|
},
|
|
mixins: [formHandler]
|
|
}
|
|
</script>
|