Logic for disable fields (#103)

* Feature: Disabled fields

* disable field for rating

* logic for disable fields

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

app/Rules/FormPropertyLogicRule.php

@@ -13,7 +13,9 @@ class FormPropertyLogicRule implements Rule, DataAwareRule
         'show-block',
         'hide-block',
         'make-it-optional',
-        'require-answer'
+        'require-answer',
+        'enable-block',
+        'disable-block'
     ];
 
     const CONDITION_MAPPING = [
@@ -596,7 +598,8 @@ class FormPropertyLogicRule implements Rule, DataAwareRule
                 if (!in_array($val, static::ACTIONS_VALUES) || 
                     (in_array($this->field["type"], ['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image']) && !in_array($val, ['hide-block'])) ||
                     (isset($this->field["hidden"]) && $this->field["hidden"] && !in_array($val, ['show-block', 'require-answer'])) || 
-                    (isset($this->field["required"]) && $this->field["required"] && !in_array($val, ['make-it-optional', 'hide-block']))
+                    (isset($this->field["required"]) && $this->field["required"] && !in_array($val, ['make-it-optional', 'hide-block', 'disable-block'])) || 
+                    (isset($this->field["disabled"]) && $this->field["disabled"] && !in_array($val, ['enable-block', 'require-answer', 'make-it-optional']))
                 ) {
                     $this->isActionCorrect = false;
                     break;

resources/js/components/open/forms/OpenForm.vue

@@ -220,7 +220,7 @@ export default {
     isFieldDisabled () {
       const fieldsDisabled = {}
       this.fields.forEach((field) => {
-        fieldsDisabled[field.id] = (field.disabled === true)
+        fieldsDisabled[field.id] = (new FormLogicPropertyResolver(field, this.dataFormValue)).isDisabled()
       })
       return fieldsDisabled
     },

resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -118,9 +118,20 @@ export default {
           {name: 'Show Block', value: 'show-block'},
           {name: 'Require answer', value: 'require-answer'}
         ]
+      } else if (this.field.disabled) {
+        return [
+          { name: 'Enable Block', value: 'enable-block' },
+          (this.field.required
+            ? { name: 'Make it optional', value: 'make-it-optional' }
+            : {
+                name: 'Require answer',
+                value: 'require-answer'
+              })
+        ]
       } else {
         return [
           {name: 'Hide Block', value: 'hide-block'},
+          { name: 'Disable Block', value: 'disable-block' },
           (this.field.required
             ? {name: 'Make it optional', value: 'make-it-optional'}
             : {

resources/js/forms/FormLogicPropertyResolver.js

@@ -40,6 +40,21 @@ class FormLogicPropertyResolver {
       return this.property.required
     }
   }
+
+  isDisabled () {
+    if (!this.logic) {
+      return this.property.disabled
+    }
+
+    const conditionsMet = this.conditionsMet(this.logic.conditions, this.formData)
+    if (conditionsMet && this.property.disabled && this.logic.actions.length > 0 && this.logic.actions.includes('enable-block')) {
+      return false
+    } else if (conditionsMet && !this.property.disabled && this.logic.actions.length > 0 && this.logic.actions.includes('disable-block')) {
+      return true
+    } else {
+      return this.property.disabled
+    }
+  }
 }
 
 export default FormLogicPropertyResolver