From 1a87dbb788a0982a4da2d74c79c9be0bd09c7a35 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 20 Jan 2022 17:23:22 +0100
Subject: [PATCH] Refactor content element component

---
 .../content-block-form/ContentElement.vue     | 68 ++++++++++++++++---
 1 file changed, 57 insertions(+), 11 deletions(-)

diff --git a/client/src/components/content-block-form/ContentElement.vue b/client/src/components/content-block-form/ContentElement.vue
index 0521f6c1..14d22af3 100644
--- a/client/src/components/content-block-form/ContentElement.vue
+++ b/client/src/components/content-block-form/ContentElement.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="content-element">
-    <component
-      :class="['content-element__component', {'content-element__chooser': type(element) === 'content-block-element-chooser-widget'}]"
+    <content-block-element-chooser-widget
+      :class="['content-element__component', 'content-element__chooser']"
       v-bind="element"
-      :is="type(element)"
+      v-if="isChooser"
+
       @change-type="changeType"
     />
     <content-form-section
@@ -51,6 +52,8 @@
   const AssignmentForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/AssignmentForm');
   const TextForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/TextForm');
 
+  const CHOOSER = 'content-block-element-chooser-widget';
+
   export default {
     props: {
       element: {
@@ -71,23 +74,66 @@
       TextForm,
     },
 
+    computed: {
+      isChooser() {
+        return this.component === CHOOSER;
+      },
+      type() {
+        return this.getType(this.element);
+      },
+      component() {
+        return this.type.component;
+      },
+      title() {
+        return this.type.title;
+      }
+    },
+
     methods: {
-      type(element) {
+      getType(element) {
         switch (element.type) {
           case 'link_block':
-            return 'link-form';
+            return {
+              component: 'link-form',
+              title: 'Link',
+              icon: 'link-icon'
+            };
           case 'video_block':
-            return 'video-form';
+            return {
+              component: 'video-form',
+              title: 'Video',
+              icon: 'video-icon'
+            };
           case 'image_url_block':
-            return 'image-form';
+            return {
+              component: 'image-form',
+              title: 'Bild',
+              icon: 'image-icon'
+            };
           case 'text_block':
-            return 'text-form';
+            return {
+              component: 'text-form',
+              title: 'Text',
+              icon: 'text-icon'
+            };
           case 'assignment':
-            return 'assignment-form';
+            return {
+              component: 'assignment-form',
+              title: 'Aufgabe & Ergebnis',
+              icon: 'speech-bubble-icon'
+            };
           case 'document_block':
-            return 'document-form';
+            return {
+              component: 'document-form',
+              title: 'Dokument',
+              icon: 'document-icon'
+            };
         }
-        return 'content-block-element-chooser-widget';
+        return {
+          component: CHOOSER,
+          title: '',
+          icon: ''
+        };
       },
       _updateProperty(value, key) {
         // const content = this.localContentBlock.contents[index];