add number conditions

app/javascript/elements/field_condition.js

@@ -64,6 +64,22 @@ export default class extends HTMLElement {
     if (action === 'empty' || action === 'unchecked') return this.isEmpty(actual)
     if (action === 'not_empty' || action === 'checked') return !this.isEmpty(actual)
 
+    if (['equal', 'not_equal', 'greater_than', 'less_than'].includes(action) && this.sourceEl?.getAttribute('type') === 'number') {
+      if (this.isEmpty(actual) || this.isEmpty(expected)) return false
+
+      const actualNumber = parseFloat(actual)
+      const expectedNumber = parseFloat(expected)
+
+      if (Number.isNaN(actualNumber) || Number.isNaN(expectedNumber)) return false
+
+      if (action === 'equal') return Math.abs(actualNumber - expectedNumber) < Number.EPSILON
+      if (action === 'not_equal') return Math.abs(actualNumber - expectedNumber) > Number.EPSILON
+      if (action === 'greater_than') return actualNumber > expectedNumber
+      if (action === 'less_than') return actualNumber < expectedNumber
+
+      return false
+    }
+
     if (action === 'equal') {
       const list = Array.isArray(actual) ? actual : [actual]
       return list.filter((v) => v !== null && v !== undefined).map(String).includes(String(expected))

app/javascript/submission_form/form.vue

@@ -1261,7 +1261,7 @@ export default {
     checkFieldCondition (condition, cache = {}) {
       const field = this.fieldsUuidIndex[condition.field_uuid]
 
-      if (['not_empty', 'checked', 'equal', 'contains'].includes(condition.action) && field && !this.checkFieldConditions(field, cache)) {
+      if (['not_empty', 'checked', 'equal', 'contains', 'greater_than', 'less_than'].includes(condition.action) && field && !this.checkFieldConditions(field, cache)) {
         return false
       }
 
@@ -1271,6 +1271,22 @@ export default {
         return isEmpty(this.values[condition.field_uuid] ?? defaultValue)
       } else if (['not_empty', 'checked'].includes(condition.action)) {
         return !isEmpty(this.values[condition.field_uuid] ?? defaultValue)
+      } else if (field?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)) {
+        const value = this.values[condition.field_uuid] ?? defaultValue
+
+        if (isEmpty(value) || isEmpty(condition.value)) return false
+
+        const actual = parseFloat(value)
+        const expected = parseFloat(condition.value)
+
+        if (Number.isNaN(actual) || Number.isNaN(expected)) return false
+
+        if (condition.action === 'equal') return Math.abs(actual - expected) < Number.EPSILON
+        if (condition.action === 'not_equal') return Math.abs(actual - expected) > Number.EPSILON
+        if (condition.action === 'greater_than') return actual > expected
+        if (condition.action === 'less_than') return actual < expected
+
+        return false
       } else if (['equal', 'contains'].includes(condition.action) && field) {
         if (field.options) {
           const option = field.options.find((o) => o.uuid === condition.value)

app/javascript/template_builder/conditions_modal.vue

@@ -124,6 +124,16 @@
                   {{ option.value || `${t('option')} ${index + 1}` }}
                 </option>
               </select>
+              <input
+                v-else-if="conditionField(condition)?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)"
+                v-model="condition.value"
+                type="number"
+                step="any"
+                class="input input-bordered input-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                :class="{ 'text-gray-300': !condition.value }"
+                :placeholder="t('type_value')"
+                required
+              >
             </div>
           </div>
           <a
@@ -222,6 +232,8 @@ export default {
         actions.push('equal', 'not_equal')
       } else if (['multiple'].includes(field.type)) {
         actions.push('contains', 'does_not_contain')
+      } else if (field.type === 'number') {
+        actions.push('not_empty', 'empty', 'equal', 'not_equal', 'greater_than', 'less_than')
       } else {
         actions.push('not_empty', 'empty')
       }

app/javascript/template_builder/i18n.js

@@ -52,6 +52,8 @@ const en = {
   type_value: 'Type value',
   equal: 'Equal',
   not_equal: 'Not equal',
+  greater_than: 'Greater than',
+  less_than: 'Less than',
   contains: 'Contains',
   does_not_contain: 'Does not contain',
   not_empty: 'Not empty',
@@ -264,6 +266,8 @@ const es = {
   price: 'Precio',
   equal: 'Igual',
   not_equal: 'No es igual',
+  greater_than: 'Mayor que',
+  less_than: 'Menor que',
   contains: 'Contiene',
   does_not_contain: 'No contiene',
   not_empty: 'No vacío',
@@ -474,6 +478,8 @@ const it = {
   type_value: 'Inserisci valore',
   equal: 'Uguale',
   not_equal: 'Non uguale',
+  greater_than: 'Maggiore di',
+  less_than: 'Minore di',
   contains: 'Contiene',
   does_not_contain: 'Non contiene',
   not_empty: 'Non vuoto',
@@ -686,6 +692,8 @@ const pt = {
   price: 'Preço',
   equal: 'Igual',
   not_equal: 'Não é igual',
+  greater_than: 'Maior que',
+  less_than: 'Menor que',
   contains: 'Contém',
   does_not_contain: 'Não contém',
   not_empty: 'Não vazio',
@@ -896,6 +904,8 @@ const fr = {
   type_value: 'Saisir une valeur',
   equal: 'Égal',
   not_equal: 'Différent',
+  greater_than: 'Supérieur à',
+  less_than: 'Inférieur à',
   contains: 'Contient',
   does_not_contain: 'Ne contient pas',
   not_empty: 'Non vide',
@@ -1107,6 +1117,8 @@ const de = {
   type_value: 'Wert eingeben',
   equal: 'Gleich',
   not_equal: 'Ungleich',
+  greater_than: 'Größer als',
+  less_than: 'Kleiner als',
   contains: 'Enthält',
   does_not_contain: 'Enthält nicht',
   not_empty: 'Nicht leer',
@@ -1318,6 +1330,8 @@ const nl = {
   type_value: 'Typ waarde',
   equal: 'Gelijk aan',
   not_equal: 'Niet gelijk aan',
+  greater_than: 'Groter dan',
+  less_than: 'Kleiner dan',
   contains: 'Bevat',
   does_not_contain: 'Bevat niet',
   not_empty: 'Niet leeg',