Merge branch 'develop' of https://github.com/tainacan/tainacan into develop
This commit is contained in:
mateuswetah
commit
b8a7b1cdb3
|
|
@ -1,31 +1,52 @@
|
|||
<template>
|
||||
<component
|
||||
:is="getComponent()"
|
||||
:options="terms"></component>
|
||||
v-model="valueComponent"
|
||||
:allowNew="allowNew"
|
||||
:terms="terms"
|
||||
:options="getOptions(0)"></component>
|
||||
</template>
|
||||
<script>
|
||||
import { tainacan as axios } from '../../../js/axios/axios'
|
||||
import TainacanCategoryRadio from './CategoryRadio.vue'
|
||||
import TainacanCategoryCheckbox from './CategoryCheckbox.vue'
|
||||
import TainacanCategoryTagInput from './CategoryTaginput.vue'
|
||||
|
||||
export default {
|
||||
created(){
|
||||
this.component = ( this.field.field
|
||||
&& this.field.field.field_type_options && this.field.field.field_type_options.input_type )
|
||||
let field_type_options = this.field.field.field_type_options;
|
||||
this.component = ( field_type_options && field_type_options.input_type )
|
||||
? this.field.field.field_type_options.input_type : this.componentAttribute
|
||||
|
||||
this.collectionId = this.field.field.collection_id;
|
||||
this.taxonomy = this.field.field.field_type_options.taxonomy_id;
|
||||
this.taxonomy = field_type_options.taxonomy_id;
|
||||
|
||||
if( field_type_options && field_type_options.allow_new_terms ){
|
||||
this.allowNew = field_type_options.allow_new_terms === 'yes'
|
||||
}
|
||||
this.getTermsFromTaxonomy();
|
||||
this.getTermsId();
|
||||
},
|
||||
components: {
|
||||
TainacanCategoryRadio
|
||||
TainacanCategoryRadio,
|
||||
TainacanCategoryCheckbox,
|
||||
TainacanCategoryTagInput
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
valueComponent: null,
|
||||
component: '',
|
||||
collectionId: '',
|
||||
taxonomy: '',
|
||||
terms:[]
|
||||
terms:[], // object with names
|
||||
allowNew: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
valueComponent( val ){
|
||||
this.valueComponent = val;
|
||||
this.$emit('input', val);
|
||||
this.$emit('blur');
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -35,6 +56,7 @@
|
|||
componentAttribute: {
|
||||
type: String
|
||||
},
|
||||
value: [ Number, String, Array,Object ],
|
||||
id: ''
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -53,6 +75,40 @@
|
|||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
getOptions( parent, level = 0 ){ // retrieve only ids
|
||||
let result = [];
|
||||
if ( this.terms ){
|
||||
for( let term of this.terms ){
|
||||
if( term.parent == parent ){
|
||||
term['level'] = level;
|
||||
result.push( term );
|
||||
const levelTerm = level + 1;
|
||||
const children = this.getOptions( term.term_id, levelTerm);
|
||||
result = result.concat( children );
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
getTermsId(){
|
||||
let values = [];
|
||||
if( this.value && this.value.length > 0){
|
||||
for( let term of this.value ){
|
||||
if( term && term.term_id)
|
||||
values.push(term.term_id);
|
||||
}
|
||||
}
|
||||
|
||||
if( values.length > 0 && this.field.field){
|
||||
this.valueComponent = ( this.field.field && this.field.field.multiple === 'no' ) ? values[0] : values
|
||||
}
|
||||
|
||||
},
|
||||
onInput($event) {
|
||||
this.inputValue = $event;
|
||||
this.$emit('input', this.inputValue);
|
||||
this.$emit('blur');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="block" v-for="option,index in getOptions( 0 )">
|
||||
<div class="block" v-for="option,index in options">
|
||||
<b-checkbox
|
||||
:id="id"
|
||||
:style="{ paddingLeft: (option.level * 30) + 'px' }"
|
||||
|
|
@ -18,6 +18,10 @@
|
|||
<script>
|
||||
|
||||
export default {
|
||||
created(){
|
||||
if( this.value && this.value.length > 0)
|
||||
this.checked = this.value;
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
checked: []
|
||||
|
|
@ -27,24 +31,9 @@
|
|||
options: {
|
||||
type: Array
|
||||
},
|
||||
value: [ Number, String ]
|
||||
value: [ Number, String, Array ]
|
||||
},
|
||||
methods: {
|
||||
getOptions( parent, level = 0 ){
|
||||
let result = [];
|
||||
if ( this.options ){
|
||||
for( let term of this.options ){
|
||||
if( term.parent == parent ){
|
||||
term['level'] = level;
|
||||
result.push( term );
|
||||
const levelTerm = level + 1;
|
||||
const children = this.getOptions( term.term_id, levelTerm);
|
||||
result = result.concat( children );
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
onChecked(option) {
|
||||
this.$emit('blur');
|
||||
this.onInput(this.checked)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="block" v-for="option,index in getOptions( 0 )">
|
||||
<div class="block" v-for="option,index in options">
|
||||
<b-radio
|
||||
:id="id"
|
||||
:style="{ paddingLeft: (option.level * 30) + 'px' }"
|
||||
|
|
@ -18,6 +18,10 @@
|
|||
<script>
|
||||
|
||||
export default {
|
||||
created(){
|
||||
if( this.value )
|
||||
this.checked = this.value;
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
checked:''
|
||||
|
|
@ -27,24 +31,9 @@
|
|||
options: {
|
||||
type: Array
|
||||
},
|
||||
value: [ Number, String ]
|
||||
value: [ Number, String, Array ]
|
||||
},
|
||||
methods: {
|
||||
getOptions( parent, level = 0 ){
|
||||
let result = [];
|
||||
if ( this.options ){
|
||||
for( let term of this.options ){
|
||||
if( term.parent == parent ){
|
||||
term['level'] = level;
|
||||
result.push( term );
|
||||
const levelTerm = level + 1;
|
||||
const children = this.getOptions( term.term_id, levelTerm);
|
||||
result = result.concat( children );
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
onChecked(option) {
|
||||
this.$emit('blur');
|
||||
this.onInput(this.checked)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="block">
|
||||
<b-taginput
|
||||
size="is-small"
|
||||
rounded
|
||||
icon="magnify"
|
||||
:allowNew="allowNew"
|
||||
v-model="selected"
|
||||
:data="labels"
|
||||
field="label"
|
||||
autocomplete
|
||||
@typing="search">
|
||||
</b-taginput>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
selected: [],
|
||||
labels: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected( val ){
|
||||
this.selected = val;
|
||||
let results = [];
|
||||
for( let term of val ){
|
||||
if( term.value ){
|
||||
results.push( term.value );
|
||||
} else {
|
||||
results.push( term );
|
||||
}
|
||||
}
|
||||
this.$emit('input', results);
|
||||
this.$emit('blur');
|
||||
},
|
||||
terms( val ){
|
||||
this.selectedValues();
|
||||
}
|
||||
},
|
||||
props: {
|
||||
terms: [ Number, String, Array ],
|
||||
options: {
|
||||
type: Array
|
||||
},
|
||||
value: [ Number, String, Array ],
|
||||
allowNew: [ Boolean ]
|
||||
},
|
||||
methods: {
|
||||
search( query ){
|
||||
if( this.terms && this.terms.length > 0 ){
|
||||
let result = this.terms.filter( ( item ) => {
|
||||
let name = item.name.toLowerCase();
|
||||
let q = query.toLowerCase();
|
||||
return ( name.indexOf(q) >= 0 )
|
||||
});
|
||||
this.labels = [];
|
||||
for( let term of result){
|
||||
this.labels.push({label: term.name, value: term.term_id})
|
||||
}
|
||||
}
|
||||
},
|
||||
selectedValues(){
|
||||
if( this.value && this.value.length > 0 && this.selected.length === 0){
|
||||
let result = this.terms.filter( ( item ) => {
|
||||
let id = item.term_id;
|
||||
return ( this.value.indexOf( id ) >= 0 )
|
||||
});
|
||||
|
||||
let selected = [];
|
||||
for( let term of result){
|
||||
selected.push({label: term.name, value: term.term_id})
|
||||
}
|
||||
this.selected = selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<b-field :label="field.field.name"
|
||||
:message="getErrorMessage"
|
||||
:type="fieldTypeMessage">
|
||||
<div>
|
||||
<div v-if="isTextInputComponent( field.field.field_type_object.component )">
|
||||
<component :id="field.field.field_type_object.component + '-' + field.field.slug" :is="field.field.field_type_object.component" v-model="inputs[0]" :field="field" @blur="changeValue()"></component>
|
||||
<div v-if="field.field.multiple == 'yes'">
|
||||
<div v-if="index > 0" v-for="(input, index) in inputsList " v-bind:key="index" class="multiple-inputs">
|
||||
|
|
@ -11,6 +11,12 @@
|
|||
<a class="button" @click="addInput">+</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<component
|
||||
:id="field.field.field_type_object.component + '-' + field.field.slug"
|
||||
:is="field.field.field_type_object.component" v-model="inputs"
|
||||
:field="field" @blur="changeValue()"></component>
|
||||
</div>
|
||||
</b-field>
|
||||
</template>
|
||||
|
||||
|
|
@ -69,6 +75,10 @@
|
|||
removeInput(index) {
|
||||
this.inputs.splice(index, 1);
|
||||
this.changeValue();
|
||||
},
|
||||
isTextInputComponent( component ){
|
||||
let array = ['tainacan-relationship','tainacan-category'];
|
||||
return !( array.indexOf( component ) >= 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue