mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
last mile delivery search order ui and search order number function
This commit is contained in:
+82
-4
@@ -6,8 +6,58 @@
|
||||
<div class="col">
|
||||
<div class="row m-b-15" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
|
||||
<div class="col-auto p-r-5">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<div class="row m-l-0 m-r-0 bg-master-light padding-10" @keyup.enter="submitSearch()">
|
||||
<div class="col-12 col-md mb-2 mb-md-0">
|
||||
<div class="row">
|
||||
<div class="col p-r-0 h-100">
|
||||
<validation-wrapper-component :validator="$v.orderNumber">
|
||||
<label class="all-caps">Order Number</label>
|
||||
<input class="form-control" v-model.lazy="orderNumber">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md mb-2 mb-md-0">
|
||||
<div class="row">
|
||||
<div class="col p-r-0 h-100">
|
||||
<validation-wrapper-component :validator="$v.orderMarking">
|
||||
<label class="all-caps">Marking</label>
|
||||
<input class="form-control" v-model.lazy="orderMarking">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md mb-2 mb-md-0">
|
||||
<div class="row">
|
||||
<div class="col p-r-0 h-100">
|
||||
<validation-wrapper-component :validator="$v.orderSenderName">
|
||||
<label class="all-caps">Sender Name</label>
|
||||
<input class="form-control" v-model.lazy="orderSenderName">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto mb-2 mb-md-0">
|
||||
<div class="row h-100">
|
||||
<div class="col p-r-0 h-100">
|
||||
<div class="btn btn-primary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30" @click="submitSearch()">
|
||||
Search
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-l-0 h-100">
|
||||
<div class="btn btn-secondary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30" @click="resetSearch()">
|
||||
Reset
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a :href="route('last_mile_delivery.order.export') + '?ids=' + JSON.stringify(selectedOrderId)" target="_blank">
|
||||
<button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-complete b-rad-none">
|
||||
<button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-complete b-rad-none">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto p-r-0 p-l-0">
|
||||
<i class="fa fa-file-excel-o fs-16"></i>
|
||||
@@ -47,7 +97,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="data in $store.getters.getListData(section)">
|
||||
<tr v-for="data in orderData">
|
||||
<td class="col-auto pointer align-items-center" @click="selectOrder(data.id)" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
|
||||
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectedOrderId.includes(data.id), 'fa-check-square': selectedOrderId.includes(data.id), 'text-complete': selectedOrderId.includes(data.id)}" ></i>
|
||||
</td>
|
||||
@@ -73,7 +123,7 @@
|
||||
<td>{{data.delivery_address.street_one+' '+(data.delivery_address.street_two ? data.delivery_address.street_two : '')+', '+ data.delivery_address.district.name+', '+data.delivery_address.post_code+' '+data.delivery_address.state.name+', '+data.delivery_address.country.name}}</td>
|
||||
<td>{{data.delivery_address.contact.phone}}</td>
|
||||
</tr>
|
||||
<tr v-if="$store.getters.getListData(section).length === 0">
|
||||
<tr v-if="orderData.length === 0">
|
||||
<td colspan="100%" class="text-center">No data available in table</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -101,12 +151,16 @@
|
||||
data(){
|
||||
return {
|
||||
section: 'ListOrderTableSection',
|
||||
orderData: [],
|
||||
selectAllOrder: false,
|
||||
selectedOrderId: [],
|
||||
emptyListSection: false,
|
||||
filters: this.data ? {
|
||||
company_module_id: this.data.company_module.id,
|
||||
per_page: 20,
|
||||
reference_like: '',
|
||||
orderMarking: '',
|
||||
orderSenderName: '',
|
||||
status_in: [2],
|
||||
order_by: {
|
||||
column: 'id',
|
||||
@@ -114,6 +168,9 @@
|
||||
},
|
||||
} : {
|
||||
per_page: 100,
|
||||
reference_like: '',
|
||||
orderMarking: '',
|
||||
orderSenderName: '',
|
||||
status_in: [2],
|
||||
order_by: {
|
||||
column: 'id',
|
||||
@@ -126,8 +183,16 @@
|
||||
total: null,
|
||||
current_page: null,
|
||||
},
|
||||
orderNumber: '',
|
||||
orderMarking: '',
|
||||
orderSenderName: ''
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
orderNumber: { },
|
||||
orderMarking: { },
|
||||
orderSenderName: { }
|
||||
},
|
||||
created(){
|
||||
this.setDecoratorDefault();
|
||||
this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
|
||||
@@ -147,12 +212,16 @@
|
||||
methods: {
|
||||
fetchList(){
|
||||
let listDecorators = this.$store.getters.getListDetails(this.section);
|
||||
listDecorators.filters.reference_like = this.orderNumber;
|
||||
listDecorators.filters.orderMarking = this.orderMarking;
|
||||
listDecorators.filters.orderSenderName = this.orderSenderName;
|
||||
this.submit(this.route('api.delivery.order.list') + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters), 'get', this.section, false, false)
|
||||
},
|
||||
successHandler(response){
|
||||
this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
|
||||
this.$refs.pagination.makePagination(response.payload.meta, response.payload.links);
|
||||
this.metaData = response.payload.meta;
|
||||
this.orderData = response.payload.data;
|
||||
},
|
||||
chooseAllOrder(){
|
||||
this.selectAllOrder = !this.selectAllOrder;
|
||||
@@ -166,7 +235,16 @@
|
||||
selectOrder(orderId){
|
||||
this.selectedOrderId.includes(orderId) ? this.selectedOrderId.splice(this.selectedOrderId.indexOf(orderId), 1) : this.selectedOrderId.push(orderId);
|
||||
this.selectedOrderId.length === this.$store.getters.getListData(this.section).length ? this.selectAllOrder = true : this.selectAllOrder = false;
|
||||
}
|
||||
},
|
||||
submitSearch(){
|
||||
this.fetchList();
|
||||
},
|
||||
resetSearch() {
|
||||
this.orderNumber = '';
|
||||
this.orderMarking = '';
|
||||
this.orderSenderName = '';
|
||||
this.fetchList();
|
||||
},
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user