Feature: Disabled fields (#98)

* Feature: Disabled fields

* disable field for rating

---------

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

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

@@ -12,6 +12,7 @@
             <component :is="getFieldComponents(field)" v-if="getFieldComponents(field)"
                        :key="field.id + formVersionId" :class="getFieldClasses(field)"
                        v-bind="inputProperties(field)" :required="isFieldRequired[field.id]"
+                       :disabled="isFieldDisabled[field.id]"
             />
             <template v-else>
               <div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
@@ -215,7 +216,14 @@ export default {
         fieldsRequired[field.id] = (new FormLogicPropertyResolver(field, this.dataFormValue)).isRequired()
       })
       return fieldsRequired
-    }
+    },
+    isFieldDisabled () {
+      const fieldsDisabled = {}
+      this.fields.forEach((field) => {
+        fieldsDisabled[field.id] = (field.disabled === true)
+      })
+      return fieldsDisabled
+    },
   },
 
   watch: {

resources/js/components/open/forms/fields/FormFieldOptionsModal.vue

@@ -53,6 +53,12 @@
         >
           Required
         </v-checkbox>
+        <v-checkbox v-model="field.disabled" class="mb-3"
+                    :name="field.id+'_disabled'"
+                    @input="onFieldDisabledChange"
+        >
+          Disabled
+        </v-checkbox>
       </div>
 
       <!-- Checkbox -->
@@ -440,6 +446,12 @@ export default {
       this.close()
       this.$emit('duplicate-block', this.field)
     },
+    onFieldDisabledChange (val) {
+      this.$set(this.field, 'disabled', val)
+      if (this.field.disabled) {
+        this.$set(this.field, 'hidden', false)
+      }
+    },
     onFieldRequiredChange(val) {
       this.$set(this.field, 'required', val)
       if (this.field.required) {
@@ -450,6 +462,7 @@ export default {
       this.$set(this.field, 'hidden', val)
       if (this.field.hidden) {
         this.$set(this.field, 'required', false)
+        this.$set(this.field, 'disabled', false)
       } else {
         this.$set(this.field, 'generates_uuid', false)
         this.$set(this.field, 'generates_auto_increment_id', false)