Add conditions form

resources/js/views/form/Conditions.vue

@@ -5,68 +5,72 @@
     </ui-note>
 
     <div v-else>
-        <f-select id="mode" v-model="inner.mode" :options="modeOptions" name="mode" label="Modus"></f-select>
+        <f-select :id="`mode-${id}`" :name="`mode-${id}`" :model-value="modelValue.mode" :options="modeOptions" label="Modus" @update:model-value="changeMode"></f-select>
 
         <ui-icon-button class="mt-4 mb-2" icon="plus" @click="addCondition">Bedingung einfügen</ui-icon-button>
 
-        <div v-for="(condition, index) in inner.ifs" :key="index" class="grid grid-cols-[1fr_1fr_1fr_max-content] gap-2">
+        <div v-for="(condition, index) in modelValue.ifs" :key="index" class="grid grid-cols-[1fr_1fr_1fr_max-content] gap-2">
             <f-select
-                :id="`field-${index}`"
+                :id="`field-${index}-${id}`"
                 :model-value="condition.field"
                 :options="fieldOptions"
-                :name="`field-${index}`"
+                :name="`field-${index}-${id}`"
                 label="Feld"
                 @update:model-value="update(index, 'field', $event)"
             ></f-select>
             <f-select
-                :id="`comparator-${index}`"
+                :id="`comparator-${index}-${id}`"
                 :options="comparatorOptions"
                 :model-value="condition.comparator"
-                :name="`comparator-${index}`"
+                :name="`comparator-${index}-${id}`"
                 label="Vergleich"
                 @update:model-value="update(index, 'comparator', $event)"
             ></f-select>
             <f-select
                 v-if="condition.field && ['isEqual', 'isNotEqual'].includes(condition.comparator) && ['RadioField', 'DropdownField'].includes(getField(condition.field).type)"
-                :id="`value-${index}`"
+                :id="`value-${index}-${id}`"
                 v-model="condition.value"
                 :options="getOptions(condition.field)"
-                :name="`value-${index}`"
+                :name="`value-${index}-${id}`"
                 label="Wert"
             ></f-select>
             <f-multipleselect
                 v-if="condition.field && ['isIn', 'isNotIn'].includes(condition.comparator) && ['RadioField', 'DropdownField'].includes(getField(condition.field).type)"
-                :id="`value-${index}`"
+                :id="`value-${index}-${id}`"
                 v-model="condition.value"
                 :options="getOptions(condition.field)"
                 label="Wert"
             ></f-multipleselect>
             <f-switch
                 v-if="condition.field && condition.comparator && ['CheckboxField'].includes(getField(condition.field).type)"
-                :id="`value-${index}`"
+                :id="`value-${index}-${id}`"
                 v-model="condition.value"
-                :name="`value-${index}`"
+                :name="`value-${index}-${id}`"
                 label="Wert"
             ></f-switch>
-            <ui-action-button tooltip="Löschen" icon="trash" class="btn-danger self-end h-8" @click="inner.ifs.splice(index, 1)"></ui-action-button>
+            <ui-action-button tooltip="Löschen" icon="trash" class="btn-danger self-end h-8" @click="remove(index)"></ui-action-button>
         </div>
-
-        <ui-icon-button class="mt-4 mb-2" icon="save" @click="save">Speichern</ui-icon-button>
     </div>
 </template>
 
 <script lang="js" setup>
 import { ref, inject, computed } from 'vue';
 const axios = inject('axios');
-const emit = defineEmits(['save']);
+const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
-    value: {
+    modelValue: {
         required: true,
+        type: Object,
     },
     single: {
         required: true,
+        type: Object,
     },
+    id: {
+        required: true,
+        type: String,
+    }
 });
 
 const comparatorOptions = ref([
@@ -94,23 +98,33 @@ const fields = computed(() => {
     return result;
 });
 
+function changeMode(mode) {
+    emit('update:modelValue', {...props.modelValue, mode: mode});
+}
+
 function update(index, key, value) {
+    var inner = {...props.modelValue};
     if (key === 'comparator') {
-        var old = inner.value.ifs[index];
+        var old = inner.ifs[index];
-        inner.value.ifs[index] = {
+        inner.ifs[index] = {
             field: old.field,
             comparator: value,
             value: old.field ? comparatorOptions.value.find((c) => c.id === value).defaultValue[getField(old.field).type] : null,
         };
     }
     if (key === 'field') {
-        var old = inner.value.ifs[index];
+        var old = inner.ifs[index];
-        inner.value.ifs[index] = {
+        inner.ifs[index] = {
             field: value,
             comparator: null,
             value: null,
         };
     }
+    emit('update:modelValue', inner);
+}
+
+function remove(index) {
+    emit('update:modelValue', {...props.modelValue, ifs: props.modelValue.ifs.toSpliced(index, 1)});
 }
 
 function getField(fieldName) {
@@ -129,22 +143,19 @@ const fieldOptions = computed(() =>
     })
 );
 
-const inner = ref(JSON.parse(JSON.stringify(props.value)));
+function addCondition() {
+    emit('update:modelValue', {...props.modelValue, ifs: [
+        ...props.modelValue.ifs,
+        {
+            field: null,
+            comparator: null,
+            value: null,
+        }
+    ]});
+}
 
 const locked = ref(false);
 
-function addCondition() {
-    inner.value.ifs.push({
-        field: null,
-        comparator: null,
-        value: null,
-    });
-}
-
-async function save() {
-    emit('save', inner.value);
-}
-
 async function checkIfDirty() {
     const response = await axios.post(props.single.links.is_dirty, { config: props.single.config });
 

resources/js/views/form/ConditionsForm.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <conditions :id="id" v-model="inner" :single="single"></conditions>
+        <ui-icon-button class="mt-4 mb-2" icon="save" @click="save">Speichern</ui-icon-button>
+    </div>
+</template>
+
+<script lang="js" setup>
+import { ref, inject, computed } from 'vue';
+const emit = defineEmits(['save']);
+import Conditions from './Conditions.vue';
+
+const props = defineProps({
+    value: {
+        required: true,
+    },
+    single: {
+        required: true,
+    },
+    id: {
+        required: true,
+        type: String,
+    }
+});
+
+const inner = ref(JSON.parse(JSON.stringify(props.value)));
+
+async function save() {
+    emit('save', inner.value);
+}
+</script>

resources/js/views/form/Index.vue

@@ -81,12 +81,12 @@
                         <ui-tabs v-model="activeMailTab" :entries="mailTabs"></ui-tabs>
                         <f-editor v-if="activeMailTab === 0" id="mail_top" v-model="single.mail_top" name="mail_top" label="E-Mail-Teil 1" :rows="8" conditions required>
                             <template #conditions="{data, resolve}">
-                                <conditions :single="single" :value="data" @save="resolve"> </conditions>
+                                <conditions-form id="mail_top_conditions" :single="single" :value="data" @save="resolve"> </conditions-form>
                             </template>
                         </f-editor>
                         <f-editor v-if="activeMailTab === 1" id="mail_bottom" v-model="single.mail_bottom" name="mail_bottom" label="E-Mail-Teil 2" :rows="8" conditions required>
                             <template #conditions="{data, resolve}">
-                                <conditions :single="single" :value="data" @save="resolve"> </conditions>
+                                <conditions-form id="mail_bottom_conditions" :single="single" :value="data" @save="resolve"> </conditions-form>
                             </template>
                         </f-editor>
                     </div>
@@ -134,7 +134,7 @@
         </ui-popup>
 
         <ui-popup v-if="fileSettingPopup !== null" :heading="`Bedingungen für Datei ${fileSettingPopup.name}`" @close="fileSettingPopup = null">
-            <conditions :single="single" :value="fileSettingPopup.properties.conditions" @save="saveFileConditions"> </conditions>
+            <conditions-form id="filesettings" :single="single" :value="fileSettingPopup.properties.conditions" @save="saveFileConditions"> </conditions-form>
         </ui-popup>
 
         <page-filter breakpoint="xl">
@@ -188,6 +188,7 @@ import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
 import FormBuilder from '../formtemplate/FormBuilder.vue';
 import Participants from './Participants.vue';
 import Conditions from './Conditions.vue';
+import ConditionsForm from './ConditionsForm.vue';
 import { useToast } from 'vue-toastification';
 
 const props = defineProps(indexProps);