Relationship field type: search in different fields
This commit is contained in:
eduardohumberto
parent
de439c8246
commit
ca912bf74c
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<b-taginput
|
||||
v-if="this.searchFields.length === 0"
|
||||
:id="id"
|
||||
v-model="selected"
|
||||
:data="options"
|
||||
|
|
@ -9,43 +8,12 @@
|
|||
:loading="loading"
|
||||
field="label"
|
||||
@typing="search"/>
|
||||
<div
|
||||
v-else>
|
||||
<div
|
||||
v-if="itemsFound.length === 0"
|
||||
class="box">
|
||||
<b-field
|
||||
v-for="(field,index) in searchFields"
|
||||
:key="index"
|
||||
:label="field.name">
|
||||
<component
|
||||
@input="setQuery( $event, field )"
|
||||
:is="getComponentSearch( field )"/>
|
||||
</b-field>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@click="doSearch"
|
||||
class="button">
|
||||
<b-icon icon="magnify" />
|
||||
<span> {{ $i18n.get('search') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<list-found-items
|
||||
class="box"
|
||||
@input="listenSelectedItems"
|
||||
@clearSearch="clearSearch"
|
||||
:items="itemsFound"
|
||||
v-else/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tainacan as axios } from '../../../js/axios/axios'
|
||||
import ListFoundItems from './search-components/list-items.vue';
|
||||
import qs from 'qs';
|
||||
|
||||
export default {
|
||||
|
|
@ -113,9 +81,6 @@
|
|||
this.onInput( values );
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ListFoundItems
|
||||
},
|
||||
methods: {
|
||||
setResults(option){
|
||||
if(!option)
|
||||
|
|
@ -132,10 +97,11 @@
|
|||
}
|
||||
|
||||
if (query !== '') {
|
||||
let metaquery = this.mountQuery( query );
|
||||
this.loading = true;
|
||||
this.options = [];
|
||||
let collectionId = ( this.field && this.field.field.field_type_options.collection_id ) ? this.field.field.field_type_options.collection_id : this.collection_id;
|
||||
axios.get('/collection/'+collectionId+'/items?search=' + query)
|
||||
axios.get('/collection/'+collectionId+'/items?' + qs.stringify( metaquery ))
|
||||
.then( res => {
|
||||
this.loading = false;
|
||||
let result = res.data;
|
||||
|
|
@ -150,42 +116,23 @@
|
|||
this.options = [];
|
||||
}
|
||||
},
|
||||
getComponentSearch( field ){
|
||||
return field.field_type_object.component;
|
||||
},
|
||||
setQuery( event, field ){
|
||||
if( field.field_type.indexOf( 'Core_Title' ) >= 0 ){
|
||||
this.queryObject['search'] = event;
|
||||
} else if( field.field_type.indexOf( 'Core_Description' ) >= 0 ){
|
||||
this.queryObject['search'] = event;
|
||||
}
|
||||
},
|
||||
doSearch(){
|
||||
let collectionId = ( this.field && this.field.field.field_type_options.collection_id ) ? this.field.field.field_type_options.collection_id : this.collection_id;
|
||||
axios.get('/collection/' + collectionId + '/items?' + qs.stringify( this.queryObject ))
|
||||
.then(res => {
|
||||
let items = res.data;
|
||||
if( items.length > 0 ){
|
||||
this.itemsFound = items;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
this.$console.log( error )
|
||||
});
|
||||
},
|
||||
clearSearch(){
|
||||
this.itemsFound = [];
|
||||
},
|
||||
listenSelectedItems( event ){
|
||||
let results = [];
|
||||
|
||||
if( event && event.length > 0 ){
|
||||
for( let item of event ){
|
||||
results.push( item.id );
|
||||
mountQuery( search ){
|
||||
let query = []
|
||||
query['search'] = search;
|
||||
if( this.searchFields.length > 0){
|
||||
query['metaquery'] = [];
|
||||
const metaquery = query['metaquery'];
|
||||
metaquery['relation'] = 'OR'
|
||||
for( let index in this.searchFields ){
|
||||
metaquery[index] = {
|
||||
key: this.searchFields[index].id,
|
||||
value: search
|
||||
}
|
||||
}
|
||||
|
||||
this.onInput( results );
|
||||
query['metaquery'] = metaquery;
|
||||
}
|
||||
return query;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<section>
|
||||
<button
|
||||
type="button"
|
||||
@click="clearSearch"
|
||||
class="button field is-info">
|
||||
<b-icon icon="magnify"/>
|
||||
<span>{{ $i18n.get('label_relationship_new_search') }}</span>
|
||||
</button>
|
||||
|
||||
<b-tabs>
|
||||
<b-tab-item :label="$i18n.get('label_relationship_items_found')">
|
||||
<b-table
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:checked-rows.sync="checkedRows"
|
||||
:is-row-checkable="(row) => row.id !== 3"
|
||||
checkable>
|
||||
|
||||
<template slot="bottom-left">
|
||||
<b>Total</b>: {{ checkedRows.length }}
|
||||
</template>
|
||||
</b-table>
|
||||
</b-tab-item>
|
||||
|
||||
<b-tab-item :label="$i18n.get('label_selected')">
|
||||
<button
|
||||
class="button field is-danger"
|
||||
@click="checkedRows = []"
|
||||
:disabled="!checkedRows.length">
|
||||
<b-icon icon="close"/>
|
||||
<span>{{ $i18n.get('label_clean') }}</span>
|
||||
</button>
|
||||
<pre>{{ checkedRows }}</pre>
|
||||
</b-tab-item>
|
||||
</b-tabs>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: this.items,
|
||||
checkedRows: [],
|
||||
columns: [
|
||||
{
|
||||
field: 'title',
|
||||
label: this.$i18n.get('label_title'),
|
||||
},
|
||||
{
|
||||
field: 'description',
|
||||
label: this.$i18n.get('label_description'),
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkedRows( val ){
|
||||
this.checkedRows = val;
|
||||
this.$emit('input', val );
|
||||
}
|
||||
},
|
||||
props: {
|
||||
collectionId: Number,
|
||||
totalItems: 0,
|
||||
page: 1,
|
||||
itemsPerPage: 12,
|
||||
items: Array,
|
||||
},
|
||||
methods: {
|
||||
clearSearch(){
|
||||
this.$emit('clearSearch', true );
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue