tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Now the advanced search form is recovered from the route query (#22)

This commit is contained in:
weryques 2018-07-05 22:42:06 -03:00
parent f6a1b9204a
commit aa6798a8a3
2 changed files with 165 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/admin/components/advanced-search/advanced-search.vue
View File

@ -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,
}
});
}

157
src/admin/components/navigation/tainacan-header.vue
View File

@ -1,16 +1,16 @@
<template>
<div
id="tainacan-header"
class="level"
id="tainacan-header"
class="level"
:class="{'menu-compressed': isMenuCompressed}">
<div class="level-left">
<div class="level-item">
<router-link
tag="a"
<router-link
tag="a"
to="/">
<img
class="tainacan-logo"
alt="Tainacan Logo"
<img
class="tainacan-logo"
alt="Tainacan Logo"
:src="logoHeader">
</router-link>
</div>
@ -18,24 +18,45 @@
<div class="level-right">
<div class="search-area">
<div class="control has-icons-right is-small is-clearfix">
<input
autocomplete="on"
<input
autocomplete="on"
:placeholder="$i18n.get('instruction_search_in_repository')"
class="input is-small"
type="search"
class="input is-small"
type="search"
: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
class="level-item"
<a
:style="{color: 'white'}"
class="level-item"
:href="wordpressAdmin">
<b-icon icon="wordpress"/>
</a>
@ -45,45 +66,50 @@
<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);
},
},
props: {
isMenuCompressed: false
this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
},
},
props: {
isMenuCompressed: false
}
}
}
</script>
<style lang="scss" scoped>
<style lang="scss">
@import "../../scss/_variables.scss";
// Tainacan Header
#tainacan-header {
background-color: $secondary;
@ -91,7 +117,7 @@ export default {
max-height: $header-height;
width: 100%;
padding: 12px;
vertical-align: middle;
vertical-align: middle;
left: 0;
right: 0;
position: absolute;
@ -99,16 +125,16 @@ export default {
color: white;
.level-left {
margin-left: -12px;
margin-left: -12px;
.level-item{
.level-item {
height: $header-height;
width: 180px;
transition: width 0.15s, background-color 0.2s;
-webkit-transition: width 0.15s background-color 0.2s;
-webkit-transition: width 0.15s background-color 0.2s;
cursor: pointer;
background-color: #257787;
&:focus {
box-shadow: none;
}
@ -116,21 +142,18 @@ export default {
max-height: 22px;
padding: 0px 24px;
transition: padding 0.15s;
-webkit-transition: padding linear 0.15s;
-webkit-transition: padding linear 0.15s;
}
}
}
}
.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;
@ -164,10 +195,10 @@ export default {
width: 220px;
background-color: $secondary;
.tainacan-logo {
padding: 0px 42px;
padding: 0px 42px;
}
}
}
@media screen and (max-width: 769px) {