From 9b3f5ddbdf08f27c0026c030162dbadb1be1f615 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Wed, 22 Mar 2023 20:19:52 +0530
Subject: [PATCH] Feature: Disabled fields (#98)

* Feature: Disabled fields

* disable field for rating

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 resources/js/components/forms/CodeInput.vue         |  2 +-
 resources/js/components/forms/DateInput.vue         |  6 ++++--
 resources/js/components/forms/FileInput.vue         |  9 ++++++++-
 resources/js/components/forms/FlatSelectInput.vue   |  6 +++++-
 resources/js/components/forms/RatingInput.vue       |  7 +++++--
 resources/js/components/forms/RichTextAreaInput.vue |  2 +-
 resources/js/components/forms/SelectInput.vue       |  1 +
 resources/js/components/forms/SignatureInput.vue    | 10 +++++++---
 resources/js/components/forms/TextAreaInput.vue     |  2 +-
 resources/js/components/forms/TextInput.vue         |  2 +-
 .../js/components/forms/components/VCheckbox.vue    |  2 +-
 .../js/components/forms/components/VSelect.vue      |  5 +++--
 resources/js/components/open/forms/OpenForm.vue     | 10 +++++++++-
 .../open/forms/fields/FormFieldOptionsModal.vue     | 13 +++++++++++++
 14 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/resources/js/components/forms/CodeInput.vue b/resources/js/components/forms/CodeInput.vue
index 7cb6d29..07bdc06 100644
--- a/resources/js/components/forms/CodeInput.vue
+++ b/resources/js/components/forms/CodeInput.vue
@@ -9,7 +9,7 @@
 
     <prism-editor :id="id?id:name" v-model="compVal" :disabled="disabled"
                   class="code-editor"
-                  :class="[theme.CodeInput.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]"
+                  :class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
                   :style="inputStyle" :name="name"
                   :placeholder="placeholder"
                   :highlight="highlighter" @change="onChange"
diff --git a/resources/js/components/forms/DateInput.vue b/resources/js/components/forms/DateInput.vue
index 46b97d6..67865fe 100644
--- a/resources/js/components/forms/DateInput.vue
+++ b/resources/js/components/forms/DateInput.vue
@@ -58,8 +58,10 @@ export default {
 
   computed: {
     inputClasses (){
-      const str = 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700'
-      return this.dateRange ? str + ' w-50' : str + ' w-full'
+      let str = 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700'
+      str += this.dateRange ? ' w-50' : ' w-full'
+      str += this.disabled ? ' !cursor-not-allowed !bg-gray-200' : ''
+      return str
     },
     useTime() {
       return this.withTime && !this.dateRange
diff --git a/resources/js/components/forms/FileInput.vue b/resources/js/components/forms/FileInput.vue
index c1c33b2..b2f3ae5 100644
--- a/resources/js/components/forms/FileInput.vue
+++ b/resources/js/components/forms/FileInput.vue
@@ -9,7 +9,7 @@
     <span class="inline-block w-full rounded-md shadow-sm">
       <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" role="button"
               class="cursor-pointer relative flex"
-              :class="[theme.default.input,{'ring-red-500 ring-2': hasValidation && form.errors.has(name)}]"
+              :class="[theme.default.input,{'!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled}]"
               :style="inputStyle" @click.self="showUploadModal=true"
       >
         <div v-if="currentUrl==null" class="h-6 text-gray-600 dark:text-gray-400 flex-grow truncate"
@@ -190,6 +190,13 @@ export default {
   },
 
   watch: {
+    showUploadModal: {
+      handler (val) {
+        if(this.disabled){
+          this.showUploadModal = false
+        }
+      }
+    },
     files: {
       deep: true,
       handler (files) {
diff --git a/resources/js/components/forms/FlatSelectInput.vue b/resources/js/components/forms/FlatSelectInput.vue
index f8b4542..74eaee9 100644
--- a/resources/js/components/forms/FlatSelectInput.vue
+++ b/resources/js/components/forms/FlatSelectInput.vue
@@ -12,7 +12,7 @@
 
     <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-for="(option, index) in options" v-else :key="option[optionKey]" role="button"
-         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]"
+         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
          @click="onSelect(option[optionKey])"
     >
       <p class="flex-grow">
@@ -53,6 +53,10 @@ export default {
   computed: {},
   methods: {
     onSelect (value) {
+      if(this.disabled){
+        return
+      }
+      
       if (this.multiple) {
         const emitValue = Array.isArray(this.compVal) ? [...this.compVal] : []
 
diff --git a/resources/js/components/forms/RatingInput.vue b/resources/js/components/forms/RatingInput.vue
index b1171af..0e10a8a 100644
--- a/resources/js/components/forms/RatingInput.vue
+++ b/resources/js/components/forms/RatingInput.vue
@@ -10,9 +10,9 @@
     <div class="stars-outer">
       <div v-for="i in numberOfStars" :key="i"
            class="cursor-pointer inline-block"
-           :class="{'text-yellow-400':i<=compVal, 'text-yellow-100 dark:text-yellow-900':i>compVal && i<=hoverRating ,'text-gray-200 dark:text-gray-800':i>compVal && i>hoverRating}"
+           :class="{'text-yellow-400':i<=compVal, 'text-yellow-100 dark:text-yellow-900':i>compVal && i<=hoverRating ,'text-gray-200 dark:text-gray-800':i>compVal && i>hoverRating, '!cursor-not-allowed':disabled}"
            role="button" @click="setRating(i)"
-           @mouseover="hoverRating = i"
+           @mouseover="hoverRating = (disabled) ? null : i"
            @mouseleave="hoverRating = null"
       >
         <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -56,6 +56,9 @@ export default {
 
   methods: {
     setRating (val) {
+      if(this.disabled){
+        return
+      }
       if (this.compVal === val) {
         this.compVal = 0
       } else {
diff --git a/resources/js/components/forms/RichTextAreaInput.vue b/resources/js/components/forms/RichTextAreaInput.vue
index 3e5f350..230b6a6 100644
--- a/resources/js/components/forms/RichTextAreaInput.vue
+++ b/resources/js/components/forms/RichTextAreaInput.vue
@@ -7,7 +7,7 @@
       <span v-if="required" class="text-red-500 required-dot">*</span>
     </label>
     <vue-editor :id="id?id:name" ref="editor" v-model="compVal" :disabled="disabled"
-                :placeholder="placeholder" :class="[{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name) }, theme.RichTextAreaInput.input]"
+                :placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
                 :editor-toolbar="editorToolbar" class="rich-editor resize-y"
                 :style="inputStyle"
     />
diff --git a/resources/js/components/forms/SelectInput.vue b/resources/js/components/forms/SelectInput.vue
index 1f9969a..5f14ac0 100644
--- a/resources/js/components/forms/SelectInput.vue
+++ b/resources/js/components/forms/SelectInput.vue
@@ -16,6 +16,7 @@
               :theme="theme"
               :has-error="hasValidation && form.errors.has(name)"
               :allowCreation="allowCreation"
+              :disabled="disabled"
 
               @update-options="updateOptions"
     >
diff --git a/resources/js/components/forms/SignatureInput.vue b/resources/js/components/forms/SignatureInput.vue
index b193279..5872812 100644
--- a/resources/js/components/forms/SignatureInput.vue
+++ b/resources/js/components/forms/SignatureInput.vue
@@ -8,7 +8,7 @@
     </label>
 
     <VueSignaturePad ref="signaturePad"
-                     :class="[theme.default.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]" height="150px"
+                     :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]" height="150px"
                      :name="name"
                      :options="{ onEnd }"
     />
@@ -45,8 +45,12 @@ export default {
       this.onEnd()
     },
     onEnd () {
-      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
-      this.$set(this.form, this.name, (!isEmpty && data) ? data : null)
+      if(this.disabled){
+        this.$refs.signaturePad.clearSignature()
+      }else{
+        const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
+        this.$set(this.form, this.name, (!isEmpty && data) ? data : null)
+      }
     }
   }
 }
diff --git a/resources/js/components/forms/TextAreaInput.vue b/resources/js/components/forms/TextAreaInput.vue
index abbf177..45b4d7b 100644
--- a/resources/js/components/forms/TextAreaInput.vue
+++ b/resources/js/components/forms/TextAreaInput.vue
@@ -7,7 +7,7 @@
       <span v-if="required" class="text-red-500 required-dot">*</span>
     </label>
     <textarea :id="id?id:name" v-model="compVal" :disabled="disabled"
-              :class="[theme.default.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name) }]"
+              :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
               class="resize-y"
               :name="name" :style="inputStyle"
               :placeholder="placeholder"
diff --git a/resources/js/components/forms/TextInput.vue b/resources/js/components/forms/TextInput.vue
index 3764b94..b04e9e6 100644
--- a/resources/js/components/forms/TextInput.vue
+++ b/resources/js/components/forms/TextInput.vue
@@ -11,7 +11,7 @@
     <input :id="id?id:name" v-model="compVal" :disabled="disabled"
            :type="nativeType"
            :style="inputStyle"
-           :class="[theme.default.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]"
+           :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
            :name="name" :accept="accept"
            :placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
            @change="onChange" @keydown.enter.prevent="onEnterPress"
diff --git a/resources/js/components/forms/components/VCheckbox.vue b/resources/js/components/forms/components/VCheckbox.vue
index a5bdd60..94fafcc 100644
--- a/resources/js/components/forms/components/VCheckbox.vue
+++ b/resources/js/components/forms/components/VCheckbox.vue
@@ -10,7 +10,7 @@
       :disabled="disabled"
       @click="handleClick"
     >
-    <label :for="id || name" class="text-gray-700 dark:text-gray-300 ml-2" :class="{'cursor-not-allowed':disabled}">
+    <label :for="id || name" class="text-gray-700 dark:text-gray-300 ml-2" :class="{'!cursor-not-allowed':disabled}">
       <slot />
     </label>
   </div>
diff --git a/resources/js/components/forms/components/VSelect.vue b/resources/js/components/forms/components/VSelect.vue
index 00e98a7..e676871 100644
--- a/resources/js/components/forms/components/VSelect.vue
+++ b/resources/js/components/forms/components/VSelect.vue
@@ -13,7 +13,7 @@
       <span class="inline-block w-full rounded-md">
         <button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
                 class="cursor-pointer"
-                :style="inputStyle" :class="[theme.SelectInput.input,{'py-2':!multiple || loading,'py-1': multiple, 'ring-red-500 ring-2': hasError}]"
+                :style="inputStyle" :class="[theme.SelectInput.input,{'py-2':!multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled}]"
                 @click="openDropdown"
         >
           <div :class="{'h-6':!multiple, 'min-h-8':multiple && !loading}">
@@ -108,6 +108,7 @@ export default {
     uppercaseLabels: { type: Boolean, default: true },
     theme: { type: Object, default: () => themes.default },
     allowCreation: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
   },
   data () {
     return {
@@ -172,7 +173,7 @@ export default {
       this.searchTerm = ''
     },
     openDropdown () {
-      this.isOpen = !this.isOpen
+      this.isOpen = this.disabled ? false : !this.isOpen
     },
     select (value) {
       if (!this.multiple) {
diff --git a/resources/js/components/open/forms/OpenForm.vue b/resources/js/components/open/forms/OpenForm.vue
index 7aee2b8..eb3bec8 100644
--- a/resources/js/components/open/forms/OpenForm.vue
+++ b/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: {
diff --git a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
index 710856f..d788bc4 100644
--- a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
+++ b/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)