(issue #22) Advanced search
Adjusts of advanced search interface; Reactivity fixed when click on buttons to open advanced search component; Adds i18n strings for advanced search hidde some components when open advanced search
This commit is contained in:
weryques
parent
85d32e1a4a
commit
7a86339dc1
|
|
@ -10,26 +10,26 @@
|
|||
<b-field
|
||||
class="columns"
|
||||
grouped>
|
||||
<b-field class="column is-one-fifth">
|
||||
<b-field class="column">
|
||||
<b-select
|
||||
@input="addToAdvancedSearchQuery">
|
||||
@input.native="addToAdvancedSearchQuery($event)">
|
||||
<option
|
||||
v-for="(metadata, key) in metadataList"
|
||||
v-for="metadata in metadataList"
|
||||
v-if="metadata.enabled"
|
||||
:value="metadata.id"
|
||||
:key="key"
|
||||
:key="metadata.id"
|
||||
>{{ metadata.name }}</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
|
||||
<b-field class="column is-two-thirds">
|
||||
<b-input
|
||||
@input="addToAdvancedSearchQuery"/>
|
||||
@input.native="addValueToAdvancedSearchQuery($event)"/>
|
||||
</b-field>
|
||||
|
||||
<b-field class="column is-one-fifth">
|
||||
<b-field class="column">
|
||||
<b-select
|
||||
@input="addToAdvancedSearchQuery">
|
||||
@input.native="addToAdvancedSearchQuery($event)">
|
||||
<option
|
||||
v-for="(opt, key) in compare"
|
||||
:value="key"
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<a
|
||||
@click="addSearchMetadata"
|
||||
class="is-info is-small">
|
||||
Adicionar mais um campo de busca</a>
|
||||
{{ $i18n.get('add_more_one_search_field') }}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -61,16 +61,15 @@
|
|||
<p class="control">
|
||||
<button
|
||||
@click="clearSearch"
|
||||
class="button is-outlined">Limpar busca</button>
|
||||
class="button is-outlined">{{ $i18n.get('clear_search') }}</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
@click="searchAdvanced"
|
||||
class="button is-secondary">Buscar</button>
|
||||
class="button is-secondary">{{ $i18n.get('search') }}</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<pre>{{ metadataIds }} {{ toCompare }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -80,6 +79,7 @@
|
|||
name: "AdvancedSearch",
|
||||
props: {
|
||||
metadataList: Array,
|
||||
isRepositoryLevel: false,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
|
@ -95,11 +95,14 @@
|
|||
clearSearch(){
|
||||
this.totalSearchMetadata = 1;
|
||||
},
|
||||
addValueToAdvancedSearchQuery: _.debounce(($event) => {
|
||||
console.log($event);
|
||||
}, 900),
|
||||
searchAdvanced(){
|
||||
|
||||
},
|
||||
addToAdvancedSearchQuery(optionValue){
|
||||
console.log(optionValue);
|
||||
addToAdvancedSearchQuery($event){
|
||||
console.log($event);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -113,11 +116,20 @@
|
|||
padding-top: 47px;
|
||||
padding-right: $page-side-padding;
|
||||
padding-left: $page-side-padding;
|
||||
padding-top: 47px;
|
||||
padding-bottom: 47px;
|
||||
|
||||
.column {
|
||||
padding: 0 0.3rem 0.3rem !important;
|
||||
}
|
||||
|
||||
.control {
|
||||
.select{
|
||||
width: 100% !important;
|
||||
select{
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<div class="control has-icons-right is-small is-clearfix">
|
||||
<input
|
||||
autocomplete="on"
|
||||
:placeholder="$i18n.get('instruction_search')"
|
||||
:placeholder="$i18n.get('instruction_search_on_repository')"
|
||||
class="input is-small"
|
||||
type="search"
|
||||
v-model="searchTerm">
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<i class="mdi mdi-magnify" />
|
||||
</span>
|
||||
</div>
|
||||
<a @click.prevent="openAdvancedSearchComponent">{{ $i18n.get('advanced_search') }}</a>
|
||||
<a @click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>
|
||||
</span>
|
||||
<a
|
||||
class="level-item"
|
||||
|
|
@ -51,10 +51,13 @@ export default {
|
|||
}
|
||||
},
|
||||
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);
|
||||
toItemsPage(){
|
||||
this.$router.push({
|
||||
path: '/items',
|
||||
query: {
|
||||
openAdvancedSearch: true
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const routes = [
|
|||
]
|
||||
},
|
||||
|
||||
{ path: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: i18nGet('title_items_page'), icon: 'file-multiple', openAdvancedSearch: false} },
|
||||
{ path: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: i18nGet('title_items_page'), icon: 'file-multiple'} },
|
||||
{ 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'} },
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
|
||||
<!-- SEARCH AND FILTERS --------------------- -->
|
||||
<!-- Filter menu compress button -->
|
||||
<button
|
||||
<button
|
||||
v-if="!openAdvancedSearch"
|
||||
id="filter-menu-compress-button"
|
||||
:class="{'filter-menu-compress-button-top-repo': isRepositoryLevel}"
|
||||
:style="{ top: isHeaderShrinked ? '125px' : '152px'}"
|
||||
|
|
@ -12,15 +13,15 @@
|
|||
<b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
|
||||
</button>
|
||||
<!-- Side bar with search and filters -->
|
||||
<aside
|
||||
v-show="!isFiltersMenuCompressed"
|
||||
<aside
|
||||
v-show="!isFiltersMenuCompressed && !openAdvancedSearch"
|
||||
class="filters-menu"
|
||||
:class="{ 'tainacan-form': isOnTheme }">
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingFilters"/>
|
||||
|
||||
<b-field>
|
||||
<b-field :style="{'margin-bottom': '0.25rem !important'}">
|
||||
<div class="control is-small is-clearfix">
|
||||
<input
|
||||
class="input is-small"
|
||||
|
|
@ -44,8 +45,9 @@
|
|||
</button>
|
||||
</p>
|
||||
</b-field>
|
||||
<!-- Advanced search button -->
|
||||
<a
|
||||
@click.prevent="openAdvancedSearchComponent"
|
||||
@click="openAdvancedSearch = !openAdvancedSearch"
|
||||
class="is-size-7 is-secondary is-pulled-right">{{ $i18n.get('advanced_search') }}</a>
|
||||
|
||||
<h3 class="has-text-weight-semibold">{{ $i18n.get('filters') }}</h3>
|
||||
|
|
@ -105,7 +107,9 @@
|
|||
:active.sync="isLoadingItems"/>
|
||||
|
||||
<!-- SEARCH CONTROL ------------------------- -->
|
||||
<div class="search-control">
|
||||
<div
|
||||
v-if="!openAdvancedSearch"
|
||||
class="search-control">
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingFields"/>
|
||||
|
|
@ -246,13 +250,14 @@
|
|||
<!-- ADVANCED SEARCH -->
|
||||
<advanced-search
|
||||
v-if="openAdvancedSearch"
|
||||
:is-repository-level="isRepositoryLevel"
|
||||
:metadata-list="fields" />
|
||||
|
||||
<!-- --------------- -->
|
||||
|
||||
<!-- STATUS TABS, only on Admin -------- -->
|
||||
<div
|
||||
v-if="!isOnTheme"
|
||||
v-if="!isOnTheme && !openAdvancedSearch"
|
||||
class="tabs">
|
||||
<ul>
|
||||
<li
|
||||
|
|
@ -356,7 +361,8 @@
|
|||
futureSearchQuery: '',
|
||||
isHeaderShrinked: false,
|
||||
localTableFields: [],
|
||||
registeredViewModes: tainacan_plugin.registered_view_modes
|
||||
registeredViewModes: tainacan_plugin.registered_view_modes,
|
||||
openAdvancedSearch: false,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -365,10 +371,6 @@
|
|||
enabledViewModes: Object // Used only on theme
|
||||
},
|
||||
computed: {
|
||||
openAdvancedSearch(){
|
||||
console.log('Called here', this.$route.meta);
|
||||
return this.$route.meta.openAdvancedSearch;
|
||||
},
|
||||
items() {
|
||||
return this.getItems();
|
||||
},
|
||||
|
|
@ -436,11 +438,6 @@
|
|||
'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);
|
||||
},
|
||||
|
|
@ -602,6 +599,9 @@
|
|||
|
||||
this.$eventBusSearch.setViewMode(this.defaultViewMode);
|
||||
|
||||
if(this.$route.query.openAdvancedSearch) {
|
||||
this.openAdvancedSearch = this.$route.query.openAdvancedSearch;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@ return [
|
|||
'add_items_external_source' => __( 'Add items from an external source', 'tainacan' ),
|
||||
'split' => __( 'Split', 'tainacan' ),
|
||||
'unified' => __( 'Unified', 'tainacan' ),
|
||||
'add_more_one_search_field' => __( 'Add more one search field', 'tainacan' ),
|
||||
'clear_search' => __( 'Clear search', 'tainacan' ),
|
||||
|
||||
// Wordpress Status
|
||||
'publish' => __( 'Publish', 'tainacan' ),
|
||||
|
|
@ -220,6 +222,7 @@ return [
|
|||
'instruction_insert_url' => __( 'Insert URL', 'tainacan' ),
|
||||
'instruction_write_text' => __( 'Write Text', 'tainacan' ),
|
||||
'instruction_search' => __( 'Search', 'tainacan' ),
|
||||
'instruction_search_on_repository' => __( 'Search on repository', 'tainacan' ),
|
||||
|
||||
// Info. Other feedback to user.
|
||||
'info_name_is_required' => __( 'Name is required.', 'tainacan' ),
|
||||
|
|
|
|||
Loading…
Reference in New Issue