Refactor code

client/src/components/NewContentBlockWizard.vue

@@ -5,7 +5,7 @@
       <component
         class="new-content-block-wizard__element-component"
         :is="type(element)"
-        :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
+        :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-element-chooser-widget'}"
         :element="element" v-bind="element" :index="index"
         v-on:change-type="changeType"
         v-on:link-change-url="changeLinkUrl"
@@ -14,7 +14,7 @@
         v-on:video-change-url="changeVideoUrl">
       </component>
       <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
-        <trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
+        <trash-icon v-if="type(element) !== 'content-block-element-chooser-widget'"
                     class="new-content-block-wizard__trash-icon"></trash-icon>
       </a>
 
@@ -33,7 +33,7 @@
 
 <script>
   import Modal from '@/components/Modal';
-  import ContentBlockChooserWidget from '@/components/content-forms/ContentBlockChooserWidget';
+  import ContentBlockElementChooserWidget from '@/components/content-forms/ContentBlockElementChooserWidget';
   import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
   import AddContentElement from '@/components/AddContentElement';
   import LinkForm from '@/components/content-forms/LinkForm';
@@ -49,7 +49,7 @@
   export default {
     components: {
       Modal,
-      ContentBlockChooserWidget,
+      ContentBlockElementChooserWidget,
       ContentBlockTitleInput,
       AddContentElement,
       LinkForm,
@@ -77,7 +77,7 @@
           case 'document':
             return 'document-form';
         }
-        return 'content-block-chooser-widget'
+        return 'content-block-element-chooser-widget'
       },
       _updateProperty(value, index, key) {
         this.elements.splice(index, 1, {

client/src/components/content-forms/ContentBlockChooserWidget.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="content-block-chooser-widget">
-    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'link')">
-      <link-icon class="content-block-chooser-widget__link-icon"></link-icon>
-      <div class="content-block-chooser-widget__link-title">Link</div>
-    </div>
-    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'video_block')">
-      <video-icon class="content-block-chooser-widget__link-icon"></video-icon>
-      <div class="content-block-chooser-widget__link-title">Video</div>
-    </div>
-    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'image')">
-      <image-icon class="content-block-chooser-widget__link-icon"></image-icon>
-      <div class="content-block-chooser-widget__link-title">Bild</div>
-    </div>
-    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'text_block')">
-      <text-icon class="content-block-chooser-widget__link-icon"></text-icon>
-      <div class="content-block-chooser-widget__link-title">Text</div>
-    </div>
-    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'exercise')">
-      <speech-bubble-icon class="content-block-chooser-widget__link-icon"></speech-bubble-icon>
-      <div class="content-block-chooser-widget__link-title">Aufgabe&nbsp;& Ergebnis</div>
-    </div>
-    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'document')">
-      <document-icon class="content-block-chooser-widget__link-icon"></document-icon>
-      <div class="content-block-chooser-widget__link-title">Dokument</div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import LinkIcon from '@/components/icons/LinkIcon';
-  import VideoIcon from '@/components/icons/VideoIcon';
-  import ImageIcon from '@/components/icons/ImageIcon';
-  import TextIcon from '@/components/icons/TextIcon';
-  import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
-  import DocumentIcon from '@/components/icons/DocumentIcon';
-
-  export default {
-    props: ['element', 'index'],
-
-    components: {
-      LinkIcon,
-      VideoIcon,
-      ImageIcon,
-      TextIcon,
-      SpeechBubbleIcon,
-      DocumentIcon
-    },
-
-    methods: {
-      changeType() {
-        console.log('changeType');
-        this.element.type = 'link';
-      }
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
-
-  .content-block-chooser-widget {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-column-gap: 0px;
-    font-family: $sans-serif-font-family;
-    text-align: center;
-    border: 2px solid $color-grey;
-    padding: 30px 5px;
-    border-radius: 12px;
-    margin-top: 20px;
-    position: relative;
-    margin-bottom: 20px;
-
-    &::before {
-      content: "";
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      border: 2px solid $color-grey;
-      border-bottom: 0;
-      border-right: 0;
-      background-color: white;
-      top: -12px;
-      left: 50%;
-      transform: translateX(-50%) rotate(45deg);
-    }
-
-    &__link {
-      padding: 0 20px;
-      cursor: pointer;
-    }
-
-    &__link-icon {
-      width: 40px;
-      height: auto;
-      margin-bottom: 15px;
-    }
-
-    &__link-text {
-      font-size: toRem(13px);
-    }
-
-  }
-</style>

client/src/components/content-forms/ContentBlockElementChooserWidget.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="content-block-element-chooser-widget">
+    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'link')">
+      <link-icon class="content-block-element-chooser-widget__link-icon"></link-icon>
+      <div class="content-block-element-chooser-widget__link-title">Link</div>
+    </div>
+    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'video_block')">
+      <video-icon class="content-block-element-chooser-widget__link-icon"></video-icon>
+      <div class="content-block-element-chooser-widget__link-title">Video</div>
+    </div>
+    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'image')">
+      <image-icon class="content-block-element-chooser-widget__link-icon"></image-icon>
+      <div class="content-block-element-chooser-widget__link-title">Bild</div>
+    </div>
+    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'text_block')">
+      <text-icon class="content-block-element-chooser-widget__link-icon"></text-icon>
+      <div class="content-block-element-chooser-widget__link-title">Text</div>
+    </div>
+    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'exercise')">
+      <speech-bubble-icon class="content-block-element-chooser-widget__link-icon"></speech-bubble-icon>
+      <div class="content-block-element-chooser-widget__link-title">Aufgabe&nbsp;& Ergebnis</div>
+    </div>
+    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'document')">
+      <document-icon class="content-block-element-chooser-widget__link-icon"></document-icon>
+      <div class="content-block-element-chooser-widget__link-title">Dokument</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LinkIcon from '@/components/icons/LinkIcon';
+  import VideoIcon from '@/components/icons/VideoIcon';
+  import ImageIcon from '@/components/icons/ImageIcon';
+  import TextIcon from '@/components/icons/TextIcon';
+  import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
+  import DocumentIcon from '@/components/icons/DocumentIcon';
+
+  export default {
+    props: ['element', 'index'],
+
+    components: {
+      LinkIcon,
+      VideoIcon,
+      ImageIcon,
+      TextIcon,
+      SpeechBubbleIcon,
+      DocumentIcon
+    },
+
+    methods: {
+      changeType() {
+        console.log('changeType');
+        this.element.type = 'link';
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .content-block-element-chooser-widget {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-column-gap: 0px;
+    font-family: $sans-serif-font-family;
+    text-align: center;
+    border: 2px solid $color-grey;
+    padding: 30px 5px;
+    border-radius: 12px;
+    margin-top: 20px;
+    position: relative;
+    margin-bottom: 20px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border: 2px solid $color-grey;
+      border-bottom: 0;
+      border-right: 0;
+      background-color: white;
+      top: -12px;
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+
+    &__link {
+      padding: 0 20px;
+      cursor: pointer;
+    }
+
+    &__link-icon {
+      width: 40px;
+      height: auto;
+      margin-bottom: 15px;
+    }
+
+    &__link-text {
+      font-size: toRem(13px);
+    }
+
+  }
+</style>

client/src/components/content-forms/VideoForm.vue

@@ -81,8 +81,5 @@
       grid-column: 1 / span 2;
       width: $modal-input-width
     }
-
   }
-
-
 </style>