Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
vue-unistra
formbuilder
Commits
2449629b
Commit
2449629b
authored
Oct 07, 2021
by
MARCO Jonathan
Browse files
♻
️ Refactor renderer & builder to use a mixin
parent
e9b1464a
Changes
3
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
);
},
},
},
});
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment