mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-30 09:53:58 +00:00
update booking details ui to be more mobile friendly
This commit is contained in:
omair saleh
@@ -6,6 +6,7 @@ namespace App\Classes\General\Eloquent;
|
||||
use App\Classes\Exceptions\ResourceNotFoundException;
|
||||
use Illuminate\Database\Eloquent\Builder;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Psy\Exception\ErrorException;
|
||||
|
||||
abstract class AbstractFetchRecord extends AbstractGetRecord
|
||||
{
|
||||
|
||||
@@ -1,22 +1,9 @@
|
||||
<template>
|
||||
<div class="row zig-zag-top">
|
||||
<div class="col bg-white padding-25">
|
||||
<div class="row p-b-20 b-b b-dashed m-b-20 b-grey" v-if="defaultAddress[0]">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row m-b-15" v-if="defaultAddress">
|
||||
<div class="col">
|
||||
<div class="row m-b-5">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps bold fs-10">Default Billing Address</div>
|
||||
<div class="font-heading fs-10">
|
||||
{{defaultAddress[0].street_one}} {{defaultAddress[0].street_two}}, {{defaultAddress[0].district.name}}, {{defaultAddress[0].post_code}} {{defaultAddress[0].state.name}}, {{defaultAddress[0].country.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row p-b-20 b-b b-dashed b-grey m-b-20">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="row" v-if="!createAddress">
|
||||
<div class="col">
|
||||
<div class="row m-b-10" v-if="billingAddress.length > 0">
|
||||
<div class="col">
|
||||
@@ -24,7 +11,7 @@
|
||||
<div class="col-auto p-l-0">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-auto">
|
||||
<div class="fs-10 all-caps">List of Address </div>
|
||||
<div class="font-heading fs-10 muted all-caps">Address Book</div>
|
||||
</div>
|
||||
<div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">
|
||||
<i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>
|
||||
@@ -33,20 +20,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col p-r-0">
|
||||
<div class="col">
|
||||
<div class="btn btn-xs btn-default bg-transparent text-master btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="addressDropdownLaunch.status = !addressDropdownLaunch.status">
|
||||
<div class="row">
|
||||
<div class="col p-t-10 p-b-5 ">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading bold lh-15">{{selectedAddress.street_one}}{{selectedAddress.street_two ? ', ': ''}}{{selectedAddress.street_two}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10 muted"><b class="m-r-5 text-primary">{{selectedAddress.post_code}}</b> {{selectedAddress.district.name}}</div>
|
||||
<div class="font-heading bold lh-15">{{selectedAddress.street_one}}{{selectedAddress.street_two}}, {{selectedAddress.district.name}} {{selectedAddress.post_code}} {{selectedAddress.state.name}}, {{selectedAddress.country.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,13 +51,7 @@
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<!-- <div class="font-heading bold lh-15 fs-10">{{address.post_code ? address.post_code + ' - ':''}}{{address.post_code}}</div> -->
|
||||
<div class="font-heading bold lh-15 fs-10">{{address.street_one}}{{selectedAddress.street_two ? ', ': ''}}{{address.street_two}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10 muted"><b class="m-r-5 text-primary">{{address.post_code}}</b> {{address.district.name}}</div>
|
||||
<div class="font-heading bold lh-15 fs-10">{{address.street_one}} {{address.street_two}}, {{address.district.name}} {{address.post_code}} {{address.state.name}}, {{address.country.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,16 +82,19 @@
|
||||
</div>
|
||||
<div class="row" v-show="createAddress">
|
||||
<div class="col">
|
||||
<div>Address form</div>
|
||||
<address-form-component :id="company_id" :type="2" v-on:createdAddress="updateAddress($event)" v-on:close="createAddress = !createAddress"></address-form-component>
|
||||
<p class="link text-complete text-underline pointer text-center" @click="createAddress = false">Select from address book</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<set-default-billing-address-component :section="section" :data="item" v-if="item.id != null && defaultAddress[0].id != item.id" v-on:updateBillingAddress="updateBillingAddress($event)"></set-default-billing-address-component>
|
||||
<div class="row" v-if="selectedAddress">
|
||||
<div class="col">
|
||||
<set-default-billing-address-component :section="section" :data="selectedAddress" v-if="selectedAddress.id !== defaultAddress.id" v-on:updateBillingAddress="updateBillingAddress($event)"></set-default-billing-address-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,9 +119,6 @@
|
||||
status: false
|
||||
},
|
||||
selectedAddress: null,
|
||||
item:{
|
||||
id:null
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -151,13 +127,14 @@
|
||||
},
|
||||
defaultAddress: function() {
|
||||
let defaultAddress = this.billingAddress.filter(function(item) {
|
||||
return item.billing == 1;
|
||||
return item.billing === 1;
|
||||
});
|
||||
if(!this.selectedAddress){
|
||||
this.selectedAddress = defaultAddress[0];
|
||||
}
|
||||
return defaultAddress;
|
||||
}
|
||||
return defaultAddress[0];
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
pendingQueue(inComplete){
|
||||
@@ -176,15 +153,11 @@
|
||||
successHandler(response){
|
||||
this.billingAddress = response.payload.data;
|
||||
},
|
||||
errorHandler(){
|
||||
// window.location.href = this.route('dashboard')
|
||||
},
|
||||
updateAddress(address){
|
||||
console.log(address);
|
||||
this.addressDropdownLaunch.status = false;
|
||||
this.selectedAddress = address;
|
||||
this.createAddress = false;
|
||||
this.fetchBillingAddress();
|
||||
this.item.id = address.id;
|
||||
},
|
||||
updateBillingAddress(address){
|
||||
this.id = address;
|
||||
|
||||
@@ -1,46 +1,78 @@
|
||||
<template>
|
||||
<div class="row p-t-25 text-left">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="row" v-if="step === 1">
|
||||
<div class="col">
|
||||
<div class="row m-b-15">
|
||||
<div class="col-6 p-r-5">
|
||||
<validation-wrapper-component selecatable :validator="$v.parameters.district_id">
|
||||
<label>District</label>
|
||||
<selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col-4 p-l-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.post_code">
|
||||
<label>Post Code</label>
|
||||
<input class="form-control" name="post_code" v-model="parameters.post_code">
|
||||
</validation-wrapper-component>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.street_one">
|
||||
<label>Address Line 1</label>
|
||||
<input class="form-control" name="street_one" v-model="parameters.street_one">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.street_two">
|
||||
<label>Address Line 2</label>
|
||||
<input class="form-control" name="street_two" v-model="parameters.street_two">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col-7 p-r-5">
|
||||
<validation-wrapper-component selecatable :validator="$v.parameters.district_id">
|
||||
<label>District</label>
|
||||
<selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col-5 p-l-5">
|
||||
<validation-wrapper-component :validator="$v.parameters.post_code">
|
||||
<label>Post Code</label>
|
||||
<input class="form-control" name="post_code" v-model="parameters.post_code">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.street_one">
|
||||
<label>Address Line 1</label>
|
||||
<input class="form-control" name="street_one" v-model="parameters.street_one">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.street_two">
|
||||
<label>Address Line 2</label>
|
||||
<input class="form-control" name="street_two" v-model="parameters.street_two">
|
||||
</validation-wrapper-component>
|
||||
<div class="row">
|
||||
<div class="col text-right">
|
||||
<button type="button" class="btn btn-sm btn-success btn-block b-rad-none" @click="updateStep(2)">{{(type === 3) ? "Update" : "Save" }} Billing Address</button>
|
||||
<button v-show="type === 3" type="button" class="btn btn-sm bg-master-lighter b-rad-none m-l-5" @click="closeForm()">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="row" v-if="step === 2">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col text-right">
|
||||
<button type="button" class="btn btn-sm btn-success b-rad-none" @click="submitForm()">{{(this.type==3)?"Update":"Create"}} Billing Address</button>
|
||||
<button v-show="this.type==3" type="button" class="btn btn-sm bg-master-lighter b-rad-none m-l-5" @click="closeForm()">Cancel</button>
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="padding-15 bg-master-lightest">
|
||||
<p class="muted">Billing Address</p>
|
||||
<p class="m-b-0">{{parameters.street_one}} {{parameters.street_two}}, {{districts[parseFloat(parameters.district_id) - 1].city}} {{parameters.post_code}} {{districts[parseFloat(parameters.district_id) - 1].state.name}}, {{districts[parseFloat(parameters.district_id) - 1].country.name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-15">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-5">
|
||||
<button type="button" class="btn btn-sm bg-master-lighter b-rad-none" @click="updateStep(1)">Edit Billing Address</button>
|
||||
</div>
|
||||
<div class="col p-l-0">
|
||||
<button type="button" class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Confirm Billing Address</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,8 +116,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
districts () {
|
||||
return this.$store.getters.getSelectableList('original_districtListSection');
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
step: 1,
|
||||
parameters : {
|
||||
company_id: this.id,
|
||||
street_one: '',
|
||||
@@ -105,8 +143,15 @@
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
updateStep(step){
|
||||
if(step === 2){
|
||||
if(!this.validate()){ return; }
|
||||
}
|
||||
|
||||
this.step = step
|
||||
},
|
||||
submitForm(){
|
||||
if(this.type==3){
|
||||
if(this.type === 3){
|
||||
this.submit((this.route('api.address.update',this.addressData.id)), 'put', 'bookingDetailSection', true, true)
|
||||
}else {
|
||||
this.submit((this.route('api.address.create')), 'post', 'bookingDetailSection', true, true)
|
||||
@@ -116,7 +161,7 @@
|
||||
this.$root.$emit('updateAddressForm', {}, false);
|
||||
},
|
||||
successHandler(response){
|
||||
if(this.type==3){
|
||||
if(this.type === 3){
|
||||
this.closeForm();
|
||||
this.$store.dispatch('reloadList', {'name': "addresslist"});
|
||||
}else {
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-lg btn-success b-rad-none all-caps fs-12" @click="submitForm()">Set as default</button>
|
||||
<button class="btn btn-block btn-sm btn-success b-rad-none" @click="submitForm()">Update Default Billing Address</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -2,74 +2,77 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row no-margin">
|
||||
<div class="col p-t-25 p-t-25">
|
||||
<div class="row">
|
||||
<div class="col p-b-10 b-b b-grey">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto p-r-0" style="min-width: 40px;">
|
||||
<div class="font-heading all-caps fs-10"></div>
|
||||
</div>
|
||||
<div class="col p-r-5">
|
||||
<div class="font-heading all-caps fs-10 muted">Stock Code</div>
|
||||
</div>
|
||||
<div class="col-4 p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10 muted">description</div>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10 muted">quantity</div>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10 muted">Unit Price</div>
|
||||
</div>
|
||||
<div class="col-1 text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10 muted"></div>
|
||||
</div>
|
||||
<div class="col-1 text-right p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10 muted">Total</div>
|
||||
</div>
|
||||
<div class="col-auto text-center">
|
||||
<button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-check"></i></button>
|
||||
<button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-pencil"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-b-15 p-l-0 p-r-0">
|
||||
<div class="row align-items-center m-b-10">
|
||||
<div class="col">
|
||||
<div class="fs-14 bold m-b-5">Purchase Order</div>
|
||||
<p class="m-b-0 hint-text fs-12">In order for us to process your order, you will need to provide us with your purchase order information.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<div class="row" v-if="!submitted">
|
||||
<div class="col p-b-5 p-t-5 b-b b-grey">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto p-r-0" style="min-width: 40px;">
|
||||
<div class="font-heading all-caps fs-10"></div>
|
||||
</div>
|
||||
<div class="col p-r-5">
|
||||
<input type="text" class="form-control fs-10 b-rad-none" placeholder="Stock Code" v-model="product.stockCode" />
|
||||
</div>
|
||||
<div class="col-4 p-r-5 p-l-5">
|
||||
<textarea class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity" v-mask="'#########'"/>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
|
||||
</div>
|
||||
<div class="col-1 text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{data.fixed_currency.short_code}}</div>
|
||||
</div>
|
||||
<div class="col-1 text-right p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-xs btn-outline-success b-rad-none" @click="addProduct()"><i class="fa fa-check"></i></button>
|
||||
<button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-pencil"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-20" v-for="(product, index) in products">
|
||||
<div class="col p-b-10 p-t-10 b-b b-grey">
|
||||
<purchase-order-item-form-component :data="product" :index="index" :currency="data.fixed_currency.short_code" :editable="!submitted" :section="section" @change="updateProduct($event, index)" v-on:remove="removeProduct(index)"></purchase-order-item-form-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-for="(product, index) in products">
|
||||
<div class="col p-b-10 p-t-10 b-b b-grey">
|
||||
<purchase-order-item-form-component :data="product" :index="index" :currency="data.fixed_currency.short_code" :editable="!submitted" :section="section" @change="updateProduct($event, index)" v-on:remove="removeProduct(index)"></purchase-order-item-form-component>
|
||||
<div class="row" v-if="!submitted">
|
||||
<div class="col">
|
||||
<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 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 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 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 class="col-auto bg-master-lightest 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 type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
|
||||
</div>
|
||||
<div class="col-auto bg-master-lightest 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-4">
|
||||
<p class="m-b-0 small">Total</p>
|
||||
<p class="m-b-0 bold text-complete fs-16">{{data.fixed_currency.short_code}} {{productTotal.toFixed(3)}}</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-lg btn-block btn-success b-rad-none" @click="addProduct()"><i class="fa fa-check"></i> Add Product</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -166,13 +169,14 @@
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
interval:false,
|
||||
submitted: false,
|
||||
product: {
|
||||
stockCode: '',
|
||||
description: '',
|
||||
quantity: 1,
|
||||
unit_price: 0,
|
||||
},
|
||||
product: {
|
||||
stockCode: '',
|
||||
description: '',
|
||||
quantity: 1,
|
||||
unit_price: 0,
|
||||
},
|
||||
products: [],
|
||||
}
|
||||
},
|
||||
@@ -182,7 +186,7 @@
|
||||
},
|
||||
computed: {
|
||||
productTotal(){
|
||||
return this.product.quantity * parseFloat((this.product.unit_price).toString().replace(',', ''));
|
||||
return this.product.quantity * parseFloat((this.product.unit_price).toString().replaceAll(',', ''));
|
||||
},
|
||||
poTotal(){
|
||||
return this.products.reduce(function(last, product) {
|
||||
@@ -191,6 +195,15 @@
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
onlyEnglish(event){
|
||||
let value = event.target.value,
|
||||
regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
|
||||
|
||||
+151
-29
@@ -1,34 +1,147 @@
|
||||
<template>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto p-r-0" style="min-width: 40px;">
|
||||
<div class="font-heading all-caps fs-10">{{index + 1}}</div>
|
||||
</div>
|
||||
<div class="col p-r-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.stockCode}}</div>
|
||||
<input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none" placeholder="Stock Code" v-model="product.stockCode" />
|
||||
</div>
|
||||
<div class="col-4 p-r-5 p-l-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.description}}</div>
|
||||
<textarea v-if="isEdit" class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.quantity}}</div>
|
||||
<input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity" v-mask="'#########'"/>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.unit_price}}</div>
|
||||
<input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
|
||||
</div>
|
||||
<div class="col-1 text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{currency}}</div>
|
||||
</div>
|
||||
<div class="col-1 text-right p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="col-auto" :class="[{'invisible': !editable}]">
|
||||
<button class="btn btn-xs btn-outline-danger b-rad-none" @click="$emit('remove')"><i class="fa fa-times"></i></button>
|
||||
<button v-if="!isEdit" class="btn btn-xs btn-outline-warning b-rad-none" @click="isEdit = !isEdit"><i class="fa fa-pencil"></i></button>
|
||||
<button v-if="isEdit" class="btn btn-xs btn-outline-success b-rad-none" @click="updateProduct()"><i class="fa fa-check"></i></button>
|
||||
<div class="col">
|
||||
<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 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 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 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 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 type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
|
||||
</div>
|
||||
<div 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-4">
|
||||
<p class="m-b-0 small">Total</p>
|
||||
<p class="m-b-0 bold text-complete fs-16">{{currency}} {{productTotal.toFixed(3)}}</p>
|
||||
</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 class="row" v-if="!isEdit">
|
||||
<div class="col">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<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">
|
||||
<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 fs-16">{{currency}} {{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2)}}</p>
|
||||
<p class="m-b-0 text-complete text-underline pointer" @click="isEdit = !isEdit">Edit this item?</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row hide">
|
||||
<div class="col-auto p-r-0" style="min-width: 40px;">
|
||||
<div class="font-heading all-caps fs-10">{{index + 1}}</div>
|
||||
</div>
|
||||
<div class="col p-r-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.stockCode}}</div>
|
||||
<input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none" placeholder="Stock Code" v-model="product.stockCode" />
|
||||
</div>
|
||||
<div class="col-4 p-r-5 p-l-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.description}}</div>
|
||||
<textarea v-if="isEdit" class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.quantity}}</div>
|
||||
<input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity" v-mask="'#########'"/>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.unit_price}}</div>
|
||||
<input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
|
||||
</div>
|
||||
<div class="col-1 text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{currency}}</div>
|
||||
</div>
|
||||
<div class="col-1 text-right p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="col-auto" :class="[{'invisible': !editable}]">
|
||||
<button class="btn btn-xs btn-outline-danger b-rad-none" @click="$emit('remove')"><i class="fa fa-times"></i></button>
|
||||
<button v-if="!isEdit" class="btn btn-xs btn-outline-warning b-rad-none" @click="isEdit = !isEdit"><i class="fa fa-pencil"></i></button>
|
||||
<button v-if="isEdit" class="btn btn-xs btn-outline-success b-rad-none" @click="updateProduct()"><i class="fa fa-check"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -70,6 +183,15 @@
|
||||
},
|
||||
},
|
||||
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;
|
||||
|
||||
|
||||
+108
-90
File diff suppressed because one or more lines are too long
@@ -42,6 +42,8 @@
|
||||
}).join(': ')
|
||||
};
|
||||
});
|
||||
this.$store.dispatch('updateListQueue', {name: 'original_'+this.section});
|
||||
this.$store.dispatch('completeList', {name: 'original_'+this.section, data: response.payload.data});
|
||||
|
||||
this.$store.dispatch('completeList', {name: this.section, data: mappedList})
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@extends('layouts.base')
|
||||
|
||||
@section('content')
|
||||
<div class="row d-md-none" v-if="$store.getters.isShowing('sideMenu')">
|
||||
<div class="row d-md-none" style="display: none;" v-show="$store.getters.isShowing('sideMenu')" >
|
||||
<div class="col absolute bg-master w-100 h-100" style="opacity: 0.3; z-index: 9998; left: 0px;"></div>
|
||||
<div class="col-8 bg-master-lightest position-fixed h-100" style="z-index: 9999" >
|
||||
@include('partials.menu')
|
||||
|
||||
Reference in New Issue
Block a user