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

Initiaded advanced search (issue #22)

This commit is contained in:
weryques 2018-06-04 16:30:32 -03:00
parent 6b3e273857
commit 7f56e379e5
4 changed files with 149 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/admin/components/advanced-search/advanced-search.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<div>
<div class="columns is-multiline tnc-advanced-search-container">
<div
v-for="searchField in totalSearchMetadata"
:key="searchField"
class="field column is-12 tainacan-form">
<b-field
class="columns"
grouped>
<b-field class="column is-one-fifth">
<b-select
@input="addToAdvancedSearchQuery">
<option
v-for="(metadata, key) in metadataList"
v-if="metadata.enabled"
:value="metadata.id"
:key="key"
>{{ metadata.name }}</option>
</b-select>
</b-field>
<b-field class="column is-two-thirds">
<b-input
@input="addToAdvancedSearchQuery"/>
</b-field>
<b-field class="column is-one-fifth">
<b-select
@input="addToAdvancedSearchQuery">
<option
v-for="(opt, key) in compare"
:value="key"
:key="key"
>{{ opt }}</option>
</b-select>
</b-field>
</b-field>
</div>
<div
:style="{'padding-left': '25px !important'}"
class="field column is-12">
<div class="is-inline">
<b-icon
icon="plus-circle"
size="is-small"
type="is-info"/>
<a
@click="addSearchMetadata"
class="is-info is-small">
Adicionar mais um campo de busca</a>
</div>
</div>
<div class="column">
<div class="field is-grouped is-pulled-right">
<p class="control">
<button
@click="clearSearch"
class="button is-outlined">Limpar busca</button>
</p>
<p class="control">
<button
@click="searchAdvanced"
class="button is-secondary">Buscar</button>
</p>
</div>
</div>
<pre>{{ metadataIds }} {{ toCompare }}</pre>
</div>
</div>
</template>
<script>
export default {
name: "AdvancedSearch",
props: {
metadataList: Array,
},
data(){
return {
compare: {'=':'Igual', '!=':'Diferente', 'IN':'Contém', 'NOT IN':'Não Contém'},
totalSearchMetadata: 1,
advancedSearchQuery: {},
}
},
methods: {
addSearchMetadata(){
this.totalSearchMetadata++;
},
clearSearch(){
this.totalSearchMetadata = 1;
},
searchAdvanced(){
},
addToAdvancedSearchQuery(optionValue){
console.log(optionValue);
},
}
}
</script>
<style lang="scss">
@import '../../scss/_variables.scss';
.tnc-advanced-search-container {
padding-top: 47px;
padding-right: $page-side-padding;
padding-left: $page-side-padding;
padding-top: 47px;
.column {
padding: 0 0.3rem 0.3rem !important;
}
}
</style>

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

@ -20,7 +20,7 @@
<div class="control has-icons-right is-small is-clearfix">
<input
autocomplete="on"
:placeholder="$i18n.get('instruction_search_repository')"
:placeholder="$i18n.get('instruction_search')"
class="input is-small"
type="search"
v-model="searchTerm">
@ -28,7 +28,7 @@
<i class="mdi mdi-magnify" />
</span>
</div>
<a href="">{{ $i18n.get('advanced_search') }}</a>
<a @click.prevent="openAdvancedSearchComponent">{{ $i18n.get('advanced_search') }}</a>
</span>
<a
class="level-item"
@ -50,6 +50,13 @@ export default {
searchTerm: ''
}
},
methods: {
openAdvancedSearchComponent(){
console.log('Called here', this.$route.meta);
this.$set(this.$route.meta, 'openAdvancedSearch', !this.$route.meta.openAdvancedSearch);
console.log('Called here', this.$route.meta);
}
},
props: {
isMenuCompressed: false
}
@ -105,7 +112,7 @@ export default {
color: $tertiary;
}
.search-area {
display: none;//display: flex;
display: flex;
align-items: center;
margin-right: 36px;

2
src/admin/js/router.js
View File

@ -50,7 +50,7 @@ const routes = [
]
},
{ path: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: i18nGet('title_items_page'), icon: 'file-multiple'} },
{ path: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: i18nGet('title_items_page'), icon: 'file-multiple', openAdvancedSearch: false} },
{ path: '/items/new', name: 'ItemCreationForm', component: ItemEditionForm, meta: {title: i18nGet('title_create_item'), icon: 'file-multiple'} },
{ path: '/filters', name: 'FiltersPage', component: FiltersPage, meta: {title: i18nGet('title_repository_filters_page'), icon: 'filter'} },

17
src/admin/pages/lists/items-page.vue
View File

@ -44,7 +44,9 @@
</button>
</p>
</b-field>
<!-- <a class="is-size-7 is-secondary is-pulled-right">Busca avançada</a> -->
<a
@click.prevent="openAdvancedSearchComponent"
class="is-size-7 is-secondary is-pulled-right">{{ $i18n.get('advanced_search') }}</a>
<h3 class="has-text-weight-semibold">{{ $i18n.get('filters') }}</h3>
<a
@ -242,7 +244,9 @@
<!-- ADVANCED SEARCH -->
<advanced-search />
<advanced-search
v-if="openAdvancedSearch"
:metadata-list="fields" />
<!-- --------------- -->
@ -361,6 +365,10 @@
enabledViewModes: Object // Used only on theme
},
computed: {
openAdvancedSearch(){
console.log('Called here', this.$route.meta);
return this.$route.meta.openAdvancedSearch;
},
items() {
return this.getItems();
},
@ -428,6 +436,11 @@
'getViewMode',
'getTotalItems'
]),
openAdvancedSearchComponent(){
console.log('Called here', this.$route.meta);
this.$set(this.$route.meta, 'openAdvancedSearch', !this.$route.meta.openAdvancedSearch);
console.log('Called here', this.$route.meta);
},
updateSearch() {
this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
},