adminbruno
/
docuseal
mirror of https://github.com/docusealco/docuseal
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add ability to minimize form

Browse Source
pull/105/head
Alex Turchyn 2 years ago
parent c40a8e1a69
commit b9af384cf2
3 changed files with 286 additions and 233 deletions
Show Stats Download Patch File Download Diff File

482
app/javascript/submission_form/form.vue
Unescape View File

@ -7,259 +7,290 @@
:current-step="currentStepFields" :current-step="currentStepFields"
@focus-step="[saveStep(), goToStep($event, false, true)]" @focus-step="[saveStep(), goToStep($event, false, true)]"
/> />
<div> <button
<form v-if="!isFormVisible"
class="btn btn-neutral text-white absolute rounded-none border-x-0 md:border md:rounded-full bottom-0 w-full md:mb-4 text-base"
@click.prevent="isFormVisible = true"
>
Submit Form
<IconArrowsDiagonal
class="absolute right-0 mr-4"
:width="20"
:height="20"
/>
</button>
<div
v-else
id="form_container"
class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border-base-200 border p-4 rounded"
>
<button
v-if="!isCompleted" v-if="!isCompleted"
ref="form" class="absolute right-0 mr-2 mt-2 top-0 hidden md:block"
:action="submitPath" title="Minimize"
method="post" @click.prevent="isFormVisible = false"
class="md:mx-16"
@submit.prevent="submitStep"
> >
<input <IconArrowsDiagonalMinimize2
type="hidden" :width="20"
name="authenticity_token" :height="20"
:value="authenticityToken" />
> </button>
<input <div>
value="put" <form
name="_method" v-if="!isCompleted"
type="hidden" ref="form"
:action="submitPath"
method="post"
class="md:mx-16"
@submit.prevent="submitStep"
> >
<div class="md:mt-4"> <input
<div v-if="['cells', 'text'].includes(currentField.type)"> type="hidden"
<label name="authenticity_token"
v-if="currentField.name" :value="authenticityToken"
:for="currentField.uuid" >
class="label text-2xl mb-2" <input
>{{ currentField.name }} value="put"
<template v-if="!currentField.required">(optional)</template> name="_method"
</label> type="hidden"
<div >
v-else <div class="md:mt-4">
class="py-1" <div v-if="['cells', 'text'].includes(currentField.type)">
/> <label
<div> v-if="currentField.name"
<input :for="currentField.uuid"
:id="currentField.uuid" class="label text-2xl mb-2"
v-model="values[currentField.uuid]" >{{ currentField.name }}
class="base-input !text-2xl w-full" <template v-if="!currentField.required">(optional)</template>
:required="currentField.required" </label>
:placeholder="`Type here...${currentField.required ? '' : ' (optional)'}`" <div
type="text" v-else
:name="`values[${currentField.uuid}]`" class="py-1"
@focus="$refs.areas.scrollIntoField(currentField)" />
> <div>
<input
:id="currentField.uuid"
v-model="values[currentField.uuid]"
class="base-input !text-2xl w-full"
:required="currentField.required"
:placeholder="`Type here...${currentField.required ? '' : ' (optional)'}`"
type="text"
:name="`values[${currentField.uuid}]`"
@focus="$refs.areas.scrollIntoField(currentField)"
>
</div>
</div> </div>
</div> <div v-else-if="currentField.type === 'date'">
<div v-else-if="currentField.type === 'date'"> <label
<label v-if="currentField.name"
v-if="currentField.name" :for="currentField.uuid"
:for="currentField.uuid" class="label text-2xl mb-2"
class="label text-2xl mb-2" >{{ currentField.name }}
>{{ currentField.name }} <template v-if="!currentField.required">(optional)</template>
<template v-if="!currentField.required">(optional)</template> </label>
</label> <div
<div v-else
v-else class="py-1"
class="py-1" />
/> <div class="text-center">
<div class="text-center"> <input
<input :id="currentField.uuid"
v-model="values[currentField.uuid]"
class="base-input !text-2xl text-center w-full"
:required="currentField.required"
type="date"
:name="`values[${currentField.uuid}]`"
@focus="$refs.areas.scrollIntoField(currentField)"
>
</div>
</div>
<div v-else-if="currentField.type === 'select'">
<label
v-if="currentField.name"
:for="currentField.uuid"
class="label text-2xl mb-2"
>{{ currentField.name }}
<template v-if="!currentField.required">(optional)</template>
</label>
<div
v-else
class="py-1"
/>
<select
:id="currentField.uuid" :id="currentField.uuid"
v-model="values[currentField.uuid]"
class="base-input !text-2xl text-center w-full"
:required="currentField.required" :required="currentField.required"
type="date" class="select base-input !text-2xl w-full text-center font-normal"
:name="`values[${currentField.uuid}]`" :name="`values[${currentField.uuid}]`"
@change="values[currentField.uuid] = $event.target.value"
@focus="$refs.areas.scrollIntoField(currentField)" @focus="$refs.areas.scrollIntoField(currentField)"
> >
<option
value=""
:selected="!values[currentField.uuid]"
>
Select your option
</option>
<option
v-for="(option, index) in currentField.options"
:key="index"
:selected="values[currentField.uuid] == option"
:value="option"
>
{{ option }}
</option>
</select>
</div> </div>
</div> <div v-else-if="currentField.type === 'radio'">
<div v-else-if="currentField.type === 'select'"> <label
<label v-if="currentField.name"
v-if="currentField.name" :for="currentField.uuid"
:for="currentField.uuid" class="label text-2xl mb-2"
class="label text-2xl mb-2" >{{ currentField.name }}
>{{ currentField.name }} <template v-if="!currentField.required">(optional)</template>
<template v-if="!currentField.required">(optional)</template> </label>
</label> <div class="flex w-full">
<div <div class="space-y-3.5 mx-auto">
v-else <div
class="py-1" v-for="(option, index) in currentField.options"
:key="index"
>
<label
:for="currentField.uuid + option"
class="flex items-center space-x-3"
>
<input
:id="currentField.uuid + option"
v-model="values[currentField.uuid]"
type="radio"
class="base-radio !h-7 !w-7"
:name="`values[${currentField.uuid}]`"
:value="option"
:required="currentField.required"
>
<span class="text-xl">
{{ option }}
</span>
</label>
</div>
</div>
</div>
</div>
<MultiSelectStep
v-else-if="currentField.type === 'multiple'"
v-model="values[currentField.uuid]"
:field="currentField"
/> />
<select <div
:id="currentField.uuid" v-else-if="currentField.type === 'checkbox'"
:required="currentField.required" class="flex w-full"
class="select base-input !text-2xl w-full text-center font-normal"
:name="`values[${currentField.uuid}]`"
@change="values[currentField.uuid] = $event.target.value"
@focus="$refs.areas.scrollIntoField(currentField)"
> >
<option <input
value="" type="hidden"
:selected="!values[currentField.uuid]" name="cast_boolean"
value="true"
> >
Select your option <div
</option> class="space-y-3.5 mx-auto"
<option
v-for="(option, index) in currentField.options"
:key="index"
:selected="values[currentField.uuid] == option"
:value="option"
> >
{{ option }}
</option>
</select>
</div>
<div v-else-if="currentField.type === 'radio'">
<label
v-if="currentField.name"
:for="currentField.uuid"
class="label text-2xl mb-2"
>{{ currentField.name }}
<template v-if="!currentField.required">(optional)</template>
</label>
<div class="flex w-full">
<div class="space-y-3.5 mx-auto">
<div <div
v-for="(option, index) in currentField.options" v-for="(field, index) in currentStepFields"
:key="index" :key="field.uuid"
> >
<label <label
:for="currentField.uuid + option" :for="field.uuid"
class="flex items-center space-x-3" class="flex items-center space-x-3"
> >
<input <input
:id="currentField.uuid + option" type="hidden"
v-model="values[currentField.uuid]" :name="`values[${field.uuid}]`"
type="radio" :value="!!values[field.uuid]"
class="base-radio !h-7 !w-7" >
:name="`values[${currentField.uuid}]`" <input
:value="option" :id="field.uuid"
:required="currentField.required" type="checkbox"
class="base-checkbox !h-7 !w-7"
:checked="!!values[field.uuid]"
@click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
> >
<span class="text-xl"> <span class="text-xl">
{{ option }} {{ currentField.name || currentField.type + ' ' + (index + 1) }}
</span> </span>
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<ImageStep
v-else-if="currentField.type === 'image'"
v-model="values[currentField.uuid]"
:field="currentField"
:is-direct-upload="isDirectUpload"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
/>
<SignatureStep
v-else-if="currentField.type === 'signature'"
ref="currentStep"
v-model="values[currentField.uuid]"
:field="currentField"
:is-direct-upload="isDirectUpload"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="attachments.push($event)"
@start="$refs.areas.scrollIntoField(currentField)"
@minimize="isFormVisible = false"
/>
<AttachmentStep
v-else-if="currentField.type === 'file'"
v-model="values[currentField.uuid]"
:is-direct-upload="isDirectUpload"
:field="currentField"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
/>
</div> </div>
<MultiSelectStep <div class="mt-6 md:mt-8">
v-else-if="currentField.type === 'multiple'" <button
v-model="values[currentField.uuid]" type="submit"
:field="currentField" class="base-button w-full flex justify-center"
/> :disabled="isButtonDisabled"
<div
v-else-if="currentField.type === 'checkbox'"
class="flex w-full"
>
<input
type="hidden"
name="cast_boolean"
value="true"
>
<div
class="space-y-3.5 mx-auto"
> >
<div <span class="flex">
v-for="(field, index) in currentStepFields" <IconInnerShadowTop
:key="field.uuid" v-if="isSubmitting"
> class="mr-1 animate-spin"
<label />
:for="field.uuid" <span v-if="stepFields.length === currentStep + 1">
class="flex items-center space-x-3" Submit
> </span>
<input <span v-else>
type="hidden" Next
:name="`values[${field.uuid}]`" </span><span
:value="!!values[field.uuid]" v-if="isSubmitting"
> class="w-6 flex justify-start mr-1"
<input ><span>...</span></span>
:id="field.uuid"
type="checkbox"
class="base-checkbox !h-7 !w-7"
:checked="!!values[field.uuid]"
@click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
>
<span class="text-xl">
{{ currentField.name || currentField.type + ' ' + (index + 1) }}
</span>
</label>
</div>
</div>
</div>
<ImageStep
v-else-if="currentField.type === 'image'"
v-model="values[currentField.uuid]"
:field="currentField"
:is-direct-upload="isDirectUpload"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
/>
<SignatureStep
v-else-if="currentField.type === 'signature'"
ref="currentStep"
v-model="values[currentField.uuid]"
:field="currentField"
:is-direct-upload="isDirectUpload"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="attachments.push($event)"
/>
<AttachmentStep
v-else-if="currentField.type === 'file'"
v-model="values[currentField.uuid]"
:is-direct-upload="isDirectUpload"
:field="currentField"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
/>
</div>
<div class="mt-6 md:mt-8">
<button
type="submit"
class="base-button w-full flex justify-center"
:disabled="isButtonDisabled"
>
<span class="flex">
<IconInnerShadowTop
v-if="isSubmitting"
class="mr-1 animate-spin"
/>
<span v-if="stepFields.length === currentStep + 1">
Submit
</span> </span>
<span v-else> </button>
Next </div>
</span><span </form>
v-if="isSubmitting" <FormCompleted
class="w-6 flex justify-start mr-1" v-else
><span>...</span></span> :is-demo="isDemo"
</span> :can-send-email="canSendEmail"
</button> :submitter-slug="submitterSlug"
</div> />
</form> <div class="flex justify-center">
<FormCompleted <div class="flex items-center mt-5 mb-1">
v-else <a
:is-demo="isDemo" v-for="(step, index) in stepFields"
:can-send-email="canSendEmail" :key="step[0].uuid"
:submitter-slug="submitterSlug" href="#"
/> class="inline border border-base-300 h-3 w-3 rounded-full mx-1"
<div class="flex justify-center"> :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': index < currentStep || isCompleted, 'bg-white': index > currentStep }"
<div class="flex items-center mt-5 mb-1"> @click.prevent="isCompleted ? '' : [saveStep(), goToStep(step, true)]"
<a />
v-for="(step, index) in stepFields" </div>
:key="step[0].uuid"
href="#"
class="inline border border-base-300 h-3 w-3 rounded-full mx-1"
:class="{ 'bg-base-300': index === currentStep, 'bg-base-content': index < currentStep || isCompleted, 'bg-white': index > currentStep }"
@click.prevent="isCompleted ? '' : [saveStep(), goToStep(step, true)]"
/>
</div> </div>
</div> </div>
</div> </div>
@ -272,7 +303,7 @@ import SignatureStep from './signature_step'
import AttachmentStep from './attachment_step' import AttachmentStep from './attachment_step'
import MultiSelectStep from './multi_select_step' import MultiSelectStep from './multi_select_step'
import FormCompleted from './completed' import FormCompleted from './completed'
import { IconInnerShadowTop } from '@tabler/icons-vue' import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
export default { export default {
name: 'SubmissionForm', name: 'SubmissionForm',
@ -283,6 +314,8 @@ export default {
AttachmentStep, AttachmentStep,
MultiSelectStep, MultiSelectStep,
IconInnerShadowTop, IconInnerShadowTop,
IconArrowsDiagonal,
IconArrowsDiagonalMinimize2,
FormCompleted FormCompleted
}, },
props: { props: {
@ -332,6 +365,7 @@ export default {
data () { data () {
return { return {
isCompleted: false, isCompleted: false,
isFormVisible: true,
currentStep: 0, currentStep: 0,
isSubmitting: false isSubmitting: false
} }

33
app/javascript/submission_form/signature_step.vue
Unescape View File

@ -4,7 +4,7 @@
<label <label
class="label text-2xl" class="label text-2xl"
>{{ field.name || 'Signature' }}</label> >{{ field.name || 'Signature' }}</label>
<div class="space-x-2"> <div class="space-x-2 flex">
<span <span
class="tooltip" class="tooltip"
data-tip="Type text" data-tip="Type text"
@ -49,6 +49,16 @@
<IconReload :width="16" /> <IconReload :width="16" />
Clear Clear
</button> </button>
<button
title="Minimize"
class="py-1.5 inline md:hidden"
@click.prevent="$emit('minimize')"
>
<IconArrowsDiagonalMinimize2
:width="20"
:height="20"
/>
</button>
</div> </div>
</div> </div>
<input <input
@ -59,7 +69,7 @@
<img <img
v-if="modelValue" v-if="modelValue"
:src="attachmentsIndex[modelValue].url" :src="attachmentsIndex[modelValue].url"
class="w-full bg-white border border-base-300 rounded" class="mx-auto bg-white border border-base-300 rounded max-h-72"
> >
<canvas <canvas
v-show="!modelValue" v-show="!modelValue"
@ -79,14 +89,15 @@
</template> </template>
<script> <script>
import { IconReload, IconCamera, IconTextSize } from '@tabler/icons-vue' import { IconReload, IconCamera, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
export default { export default {
name: 'SignatureStep', name: 'SignatureStep',
components: { components: {
IconReload, IconReload,
IconCamera, IconCamera,
IconTextSize IconTextSize,
IconArrowsDiagonalMinimize2
}, },
props: { props: {
field: { field: {
@ -113,7 +124,7 @@ export default {
default: '' default: ''
} }
}, },
emits: ['attached', 'update:model-value'], emits: ['attached', 'update:model-value', 'start', 'minimize'],
data () { data () {
return { return {
isSignatureStarted: false, isSignatureStarted: false,
@ -136,6 +147,8 @@ export default {
this.pad.addEventListener('beginStroke', () => { this.pad.addEventListener('beginStroke', () => {
this.isSignatureStarted = true this.isSignatureStarted = true
this.$emit('start')
}) })
}, },
methods: { methods: {
@ -169,13 +182,19 @@ export default {
context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11) context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
}, },
toggleTextInput () { toggleTextInput () {
this.remove()
this.isTextSignature = !this.isTextSignature this.isTextSignature = !this.isTextSignature
if (this.isTextSignature) { if (this.isTextSignature) {
this.$nextTick(() => this.$refs.textInput.focus()) this.$nextTick(() => {
this.$refs.textInput.focus()
this.$emit('start')
})
} }
}, },
drawImage (event) { drawImage (event) {
this.remove()
this.isSignatureStarted = true this.isSignatureStarted = true
const file = event.target.files[0] const file = event.target.files[0]
@ -214,6 +233,8 @@ export default {
context.clearRect(0, 0, canvas.width, canvas.height) context.clearRect(0, 0, canvas.width, canvas.height)
context.drawImage(img, x, y, targetWidth, targetHeight) context.drawImage(img, x, y, targetWidth, targetHeight)
this.$emit('start')
} }
} }

4
app/views/submit_form/show.html.erb
Unescape View File

@ -32,9 +32,7 @@
<div class="fixed bottom-0 w-full h-0 z-20"> <div class="fixed bottom-0 w-full h-0 z-20">
<div class="mx-auto" style="max-width: 1000px"> <div class="mx-auto" style="max-width: 1000px">
<div class="relative md:mx-32"> <div class="relative md:mx-32">
<div id="form_container" class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border border-base-200 border p-4 rounded"> <submission-form data-is-demo="<%= Docuseal.demo? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter-uuid="<%= @submitter.uuid %>" data-submitter-slug="<%= @submitter.slug %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= attachments_index.values.select { |e| e.record_id == @submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>" data-fields="<%= @submitter.submission.template.fields.select { |f| f['submitter_uuid'] == @submitter.uuid }.to_json %>" data-values="<%= @submitter.values.to_json %>" data-authenticity-token="<%= form_authenticity_token %>"></submission-form>
<submission-form data-is-demo="<%= Docuseal.demo? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter-uuid="<%= @submitter.uuid %>" data-submitter-slug="<%= @submitter.slug %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= attachments_index.values.select { |e| e.record_id == @submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>" data-fields="<%= @submitter.submission.template.fields.select { |f| f['submitter_uuid'] == @submitter.uuid }.to_json %>" data-values="<%= @submitter.values.to_json %>" data-authenticity-token="<%= form_authenticity_token %>"></submission-form>
</div>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save