Refactor event names

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"
     />
-
+    <content-form-section
-    <a
+      :title="title"
-      class="contents-form__remove icon-button"
+      v-else
-      @click="$emit('remove')"
     >
-      <trash-icon
+      <div class="content-element__section">
-        class="contents-form__trash-icon icon-button__icon"
+        <component
-        v-if="type(element) !== 'content-block-element-chooser-widget'"
+          :class="['content-element__component']"
-      />
+          v-bind="element"
-    </a>
+          :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);

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);
       });
     },
   };

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

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>

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>

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>

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>