From 868dc5cf023e94cc7b97a16379046fc44eeb47fc Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Thu, 25 Apr 2024 22:49:07 +0200
Subject: [PATCH] Add description for condition blocks

---
 resources/js/components/form/Editor.vue | 36 ++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/form/Editor.vue b/resources/js/components/form/Editor.vue
index c5ea9cc3..7a916e29 100644
--- a/resources/js/components/form/Editor.vue
+++ b/resources/js/components/form/Editor.vue
@@ -130,9 +130,10 @@ class ConditionTune {
 
     styleWrapper() {
         if (this.hasData()) {
-            this.wrapper.querySelector('[data-content]').className = 'p-1 border border-blue-200 rounded';
-            this.wrapper.querySelector('[data-tooltip]').className = 'inline-block ml-2 px-2 py-1 items-center text-xs leading-none bg-blue-200 text-blue-900 rounded-t-lg';
-            this.wrapper.querySelector('[data-tooltip]').innerHTML = 'Bedingung';
+            this.wrapper.querySelector('[data-content]').className = 'p-1 border border-blue-100 rounded';
+            this.wrapper.querySelector('[data-tooltip]').className =
+                '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';
+            this.wrapper.querySelector('[data-tooltip]').innerHTML = this.descriptionName();
         } else {
             this.wrapper.querySelector('[data-content]').className = '';
             this.wrapper.querySelector('[data-tooltip]').className = '';
@@ -140,6 +141,35 @@ class ConditionTune {
         }
     }
 
+    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('&ne;');
+                    }
+
+                    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',