didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add field default values

Browse Source
This commit is contained in:
Pete Matsyburka
2023-11-05 01:41:54 +02:00
parent 7210badde9
commit 59d9a59769
6 changed files with 153 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/submission_form/form.vue
+8 -2
View File
@@ -513,9 +513,15 @@ export default {
mounted () {
this.submittedValues = JSON.parse(JSON.stringify(this.values))
this.fields.forEach((field) => {
if (field.default_value && !field.readonly) {
this.values[field.uuid] = field.default_value
}
})
if (this.goToLast) {
const requiredEmptyStepIndex = this.stepFields.indexOf(this.stepFields.find((fields) => fields.some((f) => f.required && !this.values[f.uuid])))
const lastFilledStepIndex = this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1
const requiredEmptyStepIndex = this.stepFields.indexOf(this.stepFields.find((fields) => fields.some((f) => f.required && !this.submittedValues[f.uuid])))
const lastFilledStepIndex = this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1
const indexesList = [this.stepFields.length - 1]
app/javascript/template_builder/area.vue
+34 -23
View File
@@ -95,18 +95,27 @@
</button>
</div>
<div
class="opacity-50 flex items-center justify-center h-full w-full"
:class="bgColors[submitterIndex]"
class="flex items-center h-full w-full"
:class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
>
<span
v-if="field"
class="flex justify-center items-center space-x-1 h-full"
>
<div
v-if="field?.default_value"
class="text-[1.5vw] lg:text-base"
>
<div class="flex items-center px-0.5">
<span class="whitespace-pre-wrap">{{ field.default_value }}</span>
</div>
</div>
<component
:is="fieldIcons[field.type]"
v-else
width="100%"
height="100%"
class="max-h-10"
class="max-h-10 opacity-50"
/>
</span>
</div>
@@ -192,30 +201,30 @@ export default {
},
borderColors () {
return [
'border-red-500',
'border-sky-500',
'border-emerald-500',
'border-yellow-300',
'border-purple-600',
'border-pink-500',
'border-cyan-500',
'border-orange-500',
'border-lime-500',
'border-indigo-500'
'border-red-500/50',
'border-sky-500/50',
'border-emerald-500/50',
'border-yellow-300/50',
'border-purple-600/50',
'border-pink-500/50',
'border-cyan-500/50',
'border-orange-500/50',
'border-lime-500/50',
'border-indigo-500/50'
]
},
bgColors () {
return [
'bg-red-100',
'bg-sky-100',
'bg-emerald-100',
'bg-yellow-100',
'bg-purple-100',
'bg-pink-100',
'bg-cyan-100',
'bg-orange-100',
'bg-lime-100',
'bg-indigo-100'
'bg-red-100/50',
'bg-sky-100/50',
'bg-emerald-100/50',
'bg-yellow-100/50',
'bg-purple-100/50',
'bg-pink-100/50',
'bg-cyan-100/50',
'bg-orange-100/50',
'bg-lime-100/50',
'bg-indigo-100/50'
]
},
isSelected () {
@@ -269,6 +278,8 @@ export default {
}
},
maybeUpdateOptions () {
delete this.field.default_value
if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
delete this.field.options
}
app/javascript/template_builder/field.vue
+54 -14
View File
@@ -53,7 +53,6 @@
class="flex items-center space-x-1"
>
<span
v-if="field.areas?.length"
class="dropdown dropdown-end"
>
<label
@@ -61,7 +60,7 @@
title="Areas"
class="cursor-pointer text-transparent group-hover:text-base-content"
>
<IconShape
<IconSettings
:width="18"
:stroke-width="1.6"
/>
@@ -69,8 +68,57 @@
<ul
tabindex="0"
class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
draggable="true"
@dragstart.prevent.stop
@click="closeDropdown"
>
<div
v-if="field.type === 'text'"
class="py-1.5 px-1 relative"
@click.stop
>
<input
v-model="field.default_value"
type="text"
placeholder="Default value"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
@blur="save"
>
<label
v-if="field.default_value"
:style="{ backgroundColor: backgroundColor }"
class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px"
>
Default value
</label>
</div>
<li @click.stop>
<label class="cursor-pointer py-1.5">
<input
v-model="field.required"
type="checkbox"
class="toggle toggle-xs"
@update:model-value="save"
>
<span class="label-text">Required</span>
</label>
</li>
<li
v-if="field.type === 'text'"
@click.stop
>
<label class="cursor-pointer py-1.5">
<input
v-model="field.readonly"
type="checkbox"
class="toggle toggle-xs"
@update:model-value="save"
>
<span class="label-text">Read-only</span>
</label>
</li>
<hr class="pb-0.5 mt-0.5">
<li
v-for="(area, index) in field.areas || []"
:key="index"
@@ -115,17 +163,6 @@
</li>
</ul>
</span>
<button
v-else
title="Areas"
class="relative cursor-pointer text-transparent group-hover:text-base-content"
@click="$emit('set-draw', field)"
>
<IconShape
:width="18"
:stroke-width="1.6"
/>
</button>
<button
class="relative text-transparent group-hover:text-base-content pr-1"
title="Remove"
@@ -179,12 +216,13 @@
<script>
import Contenteditable from './contenteditable'
import FieldType from './field_type'
import { IconShape, IconNewSection, IconTrashX, IconCopy } from '@tabler/icons-vue'
import { IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
export default {
name: 'TemplateField',
components: {
Contenteditable,
IconSettings,
IconShape,
IconNewSection,
IconTrashX,
@@ -256,6 +294,8 @@ export default {
document.activeElement.blur()
},
maybeUpdateOptions () {
delete this.field.default_value
if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
delete this.field.options
}