Matrix Improvements (#606)

* Support disable on matrix * fix checkbox and radio icon * Use Nuxt UI toggle * Can set max_char_limit null * fix action icon design * Support for URL prefill for Matrix * Apply theme color on toggle * Set --form-color as style variable and use it * Set default value for form-color * fix formatting --------- Co-authored-by: Julien Nahum <[email protected]>
JhumanJ · Nov 20, 2024 · ab83aa1 · ab83aa1
1 parent dfec772
commit ab83aa1
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 139 deletions.
diff --git a/api/app/Http/Requests/UserFormRequest.php b/api/app/Http/Requests/UserFormRequest.php
@@ -91,7 +91,7 @@ public function rules()
 
             // Text field
             'properties.*.multi_lines' => 'boolean|nullable',
-            'properties.*.max_char_limit' => 'integer|nullable|min:1|max:2000',
+            'properties.*.max_char_limit' => 'integer|nullable|min:1',
             'properties.*.show_char_limit ' => 'boolean|nullable',
             'properties.*.secret_input' => 'boolean|nullable',
 
@@ -134,8 +134,7 @@ public function messages()
         return [
             'properties.*.name.required' => 'The form block number :position is missing a name.',
             'properties.*.type.required' => 'The form block number :position is missing a type.',
-            'properties.*.max_char_limit.min' => 'The form block number :position max character limit must be at least 1 OR Empty',
-            'properties.*.max_char_limit.max' => 'The form block number :position max character limit may not be greater than 2000.',
+            'properties.*.max_char_limit.min' => 'The form block number :position max character limit must be at least 1 OR Empty'
         ];
     }
 }
diff --git a/client/components/forms/CheckboxInput.vue b/client/components/forms/CheckboxInput.vue
@@ -5,16 +5,16 @@
     </template>
 
     <div class="flex space-x-2 items-center">
-    <VCheckbox
-      :id="id ? id : name"
-      v-model="compVal"
-      :value="value"
-      :disabled="disabled ? true : null"
-      :name="name"
-      :color="color"
-      :theme="theme"
-    />
-    <div>
+      <VCheckbox
+        :id="id ? id : name"
+        v-model="compVal"
+        :value="value"
+        :disabled="disabled ? true : null"
+        :name="name"
+        :color="color"
+        :theme="theme"
+      />
+      <div>
         <slot name="label">
           <label
             :aria-label="id ? id : name"

diff --git a/client/components/forms/MatrixInput.vue b/client/components/forms/MatrixInput.vue
@@ -9,7 +9,6 @@
         theme.default.borderRadius,
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-300': disabled,
         },
       ]"
     >
@@ -28,7 +27,6 @@
             </td>
           </tr>
         </thead>
-
         <tbody>
           <tr
             v-for="row, rowIndex in rows"
@@ -44,6 +42,9 @@
               v-for="column in columns"
               :key="row + column"
               class="border-l border-gray-300 hover:!bg-gray-100 dark:hover:!bg-gray-800"
+              :class="{
+                '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800 hover:!bg-gray-200 dark:hover:!bg-gray-800': disabled,
+              }"
             >
               <div
                 v-if="compVal"
@@ -54,6 +55,9 @@
                   theme.FlatSelectInput.spacing.vertical,
                   theme.FlatSelectInput.fontSize,
                   theme.FlatSelectInput.option,
+                  {
+                    '!cursor-not-allowed !bg-transparent hover:!bg-transparent dark:hover:!bg-transparent': disabled,
+                  }
                 ]"
                 @click="onSelect(row, column)"
               >
@@ -77,43 +81,44 @@
     </template>
   </input-wrapper>
 </template>
-<script>
-import {inputProps, useFormInput} from "./useFormInput.js"
-import InputWrapper from "./components/InputWrapper.vue"
-import RadioButtonIcon from "./components/RadioButtonIcon.vue"
-
-export default {
-  name: "MatrixInput",
-  components: {InputWrapper, RadioButtonIcon},
-
-  props: {
-    ...inputProps,
-    rows: {type: Array, required: true},
-    columns: {type: Array, required: true},
-  },
-  setup(props, context) {
-    return {
-      ...useFormInput(props, context),
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  computed: {},
-  mounted() {
-    if (!this.compVal || typeof this.compVal !== 'object') {
-      this.compVal = {}
-    }
-  },
-  methods: {
-    onSelect(row, column) {
-      if (this.compVal[row] === column && !this.required) {
-        this.compVal[row] = null
-      } else {
-        this.compVal[row] = column
+  <script>
+  import {inputProps, useFormInput} from "./useFormInput.js"
+  import InputWrapper from "./components/InputWrapper.vue"
+  import RadioButtonIcon from "./components/RadioButtonIcon.vue"
+  export default {
+    name: "MatrixInput",
+    components: {InputWrapper, RadioButtonIcon},
+    props: {
+      ...inputProps,
+      rows: {type: Array, required: true},
+      columns: {type: Array, required: true},
+    },
+    setup(props, context) {
+      return {
+        ...useFormInput(props, context),
+      }
+    },
+    data() {
+      return {
       }
     },
-  },
-}
-</script>
+    computed: {},
+    mounted() {
+      if (!this.compVal || typeof this.compVal !== 'object') {
+        this.compVal = {}
+      }
+    },
+    methods: {
+        onSelect(row, column) {
+          if (this.disabled) {
+            return
+          }
+          if (this.compVal[row] === column && !this.required) {
+              this.compVal[row] = null
+          } else {
+              this.compVal[row] = column
+          }
+      },
+    },
+  }
+  </script>
diff --git a/client/components/forms/ToggleSwitchInput.vue b/client/components/forms/ToggleSwitchInput.vue
@@ -5,13 +5,16 @@
     </template>
 
     <div class="flex space-x-2 items-center">
-      <v-switch
+      <UToggle
         :id="id ? id : name"
         v-model="compVal"
         :disabled="disabled ? true : null"
-        :color="color"
-        :theme="theme"
+        :ui="{
+          active: 'bg-[var(--form-color,#3B82F6)]',
+          ring: 'focus:ring-[var(--form-color,#3B82F6)]/50'
+        }"
       />
+
       <div>
         <slot name="label">
           <label
@@ -51,14 +54,13 @@
 
 <script>
 import {inputProps, useFormInput} from "./useFormInput.js"
-import VSwitch from "./components/VSwitch.vue"
 import InputWrapper from "./components/InputWrapper.vue"
 import InputHelp from "~/components/forms/components/InputHelp.vue"
 
 export default {
   name: "ToggleSwitchInput",
 
-  components: {InputHelp, InputWrapper, VSwitch},
+  components: {InputHelp, InputWrapper},
   props: {
     ...inputProps,
   },
@@ -73,4 +75,4 @@ export default {
     this.compVal = !!this.compVal
   },
 }
-</script>
+</script>
diff --git a/client/components/forms/components/CheckboxIcon.vue b/client/components/forms/components/CheckboxIcon.vue
@@ -1,12 +1,24 @@
 <template>
-  <Icon
-    :name="isChecked ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'"
-    :class="[
-      theme.FlatSelectInput.icon,
-      isChecked ? '' : theme.FlatSelectInput.unselectedIcon,
-    ]"
-    :color="isChecked ? color : undefined"
-  />
+  <div>
+    <Icon
+      v-show="isChecked"
+      name="i-material-symbols-check-box"
+      class="block"
+      :class="[
+        theme.FlatSelectInput.icon,
+        'bg-[var(--form-color,#3B82F6)]'
+      ]"
+    />
+    <Icon
+      v-show="!isChecked"
+      name="i-material-symbols-check-box-outline-blank"
+      class="block"
+      :class="[
+        theme.FlatSelectInput.icon,
+        theme.FlatSelectInput.unselectedIcon,
+      ]"
+    />
+  </div>
 </template>
 
 <script setup>

diff --git a/client/components/forms/components/RadioButtonIcon.vue b/client/components/forms/components/RadioButtonIcon.vue
@@ -1,17 +1,27 @@
 <template>
-  <Icon
-    :name="isChecked ? 'ic:round-radio-button-checked' : 'ic:round-radio-button-unchecked'"
-    :class="[
-      theme.FlatSelectInput.icon,
-      isChecked ? '' : theme.FlatSelectInput.unselectedIcon,
-    ]"
-    :color="isChecked ? color : undefined"
-  />
+  <div>
+    <Icon
+      v-show="isChecked"
+      name="ic:round-radio-button-checked"
+      class="block"
+      :class="[
+        theme.FlatSelectInput.icon,
+        'bg-[var(--form-color,#3B82F6)]'
+      ]"
+    />
+    <Icon
+      v-show="!isChecked"
+      name="ic:round-radio-button-unchecked"
+      class="block"
+      :class="[
+        theme.FlatSelectInput.icon,
+        theme.FlatSelectInput.unselectedIcon,
+      ]"
+    />
+  </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-
 const props = defineProps({
   isChecked: {
     type: Boolean,

diff --git a/client/components/forms/components/VSwitch.vue b/client/components/forms/components/VSwitch.vue
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
@@ -310,7 +310,8 @@ export default {
     },
     computedStyle() {
       return {
-        ...this.minHeight ? {minHeight: this.minHeight + 'px'} : {}
+        ...this.minHeight ? {minHeight: this.minHeight + 'px'} : {},
+        '--form-color': this.form.color
       }
     }
   },
@@ -488,10 +489,19 @@ export default {
     handleUrlPrefill(field, formData, urlPrefill) {
       if (!urlPrefill) return
 
-      const prefillValue = urlPrefill.get(field.id)
+      const prefillValue = (() => {
+        const val = urlPrefill.get(field.id)
+        try {
+          return typeof val === 'string' && val.startsWith('{') ? JSON.parse(val) : val
+        } catch (e) {
+          return val
+        }
+      })()
       const arrayPrefillValue = urlPrefill.getAll(field.id + '[]')
 
-      if (prefillValue !== null) {
+      if (typeof prefillValue === 'object' && prefillValue !== null) {
+        formData[field.id] = { ...prefillValue }
+      } else if (prefillValue !== null) {
         formData[field.id] = field.type === 'checkbox' ? this.parseBooleanValue(prefillValue) : prefillValue
       } else if (arrayPrefillValue.length > 0) {
         formData[field.id] = arrayPrefillValue
@@ -503,7 +513,7 @@ export default {
     handleDefaultPrefill(field, formData) {
       if (field.type === 'date' && field.prefill_today) {
         formData[field.id] = new Date().toISOString()
-      } else if (field.type === 'matrix') {
+      } else if (field.type === 'matrix' && !formData[field.id]) {
         formData[field.id] = {...field.prefill}
       } else if (!(field.id in formData)) {
         formData[field.id] = field.prefill

diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
@@ -25,7 +25,7 @@
           class="flex lg:flex-col bg-gray-100 dark:bg-gray-800 border rounded-md"
         >
           <div
-            class="p-1 lg:pt-0 hover:text-blue-500 cursor-pointer text-gray-400 dark:text-gray-500 dark:border-gray-500"
+            class="p-1 lg:pt-0 -mb-2 hover:text-blue-500 cursor-pointer text-gray-400 dark:text-gray-500 dark:border-gray-500"
             role="button"
             @click.prevent="openAddFieldSidebar"
           >
@@ -326,7 +326,7 @@ export default {
         helpPosition: (field.help_position) ? field.help_position : 'below_input',
         uppercaseLabels: this.form.uppercase_labels == 1 || this.form.uppercase_labels == true,
         theme: this.theme,
-        maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
+        maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : null,
         showCharLimit: field.show_char_limit || false,
         isDark: this.darkMode
       }