add form preview

app/controllers/templates_form_preview_controller.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class TemplatesFormPreviewController < ApplicationController
+  PRELOAD_ALL_PAGES_AMOUNT = 200
+
+  layout 'form'
+
+  load_and_authorize_resource :template
+
+  def show
+    @submitter = Submitter.new(uuid: params[:uuid] || @template.submitters.first['uuid'],
+                               account: current_account,
+                               submission: @template.submissions.new(template_submitters: @template.submitters,
+                                                                     account: current_account))
+
+    @submitter.submission.submitters = @template.submitters.map { |item| Submitter.new(uuid: item['uuid']) }
+
+    ActiveRecord::Associations::Preloader.new(
+      records: [@submitter],
+      associations: [submission: [:template, { template_schema_documents: :blob }]]
+    ).call
+
+    total_pages =
+      @submitter.submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
+
+    if total_pages < PRELOAD_ALL_PAGES_AMOUNT
+      ActiveRecord::Associations::Preloader.new(
+        records: @submitter.submission.template_schema_documents,
+        associations: [:blob, { preview_images_attachments: :blob }]
+      ).call
+    end
+
+    @attachments_index = ActiveStorage::Attachment.where(record: @submitter.submission.submitters, name: :attachments)
+                                                  .preload(:blob).index_by(&:uuid)
+
+    @form_configs = Submitters::FormConfigs.call(@submitter)
+  end
+end

app/javascript/form.js

@@ -19,6 +19,9 @@ safeRegisterElement('submission-form', class extends HTMLElement {
       goToLast: this.dataset.goToLast === 'true',
       isDemo: this.dataset.isDemo === 'true',
       attribution: this.dataset.attribution !== 'false',
+      scrollPadding: this.dataset.scrollPadding || '-80px',
+      dryRun: this.dataset.dryRun === 'true',
+      expand: ['true', 'false'].includes(this.dataset.expand) ? this.dataset.expand === 'true' : null,
       withConfetti: this.dataset.withConfetti !== 'false',
       withDisclosure: this.dataset.withDisclosure === 'true',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',

app/javascript/submission_form/area.vue

@@ -41,7 +41,8 @@
     <div
       v-if="isActive"
       ref="scrollToElem"
-      class="absolute -top-20"
+      class="absolute"
+      :style="{ top: scrollPadding }"
     />
     <img
       v-if="field.type === 'image' && image"
@@ -197,6 +198,11 @@ export default {
       required: false,
       default: false
     },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
     submittable: {
       type: Boolean,
       required: false,

app/javascript/submission_form/areas.vue

@@ -22,6 +22,7 @@
             :area="area"
             :submittable="true"
             :field-index="fieldIndex"
+            :scroll-padding="scrollPadding"
             :is-active="currentStep === step"
             :with-label="withLabel"
             :is-value-set="step.some((f) => f.uuid in values)"
@@ -53,6 +54,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
     attachmentsIndex: {
       type: Object,
       required: false,

app/javascript/submission_form/attachment_step.vue

@@ -52,6 +52,7 @@
       :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :multiple="true"
+      :dry-run="dryRun"
       @upload="onUpload"
     />
   </div>
@@ -80,6 +81,11 @@ export default {
       type: String,
       required: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     attachmentsIndex: {
       type: Object,
       required: false,

app/javascript/submission_form/dropzone.vue

@@ -65,6 +65,11 @@ export default {
       type: String,
       required: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     accept: {
       type: String,
       required: false,
@@ -107,20 +112,36 @@ export default {
         Array.from(files).map(async (file) => {
           const formData = new FormData()
 
-          if (file.type === 'image/bmp') {
+          if (this.dryRun) {
-            file = await this.convertBmpToPng(file)
+            return new Promise((resolve) => {
-          }
+              const reader = new FileReader()
+
+              reader.readAsDataURL(file)
 
-          formData.append('file', file)
+              reader.onloadend = () => {
-          formData.append('submitter_slug', this.submitterSlug)
+                resolve({
-          formData.append('name', 'attachments')
+                  url: reader.result,
+                  uuid: Math.random().toString(),
+                  filename: file.name
+                })
+              }
+            })
+          } else {
+            if (file.type === 'image/bmp') {
+              file = await this.convertBmpToPng(file)
+            }
 
-          return fetch(this.baseUrl + '/api/attachments', {
+            formData.append('file', file)
-            method: 'POST',
+            formData.append('submitter_slug', this.submitterSlug)
-            body: formData
+            formData.append('name', 'attachments')
-          }).then(resp => resp.json()).then((data) => {
+
-            return data
+            return fetch(this.baseUrl + '/api/attachments', {
-          })
+              method: 'POST',
+              body: formData
+            }).then(resp => resp.json()).then((data) => {
+              return data
+            })
+          }
         })).then((result) => {
         this.$emit('upload', result)
       }).finally(() => {

app/javascript/submission_form/form.vue

@@ -6,7 +6,8 @@
     :attachments-index="attachmentsIndex"
     :with-label="!isAnonymousChecboxes && showFieldNames"
     :current-step="currentStepFields"
-    @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
+    :scroll-padding="scrollPadding"
+    @focus-step="[saveStep(), currentField.type !== 'checkbox' ? isFormVisible = true : '', goToStep($event, false, true)]"
   />
   <FormulaFieldAreas
     v-if="formulaFields.length"
@@ -310,6 +311,7 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
+            :dry-run="dryRun"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
             :show-field-names="showFieldNames"
@@ -326,6 +328,7 @@
             :remember-signature="rememberSignature"
             :attachments-index="attachmentsIndex"
             :button-text="buttonText"
+            :dry-run="dryRun"
             :with-disclosure="withDisclosure"
             :with-qr-button="withQrButton"
             :submitter="submitter"
@@ -340,6 +343,7 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
+            :dry-run="dryRun"
             :previous-value="previousInitialsValue"
             :attachments-index="attachmentsIndex"
             :show-field-names="showFieldNames"
@@ -353,6 +357,7 @@
             v-else-if="currentField.type === 'file'"
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
+            :dry-run="dryRun"
             :field="currentField"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
@@ -423,7 +428,7 @@
         :completed-button="completedRedirectUrl ? {} : completedButton"
         :completed-message="completedRedirectUrl ? {} : completedMessage"
         :with-send-copy-button="withSendCopyButton && !completedRedirectUrl"
-        :with-download-button="withDownloadButton && !completedRedirectUrl"
+        :with-download-button="withDownloadButton && !completedRedirectUrl && !dryRun"
         :with-confetti="withConfetti"
         :can-send-email="canSendEmail && !!submitter.email"
         :submitter-slug="submitterSlug"
@@ -528,6 +533,11 @@ export default {
       type: Object,
       required: true
     },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
     canSendEmail: {
       type: Boolean,
       required: false,
@@ -864,12 +874,14 @@ export default {
     this.$nextTick(() => {
       this.recalculateButtonDisabledKey = Math.random()
 
-      Promise.all([
+      if (!this.dryRun) {
-        this.maybeTrackEmailClick(),
+        Promise.all([
-        this.maybeTrackSmsClick()
+          this.maybeTrackEmailClick(),
-      ]).finally(() => {
+          this.maybeTrackSmsClick()
-        this.trackViewForm()
+        ]).finally(() => {
-      })
+          this.trackViewForm()
+        })
+      }
     })
   },
   methods: {
@@ -1009,7 +1021,13 @@ export default {
       const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
       const currentFieldType = this.currentField.type
 
-      if (this.isCompleted) {
+      if (this.dryRun) {
+        currentFieldUuids.forEach((fieldUuid) => {
+          this.submittedValues[fieldUuid] = this.values[fieldUuid]
+        })
+
+        return Promise.resolve({})
+      } else if (this.isCompleted) {
         return Promise.resolve({})
       } else {
         return fetch(this.baseUrl + this.submitPath, {
@@ -1059,7 +1077,7 @@ export default {
         const formData = new FormData(this.$refs.form)
         const isLastStep = this.currentStep === this.stepFields.length - 1
 
-        if (isLastStep && !emptyRequiredField && !this.dryRun) {
+        if (isLastStep && !emptyRequiredField) {
           formData.append('completed', 'true')
         }
 

app/javascript/submission_form/image_step.vue

@@ -37,6 +37,7 @@
     <FileDropzone
       :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
+      :dry-run="dryRun"
       :accept="'image/*'"
       @upload="onImageUpload"
     />
@@ -66,6 +67,11 @@ export default {
       required: false,
       default: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     submitterSlug: {
       type: String,
       required: true

app/javascript/submission_form/initials_step.vue

@@ -143,6 +143,11 @@ export default {
       type: Object,
       required: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     submitterSlug: {
       type: String,
       required: true
@@ -282,21 +287,36 @@ export default {
         cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
           const file = new File([blob], 'initials.png', { type: 'image/png' })
 
-          const formData = new FormData()
+          if (this.dryRun) {
+            const reader = new FileReader()
+
+            reader.readAsDataURL(file)
 
-          formData.append('file', file)
+            reader.onloadend = () => {
-          formData.append('submitter_slug', this.submitterSlug)
+              const attachment = { url: reader.result, uuid: Math.random().toString() }
-          formData.append('name', 'attachments')
 
-          return fetch(this.baseUrl + '/api/attachments', {
+              this.$emit('attached', attachment)
-            method: 'POST',
+              this.$emit('update:model-value', attachment.uuid)
-            body: formData
-          }).then((resp) => resp.json()).then((attachment) => {
-            this.$emit('attached', attachment)
-            this.$emit('update:model-value', attachment.uuid)
 
-            return resolve(attachment)
+              resolve(attachment)
-          })
+            }
+          } else {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              return resolve(attachment)
+            })
+          }
         })
       })
     }

app/javascript/submission_form/signature_step.vue

@@ -264,6 +264,11 @@ export default {
       required: false,
       default: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withDisclosure: {
       type: Boolean,
       required: false,
@@ -563,24 +568,39 @@ export default {
         cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
-          const formData = new FormData()
+          if (this.dryRun) {
+            const reader = new FileReader()
 
-          formData.append('file', file)
+            reader.readAsDataURL(file)
-          formData.append('submitter_slug', this.submitterSlug)
-          formData.append('name', 'attachments')
-          formData.append('remember_signature', this.rememberSignature)
 
-          return fetch(this.baseUrl + '/api/attachments', {
+            reader.onloadend = () => {
-            method: 'POST',
+              const attachment = { url: reader.result, uuid: Math.random().toString() }
-            body: formData
-          }).then((resp) => resp.json()).then((attachment) => {
-            this.$emit('attached', attachment)
-            this.$emit('update:model-value', attachment.uuid)
 
-            this.maybeSetSignedUuid(attachment.signed_uuid)
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
 
-            return resolve(attachment)
+              resolve(attachment)
-          })
+            }
+          } else {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+            formData.append('remember_signature', this.rememberSignature)
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              this.maybeSetSignedUuid(attachment.signed_uuid)
+
+              return resolve(attachment)
+            })
+          }
         }).catch((error) => {
           if (error.message === 'Image too small' && this.field.required === false) {
             return resolve({})

app/javascript/template_builder/builder.vue

@@ -86,26 +86,55 @@
               {{ t('send') }}
             </span>
           </a>
-          <button
+          <span
             v-if="editable"
-            class="base-button"
+            class="flex"
-            :class="{ disabled: isSaving }"
-            v-bind="isSaving ? { disabled: true } : {}"
-            @click.prevent="onSaveClick"
           >
-            <IconInnerShadowTop
+            <button
-              v-if="isSaving"
+              class="base-button !rounded-r-none !pr-2"
-              width="22"
+              :class="{ disabled: isSaving }"
-              class="animate-spin"
+              v-bind="isSaving ? { disabled: true } : {}"
-            />
+              @click.prevent="onSaveClick"
-            <IconDeviceFloppy
+            >
-              v-else
+              <IconInnerShadowTop
-              width="22"
+                v-if="isSaving"
-            />
+                width="22"
-            <span class="hidden md:inline">
+                class="animate-spin"
-              {{ t('save') }}
+              />
-            </span>
+              <IconDeviceFloppy
-          </button>
+                v-else
+                width="22"
+              />
+              <span class="hidden md:inline">
+                {{ t('save') }}
+              </span>
+            </button>
+            <div class="dropdown dropdown-end">
+              <label
+                tabindex="0"
+                class="base-button !rounded-l-none !pl-1 !pr-2 !border-l-neutral-500"
+              >
+                <span class="text-sm align-text-top">
+                  <IconChevronDown class="w-5 h-5 flex-shrink-0" />
+                </span>
+              </label>
+              <ul
+                tabindex="0"
+                class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right"
+              >
+                <li>
+                  <a
+                    :href="`/templates/${template.id}/form`"
+                    data-turbo="false"
+                    class="flex items-center justify-center space-x-2"
+                  >
+                    <IconEye class="w-6 h-6 flex-shrink-0" />
+                    <span class="whitespace-nowrap">Save and Preview</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </span>
           <a
             v-else
             :href="`/templates/${template.id}`"
@@ -321,7 +350,7 @@ import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
-import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop, IconInfoCircle } from '@tabler/icons-vue'
+import { IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
 import { en as i18nEn } from './i18n'
@@ -343,6 +372,8 @@ export default {
     IconInnerShadowTop,
     Contenteditable,
     IconUsersPlus,
+    IconChevronDown,
+    IconEye,
     IconDeviceFloppy
   },
   provide () {

app/javascript/template_builder/fields.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="withStickySubmitters ? 'sticky top-0 z-10' : ''">
+  <div :class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''">
     <FieldSubmitter
       :model-value="selectedSubmitter.uuid"
       class="roles-dropdown w-full rounded-lg"

app/views/submit_form/_banner.html.erb

@@ -1,3 +1,3 @@
 <div class="flex mt-4">
-  <%= render 'docuseal_logo' %>
+  <%= render 'submit_form/docuseal_logo' %>
 </div>

app/views/submit_form/_submission_form.html.erb

@@ -1,3 +1,3 @@
 <% 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 || submitter.submission.template.fields).select { |f| f['submitter_uuid'] == submitter.uuid }.to_json %>
-<submission-form data-is-demo="<%= Docuseal.demo? %>" data-with-confetti="<%= configs[:with_confetti] %>" data-completed-redirect-url="<%= submitter.preferences['completed_redirect_url'] %>" data-completed-message="<%= configs[:completed_message].to_json %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.preferences.key?('go_to_last') ? submitter.preferences['go_to_last'] : submitter.opened_at? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(submitter.submission.account) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>" data-previous-signature-value="<%= local_assigns[:signature_attachment]&.uuid %>" data-remember-signature="<%= configs[:prefill_signature] %>"></submission-form>
+<submission-form data-is-demo="<%= Docuseal.demo? %>" data-with-confetti="<%= configs[:with_confetti] %>" data-completed-redirect-url="<%= submitter.preferences['completed_redirect_url'] %>" data-completed-message="<%= configs[:completed_message].to_json %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.preferences.key?('go_to_last') ? submitter.preferences['go_to_last'] : submitter.opened_at? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(submitter.submission.account) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>" data-previous-signature-value="<%= local_assigns[:signature_attachment]&.uuid %>" data-remember-signature="<%= configs[:prefill_signature] %>" data-dry-run="<%= local_assigns[:dry_run] %>" data-expand="<%= local_assigns[:expand] %>" data-scroll-padding="<%= local_assigns[:scroll_padding] %>"></submission-form>

app/views/submit_form/show.html.erb

@@ -7,7 +7,7 @@
   <div id="scrollbox">
     <div class="mx-auto block pb-72" style="max-width: 1000px">
       <%# flex block w-full sticky top-0 z-50 space-x-2 items-center bg-yellow-100 p-2 border-y border-yellow-200 %>
-      <%= render 'banner' %>
+      <%= local_assigns[:banner_html] || render('submit_form/banner') %>
       <% (@submitter.submission.template_schema || @submitter.submission.template.schema).each do |item| %>
         <% document = @submitter.submission.template_schema_documents.find { |a| a.uuid == item['attachment_uuid'] } %>
         <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
@@ -41,7 +41,7 @@
 <div class="fixed bottom-0 w-full h-0 z-20">
   <div class="mx-auto" style="max-width: 1000px">
     <div class="relative md:mx-32">
-      <%= render 'submission_form', attachments_index: @attachments_index, submitter: @submitter, signature_attachment: @signature_attachment, configs: @form_configs %>
+      <%= render 'submit_form/submission_form', attachments_index: @attachments_index, submitter: @submitter, signature_attachment: @signature_attachment, configs: @form_configs, dry_run: local_assigns[:dry_run], expand: local_assigns[:expand], scroll_padding: local_assigns[:scroll_padding] %>
     </div>
   </div>
 </div>

app/views/templates_form_preview/show.html.erb

@@ -0,0 +1,24 @@
+<% banner_html = capture do %>
+  <div class="sticky top-0 z-50 bg-base-100 py-2 px-2 flex items-center" style="margin: 0px -8px -16px -8px">
+    <div class="text-xl md:text-3xl font-semibold focus:text-clip" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+      <%= @template.name %>
+    </div>
+    <div class="flex items-center" style="margin-left: 20px; flex-shrink: 0">
+      <% if @template.submitters.size > 1 %>
+        <form action="<%= template_form_path(@template) %>" method="get" class="mr-3">
+          <select onchange="this.form.submit()" name="uuid" class="select base-input text-center font-normal" style="width: 180px; flex-shrink: 0;">
+            <% @template.submitters.each do |submitter| %>
+              <%= tag.option(value: submitter['uuid'], selected: submitter['uuid'] == @submitter.uuid) do %>
+                <%= submitter['name'] %>
+              <% end %>
+            <% end %>
+          </select>
+        </form>
+      <% end %>
+      <a href="<%= edit_template_path(@template) %>" class="base-button" data-turbo="false" style="flex-shrink: 0; padding: 0px 24px;">
+        Exit Preview
+      </a>
+    </div>
+  </div>
+<% end %>
+<%= render template: 'submit_form/show', locals: { dry_run: true, expand: false, banner_html:, scroll_padding: '-120px' } %>

config/routes.rb

@@ -83,6 +83,7 @@ Rails.application.routes.draw do
     resources :submissions, only: %i[new create]
     resource :folder, only: %i[edit update], controller: 'templates_folders'
     resource :preview, only: %i[show], controller: 'templates_preview'
+    resource :form, only: %i[show], controller: 'templates_form_preview'
     resource :code_modal, only: %i[show], controller: 'templates_code_modal'
     resource :preferences, only: %i[show create], controller: 'templates_preferences'
     resources :submissions_export, only: %i[index new]