Skip to content
GitLab
Commit 2449629b authored by MARCO Jonathan's avatar MARCO Jonathan
Browse files

♻️ Refactor renderer & builder to use a mixin

parent e9b1464a
Hide whitespace changes
Inline Side-by-side
src/components/formbuilder/UsfBuilder/UsfBuilder.vue
View file @ 2449629b
......@@ -39,10 +39,13 @@ import vue, { PropType } from 'vue';
import { StartField } from '#form-plugin/models/form';
import { Messages } from '#form-plugin/models/messages';
import { UserTemplates } from '#form-plugin/models/user';
import builderRendererMixin from '@form-plugin/mixins/builderRendererMixin';
export default vue.extend({
name: 'UsfBuilder',
mixins: [builderRendererMixin],
components: {
UsfEditor,
UsfControls,
......@@ -61,66 +64,6 @@ export default vue.extend({
required: false,
default: () => [],
},
isHybridForm: {
type: Boolean as PropType<boolean>,
required: false,
default: false,
},
fields: {
type: Array as PropType<StartField[]>,
required: false,
default: () => [],
},
messages: {
type: Object as PropType<Messages>,
required: false,
default: () => ({}),
},
userTemplates: {
required: false,
default: () => ({}),
type: Object as PropType<UserTemplates>,
validator: (templates: UserTemplates): boolean => {
const isValidType = (value, type, name = undefined): boolean => {
return !!value && value.constructor === type && (name ? value.name === name : true);
};
return isValidType(templates, Object) &&
Object.values(templates)
.reduce<boolean>((isPreviousTemplateValid: boolean, template) => {
return isPreviousTemplateValid &&
isValidType(template, Object) &&
Object.values(template)
.reduce<boolean>((isPreviousAttributeValid, attribute) => {
const requiredKeys = {
type: {
type: Function,
name: ['String', 'Array'],
},
};
const hasValidKeys = (keys) => {
return Object.entries(keys)
.reduce<boolean>(
(isPreviousKeyValid,
[key, type]: [string, { type: ArrayConstructor | ObjectConstructor | FunctionConstructor, name: any }],
) => {
return isPreviousKeyValid
&& Object.keys(attribute).includes(key)
&& (type.name
? type.name.reduce((isPreviousTypeValid, currentType) => {
return isPreviousTypeValid ||
isValidType(attribute[key], type.type, currentType);
}, false)
: isValidType(attribute[key], type.type));
}, true);
};
return isPreviousAttributeValid
&& isValidType(attribute, Object)
&& hasValidKeys(requiredKeys);
}, true);
}, true);
},
},
admin: {
type: Boolean as PropType<boolean>,
required: false,
......@@ -148,34 +91,6 @@ export default vue.extend({
}),
watch: {
isHybridForm: {
immediate: true,
deep: false,
handler(value: boolean) {
this.$store.dispatch('form/setHybridStatus', value);
},
},
fields: {
deep: true,
immediate: true,
handler(value: StartField[]) {
this.$store.dispatch('form/setFields', value);
},
},
messages: {
deep: true,
immediate: true,
handler(value: Messages) {
this.$store.dispatch('form/setMessages', value);
},
},
userTemplates: {
deep: true,
immediate: true,
handler(value) {
this.$store.dispatch('user/updateTemplates', value);
},
},
admin: {
immediate: true,
handler(value) {
......
src/components/formrenderer/UsfRenderer/UsfRenderer.vue
View file @ 2449629b
......@@ -37,20 +37,18 @@ import { UsfField } from '../../fields';
import Vue, { PropType } from 'vue';
import { Field } from '#form-plugin/models/form';
import { UserTemplates } from '#form-plugin/models/user';
import builderRendererMixin from '@form-plugin/mixins/builderRendererMixin';
export default Vue.extend({
name: 'UsfRenderer',
mixins: [builderRendererMixin],
components: {
UsfField,
},
props: {
isHybridForm: {
type: Boolean as PropType<boolean>,
required: false,
default: false,
},
isSubmitButtonDisplayed: {
type: Boolean as PropType<boolean>,
default: true,
......@@ -71,16 +69,6 @@ export default Vue.extend({
type: String as PropType<string>,
default: 'Valider',
},
fields: {
type: Array as PropType<Field[]>,
required: false,
default: () => [],
},
messages: {
type: Object,
required: false,
default: () => ({}),
},
user: {
type: Object,
default: () => ({}),
......@@ -91,51 +79,6 @@ export default Vue.extend({
default: () => ({}),
required: false,
},
userTemplates: {
required: false,
default: () => ({}),
type: Object as PropType<UserTemplates>,
validator: (templates: UserTemplates): boolean => {
const isValidType = (value, type, name = undefined): boolean => {
return !!value && value.constructor === type && (name ? value.name === name : true);
};
return isValidType(templates, Object) &&
Object.values(templates)
.reduce<boolean>((isPreviousTemplateValid: boolean, template) => {
return isPreviousTemplateValid &&
isValidType(template, Object) &&
Object.values(template)
.reduce<boolean>((isPreviousAttributeValid, attribute) => {
const requiredKeys = {
type: {
type: Function,
name: ['String', 'Array'],
},
};
const hasValidKeys = (keys) => {
return Object.entries(keys)
.reduce<boolean>(
(isPreviousKeyValid,
[key, type]: [string, { type: ArrayConstructor | ObjectConstructor | FunctionConstructor, name: any }],
) => {
return isPreviousKeyValid
&& Object.keys(attribute).includes(key)
&& (type.name
? type.name.reduce((isPreviousTypeValid, currentType) => {
return isPreviousTypeValid ||
isValidType(attribute[key], type.type, currentType);
}, false)
: isValidType(attribute[key], type.type));
}, true);
};
return isPreviousAttributeValid
&& isValidType(attribute, Object)
&& hasValidKeys(requiredKeys);
}, true);
}, true);
},
},
},
computed: {
......@@ -151,34 +94,6 @@ export default Vue.extend({
},
watch: {
isHybridForm: {
deep: false,
immediate: true,
handler(value: boolean): void {
this.$store.dispatch('form/setHybridStatus', value);
},
},
userTemplates: {
deep: true,
immediate: true,
handler(value) {
this.$store.dispatch('user/updateTemplates', value);
},
},
fields: {
deep: true,
immediate: true,
handler(value) {
this.$store.dispatch('form/setFields', value);
},
},
messages: {
deep: true,
immediate: true,
handler(value) {
this.$store.dispatch('form/setMessages', value);
},
},
user: {
deep: true,
immediate: true,
......
src/mixins/builderRendererMixin.ts 0 → 100644
View file @ 2449629b
import Vue, { PropType } from 'vue';
import { StartField } from '#form-plugin/models/form';
import { UserTemplates } from '#form-plugin/models/user';
export default Vue.extend({
props: {
fields: {
type: Array as PropType<StartField[]>,
required: false,
default: () => [],
},
isHybridForm: {
type: Boolean as PropType<boolean>,
required: false,
default: false,
},
messages: {
type: Object,
required: false,
default: () => ({}),
},
userTemplates: {
required: false,
default: () => ({}),
type: Object as PropType<UserTemplates>,
validator: (templates: UserTemplates): boolean => {
const isValidType = (value, type, name = undefined): boolean => {
return !!value && value.constructor === type && (name ? value.name === name : true);
};
return isValidType(templates, Object) &&
Object.values(templates)
.reduce<boolean>((isPreviousTemplateValid: boolean, template) => {
return isPreviousTemplateValid &&
isValidType(template, Object) &&
Object.values(template)
.reduce<boolean>((isPreviousAttributeValid, attribute) => {
const requiredKeys = {
type: {
type: Function,
name: ['String', 'Array'],
},
};
const hasValidKeys = (keys) => {
return Object.entries(keys)
.reduce<boolean>(
(isPreviousKeyValid,
[key, type]: [string, { type: ArrayConstructor | ObjectConstructor | FunctionConstructor, name: any }],
) => {
return isPreviousKeyValid
&& Object.keys(attribute).includes(key)
&& (type.name
? type.name.reduce((isPreviousTypeValid,
currentType,
) => {
return isPreviousTypeValid ||
isValidType(attribute[key], type.type, currentType);
}, false)
: isValidType(attribute[key], type.type));
}, true);
};
return isPreviousAttributeValid
&& isValidType(attribute, Object)
&& hasValidKeys(requiredKeys);
}, true);
}, true);
},
},
},
watch: {
fields: {
deep: true,
immediate: true,
handler(value: StartField[]) {
this.$store.dispatch('form/setFields', value);
},
},
isHybridForm: {
immediate: true,
deep: false,
handler(value: boolean) {
this.$store.dispatch('form/setHybridStatus', value);
},
},
userTemplates: {
deep: true,
immediate: true,
handler(value) {
this.$store.dispatch('user/updateTemplates', value);
},
},
messages: {
deep: true,
immediate: true,
handler(value) {
this.$store.dispatch('form/setMessages', value);
},
},
},
});
Supports Markdown
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