Mod condition data

app/Form/Models/Form.php

@@ -66,13 +66,17 @@ class Form extends Model implements HasMedia
             });
         $this->addMediaCollection('mailattachments')
             ->withDefaultProperties(fn () => [
-                'conditions' => [],
+                'conditions' => [
+                    'mode' => 'all',
+                    'ifs' => []
+                ],
             ])
             ->withPropertyValidation(fn () => [
-                'conditions' => 'array',
+                'conditions.mode' => 'required|string|in:all,any',
-                'conditions.*.field' => 'required',
+                'conditions.ifs' => 'array',
-                'conditions.*.comparator' => 'required',
+                'conditions.ifs.*.field' => 'required',
-                'conditions.*.value' => 'present',
+                'conditions.ifs.*.comparator' => 'required',
+                'conditions.ifs.*.value' => 'present',
             ]);
     }
 

resources/js/components/form/Editor.vue

@@ -74,13 +74,13 @@ const props = defineProps({
 const editor = ref(null);
 const condition = ref(null);
 
-async function openPopup(conditions) {
+async function openPopup(data) {
     return new Promise((resolve, reject) => {
         new Promise((innerResolve, innerReject) => {
             condition.value = {
                 resolve: innerResolve,
                 reject: innerReject,
-                data: conditions,
+                data: data,
             };
         }).then((data) => {
             resolve(data);
@@ -93,7 +93,8 @@ class ConditionTune {
     constructor({api, data, config, block}) {
         this.api = api;
         this.data = data || {
-            conditions: [],
+            mode: 'all',
+            ifs: [],
         };
         this.config = config;
         this.block = block;
@@ -111,8 +112,12 @@ class ConditionTune {
         return this.wrapper;
     }
 
+    hasData() {
+        return this.data.ifs.length > 0;
+    }
+
     styleWrapper() {
-        if (this.data.conditions.length > 0) {
+        if (this.hasData()) {
             this.wrapper.className = 'relative mt-6 mb-6 p-1 border border-blue-200 rounded';
             if (!this.wrapper.querySelector('.condition-description')) {
                 var tooltip = document.createElement('div');
@@ -134,7 +139,7 @@ class ConditionTune {
             closeOnActivate: true,
             toggle: true,
             onActivate: async () => {
-                this.data.conditions = await openPopup(this.data.conditions);
+                this.data = await openPopup(this.data);
                 this.styleWrapper();
                 this.block.dispatchChange();
             },

resources/js/views/form/Conditions.vue

@@ -7,7 +7,7 @@
     <div v-else>
         <ui-icon-button class="mt-4 mb-2" icon="plus" @click="addCondition">Bedingung einfügen</ui-icon-button>
 
-        <div v-for="(condition, index) in conditions" :key="index" class="grid grid-cols-[1fr_1fr_1fr_max-content] gap-2">
+        <div v-for="(condition, index) in inner.ifs" :key="index" class="grid grid-cols-[1fr_1fr_1fr_max-content] gap-2">
             <f-select :id="`field-${index}`" v-model="condition.field" :options="fieldOptions" :name="`field-${index}`" label="Feld"></f-select>
             <f-select
                 :id="`comparator-${index}`"
@@ -33,7 +33,7 @@
                 :name="`value-${index}`"
                 label="Wert"
             ></f-multipleselect>
-            <ui-action-button tooltip="Löschen" icon="trash" class="btn-danger self-end h-8" @click="conditions.splice(index, 1)"></ui-action-button>
+            <ui-action-button tooltip="Löschen" icon="trash" class="btn-danger self-end h-8" @click="inner.ifs.splice(index, 1)"></ui-action-button>
         </div>
 
         <ui-icon-button class="mt-4 mb-2" icon="save" @click="save">Speichern</ui-icon-button>
@@ -95,12 +95,12 @@ const fieldOptions = computed(() =>
     })
 );
 
-const conditions = ref(JSON.parse(JSON.stringify(props.value)));
+const inner = ref(JSON.parse(JSON.stringify(props.value)));
 
 const locked = ref(false);
 
 function addCondition() {
-    conditions.value.push({
+    inner.value.ifs.push({
         field: null,
         comparator: null,
         value: null,
@@ -108,7 +108,7 @@ function addCondition() {
 }
 
 async function save() {
-    emit('save', conditions.value);
+    emit('save', inner.value);
 }
 
 async function checkIfDirty() {

resources/js/views/form/Index.vue

@@ -99,7 +99,7 @@
                     >
                         <template #buttons="{file, buttonClass, iconClass}">
                             <a v-tooltip="`Bedingungen`" href="#" :class="[buttonClass, 'bg-blue-200', 'relative']" @click.prevent="fileSettingPopup = file">
-                                <div v-if="file.properties.conditions.length" class="absolute w-2 h-2 -mt-[0.05rem] -ml-[0.05rem] flex-none bg-red-900 rounded-full top-0 left-0"></div>
+                                <div v-if="file.properties.conditions.ifs.length" class="absolute w-2 h-2 -mt-[0.05rem] -ml-[0.05rem] flex-none bg-red-900 rounded-full top-0 left-0"></div>
                                 <ui-sprite src="setting" :class="[iconClass, 'text-blue-800']"></ui-sprite>
                             </a>
                         </template>