mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
update booking details ui to be more mobile friendly
This commit is contained in:
omair saleh
+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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user