cief/izyim
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git synced 2026-08-25 23:43:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Search Order Component

Browse Source
This commit is contained in:
hazim
2019-04-02 10:31:33 +08:00
parent 99d9cc9c4a
commit fb92d1ba16
2 changed files with 97 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/vue/components/common/OrdersSearchComponent.vue
+97
View File
@@ -0,0 +1,97 @@
<template>
<div class="col">
<div class="row">
<div class="col p-r-15 p-l-0">
<div class="row m-b-10">
<div class="col">
<div class="row p-b-5 p-t-5 bg-white tab-container">
<div class="col text-master">
<div class="row align-items-center justify-content-center">
<div class="col all-caps fs-12">
<input type="text" class="form-control no-border" v-model="query" @keyup="search()" placeholder="Order No" id="icon-filter" name="icon-filter">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-b-10">
<div class="col">
<div class="row p-b-5 p-t-5 bg-white tab-container">
<div class="col text-master">
<div class="row align-items-center justify-content-center">
<div class="col all-caps fs-7">
<date-picker-component class="no-border" placeholder="Start Date"></date-picker-component>
</div>
<div class="col-1 all-caps">
<strong>-</strong>
</div>
<div class="col all-caps fs-6">
<date-picker-component class="no-border" placeholder="Start Date"></date-picker-component>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-b-10">
<div class="col">
<div class="row p-b-5 p-t-5 bg-white tab-container">
<div class="col text-master">
<div class="row align-items-center justify-content-center">
<div class="col all-caps fs-6">
<select class="form-control no-border muted" v-model="selected">
<option disabled value="">Search By Status</option>
<option v-bind:value="{ string: Processing }">Processing</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="col-auto">-->
<!--&lt;!&ndash;<div class="text-success fs-12 bold">Advanced Search</div>&ndash;&gt;-->
<!--</div>-->
<!--<div class="col-1"></div>-->
</template>
<script>
export default {
props: {
'placeholder': {
type: String,
default: "Search user or group"
}
},
data(){
return {
query: "",
results: [],
isActive: false
}
},
methods: {
route: route,
search(){
if(this.query.length > 2 ){
fetch(route('api.company.search') + '?query=' + this.query).then(response => response.json())
.then(response => {
this.results = response.data;
this.isActive = true;
})
.catch(error => console.log(error))
} else {
this.isActive = false;
}
},
closeSearch(){
this.query = '';
this.isActive = false;
},
}
}
</script>
resources/assets/vue/components/order/lists/SearchOrdersComponent.vue
View File