Adding a default me(fill out now) submitter field to save the fields against it

app/controllers/start_form_controller.rb

@@ -9,7 +9,7 @@ class StartFormController < ApplicationController
   before_action :load_template
 
   def show
-    @submitter = @template.submissions.new.submitters.new(uuid: @template.submitters.first['uuid'])
+    @submitter = @template.submissions.new.submitters.new(uuid: @template.submitters.second['uuid'])
   end
 
   def update
@@ -21,7 +21,7 @@ class StartFormController < ApplicationController
       redirect_to start_form_completed_path(@template.slug, email: submitter_params[:email])
     else
       @submitter.assign_attributes(
-        uuid: @template.submitters.first['uuid'],
+        uuid: @template.submitters.second['uuid'],
         ip: request.remote_ip,
         ua: request.user_agent
       )

app/javascript/template_builder/area.vue

@@ -9,7 +9,8 @@
     <div
       v-if="isSelected || isDraw"
       class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
-      :class="borderColors[submitterIndex]"
+      :class="submitterIndex != 0 ? borderColors[submitterIndex] : ''"
+      :style="{ backgroundColor: submitterIndex == 0 ? bgColors[submitterIndex] : '' }"
     />
     <div
       v-if="field.type === 'cells' && (isSelected || isDraw)"
@@ -19,8 +20,8 @@
         v-for="(cellW, index) in cells"
         :key="index"
         class="absolute top-0 bottom-0 border-r"
-        :class="borderColors[submitterIndex]"
-        :style="{ left: (cellW / area.w * 100) + '%' }"
+        :class="submitterIndex != 0 ? borderColors[submitterIndex] : ''"
+        :style="{ left: (cellW / area.w * 100) + '%', backgroundColor: submitterIndex == 0 ? borderColors[submitterIndex] : '' }"
       >
         <span
           v-if="index === 0 && editable"
@@ -173,7 +174,8 @@
     <div
       v-else
       class="flex items-center h-full w-full"
-      :class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
+      :class="[submitterIndex != 0 ? bgColors[submitterIndex] : '', field?.default_value ? '' : 'justify-center']"
+      :style="[submitterIndex == 0 ? bgColors[submitterIndex] : '']"
     >
       <span
         v-if="field"
@@ -430,6 +432,7 @@ export default {
     },
     borderColors () {
       return [
+        'rgb(205 205 205 / 0.5)',
         'border-red-500/50',
         'border-sky-500/50',
         'border-emerald-500/50',
@@ -444,6 +447,7 @@ export default {
     },
     bgColors () {
       return [
+        'transparent',
         'bg-red-100/50',
         'bg-sky-100/50',
         'bg-emerald-100/50',

app/javascript/template_builder/builder.vue

@@ -442,7 +442,6 @@ export default {
       const existingValues = this.template.values || {}
       const updatedValues = { ...existingValues, ...values }
       this.template.values = updatedValues
-      // this.save()
     },
     startFieldDraw (type) {
       const field = {
@@ -454,7 +453,7 @@ export default {
         type
       }
       if (['redact', 'my_text', 'my_signature', 'my_initials', 'my_date'].includes(type)) {
-        field.required = 'false'
+        field.required = false
       }
       if (['select', 'multiple', 'radio'].includes(type)) {
         field.options = [{ value: '', uuid: v4() }]
@@ -613,7 +612,9 @@ export default {
             submitter_uuid: this.selectedSubmitter.uuid,
             areas: [area]
           }
-
+          if (['redact', 'my_text', 'my_signature', 'my_initials'].includes(field.type)) {
+            field.required = false
+          }
           this.template.fields.push(field)
 
           this.selectedAreaRef.value = area
@@ -632,7 +633,7 @@ export default {
       }
 
       if (['redact', 'my_text', 'my_signature', 'my_initials', 'my_date'].includes(field.type)) {
-        field.required = 'false'
+        field.required = false
       }
       if (['select', 'multiple', 'radio'].includes(field.type)) {
         field.options = [{ value: '', uuid: v4() }]

app/javascript/template_builder/contenteditable.vue

@@ -13,7 +13,7 @@
       @focus="$emit('focus', $event)"
       @blur="onBlur"
     >
-      {{ value }}
+      {{ editable ? value : value+' (Fill Out Now)' }}
     </span>
     <span
       v-if="withRequired"

app/javascript/template_builder/field_submitter.vue

@@ -55,7 +55,7 @@
                 </span>
               </span>
               <button
-                v-if="submitters.length > 1 && editable"
+                v-if="submitters.length > 1 && editable && submitter.name !== 'Me'"
                 class="px-2"
                 @click.stop="remove(submitter)"
               >
@@ -63,7 +63,7 @@
               </button>
             </a>
           </li>
-          <li v-if="submitters.length < 10 && editable">
+          <li v-if="submitters.length < 11 && editable">
             <a
               href="#"
               class="flex px-2"
@@ -97,38 +97,9 @@
         :class="colors[submitters.indexOf(selectedSubmitter)]"
       />
     </label>
-    <!-- adding button to show and hide prefills -->
     <div
       v-else
     >
-      <label
-        v-if="!showNewFields"
-        class="cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-between"
-        @click="$emit('add-prefills')"
-      >
-        <div class="flex items-center space-x-2">
-          <span
-            style="background-color: grey;"
-            class="w-3 h-3 rounded-full"
-          />
-          <div class="items-center space-x-2">Me (Fill Out Now)</div>
-        </div>
-      </label>
-
-      <label
-        v-else
-        :style="{ 'border-color': showNewFields ? 'black' : '' }"
-        class="cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-between"
-        @click="$emit('add-prefills')"
-      >
-        <div class="flex items-center space-x-2">
-          <span
-            style="background-color: grey;"
-            class="w-3 h-3 rounded-full"
-          />
-          <div class="items-center space-x-2">show submitter fields</div>
-        </div>
-      </label>
       <label
         tabindex="0"
         class="cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 w-full flex justify-between"
@@ -136,13 +107,14 @@
         <div class="flex items-center space-x-2">
           <span
             class="w-3 h-3 rounded-full"
-            :class="colors[submitters.indexOf(selectedSubmitter)]"
+            :class="selectedSubmitter.name !== 'Me' ? colors[submitters.indexOf(selectedSubmitter)] : ''"
+            :style="{ backgroundColor: selectedSubmitter.name === 'Me' ? colors[submitters.indexOf(selectedSubmitter)] : '' }"
           />
           <Contenteditable
             v-model="selectedSubmitter.name"
             class="cursor-text"
             :icon-inline="true"
-            :editable="editable"
+            :editable="selectedSubmitter.name==='Me'? false : editable"
             :select-on-edit-click="true"
             :icon-width="18"
             @update:model-value="$emit('name-change', selectedSubmitter)"
@@ -182,7 +154,7 @@
             </span>
           </span>
           <button
-            v-if="!compact && submitters.length > 1 && editable"
+            v-if="!compact && submitters.length > 1 && editable && submitter.name !== 'Me'"
             class="hidden group-hover:block px-2"
             @click.stop="remove(submitter)"
           >
@@ -190,7 +162,7 @@
           </button>
         </a>
       </li>
-      <li v-if="submitters.length < 10 && editable">
+      <li v-if="submitters.length < 11 && editable">
         <a
           href="#"
           class="flex px-2"
@@ -262,6 +234,7 @@ export default {
   computed: {
     colors () {
       return [
+        'gray',
         'bg-red-500',
         'bg-sky-500',
         'bg-emerald-500',
@@ -276,6 +249,7 @@ export default {
     },
     names () {
       return [
+        'Me',
         'First Submitter',
         'Second Submitter',
         'Third Submitter',
@@ -295,11 +269,15 @@ export default {
   methods: {
     selectSubmitter (submitter) {
       this.$emit('update:model-value', submitter.uuid)
+      this.$emit('add-prefills', submitter.name)
     },
     remove (submitter) {
       if (window.confirm('Are you sure?')) {
         this.$emit('remove', submitter)
       }
+      if (this.submitters.length === 1) {
+        this.$emit('add-prefills', this.submitters[0].name)
+      }
     },
     addSubmitter () {
       const newSubmitter = {
@@ -311,6 +289,7 @@ export default {
 
       this.$emit('update:model-value', newSubmitter.uuid)
       this.$emit('new-submitter', newSubmitter)
+      this.$emit('add-prefills', newSubmitter.name)
     },
     closeDropdown () {
       document.activeElement.blur()

app/javascript/template_builder/fields.vue

@@ -223,7 +223,7 @@ export default {
   data () {
     return {
       dragField: null,
-      showNewFields: false
+      showNewFields: true
     }
   },
   computed: {
@@ -238,9 +238,20 @@ export default {
       })
     }
   },
+  mounted () {
+    if (this.selectedSubmitter.name === 'Me') {
+      this.showNewFields = true
+    } else {
+      this.showNewFields = false
+    }
+  },
   methods: {
-    toggleNewFields () {
-      this.showNewFields = !this.showNewFields
+    toggleNewFields (sName) {
+      if (sName === 'Me') {
+        this.showNewFields = true
+      } else {
+        this.showNewFields = false
+      }
     },
     onDragstart (field) {
       this.$emit('set-drag', field)
@@ -293,7 +304,7 @@ export default {
         type
       }
       if (['redact', 'my_text', 'my_signature', 'my_initials', 'my_date'].includes(type)) {
-        field.required = 'false'
+        field.required = false
       }
       if (['select', 'multiple', 'radio'].includes(type)) {
         field.options = [{ value: '', uuid: v4() }]

app/models/template.rb

@@ -34,7 +34,7 @@
 #  fk_rails_...  (folder_id => template_folders.id)
 #
 class Template < ApplicationRecord
-  DEFAULT_SUBMITTER_NAME = 'First Submitter'
+  DEFAULT_SUBMITTER_NAME = 'Me'
 
   belongs_to :author, class_name: 'User'
   belongs_to :account

app/views/api_settings/index.html.erb

@@ -34,7 +34,7 @@
              "submitters": [
                {
                  "name": "John Doe",
-                 "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Submitter' %>",
+                 "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'Me' %>",
                  "email": "<%= current_user.email.sub('@', '+test@') %>",
                  "values": {
                    "Form Text Field Name": "Default Value"

app/views/submissions/_detailed_form.html.erb

@@ -10,6 +10,9 @@
           </div>
           <div class="grid <%= 'md:grid-cols-2' if template.submitters.size > 1 %> gap-4">
             <% template.submitters.each do |item| %>
+                <% if item["name"] == 'Me' %>
+                  <% next %>
+                <% end %>
               <submitter-item class="form-control">
                 <% if template.submitters.size > 1 %>
                   <label class="label pt-0 pb-1 text-xs">
@@ -18,11 +21,11 @@
                 <% end %>
                 <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                 <submitters-autocomplete data-field="name">
-                  <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name" required>
+                  <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name" value="<%= item['name']=='Me'? template.author.first_name : '' %>" required>
                 </submitters-autocomplete>
                 <div class="grid <%= 'md:grid-cols-2 gap-1' if template.submitters.size == 1 %>">
                   <submitters-autocomplete data-field="email">
-                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Email (optional)">
+                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Email (optional)" value="<%= item['name']=='Me'? template.author.email : '' %>">
                   </submitters-autocomplete>
                   <submitters-autocomplete data-field="phone">
                     <input type="tel" pattern="^\+[0-9\s\-]+$" oninvalid="this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''" oninput="this.setCustomValidity('')" name="submission[1][submitters][][phone]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Phone (optional)">

app/views/submissions/_email_form.html.erb

@@ -19,13 +19,16 @@
             </div>
             <div class="grid md:grid-cols-2 gap-4">
               <% template.submitters.each do |item| %>
+                <% if item["name"] == 'Me' %>
+                  <% next %>
+                <% end %>
                 <submitter-item class="form-control">
                   <label class="label pt-0 pb-1 text-xs">
                     <span class="label-text"> <%= item['name'] %></span>
                   </label>
                   <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                   <submitters-autocomplete data-field="email">
-                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Email" required>
+                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Email" value="<%= item['name']=='Me'? template.author.email : '' %>" required>
                   </submitters-autocomplete>
                 </submitter-item>
               <% end %>

app/views/submissions/_phone_form.html.erb

@@ -10,6 +10,9 @@
           </div>
           <div class="grid <%= template.submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1' %>">
             <% template.submitters.each do |item| %>
+              <% if item["name"] == 'Me' %>
+                <% next %>
+              <% end %>
               <submitter-item class="grid <%= template.submitters.size > 1 ? 'gap-4' : 'md:grid-cols-2 gap-1' %>">
                 <div class="form-control">
                   <% if template.submitters.size > 1 %>

app/views/submissions/show.html.erb

@@ -64,6 +64,11 @@
                   <% else %>
                     <% value = values[field['uuid']] %>
                   <% end %>
+                  <% if ['my_signature', 'my_initials'].include?(field['type']) %>
+                    <% attachments_index = ActiveStorage::Attachment.where(record: @submission.template, name: :attachments).preload(:blob).index_by(&:uuid) %>
+                  <% else %>
+                    <% attachments_index = ActiveStorage::Attachment.where(record: @submission.submitters, name: :attachments).preload(:blob).index_by(&:uuid) %>
+                  <% end %>
                   <% next if value.blank? %>
                   <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submission.template.account.locale %>
                 <% end %>

app/views/submit_form/_submission_form.html.erb

@@ -1,5 +1,5 @@
 <% 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 %>
+<% data_fields = (submitter.submission.template_fields || submitter.submission.template.fields).select { |f| ['my_text', 'my_signature', 'my_initials', 'my_data'].include?(f['type']) || f['submitter_uuid'] == submitter.uuid }.to_json %>
 <% completed_button_params = submitter.submission.template.account.account_configs.find_by(key: AccountConfig::FORM_COMPLETED_BUTTON_KEY)&.value || {} %>
 <% templateValues = submitter.submission.template.values %>
 <% template_attachments = ActiveStorage::Attachment.where(record: submitter.submission.template, name: :attachments).preload(:blob).index_by(&:uuid) %>

spec/factories/templates.rb

@@ -24,7 +24,7 @@ FactoryBot.define do
       template.schema = [{ attachment_uuid: attachment.uuid, name: 'sample-document' }]
       template.submitters = [
         {
-          'name' => 'First Submitter',
+          'name' => 'Me',
           'uuid' => '513848eb-1096-4abc-a743-68596b5aaa4c'
         }
       ]