Commit 018139c2 authored by Jean Rabreau's avatar Jean Rabreau
Browse files

️remove ItemFormMetada to clarify submission logic

parent 7dde0215
Pipeline #62990 passed with stages
in 4 minutes and 40 seconds
<template>
<usf-renderer
ref="itemFormMetadata"
:fields="template.fields"
:messages="template.messages"
:submitted-data="submittedData"
:isSubmitButtonDisplayed="false"
/>
</template>
<script>
import MetaSaveMixin from '@/mixins/MetaSaveMixin';
export default {
name: 'ItemFormMetadata',
props: {
template: {
type: Object,
required: true,
},
metaData: {
type: Array,
required: false,
default: () => ([]),
},
},
mixins: [
MetaSaveMixin,
],
data: function() {
return {
item: {
metadata: this.metaData,
},
};
},
computed: {
submittedData() {
return this.toFormData(this.item.metadata);
},
},
methods: {
validate() {
if(this.$refs.itemFormMetadata.$refs.form.validate()) {
const { title } = this.getState;
this.item = {
...this.item,
title: title,
metadata: this.metadata,
viewer: {},
};
return 100;
}
return 0;
},
},
};
</script>
<script>
import { LAYOUT_COMPONENTS } from '@/store/template'
import { mapGetters } from 'vuex'
import {mapGetters} from 'vuex'
import {LAYOUT_COMPONENTS} from '@/store/template'
export default {
name: "MetaSaveMixin",
computed: {
...mapGetters('submission', ['getValue', 'getState']), // formbuilder plugin
...mapGetters('form', ['getFields']),
inputFields() {
return Object.values(this.getFields)
...mapGetters('submission', ['getValue']), // formbuilder plugin
...mapGetters('form', ['getFields']),
inputFields() {
return Object.values(this.getFields)
.filter(f => !LAYOUT_COMPONENTS.includes(f.component))
},
metadata() {
return this.inputFields.reduce((meta,field) => {
const { id, name, repeatGroup, multiple=false } = field
const {isOption, value} = this.getCleanValue(name)
if (typeof value === 'boolean' || !!value) {
if (repeatGroup) {
const rootName = name.match(/^.+(?=\d+$)/)[0]
const rootField = meta.find(d => d.name === rootName)
if (rootField) {
rootField.value.push(value)
},
storedMetadata() {
return this.inputFields.reduce((meta,field) => {
const { id, name, repeatGroup, multiple=false } = field
const {isOption, value} = this.getCleanValue(name)
if (typeof value === 'boolean' || !!value) {
if (repeatGroup) {
const rootName = name.match(/^.+(?=\d+$)/)[0]
const rootField = meta.find(d => d.name === rootName)
if (rootField) {
rootField.value.push(value)
} else {
meta.push({
id,
isOption,
multiple,
name: rootName,
repeatable: true,
value: [value],
})
}
} else {
meta.push({
id,
isOption,
multiple,
name: rootName,
repeatable: true,
value: [value],
name,
repeatable: false,
value,
})
}
} else {
meta.push({
id,
isOption,
multiple,
name,
repeatable: false,
value,
})
}
}
return meta
}, [])
},
return meta
}, [])
},
},
methods: {
/**
......@@ -57,35 +58,8 @@ export default {
getCleanValue(name) {
const rawValue = this.getValue(name)
return typeof rawValue === 'object'
? { isOption: true, value: rawValue.value }
: { isOption: false, value: rawValue }
},
/**
* Restore original formbuilder format
* of repeated field and field option value
*
* @param {Metadata} metadata
* @return {{}}
*/
toFormData(metadata) {
const formData = {}
for (const data of metadata) {
if (data.repeatable) {
data.value.forEach((v,i) => {
const key = `${data.name}${i+1}`
formData[key] = data.isOption ? { value: v }: v
})
} else {
let formValue = data.value
// if (data.multiple && !Array.isArray(formValue)) {
// formValue = [formValue]
// }
formData[data.name] = data.isOption
? { value: formValue }
: formValue
}
}
return formData
? { isOption: true, value: rawValue.value }
: { isOption: false, value: rawValue }
},
}
}
......
......@@ -8,9 +8,11 @@
{{ $t('item.create') }}
</v-card-title>
<v-card-text>
<item-form-metadata
ref="itemFormMetadata"
:template="template"
<usf-renderer
ref="usfRenderer"
:fields="template.fields"
:messages="template.messages"
:isSubmitButtonDisplayed="false"
/>
<item-form-detail
ref="itemFormDetail"
......@@ -47,16 +49,16 @@
import store from '@/store';
import CanContributeMixin from '@/mixins/CanContributeMixin';
import { mapState, mapGetters, mapActions } from 'vuex';
import ItemFormMetadata from '@/components/item/ItemFormMetadata';
import ItemFormDetail from '@/components/item/ItemFormDetail';
import MetaSaveMixin from '@/mixins/MetaSaveMixin'
export default {
name: 'ItemCreate',
mixins: [
CanContributeMixin,
MetaSaveMixin
],
components: {
ItemFormMetadata,
ItemFormDetail,
},
computed: {
......@@ -66,12 +68,12 @@ export default {
methods: {
...mapActions('item', ['itemCreate']),
async onSubmit() {
if(this.$refs.itemFormMetadata.validate()) {
const item = {
if(this.$refs.usfRenderer.$refs.form.validate()) {
await this.itemCreate({
...this.$refs.itemFormDetail.item,
...this.$refs.itemFormMetadata.item,
};
await this.itemCreate(item);
title: this.getValue('title'),
metadata: this.storedMetadata
})
const itemId = this.$store.getters['item/itemId'];
this.$router.push({
name: `itemViewer`,
......
<template>
<v-sheet class="mt-2 pa-2">
<item-form-metadata
ref="itemFormMetadata"
:template="template"
:meta-data="item.metadata"
<usf-renderer
ref="usfRenderer"
:fields="template.fields"
:messages="template.messages"
:submitted-data="submittedData"
:isSubmitButtonDisplayed="false"
/>
<v-row>
<v-spacer />
......@@ -32,34 +34,101 @@
</template>
<script>
import { mapState,mapActions } from 'vuex';
import {mapState, mapActions, mapGetters} from 'vuex'
import { LAYOUT_COMPONENTS } from '@/store/template'
import store from '@/store';
import CanEditMixin from '@/mixins/CanEditMixin';
import ItemFormMetadata from '@/components/item/ItemFormMetadata';
import MetaSaveMixin from '@/mixins/MetaSaveMixin'
export default {
name: 'ItemMetadata',
mixins: [
CanEditMixin,
MetaSaveMixin
],
components: {
ItemFormMetadata,
},
computed: {
...mapState('item', { item: 'current' }),
...mapState('template', { template: 'current' }),
...mapGetters('submission', ['getValue']), // formbuilder plugin
...mapGetters('form', ['getFields']),
inputFields() {
return Object.values(this.getFields)
.filter(f => !LAYOUT_COMPONENTS.includes(f.component))
},
storedMetadata() {
return this.inputFields.reduce((meta,field) => {
const { id, name, repeatGroup, multiple=false } = field
const {isOption, value} = this.getCleanValue(name)
if (typeof value === 'boolean' || !!value) {
if (repeatGroup) {
const rootName = name.match(/^.+(?=\d+$)/)[0]
const rootField = meta.find(d => d.name === rootName)
if (rootField) {
rootField.value.push(value)
} else {
meta.push({
id,
isOption,
multiple,
name: rootName,
repeatable: true,
value: [value],
})
}
} else {
meta.push({
id,
isOption,
multiple,
name,
repeatable: false,
value,
})
}
}
return meta
}, [])
},
submittedData() {
return this.toFormData(this.item.metadata)
}
},
methods: {
...mapActions('item', ['itemUpdate']),
/**
* Restore original formbuilder format
* of repeated field and field option value
*
* @param {Metadata[]} metadata
* @return {{}}
*/
toFormData(metadata) {
const formData = {}
for (const data of metadata) {
if (data.repeatable) {
data.value.forEach((v,i) => {
const key = `${data.name}${i+1}`
formData[key] = data.isOption ? { value: v }: v
})
} else {
let formValue = data.value
// if (data.multiple && !Array.isArray(formValue)) {
// formValue = [formValue]
// }
formData[data.name] = data.isOption
? { value: formValue }
: formValue
}
}
return formData
},
onSubmit() {
if(this.$refs.itemFormMetadata.validate()) {
const item = {
...this.item,
...this.$refs.itemFormMetadata.item,
};
this.itemUpdate(item);
if(this.$refs.usfRenderer.$refs.form.validate()) {
this.itemUpdate({
title: this.getValue('title'),
metadata: this.storedMetadata, // MetaSaveMixin
});
}
},
},
beforeRouteEnter(to, from, next) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment