diff --git a/src/components/SearchToolbar.vue b/src/components/SearchToolbar.vue index 6ad55da209466f7c1e102bdbccfc2ed6f38f478f..07aaf3a51a163d5172a57cd18dce107ba2586420 100644 --- a/src/components/SearchToolbar.vue +++ b/src/components/SearchToolbar.vue @@ -1,33 +1,46 @@ <template> <v-card rounded="xl"> - <v-container fluid> + <v-container fluid v-if="expanded || $vuetify.breakpoint.mdAndUp"> <v-row > <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3"> - <v-select + <v-autocomplete + + auto-select-first + v-model="$parent.pos_selected" hide-details :menu-props="{ offsetY: true }" :dense="$vuetify.breakpoint.smAndDown" - label="Avgrens etter ordklasse" + label="Ordklasse" :items="pos_items" append-icon="expand_more" @input="updatePos"> - </v-select> + </v-autocomplete> </v-col> <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3"> - <v-select - v-model="$parent.scope" - hide-details - :menu-props="{ offsetY: true }" + <v-checkbox + v-model="inflected_results" :dense="$vuetify.breakpoint.smAndDown" - label="Søk i" - :items="scope_items" - append-icon="expand_more" - @input="updateScope"> - </v-select> + label="Vis bøyde former"/> + </v-col> - </v-row> + <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3"> + + <v-checkbox + v-model="fulltext" + :dense="$vuetify.breakpoint.smAndDown" + label="Fulltekstsøk"/> + </v-col> + </v-row> + </v-container> + <v-btn v-if="$vuetify.breakpoint.smAndDown" + class="search_options" + + text + + @click="expanded=!expanded"> + <v-icon>{{expanded ? 'expand_less': 'filter_alt'}}</v-icon>{{expanded? '' : 'Søkealternativer'}}</v-btn> </v-card> </template> @@ -36,9 +49,41 @@ export default { name: "SearchToolbar", + data: function() { + return { + expanded: false + + } + }, computed: { + inflected_results: { + get() { + return this.$parent.scope.includes("b") + }, + set() { + if (this.$parent.scope.includes("b")) { + this.$emit('updateScope', this.$parent.scope.replace("b","")) + } + else { + this.$emit('updateScope', this.$parent.scope + "b") + } + } + }, + fulltext: { + get() { + return this.$parent.scope.includes("x") + }, + set() { + if (this.$parent.scope.includes("x")) { + this.$emit('updateScope', this.$parent.scope.replace("x","")) + } + else { + this.$emit('updateScope', this.$parent.scope + "x") + } + } + }, pos_items: function() { - return ["ALL", "NOUN", "PRON","DET","ADJ","CCONJ","SCONJ", "ADV", "VERB", "INTJ"].map(text =>{ + return ["NOUN", "PRON","DET","ADJ","CCONJ","SCONJ", "ADV", "VERB", "INTJ"].map(text =>{ return {text: this.$t("pos." + text ), value: text} }) }, @@ -49,11 +94,12 @@ export default { } }, methods: { - updatePos (pos) { - this.$emit('updatePos', pos) + reset (pos) { + this.$emit('updatePos', "ALL") + this.$emit('updateScope', "wb") }, - updateScope (scope) { - this.$emit('updateScope', scope) + updatePos (pos) { + this.$emit('updatePos', pos || 'ALL') } } } @@ -62,7 +108,7 @@ export default { <style scoped> .v-card { - padding-top: 0px !important; + padding-top: 10px !important; padding-left: 24px !important; padding-right: 24px !important; padding-bottom: 10px !important; @@ -71,6 +117,13 @@ export default { margin-left: 10px; } +.search_options { + justify-content: center; + + padding-right: 24px !important; + width: 100%; +} + </style>