Refactor content block element chooser to be more dynamic

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

@@ -0,0 +1,76 @@
+<template>
+  <div
+    :class="['chooser-element', subclass]"
+    :data-cy="cy"
+    @click="$emit('select')"
+  >
+    <component
+      class="chooser-element__icon"
+      :is="icon"
+    />
+    <div class="chooser-element__title">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script>
+  import formElementIcons from '@/components/ui/form-element-icons';
+
+  export default {
+    props: {
+      type: {
+        type: String,
+        default: '',
+      },
+      icon: {
+        type: String,
+        default() {
+          return `${this.type}-icon`;
+        },
+      },
+      title: {
+        type: String,
+        default() {
+          return this.type.replace(/^\w/, c => c.toUpperCase());
+        },
+      },
+    },
+
+    components: {
+      ...formElementIcons,
+    },
+
+    data() {
+      return {
+        subclass: `chooser-element--${this.type}`,
+        cy: `choose-${this.type}-widget`,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .chooser-element {
+    cursor: pointer;
+    border: 1px solid $color-silver;
+    border-radius: 4px;
+    height: 105px;
+    width: 105px;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-rows: 1fr 45px;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+
+    &__icon {
+      width: 40px;
+      height: 40px;
+      align-self: end;
+    }
+  }
+
+</style>

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

@@ -28,77 +28,14 @@
       :class="{'content-block-element-chooser-widget--no-assignment': hideAssignment}"
       class="content-block-element-chooser-widget"
     >
-      <div
+      <chooser-element
-        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--subtitle"
+        :title="type.title"
-        data-cy="choose-subtitle-widget"
+        :type="type.type"
-        @click="changeType('subtitle')"
+        :icon="type.icon"
-      >
+        v-for="(type, idx) in filteredChooserTypes"
-        <title-icon class="content-block-element-chooser-widget__link-icon" />
+        :key="idx"
-        <div class="content-block-element-chooser-widget__link-title">
+        @select="changeType(type.block)"
-          Untertitel
+      />
-        </div>
-      </div>
-      <div
-        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--link"
-        data-cy="choose-link-widget"
-        @click="changeType('link_block')"
-      >
-        <link-icon class="content-block-element-chooser-widget__link-icon" />
-        <div class="content-block-element-chooser-widget__link-title">
-          Link
-        </div>
-      </div>
-      <div
-        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--video"
-        data-cy="choose-video-widget"
-        @click="changeType('video_block')"
-      >
-        <video-icon class="content-block-element-chooser-widget__link-icon" />
-        <div class="content-block-element-chooser-widget__link-title">
-          Video
-        </div>
-      </div>
-      <div
-        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--image"
-        data-cy="choose-image-widget"
-        @click="changeType('image_url_block')"
-      >
-        <image-icon class="content-block-element-chooser-widget__link-icon" />
-        <div class="content-block-element-chooser-widget__link-title">
-          Bild
-        </div>
-      </div>
-      <div
-        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--text"
-        data-cy="choose-text-widget"
-        @click="changeType('text_block')"
-      >
-        <text-icon class="content-block-element-chooser-widget__link-icon" />
-        <div class="content-block-element-chooser-widget__link-title">
-          Text
-        </div>
-      </div>
-      <div
-        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--assignment"
-        data-cy="choose-assignment-widget"
-        v-if="!hideAssignment"
-        @click="changeType('assignment')"
-      >
-        <speech-bubble-icon class="content-block-element-chooser-widget__link-icon" />
-        <div class="content-block-element-chooser-widget__link-title">
-          Aufgabe&nbsp;& Ergebnis
-        </div>
-      </div>
-      <div
-        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--document"
-        data-cy="choose-document-widget"
-        @click="changeType('document_block')"
-      >
-        <document-icon class="content-block-element-chooser-widget__link-icon" />
-        <div class="content-block-element-chooser-widget__link-title">
-          Dokument
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -107,8 +44,8 @@
   import Checkbox from '@/components/ui/Checkbox';
 
   import formElementIcons from '@/components/ui/form-element-icons';
-  import TitleIcon from '@/components/icons/TitleIcon';
   import CrossIcon from '@/components/icons/CrossIcon';
+  import ChooserElement from '@/components/content-forms/ChooserElement';
 
   export default {
     props: {
@@ -125,15 +62,63 @@
     },
 
     components: {
+      ChooserElement,
       CrossIcon,
-      TitleIcon,
       Checkbox,
       ...formElementIcons,
     },
 
-    data: () => ({
+    data() {
-      convertToList: false,
+      return {
-    }),
+        convertToList: false,
+        chooserTypes: [
+          {
+            type: 'subtitle',
+            block: 'subtitle',
+            title: 'Untertitel',
+            icon: 'title-icon',
+          },
+          {
+            type: 'link',
+            block: 'link_block',
+            title: 'Link',
+            icon: 'link-icon',
+          },
+          {
+            type: 'video',
+            block: 'video_block',
+          },
+          {
+            type: 'image',
+            block: 'image_url_block',
+            title: 'Bild',
+          },
+          {
+            type: 'text',
+            block: 'text_block',
+          },
+          {
+            type: 'assignment',
+            block: 'assignment',
+            icon: 'speech-bubble-icon',
+            title: 'Aufgabe & Ergebnis',
+          },
+          {
+            type: 'document',
+            block: 'document_block',
+            title: 'Dokument',
+          },
+
+
+        ],
+      };
+    },
+
+    computed: {
+      filteredChooserTypes() {
+        return this.chooserTypes.filter(type => !("show" in type) || type.show ); // display element if `show` is not set or if `show` evaluates to true
+      },
+    },
 
     methods: {
       changeType(type) {
@@ -144,7 +129,7 @@
       },
       remove() {
         this.$emit('remove');
-      }
+      },
     },
   };
 </script>
@@ -222,29 +207,6 @@
       grid-row: 1;
     }
 
-    &__link {
-      cursor: pointer;
-      border: 1px solid $color-silver;
-      border-radius: 4px;
-      height: 105px;
-      width: 105px;
-      box-sizing: border-box;
-      display: grid;
-      grid-template-rows: 1fr 45px;
-      justify-content: center;
-      justify-items: center;
-      align-items: center;
-    }
 
-    &__link-icon {
-      width: 40px;
-      height: 40px;
-      align-self: end;
-    }
-
-    &__link-text {
-      font-size: toRem(13px);
-      align-self: start;
-    }
   }
 </style>