create stubs for all filter type

src/classes/field-types/relationship/Relationship.vue

@@ -1,14 +1,5 @@
 <template>
     <div>
-        <!--b-autocomplete
-                :id="id"
-                v-model="selected"
-                :data="options"
-                @input="search"
-                :loading="loading"
-                field="label"
-                @select="option => setResults(option) ">
-        </b-autocomplete-->
         <b-taginput
                 :id="id"
                 v-model="selected"

src/classes/field-types/relationship/class-tainacan-relationship.php

@@ -14,7 +14,7 @@ class Relationship extends Field_Type {
     function __construct(){
         // call field type constructor
         parent::__construct();
-        parent::set_primitive_type('');
+        parent::set_primitive_type('item');
         $this->component = 'tainacan-relationship';
         $this->form_component = 'tainacan-form-relationship';
     }

src/classes/filter-types/autocomplete/Autocomplete.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-    import axios from '../../../js/axios/axios'
+    import { tainacan as axios } from '../../../js/axios/axios'
 
     export default {
         created(){

src/classes/filter-types/autocomplete/class-tainacan-autocomplete.php

@@ -9,7 +9,7 @@ defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
 class Autocomplete extends Filter_Type {
 
     function __construct(){
-        parent::set_supported_types(['string','relation']);
+        parent::set_supported_types(['string','item']);
         $this->component = 'tainacan-filter-autocomplete';
     }
 

src/classes/filter-types/category/Checkbox.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="block">
+        <div
+                v-for="option,index in options"
+                :key="index"
+                class="field">
+            <b-checkbox
+                    v-model="selected"
+                    :native-value="option.value"
+            >{{ option.label }}</b-checkbox>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from '../../../js/axios/axios'
+
+    export default {
+        created(){
+            this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
+            this.field = ( this.field_id ) ? this.field_id : this.filter.collection_id;
+            this.type = ( this.filter_type ) ? this.filter_type : this.filter.field.field_type;
+            this.loadOptions();
+        },
+        data(){
+            return {
+                isLoading: false,
+                options: [],
+                type: '',
+                collection: '',
+                field: '',
+                selected: [],
+            }
+        },
+        props: {
+            filter: {
+                type: Object // concentrate all attributes field id and type
+            },
+            field_id: [Number], // not required, but overrides the filter field id if is set
+            collection_id: [Number], // not required, but overrides the filter field id if is set
+            filter_type: [String],  // not required, but overrides the filter field type if is set
+            id: ''
+        },
+        watch: {
+            checked: function(val){
+                this.checked = val;
+                this.onSelect();
+            }
+        },
+        methods: {
+            getValuesCategory( taxonomy ){
+                // TODO: get taxonomy terms
+            },
+            loadOptions(){
+                let promise = null;
+                this.isLoading = true;
+
+                promise = this.getValuesCategory( this.field );
+
+                promise.then( data => {
+                    this.isLoading = false;
+                })
+                .catch( error => {
+                    console.log('error select', error );
+                    this.isLoading = false;
+                });
+            },
+            onSelect(){
+                this.$emit('input', {
+                    filter: 'term',
+                    field_id: ( this.field_id ) ? this.field_id : this.filter.field,
+                    collection_id: ( this.collection_id ) ? this.collection_id : this.filter.collection_id,
+                    value: this.selected
+                });
+            }
+        }
+    }
+</script>

src/classes/filter-types/category/Selectbox.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="block">
+        <b-select
+                :id = "id"
+                :laoding = "isLoading"
+                v-model = "selected"
+                @input = "onSelect()"
+                expanded>
+            <option
+                    v-for="option,index in options"
+                    :key="index"
+                    :label="option.label"
+                    :value="option.value"
+                    border>{{ option.label }}</option>
+        </b-select>
+    </div>
+</template>
+
+<script>
+    import { tainacan as axios } from '../../../js/axios/axios'
+
+    export default {
+        created(){
+            this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
+            this.field = ( this.field_id ) ? this.field_id : this.filter.collection_id;
+            this.loadOptions();
+        },
+        data(){
+            return {
+                isLoading: false,
+                options: [],
+                collection: '',
+                field: '',
+                selected: '',
+            }
+        },
+        props: {
+            filter: {
+                type: Object // concentrate all attributes field id and type
+            },
+            field_id: [Number], // not required, but overrides the filter field id if is set
+            collection_id: [Number], // not required, but overrides the filter field id if is set
+            filter_type: [String],  // not required, but overrides the filter field type if is set
+            id: ''
+        },
+        methods: {
+            getValuesCategory( taxonomy ){
+                // TODO: get taxonomy terms
+            },
+            loadOptions(){
+                let promise = null;
+                this.isLoading = true;
+                let collectionTarget = ( this.filter && this.filter.field.field_type_options.taxonomy_id ) ?
+                    this.filter.field.field_type_options.taxonomy_id : this.taxonomy_id;
+                promise = this.getValuesCategory( collectionTarget );
+
+                promise.then( data => {
+                    this.isLoading = false;
+                })
+                .catch( error => {
+                    console.log('error select', error );
+                    this.isLoading = false;
+                });
+            },
+            onSelect(){
+                this.$emit('input', {
+                    filter: 'term',
+                    field_id: ( this.field_id ) ? this.field_id : this.filter.field,
+                    collection_id: ( this.collection_id ) ? this.collection_id : this.filter.collection_id,
+                    value: this.selected
+                });
+            }
+        }
+    }
+</script>

src/classes/filter-types/category/Taginput.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="block">
+        <b-taginput
+                rounded
+                icon="magnify"
+                v-model="selected"
+                :data="options"
+                autocomplete
+                :loading="loading"
+                field="label"
+                @typing="search">
+        </b-taginput>
+    </div>
+</template>
+
+<script>
+    import { tainacan as axios } from '../../../js/axios/axios'
+
+    export default {
+        created(){
+            this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
+            this.field = ( this.field_id ) ? this.field_id : this.filter.collection_id;
+            this.type = ( this.filter_type ) ? this.filter_type : this.filter.field.field_type;
+        },
+        data(){
+            return {
+                results:'',
+                selected:[],
+                options: [],
+                isLoading: false,
+                type: '',
+                collection: '',
+                field: '',
+                selected: '',
+            }
+        },
+        props: {
+            filter: {
+                type: Object // concentrate all attributes field id and type
+            },
+            field_id: [Number], // not required, but overrides the filter field id if is set
+            collection_id: [Number], // not required, but overrides the filter field id if is set
+            filter_type: [String],  // not required, but overrides the filter field type if is set
+            id: ''
+        },
+        watch: {
+            selected( value ){
+                this.selected = value;
+                let values = [];
+                if( this.selected.length > 0 ){
+                    for(let val of this.selected){
+                        values.push( val.value );
+                    }
+                }
+                this.$emit('input', {
+                    filter: 'taginput',
+                    field_id: ( this.field_id ) ? this.field_id : this.filter.field,
+                    collection_id: ( this.collection_id ) ? this.collection_id : this.filter.collection_id,
+                    value: values
+                });
+            }
+        },
+        methods: {
+            search( query ){
+                let promise = null;
+                this.options = [];
+                promise = this.getValuesCategory( this.field, query );
+
+                promise.then( data => {
+                    this.isLoading = false;
+                })
+                    .catch( error => {
+                        console.log('error select', error );
+                        this.isLoading = false;
+                    });
+            },
+            getValuesCategory( taxonomy ){
+                // TODO: get taxonomy terms
+            },
+        }
+    }
+</script>

src/classes/filter-types/category/class-tainacan-checkbox.php

@@ -0,0 +1,28 @@
+<?php
+namespace Tainacan\Filter_Types\Category;
+use Tainacan\Filter_Types;
+
+defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
+
+/**
+ * Class TainacanFieldType
+ */
+class Checkbox extends Filter_Types\Filter_Type {
+
+    function __construct(){
+        parent::set_supported_types(['term']);
+        $this->component = 'tainacan-filter-category-checkbox';
+    }
+
+    /**
+     * @param $filter
+     * @return string
+     */
+
+    public function render( $filter ){
+        return '<tainacan-filter-category-checkbox name="'.$filter->get_name().'"
+                                        filter_type="'.$filter->get_field()->get_field_type().'"
+                                        collection_id="'.$filter->get_collection_id().'"
+                                        field_id="'.$filter->get_field()->get_id().'"></tainacan-filter-checkbox>';
+    }
+}

src/classes/filter-types/category/class-tainacan-selectbox.php

@@ -0,0 +1,28 @@
+<?php
+namespace Tainacan\Filter_Types\Category;
+use Tainacan\Filter_Types;
+
+defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
+
+/**
+ * Class TainacanFieldType
+ */
+class Selectbox extends Filter_Types\Filter_Type {
+
+    function __construct(){
+        parent::set_supported_types(['term']);
+        $this->component = 'tainacan-filter-category-selectbox';
+    }
+
+    /**
+     * @param $filter
+     * @return string
+     */
+
+    public function render( $filter ){
+        return '<tainacan-filter-category-selectbox name="'.$filter->get_name().'"
+                                        filter_type="'.$filter->get_field()->get_field_type().'"
+                                        collection_id="'.$filter->get_collection_id().'"
+                                        field_id="'.$filter->get_field()->get_id().'"></tainacan-filter-selectbox>';
+    }
+}

src/classes/filter-types/category/class-tainacan-taginput.php

@@ -0,0 +1,28 @@
+<?php
+namespace Tainacan\Filter_Types\Category;
+use Tainacan\Filter_Types;
+
+defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
+
+/**
+ * Class Taginput
+ */
+class Taginput extends Filter_Types\Filter_Type {
+
+    function __construct(){
+        parent::set_supported_types(['term']);
+        $this->component = 'tainacan-filter-category-taginput';
+    }
+
+    /**
+     * @param $filter
+     * @return string
+     */
+
+    public function render( $filter ){
+        return '<tainacan-filter-category-taginput name="'.$filter->get_name().'"
+                                        filter_type="'.$filter->get_field()->get_field_type().'"
+                                        collection_id="'.$filter->get_collection_id().'"
+                                        field_id="'.$filter->get_field()->get_id().'"></tainacan-filter-taginput>';
+    }
+}

src/classes/filter-types/checkbox/Checkbox.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="block">
+        <div
+                v-for="option,index in options"
+                :key="index"
+                class="field">
+            <b-checkbox
+                    v-model="selected"
+                    :native-value="option.value"
+            >{{ option.label }}</b-checkbox>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from '../../../js/axios/axios'
+
+    export default {
+        created(){
+            this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
+            this.field = ( this.field_id ) ? this.field_id : this.filter.collection_id;
+            this.type = ( this.filter_type ) ? this.filter_type : this.filter.field.field_type;
+            this.loadOptions();
+        },
+        data(){
+            return {
+                isLoading: false,
+                options: [],
+                type: '',
+                collection: '',
+                field: '',
+                selected: [],
+            }
+        },
+        props: {
+            filter: {
+                type: Object // concentrate all attributes field id and type
+            },
+            field_id: [Number], // not required, but overrides the filter field id if is set
+            collection_id: [Number], // not required, but overrides the filter field id if is set
+            filter_type: [String],  // not required, but overrides the filter field type if is set
+            id: ''
+        },
+        watch: {
+            checked: function(val){
+                this.checked = val;
+                this.onSelect();
+            }
+        },
+        methods: {
+            getValuesPlainText( field_id ){
+                return axios.get( '/collection/' + this.collection_id  + '/fields/' + field_id + '?fetch=all_field_values')
+                    .then( res => {
+                        for (let metadata of res.data) {
+                            let index = this.options.findIndex(itemMetadata => itemMetadata.value === metadata.mvalue);
+                            if( index < 0 ){
+                                this.options.push({ label: metadata.mvalue, value: metadata.mvalue })
+                            }
+
+                        }
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            },
+            getValuesRelationship( collectionTarget ){
+                 return axios.get( '/collection/' + collectionTarget  + '/items' )
+                    .then( res => {
+
+                        for (let item of res.data) {
+                            this.options.push({ label: item.title, value: item.id })
+                        }
+
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            },
+            loadOptions(){
+                let promise = null;
+                this.isLoading = true;
+
+                if ( this.type === 'Tainacan\Field_types\Relationship' ) {
+
+                    let collectionTarget = ( this.filter && this.filter.field.field_type_options.collection_id ) ?
+                        this.filter.field.field_type_options.collection_id : this.collection_id;
+                    promise = this.getValuesRelationship( collectionTarget );
+
+                } else {
+                    promise = this.getValuesPlainText( this.field );
+                }
+
+                promise.then( data => {
+                    this.isLoading = false;
+                })
+                .catch( error => {
+                    console.log('error select', error );
+                    this.isLoading = false;
+                });
+            },
+            onSelect(){
+                this.$emit('input', {
+                    filter: 'selectbox',
+                    field_id: ( this.field_id ) ? this.field_id : this.filter.field,
+                    collection_id: ( this.collection_id ) ? this.collection_id : this.filter.collection_id,
+                    value: this.selected
+                });
+            }
+        }
+    }
+</script>

src/classes/filter-types/checkbox/class-tainacan-checkbox.php

@@ -0,0 +1,27 @@
+<?php
+namespace Tainacan\Filter_Types;
+
+defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
+
+/**
+ * Class TainacanFieldType
+ */
+class Checkbox extends Filter_Type {
+
+    function __construct(){
+        parent::set_supported_types(['string','item']);
+        $this->component = 'tainacan-filter-checkbox';
+    }
+
+    /**
+     * @param $filter
+     * @return string
+     */
+
+    public function render( $filter ){
+        return '<tainacan-filter-checkbox name="'.$filter->get_name().'"
+                                        filter_type="'.$filter->get_field()->get_field_type().'"
+                                        collection_id="'.$filter->get_collection_id().'"
+                                        field_id="'.$filter->get_field()->get_id().'"></tainacan-filter-selectbox>';
+    }
+}

src/classes/filter-types/taginput/Taginput.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="block">
+        <b-taginput
+                rounded
+                icon="magnify"
+                v-model="selected"
+                :data="options"
+                autocomplete
+                :loading="loading"
+                field="label"
+                @typing="search">
+        </b-taginput>
+    </div>
+</template>
+
+<script>
+    import { tainacan as axios } from '../../../js/axios/axios'
+
+    export default {
+        created(){
+            this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
+            this.field = ( this.field_id ) ? this.field_id : this.filter.collection_id;
+            this.type = ( this.filter_type ) ? this.filter_type : this.filter.field.field_type;
+        },
+        data(){
+            return {
+                results:'',
+                selected:[],
+                options: [],
+                isLoading: false,
+                type: '',
+                collection: '',
+                field: '',
+                selected: '',
+            }
+        },
+        props: {
+            filter: {
+                type: Object // concentrate all attributes field id and type
+            },
+            field_id: [Number], // not required, but overrides the filter field id if is set
+            collection_id: [Number], // not required, but overrides the filter field id if is set
+            filter_type: [String],  // not required, but overrides the filter field type if is set
+            id: ''
+        },
+        watch: {
+            selected( value ){
+                this.selected = value;
+                let values = [];
+                if( this.selected.length > 0 ){
+                    for(let val of this.selected){
+                        values.push( val.value );
+                    }
+                }
+                this.$emit('input', {
+                    filter: 'taginput',
+                    field_id: ( this.field_id ) ? this.field_id : this.filter.field,
+                    collection_id: ( this.collection_id ) ? this.collection_id : this.filter.collection_id,
+                    value: values
+                });
+            }
+        },
+        methods: {
+            search( query ){
+                let promise = null;
+                this.options = [];
+                if ( this.type === 'Tainacan\Field_types\Relationship' ) {
+
+                    let collectionTarget = ( this.filter && this.filter.field.field_type_options.collection_id ) ?
+                        this.filter.field.field_type_options.collection_id : this.collection_id;
+                    promise = this.getValuesRelationship( collectionTarget, query );
+
+                } else {
+                    promise = this.getValuesPlainText( this.field, query );
+                }
+
+                promise.then( data => {
+                    this.isLoading = false;
+                })
+                    .catch( error => {
+                        console.log('error select', error );
+                        this.isLoading = false;
+                    });
+            },
+            getValuesPlainText( field_id ){
+                return axios.get( '/collection/' + this.collection_id  + '/fields/' + field_id + '?fetch=all_field_values')
+                    .then( res => {
+                        for (let metadata of res.data) {
+                            let index = this.options.findIndex(itemMetadata => itemMetadata.value === metadata.mvalue);
+                            if( index < 0 ){
+                                this.options.push({ label: metadata.mvalue, value: metadata.mvalue })
+                            }
+
+                        }
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            },
+            getValuesRelationship( collectionTarget, search ){
+                return axios.get( '/collection/' + collectionTarget  + '/items?s=' + search )
+                    .then( res => {
+                        if( res.data.length > 0 ){
+                           this.getItemsName( collectionTarget, res.data);
+                        }
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            },
+            getItemsName( collectionId, ids){
+                let query = qs.stringify({ postin: ( Array.isArray( ids ) ) ? ids : [ ids ]  });
+
+                return axios.get('/collection/'+collectionId+'/items?' + query)
+                    .then( res => {
+                        for (let item of res.data) {
+                            this.options.push({ label: item.title, value: item.id, img: '' });
+                        }
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            }
+        }
+    }
+</script>

src/classes/filter-types/taginput/class-tainacan-taginput.php

@@ -0,0 +1,27 @@
+<?php
+namespace Tainacan\Filter_Types;
+
+defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
+
+/**
+ * Class TainacanFieldType
+ */
+class Taginput extends Filter_Type {
+
+    function __construct(){
+        parent::set_supported_types(['string','item']);
+        $this->component = 'tainacan-filter-taginput';
+    }
+
+    /**
+     * @param $filter
+     * @return string
+     */
+
+    public function render( $filter ){
+        return '<tainacan-filter-taginput name="'.$filter->get_name().'"
+                                        filter_type="'.$filter->get_field()->get_field_type().'"
+                                        collection_id="'.$filter->get_collection_id().'"
+                                        field_id="'.$filter->get_field()->get_id().'"></tainacan-filter-taginput>';
+    }
+}

src/classes/tainacan-creator.php

@@ -58,7 +58,11 @@ function tainacan_autoload($class_name){
 	    }
 
         if( in_array('Field_Types', $class_path) || in_array('Filter_Types', $class_path) ){
-            $dir.= strtolower(str_replace('_', '-' , $class_name)).'/';
+            if(  in_array('Filter_Types', $class_path) && in_array('Category', $class_path) ){
+                $dir = strtolower( $dir );
+            } else {
+                $dir.= strtolower(str_replace('_', '-' , $class_name)).'/';
+            }
         }
 
         $file = $dir . 'class-tainacan-'. strtolower(str_replace('_', '-' , $class_name)) . '.php';
@@ -94,6 +98,11 @@ $Tainacan_Filters = new \Tainacan\Repositories\Filters();
 $Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Custom_Interval');
 $Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Selectbox');
 $Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Autocomplete');
+$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Taginput');
+$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Checkbox');
+$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Category\Taginput');
+$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Category\Checkbox');
+$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Category\Selectbox');
 
 global $Tainacan_Taxonomies;
 $Tainacan_Taxonomies = new \Tainacan\Repositories\Taxonomies();

src/dev-interface/class-tainacan-dev-interface.php

@@ -469,7 +469,7 @@ class DevInterface {
                     } elseif($prop == 'field_type_options' || $prop == 'filter_type_options') {
                         continue;
                     } elseif ($prop == 'filter_type') {
-                        $class = '\Tainacan\Filter_Types\\'.$value;
+                        $class = str_replace('\\\\','\\','\Tainacan\Filter_Types\\'.$value );
                         update_post_meta($post_id, 'filter_type_options', $_POST['filter_type_'.strtolower( $value ) ] );
                         update_post_meta($post_id, 'filter_type',  wp_slash( get_class( new $class() ) ) );
                     } elseif ($mapped['map'] == 'meta' || $mapped['map'] == 'meta_multi') {

src/js/main.js

@@ -25,6 +25,8 @@ import FormRelationship from '../classes/field-types/relationship/FormRelationsh
 import FilterCustomInterval from '../classes/filter-types/custom-interval/CustomInterval.vue';
 import FilterSelectbox from '../classes/filter-types/selectbox/Selectbox.vue';
 import FilterAutocomplete from '../classes/filter-types/autocomplete/Autocomplete.vue';
+import FilterCheckbox from '../classes/filter-types/checkbox/Checkbox.vue';
+import FilterTaginput from '../classes/filter-types/taginput/Taginput.vue';
 
 Vue.customElement('tainacan-text', Text);
 eventBus.registerComponent( 'tainacan-text' );
@@ -69,4 +71,10 @@ eventFilterBus.registerComponent( 'tainacan-filter-selectbox' );
 Vue.customElement('tainacan-filter-autocomplete', FilterAutocomplete);
 eventFilterBus.registerComponent( 'tainacan-filter-autocomplete' );
 
+Vue.customElement('tainacan-filter-checkbox', FilterCheckbox);
+eventFilterBus.registerComponent( 'tainacan-filter-checkbox' );
+
+Vue.customElement('tainacan-filter-taginput', FilterTaginput);
+eventFilterBus.registerComponent( 'tainacan-filter-taginput' );
+
 eventFilterBus.listener();

tests/test-filters.php

@@ -99,7 +99,7 @@ class Filters extends TAINACAN_UnitTestCase {
         global $Tainacan_Filters;
 
         $all_filter_types = $Tainacan_Filters->fetch_filter_types();
-        $this->assertEquals( 3, count( $all_filter_types ) );
+        $this->assertEquals( 8, count( $all_filter_types ) );
 
         $float_filters = $Tainacan_Filters->fetch_supported_filter_types('float');
         $this->assertTrue( count( $float_filters ) > 0 );