Merge branch 'develop' of https://github.com/tainacan/tainacan into develop

src/classes/field-types/category/Category.vue

@@ -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
+            let field_type_options = this.field.field.field_type_options;
-                && this.field.field.field_type_options && this.field.field.field_type_options.input_type )
+            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');
             }
         }
     }

src/classes/field-types/category/CategoryCheckbox.vue

@@ -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)

src/classes/field-types/category/CategoryRadio.vue

@@ -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)

src/classes/field-types/category/CategoryTaginput.vue

@@ -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>

src/classes/field-types/tainacan-form-item.vue

@@ -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 );
             }
         }
     }