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 <julien@nahum.net>
2024-11-20 21:36:11 +05:30 · 2024-11-20 21:36:11 +05:30 · ab83aa166c
parent dfec772d82
commit ab83aa166c
11 changed files with 131 additions and 139 deletions
--- a/api/app/Http/Requests/UserFormRequest.php
+++ b/api/app/Http/Requests/UserFormRequest.php
@ -91,7 +91,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest

            // 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 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
        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'
        ];
    }
 }
--- 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"
--- 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),
      }
    },
-  },
-}
-</script>
+    data() {
+      return {
+      }
+    },
+    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>
--- 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>
--- 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>
--- 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,
--- a/client/components/forms/components/VSwitch.vue
+++ b/client/components/forms/components/VSwitch.vue
@ -1,54 +0,0 @@
-<template>
-  <div
-    :id="id || name"
-    :aria-labelledby="id || name"
-    role="checkbox"
-    :aria-checked="props.modelValue"
-    class="flex"
-    @click.stop="onClick"
-  >
-    <div
-      class="inline-flex items-center bg-gray-300 rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100"
-      :class="[{ 'toggle-switch': props.modelValue }, theme.SwitchInput.containerSize]"
-      :style="{ '--accent-color': props.color }"
-    >
-      <div
-        class="inline-block h-4 w-4 rounded-full bg-white transition-all transform ease-in-out duration-150 scale-100"
-        :class="{ [theme.SwitchInput.translatedClass]: props.modelValue}"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { defineEmits, defineProps } from "vue"
-import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
-
-const props = defineProps({
-  id: { type: String, default: null },
-  name: { type: String, default: "checkbox" },
-  modelValue: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  color: { type: String, default: '#3B82F6' },
-  theme: {
-    type: Object, default: () => {
-      const theme = inject("theme", null)
-      if (theme) {
-        return theme.value
-      }
-      return CachedDefaultTheme.getInstance()
-    }
-  },
-})
-const emit = defineEmits(["update:modelValue"])
-
-function onClick() {
-  if (props.disabled) return
-  emit("update:modelValue", !props.modelValue)
-}
-</script>
-<style>
-  .toggle-switch {
-    background-color: var(--accent-color);
-  }
-</style>
--- 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
--- 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
      }
--- a/client/components/open/forms/components/FormUrlPrefill.vue
+++ b/client/components/open/forms/components/FormUrlPrefill.vue
@ -65,6 +65,8 @@ const preFillUrl = computed(() => {
        props.formData[property.id].forEach((value) => {
          uriComponents.append(property.id + "[]", value)
        })
+      } else if (typeof props.formData[property.id] === 'object') {
+        uriComponents.append(property.id, JSON.stringify(props.formData[property.id]))
      } else {
        uriComponents.append(property.id, props.formData[property.id])
      }
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@ -529,13 +529,13 @@
          name="max_char_limit"
          native-type="number"
          :min="1"
-          :max="2000"
          :form="field"
          label="Max character limit"
-          help="Maximum character limit of 2000"
          :required="false"
+          @update:model-value="onFieldMaxCharLimitChange"
        />
        <toggle-switch-input
+          v-if="field.max_char_limit"
          name="show_char_limit"
          :form="field"
          class="mt-3"
@ -833,6 +833,12 @@ export default {
    },
    updateMatrixField(newField) {
      this.field = newField
+    },
+    onFieldMaxCharLimitChange(val) {
+      this.field.max_char_limit = val
+      if(!this.field.max_char_limit) {
+        this.field.show_char_limit = false
+      }
    }
  }
 }