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

recipient fields condition

Browse Source
This commit is contained in:
Pete Matsyburka
2025-12-21 12:17:32 +02:00
parent 0d8e2c5ff0
commit d078727070
4 changed files with 166 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/application.js
+2
View File
@@ -52,6 +52,7 @@ import AutosizeField from './elements/autosize_field'
import GoogleDriveFilePicker from './elements/google_drive_file_picker'
import OpenModal from './elements/open_modal'
import BarChart from './elements/bar_chart'
import FieldCondition from './elements/field_condition'
import * as TurboInstantClick from './lib/turbo_instant_click'
@@ -142,6 +143,7 @@ safeRegisterElement('autosize-field', AutosizeField)
safeRegisterElement('google-drive-file-picker', GoogleDriveFilePicker)
safeRegisterElement('open-modal', OpenModal)
safeRegisterElement('bar-chart', BarChart)
safeRegisterElement('field-condition', FieldCondition)
safeRegisterElement('template-builder', class extends HTMLElement {
connectedCallback () {
app/javascript/elements/field_condition.js
+151
View File
@@ -0,0 +1,151 @@
export default class extends HTMLElement {
connectedCallback () {
this.targetId = this.dataset.targetId
this.fieldId = this.dataset.fieldId
this.action = (this.dataset.action || '').trim()
this.expectedValue = this.dataset.value
this.targetEl = document.getElementById(this.targetId)
this.sourceEl = document.getElementById(this.fieldId)
this.bindListeners()
this.evaluateAndApply()
}
disconnectedCallback () {
this.unbindListeners()
}
bindListeners () {
this.eventsFor(this.sourceEl).forEach((ev) => {
this.sourceEl.addEventListener(ev, this.evaluateAndApply)
})
}
unbindListeners () {
this.eventsFor(this.sourceEl).forEach((ev) => {
this.sourceEl.removeEventListener(ev, this.evaluateAndApply)
})
}
eventsFor (el) {
if (!el) return []
const tag = el.tagName.toLowerCase()
if (tag === 'textarea') return ['input']
if (tag === 'input') return ['input', 'change']
return ['change']
}
evaluateAndApply = () => {
const fieldConditions = document.querySelectorAll(`field-condition[data-target-id="${this.targetId}"]`)
const result = [...fieldConditions].reduce((acc, cond) => {
if (cond.dataset.operation === 'or') {
acc.push(acc.pop() || cond.checkCondition())
} else {
acc.push(cond.checkCondition())
}
return acc
}, [])
this.apply(!result.includes(false))
}
checkCondition () {
const action = this.action
const actual = this.getSourceValue()
const expected = this.expectedValue
if (action === 'empty' || action === 'unchecked') return this.isEmpty(actual)
if (action === 'not_empty' || action === 'checked') return !this.isEmpty(actual)
if (action === 'equal') {
const list = Array.isArray(actual) ? actual : [actual]
return list.filter((v) => v !== null && v !== undefined).map(String).includes(String(expected))
}
if (action === 'contains') return this.contains(actual, expected)
if (action === 'not_equal') {
const list = Array.isArray(actual) ? actual : [actual]
return !list.filter((v) => v !== null && v !== undefined).map(String).includes(String(expected))
}
if (action === 'does_not_contain') return !this.contains(actual, expected)
return true
}
getSourceValue () {
const el = this.sourceEl
if (!el) return
const tag = el.tagName.toLowerCase()
const type = (el.getAttribute('type') || '').toLowerCase()
if (tag === 'select') return el.value
if (tag === 'textarea') return el.value
if (tag === 'input' && type === 'checkbox') return el.checked ? (el.value || '1') : null
if (tag === 'input') return el.value
return el.value ?? null
}
isEmpty (obj) {
if (obj == null) return true
if (Array.isArray(obj)) {
return obj.length === 0
}
if (typeof obj === 'string') {
return obj.trim().length === 0
}
if (typeof obj === 'object') {
return Object.keys(obj).length === 0
}
if (obj === false) {
return true
}
return false
}
contains (actual, expected) {
if (expected === null || expected === undefined) return false
const exp = String(expected)
if (Array.isArray(actual)) return actual.filter((v) => v !== null && v !== undefined).map(String).includes(exp)
if (typeof actual === 'string') return actual.includes(exp)
return actual !== null && actual !== undefined && String(actual) === exp
}
apply (passed) {
const controls = this.targetEl.matches('input, select, textarea, button')
? [this.targetEl]
: Array.from(this.targetEl.querySelectorAll('input, select, textarea, button'))
if (passed) {
this.targetEl.style.display = ''
this.targetEl.labels.forEach((label) => { label.style.display = '' })
controls.forEach((c) => (c.disabled = false))
} else {
this.targetEl.style.display = 'none'
this.targetEl.labels.forEach((label) => { label.style.display = 'none' })
controls.forEach((c) => (c.disabled = true))
}
}
}
app/views/submissions/_detailed_form.html.erb
+11 -5
View File
@@ -60,17 +60,23 @@
</custom-validation>
<% end %>
<% prefillable_fields.each do |field| %>
<% field_id = "detailed_field_#{index}_#{field['uuid'] || field['name'].parameterize}" %>
<% if field['type'] == 'checkbox' %>
<label for="detailed_field_<%= index %>_<%= field['uuid'] || field['name'].parameterize %>" class="flex items-center justify-between mt-1.5 pl-3 pr-2.5 h-10 border border-base-content/20 rounded-full cursor-pointer transition-colors bg-white">
<label for="<%= field_id %>" class="flex items-center justify-between mt-1.5 pl-3 pr-2.5 h-10 border border-base-content/20 rounded-full cursor-pointer transition-colors bg-white">
<span class="text-base select-none px-1"> <%= field['title'].presence || field['name'] %></span>
<%= tag.input type: 'checkbox', name: "submission[1][submitters][][values][#{field['uuid'] || field['name']}]", id: "detailed_field_#{index}_#{field['uuid'] || field['name'].parameterize}", class: 'toggle toggle-sm', style: 'width: 38px; --handleoffset: 17px', checked: field['default_value'].present? && (field['default_value'] == true || field['default_value'].to_s == '1' || field['default_value'].to_s.downcase == 'true'), required: field['required'], value: 'true' %>
<%= tag.input type: 'checkbox', name: "submission[1][submitters][][values][#{field['uuid'] || field['name']}]", id: field_id, class: 'toggle toggle-sm', style: 'width: 38px; --handleoffset: 17px', checked: field['default_value'].present? && (field['default_value'] == true || field['default_value'].to_s == '1' || field['default_value'].to_s.downcase == 'true'), required: field['required'], value: 'true' %>
</label>
<% elsif field['type'] == 'select' || field['type'] == 'radio' %>
<%= select_tag "submission[1][submitters][][values][#{field['uuid'] || field['name']}]", options_for_select(field['options'].pluck('value'), field['default_value']), prompt: t(:select), id: "detailed_field_#{index}_#{field['uuid'] || field['name'].parameterize}", class: 'select select-sm base-input !h-10 mt-1.5 ', required: field['required'] %>
<%= select_tag "submission[1][submitters][][values][#{field['uuid'] || field['name']}]", options_for_select(field['options'].pluck('value'), field['default_value']), prompt: t(:select), id: field_id, class: 'select select-sm base-input !h-10 mt-1.5 ', required: field['required'] %>
<% elsif field['type'] == 'date' %>
<%= tag.input type: field['type'], name: "submission[1][submitters][][values][#{field['uuid'] || field['name']}]", autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full border rounded p-3', placeholder: (field['required'] ? field['title'].presence || field['name'] : "#{field['title'].presence || field['name']} (#{t('optional')})"), value: field['default_value'], id: "detailed_field_#{index}_#{field['uuid'] || field['name'].parameterize}", required: field['required'] %>
<%= tag.input type: field['type'], name: "submission[1][submitters][][values][#{field['uuid'] || field['name']}]", autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full border rounded p-3', placeholder: (field['required'] ? field['title'].presence || field['name'] : "#{field['title'].presence || field['name']} (#{t('optional')})"), value: field['default_value'], id: field_id, required: field['required'] %>
<% elsif field['type'] != 'phone' %>
<%= tag.input type: field['type'], name: "submission[1][submitters][][values][#{field['uuid'] || field['name']}]", autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full border rounded p-3', placeholder: (field['required'] ? field['title'].presence || field['name'] : "#{field['title'].presence || field['name']} (#{t('optional')})"), value: field['default_value'], id: "detailed_field_#{index}_#{field['uuid'] || field['name'].parameterize}", required: field['required'] %>
<%= tag.input type: field['type'], name: "submission[1][submitters][][values][#{field['uuid'] || field['name']}]", autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full border rounded p-3', placeholder: (field['required'] ? field['title'].presence || field['name'] : "#{field['title'].presence || field['name']} (#{t('optional')})"), value: field['default_value'], id: field_id, required: field['required'] %>
<% end %>
<% field['conditions']&.each do |condition| %>
<% if (condition_field = prefillable_fields.find { |f| f['uuid'] == condition['field_uuid'] || f['name'] == condition['field_name'] }) %>
<field-condition data-target-id="<%= field_id %>" data-field-id="<%= "detailed_field_#{index}_#{condition['field_uuid'] || condition['field_name'].parameterize}" %>" data-action="<%= condition['action'] %>" data-value="<%= condition_field['options'].present? ? condition_field['options'].find { |o| o['uuid'] == condition['value'] }&.dig('value') || condition['value'] : condition['value'] %>" data-operation="<%= condition['operation'] %>"></field-condition>
<% end %>
<% end %>
<% end %>
<% end %>
lib/submitters/normalize_values.rb
+2 -1
View File
@@ -49,7 +49,8 @@ module Submitters
new_field = recipient_form_fields.to_a.find { |e| e['name'] == key }.deep_dup
if new_field && fields.present?
new_field = new_field.merge('uuid' => SecureRandom.uuid,
new_field = new_field.except('conditions')
.merge('uuid' => SecureRandom.uuid,
'readonly' => true,
'submitter_uuid' => fields.first['submitter_uuid'])