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

add ability to draw areas for radio options

Browse Source
This commit is contained in:
Pete Matsyburka
2023-11-14 01:30:00 +02:00
parent 9aa68fe955
commit 333a5d6b7b
6 changed files with 138 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/submission_form/area.vue
+57 -2
View File
@@ -5,7 +5,7 @@
:class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-70': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-30': (isActive || isValueSet) && submittable }"
>
<div
v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable"
v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
class="absolute top-0 bottom-0 right-0 left-0 items-center justify-center h-full w-full"
>
<span
@@ -21,7 +21,7 @@
</span>
</div>
<div
v-if="isActive && withLabel"
v-if="isActive && withLabel && !area.option_uuid"
class="absolute -top-7 rounded bg-base-content text-base-100 px-2 text-sm whitespace-nowrap"
>
{{ field.name || fieldNames[field.type] }}
@@ -87,6 +87,44 @@
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
/>
</div>
<div
v-else-if="field.type === 'radio' && area.option_uuid"
class="w-full p-[0.2vw] flex items-center justify-center"
>
<input
v-if="submittable"
type="radio"
:value="false"
class="aspect-square base-radio"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
:checked="modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
@click="$emit('update:model-value', field.options.find((o) => o.uuid === area.option_uuid)?.value)"
>
<IconCheck
v-else-if="modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
class="aspect-square"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
/>
</div>
<div
v-else-if="field.type === 'multiple' && area.option_uuid"
class="w-full p-[0.2vw] flex items-center justify-center"
>
<input
v-if="submittable"
type="checkbox"
:value="false"
class="aspect-square base-checkbox"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
:checked="modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
@change="updateMultipleSelectValue(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
>
<IconCheck
v-else-if="modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
class="aspect-square"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
/>
</div>
<div
v-else-if="field.type === 'cells'"
class="w-full flex items-center"
@@ -271,6 +309,23 @@ export default {
this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
})
}
},
methods: {
updateMultipleSelectValue (value) {
if (this.modelValue?.includes(value)) {
const newValue = [...this.modelValue]
newValue.splice(newValue.indexOf(value), 1)
this.$emit('update:model-value', newValue)
} else {
const newValue = this.modelValue ? [...this.modelValue] : []
newValue.push(value)
this.$emit('update:model-value', newValue)
}
}
}
}
</script>
app/javascript/template_builder/area.vue
+8 -1
View File
@@ -66,7 +66,7 @@
@keydown.enter.prevent="onNameEnter"
@focus="onNameFocus"
@blur="onNameBlur"
>{{ field.name || defaultName }}</span>
>{{ optionIndexText }} {{ field.name || defaultName }}</span>
<div
v-if="isNameFocus && !['checkbox', 'phone'].includes(field.type)"
class="flex items-center ml-1.5"
@@ -185,6 +185,13 @@ export default {
defaultName: Field.computed.defaultName,
fieldNames: FieldType.computed.fieldNames,
fieldIcons: FieldType.computed.fieldIcons,
optionIndexText () {
if (this.area.option_uuid && this.field.options) {
return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
} else {
return ''
}
},
cells () {
const cells = []
app/javascript/template_builder/builder.vue
+17 -3
View File
@@ -168,7 +168,7 @@
:selected-submitter="selectedSubmitter"
class="md:hidden"
:editable="editable"
@cancel="drawField = null"
@cancel="[drawField = null, drawOption = null]"
@change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
/>
<FieldType
@@ -209,7 +209,7 @@
<p>
<button
class="base-button"
@click="drawField = null"
@click="[drawField = null, drawOption = null]"
>
Cancel
</button>
@@ -225,7 +225,7 @@
:default-fields="defaultFields"
:with-sticky-submitters="withStickySubmitters"
:editable="editable"
@set-draw="drawField = $event"
@set-draw="[drawField = $event.field, drawOption = $event.option]"
@set-drag="dragField = $event"
@change-submitter="selectedSubmitter = $event"
@drag-end="dragField = null"
@@ -354,6 +354,7 @@ export default {
isSaving: false,
selectedSubmitter: null,
drawField: null,
drawOption: null,
dragField: null
}
},
@@ -433,6 +434,7 @@ export default {
}
this.drawField = field
this.drawOption = null
},
undo () {
if (this.undoStack.length > 1) {
@@ -482,6 +484,7 @@ export default {
onKeyUp (e) {
if (e.code === 'Escape') {
this.drawField = null
this.drawOption = null
this.selectedAreaRef.value = null
}
@@ -528,6 +531,16 @@ export default {
},
onDraw (area) {
if (this.drawField) {
if (this.drawOption) {
const areaWithoutOption = this.drawField.areas?.find((a) => !a.option_uuid)
if (areaWithoutOption && !this.drawField.areas.find((a) => a.option_uuid === this.drawField.options[0].uuid)) {
areaWithoutOption.option_uuid = this.drawField.options[0].uuid
}
area.option_uuid = this.drawOption.uuid
}
this.drawField.areas ||= []
this.drawField.areas.push(area)
@@ -536,6 +549,7 @@ export default {
}
this.drawField = null
this.drawOption = null
this.selectedAreaRef.value = area
app/javascript/template_builder/field.vue
+41 -5
View File
@@ -58,7 +58,7 @@
v-if="field && !field.areas.length"
title="Draw"
class="relative cursor-pointer text-transparent group-hover:text-base-content"
@click="$emit('set-draw', field)"
@click="$emit('set-draw', { field })"
>
<IconNewSection
:width="18"
@@ -151,11 +151,11 @@
Page {{ area.page + 1 }}
</a>
</li>
<li>
<li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
<a
href="#"
class="text-sm py-1 px-2"
@click.prevent="$emit('set-draw', field)"
@click.prevent="$emit('set-draw', { field })"
>
<IconNewSection
:width="20"
@@ -205,16 +205,39 @@
<span class="text-sm w-3.5">
{{ index + 1 }}.
</span>
<div
v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid)) && !field.areas.find((a) => a.option_uuid === option.uuid)"
class="items-center flex w-full"
>
<input
v-model="option.value"
class="w-full input input-primary input-xs text-sm bg-transparent !pr-7 -mr-6"
type="text"
required
@blur="save"
>
<button
title="Draw"
@click.prevent="$emit('set-draw', { field, option })"
>
<IconNewSection
:width="18"
:stroke-width="1.6"
/>
</button>
</div>
<input
v-else
v-model="option.value"
class="w-full input input-primary input-xs text-sm bg-transparent"
type="text"
required
@focus="maybeFocusOnOptionArea(option)"
@blur="save"
>
<button
class="text-sm w-3.5"
@click="[field.options.splice(index, 1), save()]"
@click="removeOption(option)"
>
&times;
</button>
@@ -248,7 +271,7 @@ export default {
IconCopy,
FieldType
},
inject: ['template', 'save', 'backgroundColor'],
inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef'],
props: {
field: {
type: Object,
@@ -306,6 +329,13 @@ export default {
}, 1)
}
},
maybeFocusOnOptionArea (option) {
const area = this.field.areas.find((a) => a.option_uuid === option.uuid)
if (area) {
this.selectedAreaRef.value = area
}
},
scrollToFirstArea () {
return this.field.areas?.[0] && this.$emit('scroll-to', this.field.areas[0])
},
@@ -317,6 +347,12 @@ export default {
this.save()
},
removeOption (option) {
this.field.options.splice(this.field.options.indexOf(option), 1)
this.field.areas.splice(this.field.areas.findIndex((a) => a.option_uuid === option.uuid), 1)
this.save()
},
maybeUpdateOptions () {
delete this.field.default_value