add field conditions placeholder

app/javascript/template_builder/builder.vue

@@ -323,6 +323,7 @@ export default {
       withPhone: this.withPhone,
       withPayment: this.withPayment,
       withFormula: this.withFormula,
+      withConditions: this.withConditions,
       defaultDrawFieldType: this.defaultDrawFieldType,
       selectedAreaRef: computed(() => this.selectedAreaRef),
       fieldsDragFieldRef: computed(() => this.fieldsDragFieldRef)
@@ -457,6 +458,11 @@ export default {
       required: false,
       default: false
     },
+    withConditions: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     onlyDefinedFields: {
       type: Boolean,
       required: false,

app/javascript/template_builder/conditions_modal.vue

@@ -0,0 +1,195 @@
+<template>
+  <div
+    class="modal modal-open items-start !animate-none overflow-y-auto"
+  >
+    <div
+      class="absolute top-0 bottom-0 right-0 left-0"
+      @click.prevent="$emit('close')"
+    />
+    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+        <span>
+          {{ t('condition') }} - {{ field.name || buildDefaultName(field, template.fields) }}
+        </span>
+        <a
+          href="#"
+          class="text-xl"
+          @click.prevent="$emit('close')"
+        >&times;</a>
+      </div>
+      <div>
+        <div
+          v-if="!withConditions"
+          class="bg-base-300 rounded-xl py-2 px-3 text-center"
+        >
+          <a
+            href="https://www.docuseal.co/pricing"
+            target="_blank"
+            class="link"
+          >Available in Pro</a>
+        </div>
+        <form @submit.prevent="validateSaveAndClose">
+          <div class="my-4">
+            <div class="space-y-4">
+              <select
+                class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                required
+                @change="[
+                  newCondition.field_uuid = $event.target.value,
+                  delete newCondition.value,
+                  (conditionActions.includes(newCondition.action) ? '' : newCondition.action = conditionActions[0])
+                ]"
+              >
+                <option
+                  value=""
+                  disabled
+                  :selected="!newCondition.field_uuid"
+                >
+                  {{ t('select_field_') }}
+                </option>
+                <option
+                  v-for="f in fields"
+                  :key="f.uuid"
+                  :value="f.uuid"
+                  :selected="newCondition.field_uuid === f.uuid"
+                >
+                  {{ f.name || buildDefaultName(f, template.fields) }}
+                </option>
+              </select>
+              <select
+                v-model="newCondition.action"
+                class="select select-bordered select-sm w-full h-11 pl-4 text-base font-normal"
+                :class="{ 'bg-white': newCondition.field_uuid, 'bg-base-300': !newCondition.field_uuid }"
+                :required="newCondition.field_uuid"
+              >
+                <option
+                  v-for="action in conditionActions"
+                  :key="action"
+                  :value="action"
+                >
+                  {{ t(action) }}
+                </option>
+              </select>
+              <select
+                v-if="conditionField?.options?.length"
+                class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                required
+                @change="newCondition.value = $event.target.value"
+              >
+                <option
+                  value=""
+                  disabled
+                  selected
+                >
+                  {{ t('select_value_') }}
+                </option>
+                <option
+                  v-for="(option, index) in conditionField.options"
+                  :key="option.uuid"
+                  :value="option.uuid"
+                  :selected="newCondition.value === option.uuid"
+                >
+                  {{ option.value || `${t('option')} ${index + 1}` }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <button
+            class="base-button w-full mt-2"
+          >
+            {{ t('save') }}
+          </button>
+        </form>
+        <div
+          v-if="field.conditions?.[0]?.field_uuid"
+          class="text-center w-full mt-4"
+        >
+          <button
+            class="link"
+            @click="[newCondition.field_uuid = null, delete field.conditions, validateSaveAndClose()]"
+          >
+            {{ t('remove_condition') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ConditionModal',
+  inject: ['t', 'save', 'template', 'withConditions'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    buildDefaultName: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['close'],
+  data () {
+    return {
+      newCondition: this.field.conditions?.[0] || {}
+    }
+  },
+  computed: {
+    conditionField () {
+      return this.fields.find((f) => f.uuid === this.newCondition.field_uuid)
+    },
+    conditionActions () {
+      return this.fieldActions(this.conditionField)
+    },
+    fields () {
+      return this.template.fields.reduce((acc, f) => {
+        if (f !== this.field && f.submitter_uuid === this.field.submitter_uuid) {
+          acc.push(f)
+        }
+
+        return acc
+      }, [])
+    }
+  },
+  created () {
+    this.field.conditions ||= []
+  },
+  methods: {
+    fieldActions (field) {
+      const actions = []
+
+      if (!field) {
+        return actions
+      }
+
+      if (field.type === 'checkbox') {
+        actions.push('checked', 'unchecked')
+      } else if (['radio', 'select'].includes(field.type)) {
+        actions.push('equal', 'not_equal')
+      } else if (['multiple'].includes(field.type)) {
+        actions.push('contains', 'does_not_contain')
+      } else {
+        actions.push('not_empty', 'empty')
+      }
+
+      return actions
+    },
+    validateSaveAndClose () {
+      if (!this.withConditions) {
+        return alert('Available only in Pro')
+      }
+
+      if (this.newCondition.field_uuid) {
+        this.field.conditions = [this.newCondition]
+      } else {
+        delete this.field.conditions
+      }
+
+      this.save()
+      this.$emit('close')
+    }
+  }
+}
+</script>

app/javascript/template_builder/field.vue

@@ -68,7 +68,7 @@
           <button
             v-if="field.preferences?.formula"
             class="relative cursor-pointer text-transparent group-hover:text-base-content"
-            :disabled="!withFormula"
+            :title="t('formula')"
             @click="isShowFormulaModal = true"
           >
             <IconMathFunction
@@ -76,6 +76,17 @@
               :stroke-width="1.6"
             />
           </button>
+          <button
+            v-if="field.conditions?.length"
+            class="relative cursor-pointer text-transparent group-hover:text-base-content"
+            :title="t('condition')"
+            @click="isShowConditionsModal = true"
+          >
+            <IconRouteAltLeft
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </button>
           <PaymentSettings
             v-if="field.type === 'payment'"
             :field="field"
@@ -204,26 +215,6 @@
                   <span class="label-text">{{ t('required') }}</span>
                 </label>
               </li>
-              <li
-                v-if="field.type == 'number'"
-                :class="{'tooltip tooltip-bottom': !withFormula}"
-                :data-tip="withFormula ? '' : 'Available in Pro'"
-                @click.stop
-              >
-                <label
-                  class="label-text cursor-pointer py-1.5 text-center w-full flex items-center"
-                  @click="isShowFormulaModal = withFormula"
-                >
-                  <IconMathFunction
-                    width="18px"
-                    height="18px"
-                    class="ml-0.5 mr-1"
-                  />
-                  <span class="text-sm">
-                    {{ t('formula') }}
-                  </span>
-                </label>
-              </li>
               <li
                 v-if="field.type == 'checkbox'"
                 @click.stop
@@ -267,6 +258,33 @@
                 </label>
               </li>
               <hr class="pb-0.5 mt-0.5">
+              <li>
+                <label
+                  class="label-text cursor-pointer text-center w-full flex items-center"
+                  @click="isShowConditionsModal = !isShowConditionsModal"
+                >
+                  <IconRouteAltLeft
+                    width="18"
+                  />
+                  <span class="text-sm">
+                    {{ t('condition') }}
+                  </span>
+                </label>
+              </li>
+              <li v-if="field.type == 'number'">
+                <label
+                  class="label-text cursor-pointer text-center w-full flex items-center"
+                  @click="isShowFormulaModal = true"
+                >
+                  <IconMathFunction
+                    width="18"
+                  />
+                  <span class="text-sm">
+                    {{ t('formula') }}
+                  </span>
+                </label>
+              </li>
+              <hr class="pb-0.5 mt-0.5">
               <li
                 v-for="(area, index) in field.areas || []"
                 :key="index"
@@ -406,6 +424,16 @@
         @close="isShowFormulaModal = false"
       />
     </Teleport>
+    <Teleport
+      v-if="isShowConditionsModal"
+      :to="modalContainerEl"
+    >
+      <ConditionsModal
+        :field="field"
+        :build-default-name="buildDefaultName"
+        @close="isShowConditionsModal = false"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -414,7 +442,8 @@ import Contenteditable from './contenteditable'
 import FieldType from './field_type'
 import PaymentSettings from './payment_settings'
 import FormulaModal from './formula_modal'
-import { IconMathFunction, IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
+import ConditionsModal from './conditions_modal'
+import { IconRouteAltLeft, IconMathFunction, IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
 export default {
@@ -426,12 +455,14 @@ export default {
     PaymentSettings,
     IconNewSection,
     FormulaModal,
+    ConditionsModal,
+    IconRouteAltLeft,
     IconTrashX,
     IconMathFunction,
     IconCopy,
     FieldType
   },
-  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't', 'withFormula'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't'],
   props: {
     field: {
       type: Object,
@@ -454,6 +485,7 @@ export default {
       isNameFocus: false,
       showPaymentModal: false,
       isShowFormulaModal: false,
+      isShowConditionsModal: false,
       renderDropdown: false
     }
   },

app/javascript/template_builder/fields.vue

@@ -278,6 +278,14 @@ export default {
     removeField (field) {
       this.fields.splice(this.fields.indexOf(field), 1)
 
+      this.fields.forEach((f) => {
+        (f.conditions || []).forEach((c) => {
+          if (c.field_uuid === field.uuid) {
+            f.conditions.splice(f.conditions.indexOf(c), 1)
+          }
+        })
+      })
+
       this.save()
     },
     addField (type, area = null) {

app/javascript/template_builder/formula_modal.vue

@@ -9,7 +9,7 @@
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
         <span>
-          {{ t('formula') }}
+          {{ t('formula') }} - {{ field.name || buildDefaultName(field, template.fields) }}
         </span>
         <a
           href="#"
@@ -18,6 +18,16 @@
         >&times;</a>
       </div>
       <div>
+        <div
+          v-if="!withFormula"
+          class="bg-base-300 rounded-xl py-2 px-3 text-center"
+        >
+          <a
+            href="https://www.docuseal.co/pricing"
+            target="_blank"
+            class="link"
+          >Available in Pro</a>
+        </div>
         <div class="flex-inline mb-2 gap-2 space-y-1">
           <button
             v-for="f in fields"
@@ -118,7 +128,7 @@ export default {
   components: {
     IconCodePlus
   },
-  inject: ['t', 'save', 'template'],
+  inject: ['t', 'save', 'template', 'withFormula'],
   props: {
     field: {
       type: Object,
@@ -178,6 +188,10 @@ export default {
       })
     },
     validateSaveAndClose () {
+      if (!this.withFormula) {
+        return alert('Available only in Pro')
+      }
+
       const normalizedFormula = this.normalizeFormula(this.formula)
 
       if (normalizedFormula.includes('FIELD NOT FOUND')) {

app/javascript/template_builder/i18n.js

@@ -1,4 +1,14 @@
 const en = {
+  unchecked: 'Unchecked',
+  equal: 'Equal',
+  not_equal: 'Not equal',
+  contains: 'Contains',
+  does_not_contain: 'Does not contain',
+  not_empty: 'Not empty',
+  empty: 'Empty',
+  select_field_: 'Select field...',
+  select_value_: 'Select value...',
+  remove_condition: 'Remove condition',
   are_you_sure: 'Are you sure?',
   sign_yourself: 'Sign Yourself',
   set_signing_date: 'Set signing date',
@@ -31,6 +41,7 @@ const en = {
   copy_to_all_pages: 'Copy to All Pages',
   add_option: 'Add option',
   option: 'Option',
+  condition: 'Condition',
   first_party: 'First Party',
   second_party: 'Second Party',
   third_party: 'Third Party',