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 <b-select
:placeholder="$i18n.get('instruction_select_a_metadatum')" :placeholder="$i18n.get('instruction_select_a_metadatum')"
:disabled="advancedSearchQuery.taxquery[searchCriterion] || :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)"> @input="addToAdvancedSearchQuery($event, 'metadatum', searchCriterion)">
<option <option
v-for="metadatum in metadata" v-for="metadatum in metadata"
@ -38,11 +41,13 @@
:type="advancedSearchQuery.metaquery[searchCriterion].ptype == 'int' || :type="advancedSearchQuery.metaquery[searchCriterion].ptype == 'int' ||
advancedSearchQuery.metaquery[searchCriterion].ptype == 'float' ? 'number' : 'text'" advancedSearchQuery.metaquery[searchCriterion].ptype == 'float' ? 'number' : 'text'"
@input="addValueToAdvancedSearchQuery($event, 'value', searchCriterion)" @input="addValueToAdvancedSearchQuery($event, 'value', searchCriterion)"
/> :value="advancedSearchQuery.metaquery[searchCriterion].value"
/>
<input <input
v-else-if="advancedSearchQuery.metaquery[searchCriterion] && v-else-if="advancedSearchQuery.metaquery[searchCriterion] &&
advancedSearchQuery.metaquery[searchCriterion].ptype == 'date'" advancedSearchQuery.metaquery[searchCriterion].ptype == 'date'"
class="input" class="input"
:value="parseDateToNavigatorLanguage(advancedSearchQuery.metaquery[searchCriterion].value)"
v-mask="dateMask" v-mask="dateMask"
@focus="addValueToAdvancedSearchQueryWithoutDelay($event, '', searchCriterion)" @focus="addValueToAdvancedSearchQueryWithoutDelay($event, '', searchCriterion)"
@input="addValueToAdvancedSearchQueryWithoutDelay($event, 'value', searchCriterion)" @input="addValueToAdvancedSearchQueryWithoutDelay($event, 'value', searchCriterion)"
@ -51,6 +56,8 @@
<b-taginput <b-taginput
v-else-if="advancedSearchQuery.taxquery[searchCriterion]" v-else-if="advancedSearchQuery.taxquery[searchCriterion]"
:data="terms" :data="terms"
:value="advancedSearchQuery.taxquery[searchCriterion].btags.length > 0 ?
Array.from(new Set(advancedSearchQuery.taxquery[searchCriterion].btags)) : []"
autocomplete autocomplete
:loading="isFetching" :loading="isFetching"
attached attached
@ -66,7 +73,7 @@
class="column"> class="column">
<b-select <b-select
v-if="advancedSearchQuery.taxquery[searchCriterion] || v-if="advancedSearchQuery.taxquery[searchCriterion] ||
advancedSearchQuery.metaquery[searchCriterion] ? true : false" advancedSearchQuery.metaquery[searchCriterion] ? true : false"
@input="addToAdvancedSearchQuery($event, 'comparator', searchCriterion)" @input="addToAdvancedSearchQuery($event, 'comparator', searchCriterion)"
:value="advancedSearchQuery.taxquery[searchCriterion] ? :value="advancedSearchQuery.taxquery[searchCriterion] ?
advancedSearchQuery.taxquery[searchCriterion].operator : advancedSearchQuery.taxquery[searchCriterion].operator :
@ -165,6 +172,8 @@
</div> </div>
</div> </div>
</div> </div>
<pre>{{ terms }}</pre>
<pre>{{ advancedSearchQuery }}</pre>
</div> </div>
</template> </template>
@ -196,6 +205,52 @@
let localeData = moment.localeData(); let localeData = moment.localeData();
this.dateFormat = localeData.longDateFormat('L'); 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() { data() {
return { return {
@ -366,8 +421,7 @@
let value = this.advancedSearchQuery.metaquery[metaquery].value; let value = this.advancedSearchQuery.metaquery[metaquery].value;
if(value.includes('/')){ 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('-')){ if(value.includes('-')){
this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.parseDateToNavigatorLanguage(value)); this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.parseDateToNavigatorLanguage(value));
} }
}, 110); }, 200);
} }
} }
} }
}, },
parseDateToNavigatorLanguage(date){ 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){ addToAdvancedSearchQuery(value, type, searchCriterion){
@ -418,6 +476,7 @@
btags: [], btags: [],
field: 'term_id', field: 'term_id',
operator: 'IN', operator: 'IN',
originalMeta: value,
taxonomy_id: Number(criteriaKey[1].match(/[\d]+/)) taxonomy_id: Number(criteriaKey[1].match(/[\d]+/))
} }
}); });
@ -427,14 +486,16 @@
this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, { this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
[`${searchCriterion}`]: { [`${searchCriterion}`]: {
key: Number(criteriaKey[0]), key: Number(criteriaKey[0]),
compare: 'LIKE' compare: 'LIKE',
originalMeta: value,
} }
}); });
} else { } else {
this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, { this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
[`${searchCriterion}`]: { [`${searchCriterion}`]: {
key: Number(criteriaKey[0]), key: Number(criteriaKey[0]),
compare: '=' compare: '=',
originalMeta: value,
} }
}); });
} }

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

@ -26,15 +26,36 @@
:value="searchQuery" :value="searchQuery"
@input="futureSearchQuery = $event.target.value" @input="futureSearchQuery = $event.target.value"
@keyup.enter="updateSearch()"> @keyup.enter="updateSearch()">
<span class="icon is-right"> <span class="icon is-right">
<i <i
@click="updateSearch()" @click="updateSearch()"
class="mdi mdi-magnify" /> class="mdi mdi-magnify"/>
</span> </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> </div>
<a @click="toItemsPage">{{ $i18n.get('advanced_search') }}</a> <a
:style="{color: 'white'}"
@click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>
</div> </div>
<a <a
:style="{color: 'white'}"
class="level-item" class="level-item"
:href="wordpressAdmin"> :href="wordpressAdmin">
<b-icon icon="wordpress"/> <b-icon icon="wordpress"/>
@ -45,42 +66,47 @@
<script> <script>
export default { import AdvancedSearch from '../advanced-search/advanced-search.vue';
name: 'TainacanHeader',
data(){ export default {
return { name: 'TainacanHeader',
logoHeader: tainacan_plugin.base_url + '/admin/images/tainacan_logo_header.png', data() {
wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''), return {
searchQuery: '', logoHeader: tainacan_plugin.base_url + '/admin/images/tainacan_logo_header.png',
futureSearchQuery: '', wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
} searchQuery: '',
}, futureSearchQuery: '',
methods: { }
toItemsPage(){
this.$router.push({
path: '/items',
query: {
advancedSearch: true
}
});
}, },
updateSearch() { components: {
if(this.$route.path != '/items') { AdvancedSearch,
},
methods: {
toItemsPage() {
this.$router.push({ this.$router.push({
path: '/items', 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: {
props: { isMenuCompressed: false
isMenuCompressed: false }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss">
@import "../../scss/_variables.scss"; @import "../../scss/_variables.scss";
@ -101,7 +127,7 @@ export default {
.level-left { .level-left {
margin-left: -12px; margin-left: -12px;
.level-item{ .level-item {
height: $header-height; height: $header-height;
width: 180px; width: 180px;
transition: width 0.15s, background-color 0.2s; transition: width 0.15s, background-color 0.2s;
@ -122,15 +148,12 @@ export default {
} }
.level-right { .level-right {
padding-right: 12px; padding-right: 12px;
a {
color: white;
}
.search-area { .search-area {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 36px; margin-right: 36px;
.control { .control:not(.tnc-advanced-search-container) {
input { input {
border-width: 0 !important; border-width: 0 !important;
height: 27px; height: 27px;
@ -149,10 +172,18 @@ export default {
cursor: pointer; cursor: pointer;
height: 27px; height: 27px;
font-size: 18px; font-size: 18px;
width: auto !important; width: 30px !important;
} }
} }
/*.dropdown-content {*/
/*width: 800px !important;*/
/*}*/
/*.dropdown-item:hover {*/
/*background-color: white;*/
/*}*/
a { a {
margin: 0px 12px; margin: 0px 12px;
font-size: 12px; font-size: 12px;