diff --git a/src/components/Features.vue b/src/components/Features.vue index f017e33f9be8501da9154de1d2c6c01912f4bd78..67c7b081b38ba2a8a8ed9724c5f713617a7fd338 100644 --- a/src/components/Features.vue +++ b/src/components/Features.vue @@ -16,33 +16,39 @@ <!-- ></v-select> --> <!-- </v-flex> --> - <v-flex xs12 sm4> + <v-flex xs12 md3> <v-text-field v-model="feature_category" type="text" label="Category" - @keyup.enter.native="find"> + @keyup.enter.native="validate"> </v-text-field> </v-flex> - <v-flex xs12 sm4> + <v-flex xs12 md3> <v-text-field v-model="feature_type" type="text" label="Type" - @keyup.enter.native="find"> + @keyup.enter.native="validate"> </v-text-field> </v-flex> - <v-flex xs12 sm4> + <v-flex xs12 md3> <v-text-field v-model="feature_subtype" type="text" label="Subtype" - @keyup.enter.native="find"> + @keyup.enter.native="validate"> </v-text-field> </v-flex> + <v-flex xs12 md3> + <v-btn @click="validate" color="blue-grey darken-2" class="white--text">Search</v-btn> + <v-btn @click="clear" color="blue-grey darken-2" class="white--text">Clear</v-btn> + </v-flex> + <v-flex xs12> - <v-btn @click="find" color="blue darken-4" class="white--text">Search</v-btn> - <v-btn @click="clear" color="blue darken-4" class="white--text">Clear</v-btn> + <v-alert outline color="lime darken-2" icon="warning" :value="invalid"> + Invalid Search - Please enter at least one parameter + </v-alert> </v-flex> <!-- Progress Bar --> @@ -89,10 +95,11 @@ export default { data () { return { header: 'Feature Search', + invalid: false, searching: false, - feature_category: null, - feature_type: null, - feature_subtype: null, + feature_category: '', + feature_type: '', + feature_subtype: '', results: null, letters: [ { text: 'All' } @@ -119,8 +126,16 @@ export default { this.results = data.body this.searching = false }) + }, + validate () { + var invalid = this.feature_category.length === 0 && this.feature_subtype.length === 0 && this.feature_subtype.length === 0 + if (invalid) { + this.invalid = true + } else { + this.invalid = false + this.find() + } } - }, computed: { countedHits: function () { diff --git a/src/components/Search.vue b/src/components/Search.vue index 7f7f651399b55e8b9f7c4cf70d02c37a7f1af2bf..59ad35c18c08a2da494caf54bb13e479e4070d5a 100644 --- a/src/components/Search.vue +++ b/src/components/Search.vue @@ -21,7 +21,7 @@ </v-expansion-panel> </v-flex> - <v-flex xs12> + <v-flex xs12 md9> <v-text-field v-model="search" label="Query" @@ -29,9 +29,15 @@ required @keyup.enter.native="validate" ></v-text-field> - <v-btn @click="validate" color="blue darken-4" class="white--text">Search</v-btn> - <v-btn @click="clear" color="blue darken-4" class="white--text">Clear</v-btn> - <v-alert outline color="error" icon="warning" :value="invalid"> + </v-flex> + + <v-flex xs12 md3> + <v-btn @click="validate" color="blue-grey darken-2" class="white--text">Search</v-btn> + <v-btn @click="clear" color="blue-grey darken-2" class="white--text">Clear</v-btn> + </v-flex> + + <v-flex xs12> + <v-alert outline color="lime darken-2" icon="warning" :value="invalid"> Invalid Search Query </v-alert> </v-flex>