tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds first version of component for compound metadata #17

This commit is contained in:
Mateus Machado Luna 2020-03-04 12:25:05 -03:00
parent 963d48fd9f
commit 6d14dfa8b1
5 changed files with 102 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/admin/components/metadata-types/compound/Compound.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div>
<a
class="collapse-all"
@click="toggleCollapseAllChildren()">
{{ collapseAllChildren ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowdown' : collapseAllChildren, 'tainacan-icon-arrowright' : !collapseAllChildren }"
class="tainacan-icon tainacan-icon-1-25em"/>
</span>
</a>
<component
:is="'tainacan-form-item'"
v-for="(child, index) in children"
:key="index"
:metadatum="child"
:parent-meta-id="metadatum.metadatum.id"
:is-collapsed="childrenMetadataCollapses[index]"
@changeCollapse="onChangeCollapse($event, index)"/>
</div>
</template>
<script>
export default {
props: {
metadatum: Object,
value: [String, Number, Array],
disabled: false
},
data() {
return {
uniqueId: new Date().getTime(),
valueChild: [],
children: [],
collapseAllChildren: false,
childrenMetadataCollapses: [],
}
},
created() {
this.createChildInputs();
},
methods: {
createChildInputs() {
if (this.metadatum.metadatum &&
this.metadatum.metadatum.metadata_type_options &&
this.metadatum.metadatum.metadata_type_options.children_objects.length > 0
) {
for (let metadatum of this.metadatum.metadatum.metadata_type_options.children_objects) {
this.children.push(metadatum);
this.childrenMetadataCollapses.push(true);
}
}
},
toggleCollapseAllChildren() {
this.collapseAllChildren = !this.collapseAllChildren;
for (let i = 0; i < this.childreMetadataCollapses.length; i++)
this.childrenMetadataCollapses[i] = this.collapseAllChildren;
},
onChangeCollapse(event, index) {
this.childrenMetadataCollapses.splice(index, 1, event);
}
}
}
</script>
<style lang="scss" scoped>
@import '../../../admin/scss/_variables.scss';
</style>

7
src/views/admin/components/metadata-types/compound/class-tainacan-compound.php
View File

@ -16,12 +16,10 @@ class Compound extends Metadata_Type {
// call metadatum type constructor
parent::__construct();
$this->set_name( __('Compound', 'tainacan') );
$this->set_description( __('A compount metadata', 'tainacan') );
$this->set_description( __('A compound metadata can have different types with groups of values.', 'tainacan') );
$this->set_primitive_type('compound');
$this->set_component('tainacan-compound');
$this->set_form_component('tainacan-form-compound');
add_action( 'tainacan-insert-tainacan-metadatum', array( &$this, 'save_children' ), 10, 1 );
$this->set_preview_template('
<div>
<div class="control is-clearfix">
@ -29,6 +27,7 @@ class Compound extends Metadata_Type {
</div>
</div>
');
add_action( 'tainacan-insert-tainacan-metadatum', array( &$this, 'save_children' ), 10, 1 );
}
/**
@ -107,7 +106,7 @@ class Compound extends Metadata_Type {
/**
* Overrides and bring back all data for the children
* that were not set yet.
* @return array Field type options
* @return array Metadata type options
*/
public function get_options() {
$Tainacan_Metadata = \Tainacan\Repositories\Metadata::get_instance();

8
src/views/admin/components/metadata-types/tainacan-form-item.vue
View File

@ -108,7 +108,8 @@
name: 'TainacanFormItem',
props: {
metadatum: Object,
isCollapsed: true
isCollapsed: true,
parentMetaId: false
},
data(){
return {
@ -182,12 +183,13 @@
eventBusItemMetadata.$emit('input', {
itemId: this.metadatum.item.id,
metadatumId: this.metadatum.metadatum.id,
values: this.inputs ? this.inputs : ''
values: this.inputs ? this.inputs : '',
parentMetaId: this.parentMetaId
});
},
createInputs() {
if (this.metadatum.value instanceof Array)
this.inputs = this.metadatum.value.slice(0);
this.inputs = this.metadatum.value.slice(0); // This way we garantee this.inputs is a copy of the contents of this.metadatum.value, instead of a reference to it
else
this.metadatum.value == null || this.metadatum.value == undefined ? this.inputs = [] : this.inputs.push(this.metadatum.value);
},

21
src/views/admin/js/event-bus-item-metadata.js
View File

@ -4,10 +4,8 @@ import store from './store/store'
export const eventBusItemMetadata = new Vue({
store,
data: {
errors : []
},
created() {
this.$on('input', this.updateValue);
errors : [],
compoundsMap: []
},
watch: {
errors() {
@ -18,8 +16,14 @@ export const eventBusItemMetadata = new Vue({
}
}
},
created() {
this.$on('input', this.updateValue);
},
beforeUpdate() {
this.$off('input', this.updateValue);
},
methods : {
updateValue({ itemId, metadatumId, values}){
updateValue({ itemId, metadatumId, values, parentMetaId }){
this.$emit('isUpdatingValue', true);
@ -33,7 +37,8 @@ export const eventBusItemMetadata = new Vue({
this.$store.dispatch('item/updateMetadata', {
item_id: itemId,
metadatum_id: metadatumId,
values: Array.isArray(values[0]) ? values[0] : values
values: Array.isArray(values[0]) ? values[0] : values,
parent_meta_id: parentMetaId ? parentMetaId : null
})
.then(() => {
this.$emit('isUpdatingValue', false);
@ -66,9 +71,5 @@ export const eventBusItemMetadata = new Vue({
clearAllErrors() {
this.errors = [];
}
},
beforeUpdate() {
this.$off('input', this.updateValue);
}
});

11
src/views/admin/js/store/modules/item/actions.js
View File

@ -17,11 +17,14 @@ export const sendMetadatum = ( { commit }, { item_id, metadatum_id, values }) =>
});
};
export const updateMetadata = ({ commit }, { item_id, metadatum_id, values }) => {
export const updateMetadata = ({ commit }, { item_id, metadatum_id, values, parent_meta_id }) => {
let body = { values: values }
if (parent_meta_id != undefined && parent_meta_id != null && parent_meta_id != false)
body['parent_meta_id'] = parent_meta_id;
return new Promise((resolve, reject) => {
axios.tainacan.patch(`/item/${item_id}/metadata/${metadatum_id}`, {
values: values,
})
axios.tainacan.patch(`/item/${item_id}/metadata/${metadatum_id}`, body)
.then( res => {
let metadatum = res.data;
commit('setSingleMetadatum', metadatum);