Now the advanced search form is recovered from the route query (#22)
This commit is contained in:
weryques
parent
f6a1b9204a
commit
aa6798a8a3
|
|
@ -19,7 +19,10 @@
|
|||
<b-select
|
||||
:placeholder="$i18n.get('instruction_select_a_metadatum')"
|
||||
:disabled="advancedSearchQuery.taxquery[searchCriterion] ||
|
||||
advancedSearchQuery.metaquery[searchCriterion] ? true : false"
|
||||
advancedSearchQuery.metaquery[searchCriterion] ? true : false"
|
||||
:value="advancedSearchQuery.metaquery[searchCriterion] ?
|
||||
advancedSearchQuery.metaquery[searchCriterion].originalMeta :
|
||||
(advancedSearchQuery.taxquery[searchCriterion] ? advancedSearchQuery.taxquery[searchCriterion].originalMeta : '')"
|
||||
@input="addToAdvancedSearchQuery($event, 'metadatum', searchCriterion)">
|
||||
<option
|
||||
v-for="metadatum in metadata"
|
||||
|
|
@ -38,11 +41,13 @@
|
|||
:type="advancedSearchQuery.metaquery[searchCriterion].ptype == 'int' ||
|
||||
advancedSearchQuery.metaquery[searchCriterion].ptype == 'float' ? 'number' : 'text'"
|
||||
@input="addValueToAdvancedSearchQuery($event, 'value', searchCriterion)"
|
||||
/>
|
||||
:value="advancedSearchQuery.metaquery[searchCriterion].value"
|
||||
/>
|
||||
<input
|
||||
v-else-if="advancedSearchQuery.metaquery[searchCriterion] &&
|
||||
advancedSearchQuery.metaquery[searchCriterion].ptype == 'date'"
|
||||
class="input"
|
||||
:value="parseDateToNavigatorLanguage(advancedSearchQuery.metaquery[searchCriterion].value)"
|
||||
v-mask="dateMask"
|
||||
@focus="addValueToAdvancedSearchQueryWithoutDelay($event, '', searchCriterion)"
|
||||
@input="addValueToAdvancedSearchQueryWithoutDelay($event, 'value', searchCriterion)"
|
||||
|
|
@ -51,6 +56,8 @@
|
|||
<b-taginput
|
||||
v-else-if="advancedSearchQuery.taxquery[searchCriterion]"
|
||||
:data="terms"
|
||||
:value="advancedSearchQuery.taxquery[searchCriterion].btags.length > 0 ?
|
||||
Array.from(new Set(advancedSearchQuery.taxquery[searchCriterion].btags)) : []"
|
||||
autocomplete
|
||||
:loading="isFetching"
|
||||
attached
|
||||
|
|
@ -66,7 +73,7 @@
|
|||
class="column">
|
||||
<b-select
|
||||
v-if="advancedSearchQuery.taxquery[searchCriterion] ||
|
||||
advancedSearchQuery.metaquery[searchCriterion] ? true : false"
|
||||
advancedSearchQuery.metaquery[searchCriterion] ? true : false"
|
||||
@input="addToAdvancedSearchQuery($event, 'comparator', searchCriterion)"
|
||||
:value="advancedSearchQuery.taxquery[searchCriterion] ?
|
||||
advancedSearchQuery.taxquery[searchCriterion].operator :
|
||||
|
|
@ -165,6 +172,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre>{{ terms }}</pre>
|
||||
<pre>{{ advancedSearchQuery }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -196,6 +205,52 @@
|
|||
|
||||
let localeData = moment.localeData();
|
||||
this.dateFormat = localeData.longDateFormat('L');
|
||||
|
||||
if((this.$route.query.metaquery && Object.keys(this.$route.query.metaquery).length > 0) ||
|
||||
(this.$route.query.taxquery && Object.keys(this.$route.query.taxquery).length > 0) ){
|
||||
this.searchCriteria = [];
|
||||
}
|
||||
|
||||
if(this.$route.query.metaquery && Object.keys(this.$route.query.metaquery).length > 0){
|
||||
|
||||
let metaquery = this.$route.query.metaquery;
|
||||
|
||||
for(let meta in metaquery){
|
||||
this.$set(this.advancedSearchQuery.metaquery, `${meta}`, metaquery[meta]);
|
||||
}
|
||||
|
||||
let keys = Object.keys(this.advancedSearchQuery.metaquery);
|
||||
|
||||
let relationIndex = keys.findIndex((element) => {
|
||||
return element == 'relation';
|
||||
});
|
||||
|
||||
keys.splice(relationIndex, 1);
|
||||
|
||||
for(let k of keys){
|
||||
this.searchCriteria.push(k);
|
||||
}
|
||||
}
|
||||
|
||||
if(this.$route.query.taxquery && Object.keys(this.$route.query.taxquery).length > 0){
|
||||
let taxquery = this.$route.query.taxquery;
|
||||
|
||||
for(let tax in taxquery){
|
||||
this.$set(this.advancedSearchQuery.taxquery, `${tax}`, taxquery[tax]);
|
||||
}
|
||||
|
||||
let keys = Object.keys(this.advancedSearchQuery.taxquery);
|
||||
|
||||
let relationIndex = keys.findIndex((element) => {
|
||||
return element == 'relation';
|
||||
});
|
||||
|
||||
keys.splice(relationIndex, 1);
|
||||
|
||||
for(let k of keys){
|
||||
this.searchCriteria.push(k);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -366,8 +421,7 @@
|
|||
let value = this.advancedSearchQuery.metaquery[metaquery].value;
|
||||
|
||||
if(value.includes('/')){
|
||||
this.advancedSearchQuery.metaquery[metaquery].value = this.convertDateToMatchInDB(value);
|
||||
//this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.convertDateToMatchInDB(value));
|
||||
this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.convertDateToMatchInDB(value));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -394,15 +448,19 @@
|
|||
if(value.includes('-')){
|
||||
this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.parseDateToNavigatorLanguage(value));
|
||||
}
|
||||
}, 110);
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
parseDateToNavigatorLanguage(date){
|
||||
date = new Date(date.replace(/-/g, '/'));
|
||||
if(date && date.length === this.dateMask.length) {
|
||||
date = new Date(date.replace(/-/g, '/'));
|
||||
|
||||
return moment(date, moment.ISO_8601).format(this.dateFormat);
|
||||
return moment(date, moment.ISO_8601).format(this.dateFormat);
|
||||
} else {
|
||||
return date;
|
||||
}
|
||||
},
|
||||
addToAdvancedSearchQuery(value, type, searchCriterion){
|
||||
|
||||
|
|
@ -418,6 +476,7 @@
|
|||
btags: [],
|
||||
field: 'term_id',
|
||||
operator: 'IN',
|
||||
originalMeta: value,
|
||||
taxonomy_id: Number(criteriaKey[1].match(/[\d]+/))
|
||||
}
|
||||
});
|
||||
|
|
@ -427,14 +486,16 @@
|
|||
this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
|
||||
[`${searchCriterion}`]: {
|
||||
key: Number(criteriaKey[0]),
|
||||
compare: 'LIKE'
|
||||
compare: 'LIKE',
|
||||
originalMeta: value,
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
|
||||
[`${searchCriterion}`]: {
|
||||
key: Number(criteriaKey[0]),
|
||||
compare: '='
|
||||
compare: '=',
|
||||
originalMeta: value,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,15 +26,36 @@
|
|||
:value="searchQuery"
|
||||
@input="futureSearchQuery = $event.target.value"
|
||||
@keyup.enter="updateSearch()">
|
||||
<span class="icon is-right">
|
||||
<i
|
||||
@click="updateSearch()"
|
||||
class="mdi mdi-magnify" />
|
||||
</span>
|
||||
<span class="icon is-right">
|
||||
<i
|
||||
@click="updateSearch()"
|
||||
class="mdi mdi-magnify"/>
|
||||
</span>
|
||||
<!--<b-dropdown-->
|
||||
<!--position="is-bottom-left">-->
|
||||
<!--<b-icon-->
|
||||
<!--class="is-right"-->
|
||||
<!--slot="trigger"-->
|
||||
<!--size="is-small"-->
|
||||
<!--icon="menu-down"/>-->
|
||||
<!--<b-dropdown-item>-->
|
||||
<!--<p class="is-left">{{ $i18n.get('advanced_search') }}</p>-->
|
||||
<!--<b-icon-->
|
||||
<!--icon="menu-up"-->
|
||||
<!--class="is-right" />-->
|
||||
<!--</b-dropdown-item>-->
|
||||
<!--<b-dropdown-item-->
|
||||
<!--:custom="true">-->
|
||||
<!--<advanced-search />-->
|
||||
<!--</b-dropdown-item>-->
|
||||
<!--</b-dropdown>-->
|
||||
</div>
|
||||
<a @click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>
|
||||
<a
|
||||
:style="{color: 'white'}"
|
||||
@click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>
|
||||
</div>
|
||||
<a
|
||||
:style="{color: 'white'}"
|
||||
class="level-item"
|
||||
:href="wordpressAdmin">
|
||||
<b-icon icon="wordpress"/>
|
||||
|
|
@ -45,42 +66,47 @@
|
|||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TainacanHeader',
|
||||
data(){
|
||||
return {
|
||||
logoHeader: tainacan_plugin.base_url + '/admin/images/tainacan_logo_header.png',
|
||||
wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
|
||||
searchQuery: '',
|
||||
futureSearchQuery: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toItemsPage(){
|
||||
this.$router.push({
|
||||
path: '/items',
|
||||
query: {
|
||||
advancedSearch: true
|
||||
}
|
||||
});
|
||||
import AdvancedSearch from '../advanced-search/advanced-search.vue';
|
||||
|
||||
export default {
|
||||
name: 'TainacanHeader',
|
||||
data() {
|
||||
return {
|
||||
logoHeader: tainacan_plugin.base_url + '/admin/images/tainacan_logo_header.png',
|
||||
wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
|
||||
searchQuery: '',
|
||||
futureSearchQuery: '',
|
||||
}
|
||||
},
|
||||
updateSearch() {
|
||||
if(this.$route.path != '/items') {
|
||||
components: {
|
||||
AdvancedSearch,
|
||||
},
|
||||
methods: {
|
||||
toItemsPage() {
|
||||
this.$router.push({
|
||||
path: '/items',
|
||||
query: {
|
||||
advancedSearch: true
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
updateSearch() {
|
||||
if (this.$route.path != '/items') {
|
||||
this.$router.push({
|
||||
path: '/items',
|
||||
});
|
||||
}
|
||||
|
||||
this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
|
||||
this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
|
||||
},
|
||||
},
|
||||
},
|
||||
props: {
|
||||
isMenuCompressed: false
|
||||
props: {
|
||||
isMenuCompressed: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
|
|
@ -101,7 +127,7 @@ export default {
|
|||
.level-left {
|
||||
margin-left: -12px;
|
||||
|
||||
.level-item{
|
||||
.level-item {
|
||||
height: $header-height;
|
||||
width: 180px;
|
||||
transition: width 0.15s, background-color 0.2s;
|
||||
|
|
@ -122,15 +148,12 @@ export default {
|
|||
}
|
||||
.level-right {
|
||||
padding-right: 12px;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
.search-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 36px;
|
||||
|
||||
.control {
|
||||
.control:not(.tnc-advanced-search-container) {
|
||||
input {
|
||||
border-width: 0 !important;
|
||||
height: 27px;
|
||||
|
|
@ -149,10 +172,18 @@ export default {
|
|||
cursor: pointer;
|
||||
height: 27px;
|
||||
font-size: 18px;
|
||||
width: auto !important;
|
||||
width: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*.dropdown-content {*/
|
||||
/*width: 800px !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.dropdown-item:hover {*/
|
||||
/*background-color: white;*/
|
||||
/*}*/
|
||||
|
||||
a {
|
||||
margin: 0px 12px;
|
||||
font-size: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue