Skip to content
Snippets Groups Projects
Commit dc54059a authored by Erwan Rouchet's avatar Erwan Rouchet
Browse files

Merge branch 'fix-search-fields-origanisation' into 'master' 

Fix search fields origanisation

See merge request !113
parents 92836e54 c2f3d9b6
No related branches found
No related tags found
1 merge request!113Fix search fields origanisation
Hide whitespace changes
Inline Side-by-side
js/config.js
+ 2
− 0
View file @ dc54059a
......@@ -66,6 +66,8 @@ export const MONTHS = [
export const IMPORT_POLLING_DELAY = 1500
export const TASK_POLLING_DELAY = 1500
export const DEFAULT_SEARCH_SCORE = 0.7
export const API_BASE_URL = process.env.API_BASE_URL
export const CSRF_COOKIE_NAME = process.env.CSRF_COOKIE || 'arkindex.csrf'
export const CSRF_COOKIE_HEADER = 'X-CSRFToken'
......
vue/Search/DateInput.vue
+ 4
− 2
View file @ dc54059a
......@@ -26,6 +26,9 @@ export default {
currentDate: '',
dateValidated: true,
}),
mounted () {
this.currentDate = this.value
},
watch: {
currentDate (newValue) {
this.dateValidated = !this.currentDate.length
......@@ -35,7 +38,7 @@ export default {
this.$emit('valid', this.dateValidated)
},
value (newValue) {
this.currentDate = this.value
this.currentDate = newValue
}
},
}
......@@ -43,7 +46,6 @@ export default {
<style>
.date_input {
max-width: 15ch;
margin-left: 1ch;
font-size: inherit;
border: none;
......
vue/Search/SearchForm.vue
+ 93
− 66
View file @ dc54059a
<template>
<form v-on:submit.prevent="search()">
<div class="columns is-desktop">
<div class="field has-addons">
<div class="control">
<span class="select">
<select v-model="currentCorpus" :disabled="loading">
<option value="" selected>All corpuses</option>
<option v-for="c in corpora" :key="c.id" :value="c.id">{{ c.name }}</option>
</select>
</span>
</div>
<div class="control is-expanded">
<input
class="input"
v-model="currentTerms"
type="text"
placeholder="Search terms..."
:disabled="loading"
/>
</div>
<div class="control">
<button
type="submit"
class="button is-primary"
:disabled="!currentTerms || currentTerms.trim() === '' || loading"
:class="{ 'is-loading' : loading }"
>
<span class="icon"><i class="icon-search"></i></span>
<span>Search</span>
</button>
</div>
</div>
<div class="column is-narrow is-paddingless" v-on:click="toggleFilters">
<a>{{ filtersOpen ? '⏷ Less' : '⏵ More' }} filters</a>
</div>
<div class="columns is-desktop" v-if="filtersOpen">
<div class="column">
<div class="field has-addons">
<div class="control">
<span class="select">
<select v-model="currentCorpus" :disabled="loading">
<option value="" selected>All corpuses</option>
<option v-for="c in corpora" :key="c.id" :value="c.id">{{ c.name }}</option>
</select>
</span>
</div>
<div class="columns is-mobile is-vcentered">
<!--
<div class="control">
<span class="select">
......@@ -21,63 +46,54 @@
</span>
</div>
-->
<div class="control">
<input
class="input"
v-model="currentTerms"
type="text"
placeholder="Search terms..."
:disabled="loading"
/>
</div>
<div class="control has-icons-left">
<date-input
class="input"
v-model="currentDateGte"
v-on:valid="errors.dateGte = dateError($event)"
v-on:input="submitted = false"
/>
<span class="icon is-left">
<b class="text_icon">From</b>
</span>
<span
class="help is-danger"
v-if="submitted && errors.dateGte"
>{{ errors.dateGte }}</span>
</div>
<div class="control has-icons-left">
<date-input
class="input"
v-model="currentDateLte"
v-on:valid="errors.dateLte = dateError($event)"
v-on:input="submitted = false"
/>
<span class="icon is-left">
<b class="text_icon">To</b>
</span>
<span
class="help is-danger"
v-if="submitted && errors.dateLte"
>{{ errors.dateLte }}</span>
<span
class="help is-danger"
v-if="submitted && errors.dateRelation"
>{{ errors.dateRelation }}</span>
<div class="column is-narrow">
<label class="label">
<abbr title="Filters results by upper and/or lower bound; items without date will be removed.">
Date range
</abbr>
</label>
</div>
<div class="control">
<button
type="submit"
class="button is-primary"
:disabled="!currentTerms || currentTerms.trim() === '' || loading"
:class="{ 'is-loading' : loading }"
>
<span class="icon"><i class="icon-search"></i></span>
<span>Search</span>
</button>
<div class="column">
<div class="field has-addons">
<div class="control has-icons-left">
<date-input
class="input"
v-model="currentDateGte"
v-on:valid="errors.dateGte = dateError($event)"
v-on:input="submitted = false"
/>
<span class="icon is-left">
<b class="text_icon">From</b>
</span>
<span
class="help is-danger"
v-if="submitted && errors.dateGte"
>{{ errors.dateGte }}</span>
</div>
<div class="control has-icons-left">
<date-input
class="input"
v-model="currentDateLte"
v-on:valid="errors.dateLte = dateError($event)"
v-on:input="submitted = false"
/>
<span class="icon is-left">
<b class="text_icon">To</b>
</span>
<span
class="help is-danger"
v-if="submitted && errors.dateLte"
>{{ errors.dateLte }}</span>
<span
class="help is-danger"
v-if="submitted && errors.dateRelation"
>{{ errors.dateRelation }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="column is-narrow">
<div class="column">
<div class="columns is-mobile is-vcentered">
<div class="column is-narrow">
<label class="label">
......@@ -113,6 +129,7 @@
<script>
import { mapState } from 'vuex'
import DateInput from './DateInput'
import { DEFAULT_SEARCH_SCORE } from '../../js/config'
export default {
components: {
DateInput
......@@ -132,7 +149,7 @@ export default {
},
score: {
type: Number,
default: 0.7
default: DEFAULT_SEARCH_SCORE
},
dateGte: {
type: String,
......@@ -146,7 +163,7 @@ export default {
data: () => ({
currentTerms: '',
currentCorpus: '',
currentScore: 0.7,
currentScore: DEFAULT_SEARCH_SCORE,
currentDateGte: '',
currentDateLte: '',
errors: {
......@@ -154,15 +171,19 @@ export default {
dateLte: null,
dateRelation: null
},
filtersOpen: false,
submitted: false
}),
mounted () {
if (!this.corpora) this.$store.dispatch('corpora/list', {})
this.currentTerms = this.q
this.currentCorpus = this.corpus
this.currentScore = parseFloat(this.score) || 0.7 // Default if NaN
this.currentScore = parseFloat(this.score) || DEFAULT_SEARCH_SCORE // Default if NaN
this.currentDateGte = this.dateGte
this.currentDateLte = this.dateLte
if (this.dateLte || this.dateGte || this.currentScore !== DEFAULT_SEARCH_SCORE) {
this.toggleFilters()
}
},
methods: {
dateError (condition) {
......@@ -177,6 +198,9 @@ export default {
}
return true
},
toggleFilters () {
this.filtersOpen = !this.filtersOpen
},
search () {
this.submitted = true
if (!this.validate()) return
......@@ -217,4 +241,7 @@ export default {
.text_icon {
margin-left: 1ch;
}
.label abbr {
white-space: nowrap;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment