last mile delivery search order ui and search order number function

This commit is contained in:
edmondlang
2022-04-07 22:54:02 +08:00
parent d9eeaf4bef
commit 87116d29c9
@@ -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]
}