From dfb1a3ac5a546418ff1a5d40665354cfad81422e Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 20 Jan 2022 16:24:24 +0100
Subject: [PATCH] Refactor event names

---
 .../content-block-form/ContentElement.vue     | 54 +++++++++++--------
 .../components/content-forms/DocumentForm.vue |  2 +-
 .../components/content-forms/ImageForm.vue    |  2 +-
 .../src/components/content-forms/LinkForm.vue |  4 +-
 .../src/components/content-forms/TextForm.vue |  2 +-
 .../content-forms/TextFormWithHelpText.vue    |  2 +-
 .../components/content-forms/VideoForm.vue    |  2 +-
 7 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/client/src/components/content-block-form/ContentElement.vue b/client/src/components/content-block-form/ContentElement.vue
index 968f491c..0521f6c1 100644
--- a/client/src/components/content-block-form/ContentElement.vue
+++ b/client/src/components/content-block-form/ContentElement.vue
@@ -5,32 +5,43 @@
       v-bind="element"
       :is="type(element)"
       @change-type="changeType"
-
-      @link-change-url="changeText"
-      @link-change-text="changeText"
-      @text-change-value="changeText"
-      @document-change-url="changeUrl"
-      @image-change-url="changeUrl"
-      @video-change-url="changeUrl"
-      @switch-to-document="switchToDocument"
-
-      @assignment-change-title="changeAssignmentTitle"
-      @assignment-change-assignment="changeAssignmentAssignment"
     />
-
-    <a
-      class="contents-form__remove icon-button"
-      @click="$emit('remove')"
+    <content-form-section
+      :title="title"
+      v-else
     >
-      <trash-icon
-        class="contents-form__trash-icon icon-button__icon"
-        v-if="type(element) !== 'content-block-element-chooser-widget'"
-      />
-    </a>
+      <div class="content-element__section">
+        <component
+          :class="['content-element__component']"
+          v-bind="element"
+          :is="component"
+
+          @change-text="changeText"
+
+          @link-change-url="changeUrl"
+          @change-url="changeUrl"
+
+          @switch-to-document="switchToDocument"
+
+          @assignment-change-title="changeAssignmentTitle"
+          @assignment-change-assignment="changeAssignmentAssignment"
+        />
+
+        <a
+          class="contents-form__remove icon-button"
+          @click="$emit('remove')"
+        >
+          <trash-icon
+            class="contents-form__trash-icon icon-button__icon"
+          />
+        </a>
+      </div>
+    </content-form-section>
   </div>
 </template>
 
 <script>
+  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
   const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
   const ContentBlockElementChooserWidget = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ContentBlockElementChooserWidget');
   const LinkForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/LinkForm');
@@ -49,6 +60,7 @@
     },
 
     components: {
+      ContentFormSection,
       TrashIcon,
       ContentBlockElementChooserWidget,
       LinkForm,
@@ -153,7 +165,7 @@
         if (convertToList) {
           console.log(el);
           el = {
-           type: 'content_list_item',
+            type: 'content_list_item',
             contents: [el]
           };
           console.log(el);
diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index 5ec1356a..6e4621dc 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -51,7 +51,7 @@
 
     mounted() {
       uploadcare(this, url => {
-        this.$emit('link-change-url', url, this.index);
+        this.$emit('change-url', url, this.index);
       });
     },
   };
diff --git a/client/src/components/content-forms/ImageForm.vue b/client/src/components/content-forms/ImageForm.vue
index cc003394..5fe9c5ae 100644
--- a/client/src/components/content-forms/ImageForm.vue
+++ b/client/src/components/content-forms/ImageForm.vue
@@ -66,7 +66,7 @@
             this.hadError = false;
             this.url = fileInfo.cdnUrl;
             this.filename = fileInfo.name;
-            this.$emit('link-change-url', fileInfo.cdnUrl, this.index);
+            this.$emit('change-url', fileInfo.cdnUrl, this.index);
           });
 
           // the api also provides these methods
diff --git a/client/src/components/content-forms/LinkForm.vue b/client/src/components/content-forms/LinkForm.vue
index 1948fa55..859a6db7 100644
--- a/client/src/components/content-forms/LinkForm.vue
+++ b/client/src/components/content-forms/LinkForm.vue
@@ -4,14 +4,14 @@
       :value="value.text"
       placeholder="Name erfassen..."
       class="link-form__text skillbox-input"
-      @input="$emit('link-change-text', $event.target.value, index)"
+      @input="$emit('change-text', $event.target.value, index)"
     >
 
     <input
       :value="value.url"
       placeholder="URL einfügen..."
       class="link-form__url skillbox-input"
-      @input="$emit('link-change-url', $event.target.value, index)"
+      @input="$emit('change-url', $event.target.value, index)"
     >
   </div>
 </template>
diff --git a/client/src/components/content-forms/TextForm.vue b/client/src/components/content-forms/TextForm.vue
index 2a5f4683..b51f261f 100644
--- a/client/src/components/content-forms/TextForm.vue
+++ b/client/src/components/content-forms/TextForm.vue
@@ -5,7 +5,7 @@
       class="text-form__input skillbox-textarea"
       data-cy="text-form-input"
       placeholder="Text erfassen..."
-      @input="$emit('text-change-value', $event.target.value, index)"
+      @input="$emit('change-text', $event.target.value, index)"
     />
   </div>
 </template>
diff --git a/client/src/components/content-forms/TextFormWithHelpText.vue b/client/src/components/content-forms/TextFormWithHelpText.vue
index 035d0ff0..e9adf466 100644
--- a/client/src/components/content-forms/TextFormWithHelpText.vue
+++ b/client/src/components/content-forms/TextFormWithHelpText.vue
@@ -6,7 +6,7 @@
     </h3>
     <text-form
       :value="v"
-      @text-change-value="$emit('change', $event)"
+      @change-text="$emit('change', $event)"
     />
   </div>
 </template>
diff --git a/client/src/components/content-forms/VideoForm.vue b/client/src/components/content-forms/VideoForm.vue
index 5532e104..abec4cf2 100644
--- a/client/src/components/content-forms/VideoForm.vue
+++ b/client/src/components/content-forms/VideoForm.vue
@@ -23,7 +23,7 @@
         :value="value.url"
         class="video-form__video-link skillbox-input"
         placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-        @input="$emit('video-change-url', $event.target.value, index)"
+        @input="$emit('change-url', $event.target.value, index)"
       >
     </div>