creating web component for Relationship form options

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

@@ -0,0 +1,174 @@
+<template>
+    <section>
+        <b-field label="Collection related">
+            <b-select
+                    name="field_type_relationship[collection_id]"
+                    placeholder="Select the collection to fetch items"
+                    v-model="collection"
+                    :loading="loading">
+                <option value="">Select...</option>
+                <option
+                        v-for="option in collections"
+                        :value="option.id"
+                        :key="option.id">
+                    {{ option.name }}
+                </option>
+            </b-select>
+        </b-field>
+
+        <transition name="fade">
+            <div
+                v-if="loadingFields"
+                class="loading-spinner"></div>
+            <b-field
+                    v-if="hasFields"
+                    label="Field for search">
+                <div class="block">
+                    <div
+                        v-for="option in fields"
+                        class="field">
+                        <b-checkbox
+                                name="field_type_relationship[search][]"
+                                v-model="modelSearch"
+                                :native-value="option.id">
+                            {{ option.name }}
+                        </b-checkbox>
+                    </div>
+                </div>
+            </b-field>
+
+        </transition>
+
+
+        <b-field label="Allow repeated items">
+            <div class="block">
+                <div class="field">
+                    <b-radio name="field_type_relationship[repeated]"
+                             v-model="modelRepeated"
+                             size="is-small"
+                             native-value="yes">
+                        Yes
+                    </b-radio>
+                </div>
+                <div class="field">
+                    <b-radio name="field_type_relationship[repeated]"
+                             v-model="modelRepeated"
+                             size="is-small"
+                             native-value="no">
+                        No
+                    </b-radio>
+                </div>
+                </div>
+        </b-field>
+    </section>
+</template>
+
+<script>
+    import axios from '../../../js/axios/axios';
+
+    export default {
+        props: {
+            search: [ String ],
+            collection_id: [ Number ],
+            repeated: [ String ],
+        },
+        data(){
+            return {
+                collections:[],
+                fields: [],
+                loading: true,
+                collection: '',
+                hasFields: false,
+                loadingFields: false,
+                modelRepeated: 'yes',
+                modelSearch:[]
+            }
+        },
+        watch:{
+            collection( value ){
+                this.collection = value;
+                if( value && value !== '' ) {
+                    this.fetchFieldsFromCollection(value);
+                } else {
+                    this.fields = [];
+                    this.hasFields = false;
+                }
+            }
+        },
+        created(){
+           this.fetchCollections().then( data => {
+               if( this.collection_id !== '' ){
+                   this.collection = this.collection_id;
+               }
+           })
+
+           if( this.repeated ){
+               this.modelRepeated = this.repeated;
+           }
+        },
+        methods:{
+            fetchCollections(){
+                return axios.get('/collections')
+                    .then(res => {
+                        let collections = res.data;
+                        this.loading = false;
+
+                        if( collections ){
+                            this.collections = collections;
+                        } else {
+                            this.collections = [];
+                        }
+                    })
+                    .catch(error => {
+                        console.log(error);
+                        reject(error);
+                    });
+            },
+            fetchFieldsFromCollection( value ){
+                this.loadingFields = true;
+                this.hasFields = false;
+
+                axios.get('/collection/' + value + '/fields/')
+                    .then((res) => {
+                        this.loadingFields = false;
+                        let fields = res.data;
+
+                        if( fields.length > 0 ){
+
+                            for( let field of fields ){
+                               if( field.field_type !== "Tainacan\\Field_Types\\Relationship"){
+                                   this.fields.push( field );
+                                   this.hasFields = true;
+                                   this.checkFields()
+                               }
+                            }
+
+                        } else {
+                            this.fields = [];
+                            this.hasFields = false;
+                            this.$toast.open({
+                                duration: 4000,
+                                message: `No fields found in this collection`,
+                                position: 'is-bottom',
+                                type: 'is-danger'
+                            })
+                        }
+                    })
+                    .catch((error) => {
+                        this.hasFields = false;
+                        console.log(error);
+                    });
+
+            },
+            checkFields(){
+                try {
+                    const json = JSON.parse( this.search );
+                    this.modelSearch = json;
+                } catch(e){
+                    this.modelSearch = [];
+                }
+
+            }
+        }
+    }
+</script>

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

@@ -32,10 +32,19 @@ class Relationship extends Field_Type {
                             name="'.$itemMetadata->get_field()->get_name().'"></tainacan-relationship>';
     }
 
+    public function form(){
+        ?>
+        <tainacan-form-relationship
+                            collection_id="<?php echo ( $this->options['collection_id'] ) ? $this->options['collection_id'] : '' ?>"
+                            repeated="<?php echo ( $this->options['repeated'] ) ? $this->options['repeated'] : 'yes' ?>"
+                            search='<?php echo ( $this->options['search'] ) ? json_encode($this->options['search']) : '' ?>'
+                                    ></tainacan-form-relationship>
+        <?php
+    }
     /**
      * generate the fields for this field type
      */
-    public function form(){
+    public function form_raw(){
         ?>
         <tr>
             <td>

src/js/main.js

@@ -20,6 +20,8 @@ import Numeric from '../classes/field-types/numeric/Numeric.vue';
 import Date from '../classes/field-types/date/Date.vue';
 import Relationship from '../classes/field-types/relationship/Relationship.vue';
 
+import FormRelationship from '../classes/field-types/relationship/FormRelationship.vue';
+
 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';
@@ -50,6 +52,11 @@ eventBus.registerComponent( 'tainacan-relationship' );
 
 eventBus.listener();
 
+/* Form */
+
+Vue.customElement('tainacan-form-relationship', FormRelationship);
+eventBus.registerComponent( 'tainacan-form-relationship' );
+
 /* Filters */
 
 Vue.customElement('tainacan-filter-custom-interval', FilterCustomInterval);