Add conditions to files and email

resources/js/components/form/Editor.vue

@@ -1,12 +1,25 @@
 <template>
     <div>
-        <span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
+        <div>
-        <div class="relative w-full h-full">
+            <span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
-            <div :id="id" :class="[defaultFieldClass, fieldClass(size)]"></div>
+            <div class="relative w-full h-full">
-            <div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
+                <div :id="id" :class="[defaultFieldClass, fieldClass(size)]"></div>
-                <ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
+                <div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
+                    <ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
+                </div>
             </div>
         </div>
+
+        <ui-popup
+            v-if="condition !== null"
+            heading="Bedingungen"
+            @close="
+                condition.resolve(condition.data);
+                condition = null;
+            "
+        >
+            <slot name="conditions" :data="condition.data" :resolve="condition.resolve" :reject="condition.reject"></slot>
+        </ui-popup>
     </div>
 </template>
 
@@ -39,6 +52,11 @@ const props = defineProps({
     id: {
         required: true,
     },
+    conditions: {
+        required: false,
+        type: Boolean,
+        default: () => false,
+    },
     hint: {
         default: null,
     },
@@ -54,51 +72,140 @@ const props = defineProps({
 });
 
 const editor = ref(null);
+const condition = ref(null);
+
+async function openPopup(conditions) {
+    return new Promise((resolve, reject) => {
+        new Promise((innerResolve, innerReject) => {
+            condition.value = {
+                resolve: innerResolve,
+                reject: innerReject,
+                data: conditions,
+            };
+        }).then((data) => {
+            resolve(data);
+            condition.value = null;
+        });
+    });
+}
+
+class ConditionTune {
+    constructor({api, data, config, block}) {
+        this.api = api;
+        this.data = data || {
+            conditions: [],
+        };
+        this.config = config;
+        this.block = block;
+        this.wrapper = null;
+    }
+
+    static get isTune() {
+        return true;
+    }
+
+    wrap(blockContent) {
+        this.wrapper = document.createElement('div');
+        this.wrapper.appendChild(blockContent);
+        this.styleWrapper();
+        return this.wrapper;
+    }
+
+    styleWrapper() {
+        if (this.data.conditions.length > 0) {
+            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');
+                tooltip.className = 'condition-description absolute top-0 left-0 -mt-4 ml-1 h-4 flex px-2 items-center text-xs leading-none bg-blue-200 text-blue-900 rounded-t-lg';
+                tooltip.innerHTML = 'Bedingung';
+                this.wrapper.appendChild(tooltip);
+            }
+        } else {
+            this.wrapper.className = '';
+            if (this.wrapper.querySelector('.condition-description')) {
+                this.wrapper.removeChild(this.wrapper.querySelector('.condition-description'));
+            }
+        }
+    }
+
+    render() {
+        return {
+            label: 'Bedingungen',
+            closeOnActivate: true,
+            toggle: true,
+            onActivate: async () => {
+                this.data.conditions = await openPopup(this.data.conditions);
+                this.styleWrapper();
+                this.block.dispatchChange();
+            },
+        };
+    }
+
+    save() {
+        return this.data;
+    }
+}
 
 onMounted(async () => {
+    var tools = {
+        paragraph: {
+            class: Paragraph,
+            shortcut: 'CTRL+P',
+            inlineToolbar: true,
+            config: {
+                preserveBlank: true,
+                placeholder: 'Absatz',
+            },
+        },
+        alert: {
+            class: Alert,
+            inlineToolbar: true,
+            config: {
+                defaultType: 'primary',
+            },
+        },
+        heading: {
+            class: Header,
+            shortcut: 'CTRL+H',
+            inlineToolbar: true,
+            config: {
+                placeholder: 'Überschrift',
+                levels: [2, 3, 4],
+                defaultLevel: 2,
+            },
+        },
+        list: {
+            class: NestedList,
+            shortcut: 'CTRL+L',
+            inlineToolbar: true,
+        },
+    };
+
+    var tunes = [];
+
+    if (props.conditions) {
+        tools.condition = {
+            class: ConditionTune,
+        };
+        tunes.push('condition');
+    }
+
     editor.value = new EditorJS({
         placeholder: props.placeholder,
         holder: props.id,
         minHeight: 0,
         defaultBlock: 'paragraph',
         data: JSON.parse(JSON.stringify(props.modelValue)),
-        tools: {
+        tunes: tunes,
-            paragraph: {
+        tools: tools,
-                class: Paragraph,
-                shortcut: 'CTRL+P',
-                inlineToolbar: true,
-                config: {
-                    preserveBlank: true,
-                    placeholder: 'Absatz',
-                },
-            },
-            alert: {
-                class: Alert,
-                inlineToolbar: true,
-                config: {
-                    defaultType: 'primary',
-                },
-            },
-            heading: {
-                class: Header,
-                shortcut: 'CTRL+H',
-                inlineToolbar: true,
-                config: {
-                    placeholder: 'Überschrift',
-                    levels: [2, 3, 4],
-                    defaultLevel: 2,
-                },
-            },
-            list: {
-                class: NestedList,
-                shortcut: 'CTRL+L',
-                inlineToolbar: true,
-            },
-        },
         onChange: debounce(async (api, event) => {
             const data = await editor.value.save();
+            console.log(data);
             emit('update:modelValue', data);
         }, 500),
+        onPopup: () => {
+            console.log('opened');
+        },
     });
     await editor.value.isReady;
     console.log('Editor is ready');

resources/js/views/form/Conditions.vue

@@ -5,7 +5,6 @@
     </ui-note>
 
     <div v-else>
-        <div class="mt-2">Datei: {{ value.name }}</div>
         <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">
@@ -44,7 +43,7 @@
 <script setup>
 import {ref, inject, computed} from 'vue';
 const axios = inject('axios');
-const emit = defineEmits(['close']);
+const emit = defineEmits(['save']);
 
 const props = defineProps({
     value: {
@@ -96,7 +95,7 @@ const fieldOptions = computed(() =>
     })
 );
 
-const conditions = ref('conditions' in props.value.properties ? props.value.properties.conditions : []);
+const conditions = ref(JSON.parse(JSON.stringify(props.value)));
 
 const locked = ref(false);
 
@@ -109,14 +108,7 @@ function addCondition() {
 }
 
 async function save() {
-    await axios.patch(`/mediaupload/${props.value.id}`, {
+    emit('save', conditions.value);
-        properties: {
-            ...props.value.properties,
-            conditions: conditions.value,
-        },
-    });
-
-    emit('close');
 }
 
 async function checkIfDirty() {

resources/js/views/form/Index.vue

@@ -74,7 +74,19 @@
                         Die Anrede ("Hallo Max Mustermann") wird automatisch an den Anfang gesetzt.<br />
                         Außerdem kannst du Dateien hochladen, die automatisch mit angehangen werden.
                     </ui-note>
-                    <f-textarea id="mail_top" v-model="single.mail_top" name="mail_top" label="E-Mail-Teil 1" rows="8" required></f-textarea>
+                    <div>
+                        <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>
+                            </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>
+                            </template>
+                        </f-editor>
+                    </div>
                     <f-multiplefiles
                         id="mailattachments"
                         v-model="single.mailattachments"
@@ -92,7 +104,6 @@
                             </a>
                         </template>
                     </f-multiplefiles>
-                    <f-textarea id="mail_bottom" v-model="single.mail_bottom" name="mail_bottom" label="E-Mail-Teil 2" rows="8" required></f-textarea>
                 </div>
             </div>
             <template #actions>
@@ -102,8 +113,8 @@
             </template>
         </ui-popup>
 
-        <ui-popup v-if="fileSettingPopup !== null" heading="Bedingungen bearbeiten" @close="fileSettingPopup = null">
+        <ui-popup v-if="fileSettingPopup !== null" :heading="`Bedingungen für Datei ${fileSettingPopup.name}`" @close="fileSettingPopup = null">
-            <file-settings @close="fileSettingPopup = null" :single="single" :value="fileSettingPopup"></file-settings>
+            <conditions :single="single" :value="fileSettingPopup.properties.conditions" @save="saveFileConditions"> </conditions>
         </ui-popup>
 
         <page-filter breakpoint="xl">
@@ -149,27 +160,44 @@
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import {ref, inject} from 'vue';
 import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js';
 import FormBuilder from '../formtemplate/FormBuilder.vue';
 import Participants from './Participants.vue';
-import FileSettings from './FileSettings.vue';
+import Conditions from './Conditions.vue';
+import {useToast} from 'vue-toastification';
 
 const props = defineProps(indexProps);
 var {meta, data, reloadPage, create, single, edit, cancel, submit, remove, getFilter, setFilter} = useIndex(props.data, 'form');
+const axios = inject('axios');
+const toast = useToast();
 
 const active = ref(0);
+const activeMailTab = ref(0);
 const deleting = ref(null);
 const showing = ref(null);
 const fileSettingPopup = ref(null);
 
 const tabs = [{title: 'Allgemeines'}, {title: 'Formular'}, {title: 'E-Mail'}, {title: 'Export'}];
+const mailTabs = [{title: 'vor Daten'}, {title: 'nach Daten'}];
 
 function setTemplate(template) {
     active.value = 0;
     single.value.config = template.config;
 }
 
+async function saveFileConditions(conditions) {
+    await axios.patch(`/mediaupload/${fileSettingPopup.value.id}`, {
+        properties: {
+            ...fileSettingPopup.value.properties,
+            conditions: conditions,
+        },
+    });
+
+    fileSettingPopup.value = null;
+    toast.success('Datei aktualisiert');
+}
+
 function showParticipants(form) {
     showing.value = form;
 }