resources/js/components/form/Editor.vue

@@ -107,20 +107,8 @@ class ConditionTune {
 
     wrap(blockContent) {
         this.wrapper = document.createElement('div');
-
+        this.wrapper.appendChild(blockContent);
-        var tooltip = document.createElement('div');
-        tooltip.setAttribute('data-tooltip', '');
-
-        var content = document.createElement('div');
-        content.setAttribute('data-content', '');
-
-        content.appendChild(blockContent);
-
-        this.wrapper.appendChild(tooltip);
-        this.wrapper.appendChild(content);
-
         this.styleWrapper();
-
         return this.wrapper;
     }
 
@@ -130,46 +118,21 @@ class ConditionTune {
 
     styleWrapper() {
         if (this.hasData()) {
-            this.wrapper.querySelector('[data-content]').className = 'p-1 border border-blue-100 rounded';
+            this.wrapper.className = 'relative mt-6 mb-6 p-1 border border-blue-200 rounded';
-            this.wrapper.querySelector('[data-tooltip]').className =
+            if (!this.wrapper.querySelector('.condition-description')) {
-                'inline-block tracking-wider font-semibold ml-2 px-2 py-1 items-center text-xs leading-none bg-blue-100 text-blue-900 rounded-t-lg';
+                var tooltip = document.createElement('div');
-            this.wrapper.querySelector('[data-tooltip]').innerHTML = this.descriptionName();
+                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.querySelector('[data-content]').className = '';
+            this.wrapper.className = '';
-            this.wrapper.querySelector('[data-tooltip]').className = '';
+            if (this.wrapper.querySelector('.condition-description')) {
-            this.wrapper.querySelector('[data-tooltip]').innerHTML = '';
+                this.wrapper.removeChild(this.wrapper.querySelector('.condition-description'));
+            }
         }
     }
 
-    descriptionName() {
-        return (
-            'Bedingung ' +
-            this.data.ifs
-                .map((i) => {
-                    var parts = [i.field];
-
-                    if (i.comparator === 'isEqual' || i.comparator === 'isIn') {
-                        parts.push('=');
-                    }
-
-                    if (i.comparator === 'isNotEqual' || i.comparator === 'isNotIn') {
-                        parts.push('≠');
-                    }
-
-                    if (typeof i.value === 'string') {
-                        parts.push(i.value);
-                    }
-
-                    if (Array.isArray(i.value)) {
-                        parts.push(i.value.join(', '));
-                    }
-
-                    return parts.join(' ');
-                })
-                .join(', ')
-        );
-    }
-
     render() {
         return {
             label: 'Bedingungen',