Dc3e4 new matrix field

app/Http/Requests/AnswerFormRequest.php

@@ -4,6 +4,7 @@
 
 use App\Models\Forms\Form;
 use App\Rules\CustomFieldValidationRule;
+use App\Rules\MatrixValidationRule;
 use App\Rules\StorageFile;
 use App\Rules\ValidHCaptcha;
 use App\Rules\ValidPhoneInputRule;
@@ -82,6 +83,8 @@ public function rules()
                 } elseif ($property['type'] == 'rating') {
                     // For star rating, needs a minimum of 1 star
                     $rules[] = 'min:1';
+                } elseif ($property['type'] == 'matrix') {
+                    $rules[] = new MatrixValidationRule();
                 }
             } else {
                 $rules[] = 'nullable';
@@ -97,7 +100,7 @@ public function rules()
             }
 
             // User custom validation
-            if(!(Str::of($property['type'])->startsWith('nf-')) && isset($property['validation'])) {
+            if (!(Str::of($property['type'])->startsWith('nf-')) && isset($property['validation'])) {
                 $rules[] = (new CustomFieldValidationRule($property['validation'], $data));
             }
 

app/Rules/FormPropertyLogicRule.php

@@ -73,6 +73,34 @@ class FormPropertyLogicRule implements DataAwareRule, ValidationRule
                 ],
             ],
         ],
+        'matrix' => [
+            'comparators' => [
+                'equals' => [
+                    'expected_type' => 'object',
+                    'format' => [
+                        'type' => 'object',
+                    ],
+                ],
+                'does_not_equal' => [
+                    'expected_type' => 'object',
+                    'format' => [
+                        'type' => 'object',
+                    ],
+                ],
+                'contains' => [
+                    'expected_type' => 'object',
+                    'format' => [
+                        'type' => 'object',
+                    ],
+                ],
+                'does_not_contain' => [
+                    'expected_type' => 'object',
+                    'format' => [
+                        'type' => 'object',
+                    ],
+                ],
+            ],
+        ],
         'url' => [
             'comparators' => [
                 'equals' => [

app/Rules/MatrixValidationRule.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class MatrixValidationRule implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (!is_array($value)) {
+            $fail('The Matrix field must be an array.');
+            return;
+        }
+        $nullValues = array_filter($value, function ($val) {
+            return $val === null;
+        });
+        if (sizeof($nullValues)) {
+            $fail('The Matrix field is required.');
+        }
+    }
+}

app/Service/Forms/FormLogicConditionChecker.php

@@ -72,6 +72,8 @@ private function propertyConditionMet(array $propertyCondition, $value): bool
                 return $this->multiSelectConditionMet($propertyCondition, $value);
             case 'files':
                 return $this->filesConditionMet($propertyCondition, $value);
+            case 'matrix':
+                return $this->matrixConditionMet($propertyCondition, $value);
         }
 
         return false;
@@ -90,6 +92,30 @@ private function checkContains($condition, $fieldValue): bool
         return \Str::contains($fieldValue, $condition['value']);
     }
 
+    private function checkMatrixContains($condition, $fieldValue): bool
+    {
+
+        foreach($condition['value'] as $key => $value) {
+            if(!(array_key_exists($key, $condition['value']) && array_key_exists($key, $fieldValue))) {
+                return false;
+            }
+            if($condition['value'][$key] == $fieldValue[$key]) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private function checkMatrixEquals($condition, $fieldValue): bool
+    {
+        foreach($condition['value'] as $key => $value) {
+            if($condition['value'][$key] !== $fieldValue[$key]) {
+                return false;
+            }
+        }
+        return true;
+    }
+
     private function checkListContains($condition, $fieldValue): bool
     {
         if (is_null($fieldValue)) {
@@ -408,4 +434,20 @@ private function filesConditionMet(array $propertyCondition, $value): bool
 
         return false;
     }
+
+    private function matrixConditionMet(array $propertyCondition, $value): bool
+    {
+        switch ($propertyCondition['operator']) {
+            case 'equals':
+                return $this->checkMatrixEquals($propertyCondition, $value);
+            case 'does_not_equal':
+                return !$this->checkMatrixEquals($propertyCondition, $value);
+            case 'contains':
+                return $this->checkMatrixContains($propertyCondition, $value);
+            case 'does_not_contain':
+                return !$this->checkMatrixContains($propertyCondition, $value);
+        }
+
+        return false;
+    }
 }

app/Service/Forms/FormSubmissionFormatter.php

@@ -81,6 +81,17 @@ public function useSignedUrlForFiles()
         return $this;
     }
 
+    public function getMatrixString(array $val): string
+    {
+        $parts = [];
+        foreach ($val as $key => $value) {
+            if ($key !== null && $value !== null) {
+                $parts[] = "$key: $value";
+            }
+        }
+        return implode(' | ', $parts);
+    }
+
     /**
      * Return a nice "FieldName": "Field Response" array
      * - If createLink enabled, returns html link for emails and links
@@ -145,6 +156,8 @@ public function getCleanKeyValue()
                 } else {
                     $returnArray[$field['name']] = $val;
                 }
+            } elseif ($field['type'] == 'matrix') {
+                $returnArray[$field['name']] = $this->getMatrixString($data[$field['id']]);
             } elseif ($field['type'] == 'files') {
                 if ($this->outputStringsOnly) {
                     $formId = $this->form->id;
@@ -219,6 +232,8 @@ public function getFieldsWithValue()
                 } else {
                     $field['value'] = $val;
                 }
+            } elseif ($field['type'] == 'matrix') {
+                $field['value'] = str_replace(' | ', "\n", $this->getMatrixString($data[$field['id']]));
             } elseif ($field['type'] == 'files') {
                 if ($this->outputStringsOnly) {
                     $formId = $this->form->id;

client/components/forms/FlatSelectInput.vue

@@ -16,7 +16,6 @@
         theme.default.input,
         theme.default.borderRadius,
         {
-          'mb-2': index !== options.length,
           '!ring-red-500 !ring-2 !border-transparent': hasError,
           '!cursor-not-allowed !bg-gray-200': disabled,
         },

client/components/forms/MatrixInput.vue

@@ -0,0 +1,121 @@
+<template>
+  <input-wrapper v-bind="inputWrapperProps">
+    <template #label>
+      <slot name="label"/>
+    </template>
+    <div class='border' :class="[
+        theme.default.borderRadius,
+        {
+          '!ring-red-500 !ring-2 !border-transparent': hasError,
+          '!cursor-not-allowed !bg-gray-200': disabled,
+        },
+    ]">
+     <table 
+        class="w-full table-fixed overflow-hidden border border-collapse border-transparent" 
+        :class="[
+            theme.default.borderRadius]"
+    >
+      <thead class="">
+      <tr class="bg-gray-200/60">
+        <th @click="test" class="border border-gray-300">
+
+        </th>
+        <td v-for="column in columns" :key="column" class="border border-gray-300">
+          <div class="p-2 w-full flex items-center justify-center capitalize text-sm truncate">
+            {{ column }}
+          </div>
+        </td>
+      </tr>
+      </thead>
+
+      <tbody>
+      <tr v-for="row, rowIndex in rows" :key="rowIndex" class="">
+        <td class="border border-gray-300">
+          <div class="w-full flex-grow p-2 text-sm truncate">
+            {{ row }}
+          </div>
+        </td>
+        <td v-for="column in columns" :key="row + column" class="border border-gray-300">
+            <div
+                class="w-full flex items-center justify-center hover:bg-gray-200/40"
+              v-if="compVal"
+              role="radio"
+              :aria-checked="compVal[row] === column"
+              :class="[
+                                theme.FlatSelectInput.spacing.vertical,
+                                theme.FlatSelectInput.fontSize,
+                                theme.FlatSelectInput.option,
+                                ]"
+              @click="onSelect(row, column)"
+            >
+              <Icon
+                v-if="compVal[row] === column"
+                :key="row+column"
+                name="material-symbols:radio-button-checked-outline"
+                class="text-inherit"
+                :color="color"
+                :class="[theme.FlatSelectInput.icon]"
+              />
+              <Icon
+                v-else
+                :key="row+column"
+                name="material-symbols:radio-button-unchecked"
+                :class="[theme.FlatSelectInput.icon,theme.FlatSelectInput.unselectedIcon]"
+              />
+            </div>
+        </td>
+      </tr>
+    </tbody>
+    </table>
+    </div>
+    <template #help>
+      <slot name="help"/>
+    </template>
+    <template #error>
+      <slot name="error"/>
+    </template>
+  </input-wrapper>
+</template>
+<script>
+import {inputProps, useFormInput} from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
+
+export default {
+  name: "MatrixInput",
+  components: {InputWrapper},
+
+  props: {
+    ...inputProps,
+    rows: {type: Array, required: true},
+    columns: {type: Array, required: true},
+  },
+  data() {
+    return {
+    }
+  },
+  setup(props, context) {
+    return {
+      ...useFormInput(props, context),
+    }
+  },
+  computed: {},
+  methods: {
+    test(){
+      console.log(this.compVal)
+      this.compVal = {}
+    },
+    onSelect(row, column) {
+      if (this.compVal[row] === column) {
+        this.compVal[row] = null
+      } else {
+        this.compVal[row] = column
+      }
+    },
+  },
+  beforeMount() {
+    if (!this.compVal || typeof this.compVal !== 'object') {
+      this.compVal = {}
+    }
+  },
+}
+</script>

client/components/forms/components/MatrixRadioInput.vue

@@ -0,0 +1,42 @@
+<template>
+    <div
+        role="radio"
+        :aria-checked="selected"
+        :class="[
+          theme.FlatSelectInput.spacing.vertical,
+          theme.FlatSelectInput.fontSize,
+          theme.FlatSelectInput.option,
+        ]"
+        @click="onSelect"
+    >
+        <Icon
+            v-if="selected"
+            name="material-symbols:radio-button-checked-outline"
+            class="text-inherit"
+            :color="color"
+            :class="[theme.FlatSelectInput.icon]"
+        />
+        <Icon
+            v-else
+            name="material-symbols:radio-button-unchecked"
+            :class="[theme.FlatSelectInput.icon,theme.FlatSelectInput.unselectedIcon]"
+        />
+    </div>
+</template>
+<script>
+export default {
+    emits: ['toggle-select'],
+    props: {
+        theme: { type: Object },
+        color: {type: String, default: "#3B82F6"},
+        selected: { type: Boolean, default: false }
+    },
+    methods: {
+        onSelect(){
+            this.$emit("toggle-select")
+        }
+    }
+
+}
+
+</script>

client/components/open/forms/OpenForm.vue

@@ -437,6 +437,8 @@ export default {
           formData[field.id] = urlPrefill.getAll(field.id + '[]')
         } else if (field.type === 'date' && field.prefill_today === true) { // For Prefill with 'today'
           formData[field.id] = new Date().toISOString()
+        } else if (field.type === 'matrix') {
+          formData[field.id] = {...field.prefill}
         } else { // Default prefill if any
           formData[field.id] = field.prefill
         }