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

pull/150/merge^2
iozeey 2 years ago
parent fece0825f8
commit 1b26220042

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

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

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

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

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

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

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

@ -34,7 +34,7 @@
"submitters": [ "submitters": [
{ {
"name": "John Doe", "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@') %>", "email": "<%= current_user.email.sub('@', '+test@') %>",
"values": { "values": {
"Form Text Field Name": "Default Value" "Form Text Field Name": "Default Value"

@ -10,6 +10,9 @@
</div> </div>
<div class="grid <%= 'md:grid-cols-2' if template.submitters.size > 1 %> gap-4"> <div class="grid <%= 'md:grid-cols-2' if template.submitters.size > 1 %> gap-4">
<% template.submitters.each do |item| %> <% template.submitters.each do |item| %>
<% if item["name"] == 'Me' %>
<% next %>
<% end %>
<submitter-item class="form-control"> <submitter-item class="form-control">
<% if template.submitters.size > 1 %> <% if template.submitters.size > 1 %>
<label class="label pt-0 pb-1 text-xs"> <label class="label pt-0 pb-1 text-xs">
@ -18,11 +21,11 @@
<% end %> <% end %>
<input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>"> <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
<submitters-autocomplete data-field="name"> <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> </submitters-autocomplete>
<div class="grid <%= 'md:grid-cols-2 gap-1' if template.submitters.size == 1 %>"> <div class="grid <%= 'md:grid-cols-2 gap-1' if template.submitters.size == 1 %>">
<submitters-autocomplete data-field="email"> <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>
<submitters-autocomplete data-field="phone"> <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)"> <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)">

@ -19,13 +19,16 @@
</div> </div>
<div class="grid md:grid-cols-2 gap-4"> <div class="grid md:grid-cols-2 gap-4">
<% template.submitters.each do |item| %> <% template.submitters.each do |item| %>
<% if item["name"] == 'Me' %>
<% next %>
<% end %>
<submitter-item class="form-control"> <submitter-item class="form-control">
<label class="label pt-0 pb-1 text-xs"> <label class="label pt-0 pb-1 text-xs">
<span class="label-text"> <%= item['name'] %></span> <span class="label-text"> <%= item['name'] %></span>
</label> </label>
<input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>"> <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
<submitters-autocomplete data-field="email"> <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> </submitters-autocomplete>
</submitter-item> </submitter-item>
<% end %> <% end %>

@ -10,6 +10,9 @@
</div> </div>
<div class="grid <%= template.submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1' %>"> <div class="grid <%= template.submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1' %>">
<% template.submitters.each do |item| %> <% 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' %>"> <submitter-item class="grid <%= template.submitters.size > 1 ? 'gap-4' : 'md:grid-cols-2 gap-1' %>">
<div class="form-control"> <div class="form-control">
<% if template.submitters.size > 1 %> <% if template.submitters.size > 1 %>

@ -64,6 +64,11 @@
<% else %> <% else %>
<% value = values[field['uuid']] %> <% value = values[field['uuid']] %>
<% end %> <% 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? %> <% next if value.blank? %>
<%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submission.template.account.locale %> <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submission.template.account.locale %>
<% end %> <% end %>

@ -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_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 || {} %> <% completed_button_params = submitter.submission.template.account.account_configs.find_by(key: AccountConfig::FORM_COMPLETED_BUTTON_KEY)&.value || {} %>
<% templateValues = submitter.submission.template.values %> <% templateValues = submitter.submission.template.values %>
<% template_attachments = ActiveStorage::Attachment.where(record: submitter.submission.template, name: :attachments).preload(:blob).index_by(&:uuid) %> <% template_attachments = ActiveStorage::Attachment.where(record: submitter.submission.template, name: :attachments).preload(:blob).index_by(&:uuid) %>

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

Loading…
Cancel
Save