creating web component for Relationship form options
This commit is contained in:
Eduardo humberto
parent
4b544da799
commit
05de016df4
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue