Update async component definitions

client/src/components/AddContentButton.vue

@@ -1,98 +1,105 @@
 <template>
   <div class="add-content">
-    <a class="add-content__button" @click="addContent">
+    <a
+      class="add-content__button"
+      @click="addContent"
+    >
       <add-pointer class="add-content__icon" />
     </a>
   </div>
 </template>
 
 <script>
-import { CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE } from '@/router/module.names';
+  import {
+    CREATE_CONTENT_BLOCK_AFTER_PAGE,
+    CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
+  } from '@/router/module.names';
+  import {defineAsyncComponent} from 'vue';
 
-const AddPointer = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddPointer');
+  const AddPointer = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer'));
 
-export default {
-  props: {
-    where: {
-      type: Object,
-      validator(prop) {
-        return (
-          Object.prototype.hasOwnProperty.call(prop, 'after') || Object.prototype.hasOwnProperty.call(prop, 'parent')
-        );
+  export default {
+    props: {
+      where: {
+        type: Object,
+        validator(prop) {
+          return Object.prototype.hasOwnProperty.call(prop, 'after' )
+            || Object.prototype.hasOwnProperty.call(prop, 'parent');
+        }
       },
     },
-  },
 
-  components: {
-    AddPointer,
-  },
+    components: {
+      AddPointer
+    },
 
-  computed: {
-    parent() {
-      return this.where.parent;
-    },
-    after() {
-      return this.where.after;
-    },
-    isObjectiveGroup() {
-      return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
-    },
-    slug() {
-      return this.$route.params.slug;
-    },
-  },
-
-  methods: {
-    addContent() {
-      if (this.isObjectiveGroup) {
-        this.$modal.open('new-objective-wizard', { parent: this.parent.id });
-      } else {
-        let route;
-        if (this.after && this.after.id) {
-          route = {
-            name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
-            params: {
-              after: this.after.id,
-              slug: this.slug,
-            },
-          };
-        } else {
-          route = {
-            name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
-            params: {
-              parent: this.parent.id,
-            },
-          };
-        }
-        this.$router.push(route);
+    computed: {
+      parent() {
+        return this.where.parent;
+      },
+      after() {
+        return this.where.after;
+      },
+      isObjectiveGroup() {
+        return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
+      },
+      slug() {
+        return this.$route.params.slug;
       }
     },
-  },
-};
+
+
+    methods: {
+      addContent() {
+        if (this.isObjectiveGroup) {
+          this.$modal.open('new-objective-wizard', {parent: this.parent.id});
+        } else {
+          let route;
+          if (this.after && this.after.id) {
+             route = {
+              name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
+              params: {
+                after: this.after.id,
+                slug: this.slug
+              }
+            };
+          } else {
+            route = {
+              name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
+              params: {
+                parent: this.parent.id
+              }
+            };
+          }
+          this.$router.push(route);
+        }
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.add-content {
-  display: none;
-  position: relative;
-  @include desktop {
-    display: flex;
+  .add-content {
+    display: none;
+    position: relative;
+    @include desktop {
+      display: flex;
+    }
+    z-index: 1;
+
+    justify-content: flex-end;
+
+    &__button {
+      margin-right: -85px;
+      cursor: pointer;
+      display: inline-grid;
+    }
+
+    &__icon {
+      width: 40px;
+      fill: $color-silver-dark;
+    }
   }
-  z-index: 1;
-
-  justify-content: flex-end;
-
-  &__button {
-    margin-right: -85px;
-    cursor: pointer;
-    display: inline-grid;
-  }
-
-  &__icon {
-    width: 40px;
-    fill: $color-silver-dark;
-  }
-}
 </style>

client/src/components/AddContentElement.vue

@@ -1,38 +1,42 @@
 <template>
-  <div class="add-content-element" @click="$emit('add-element', index)">
+  <div
+    class="add-content-element"
+    @click="$emit('add-element', index)"
+  >
     <add-icon class="add-content-element__icon" />
   </div>
 </template>
 
 <script>
-const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon');
+  import {defineAsyncComponent} from 'vue';
+  const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon'));
 
-export default {
-  props: ['index'],
+  export default {
+    props: ['index'],
 
-  components: {
-    AddIcon,
-  },
-};
+    components: {
+      AddIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "@/styles/_variables.scss";
 
-.add-content-element {
-  display: flex;
-  justify-content: center;
-  border-bottom: 2px solid $color-silver-dark;
-  margin-bottom: 21px + 25px;
-  cursor: pointer;
+  .add-content-element {
+    display: flex;
+    justify-content: center;
+    border-bottom: 2px solid $color-silver-dark;
+    margin-bottom: 21px + 25px;
+    cursor: pointer;
 
-  &__icon {
-    width: 40px;
-    height: 40px;
-    fill: $color-silver-dark;
-    margin-bottom: -21px;
-    background-color: $color-white;
-    border-radius: 50px;
+    &__icon {
+      width: 40px;
+      height: 40px;
+      fill: $color-silver-dark;
+      margin-bottom: -21px;
+      background-color: $color-white;
+      border-radius: 50px;
+    }
   }
-}
 </style>

client/src/components/AddWidget.vue

@@ -11,71 +11,69 @@
 </template>
 
 <script>
-const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon.vue');
+  import {defineAsyncComponent} from 'vue';
+  const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon.vue'));
 
-export default {
-  props: {
-    route: {
-      type: String,
-      default: null,
+  export default {
+    props: {
+      route: {
+        type: String,
+        default: null
+      },
+      reverse: { // use reverse colors
+        type: Boolean,
+        default: false
+      },
+      click: {
+        type: Function,
+        default: null
+      }
     },
-    reverse: {
-      // use reverse colors
-      type: Boolean,
-      default: false,
-    },
-    click: {
-      type: Function,
-      default: null,
-    },
-  },
 
-  components: {
-    AddIcon,
-  },
+    components: {
+      AddIcon
+    },
 
-  computed: {
-    component() {
-      // only use the router link if the route prop is provided, otherwise render a normal anchor tag
-      return this.route ? 'router-link' : 'a';
+    computed: {
+      component() {
+        // only use the router link if the route prop is provided, otherwise render a normal anchor tag
+        return this.route ? 'router-link' : 'a';
+      },
+      properties() {
+        return this.route ? {
+          to: this.route,
+          tag: 'div'
+        } : {};
+      }
     },
-    properties() {
-      return this.route
-        ? {
-            to: this.route,
-            tag: 'div',
-          }
-        : {};
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.add-widget {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  @include widget-shadow;
-  cursor: pointer;
+  .add-widget {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    @include widget-shadow;
+    cursor: pointer;
 
-  @include desktop {
-    display: flex;
+    @include desktop {
+      display: flex;
+    }
+
+    &__add {
+      width: 80px;
+      fill: $color-silver-dark;
+    }
+
+    &--reverse {
+      @include widget-shadow-reverse;
+    }
+
+    &--reverse &__add {
+      fill: white;
+    }
   }
-
-  &__add {
-    width: 80px;
-    fill: $color-silver-dark;
-  }
-
-  &--reverse {
-    @include widget-shadow-reverse;
-  }
-
-  &--reverse &__add {
-    fill: white;
-  }
-}
 </style>

client/src/components/BackLink.vue

@@ -12,8 +12,9 @@
   import { MODULE_PAGE } from '@/router/module.names';
   import { ROOMS_PAGE } from '@/router/room.names';
   import { PROJECTS_PAGE } from '@/router/portfolio.names';
+  import {defineAsyncComponent} from 'vue';
 
-  const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
+  const ChevronLeft = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft'));
 
   export default {
     props: {

client/src/components/ColorChooser.vue

@@ -1,86 +1,93 @@
 <template>
   <div class="color-chooser">
     <div
-      :class="{ 'color-chooser__color-wrapper--selected': selectedColor === color.name }"
+      :class="{'color-chooser__color-wrapper--selected': selectedColor === color.name}"
       class="color-chooser__color-wrapper"
       data-cy="color-select"
       v-for="(color, index) in colors"
       :key="index"
       @click="$emit('input', color.name)"
     >
-      <div :class="'color-chooser__color--' + color.name" class="color-chooser__color">
-        <tick class="color-chooser__selected-icon" v-if="selectedColor === color.name" />
+      <div
+        :class="'color-chooser__color--' + color.name"
+        class="color-chooser__color"
+      >
+        <tick
+          class="color-chooser__selected-icon"
+          v-if="selectedColor === color.name"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-const Tick = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick');
+  import {defineAsyncComponent} from 'vue';
+  const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Tick'));
 
-export default {
-  props: ['selectedColor'],
+  export default {
+    props: ['selectedColor'],
 
-  components: {
-    Tick,
-  },
+    components: {
+      Tick
+    },
 
-  data() {
-    return {
-      colors: [
-        {
-          name: 'yellow',
-        },
-        {
-          name: 'blue',
-        },
-        {
-          name: 'red',
-        },
-        {
-          name: 'green',
-        },
-      ],
-    };
-  },
-};
+    data() {
+      return {
+        colors: [
+          {
+            name: 'yellow'
+          },
+          {
+            name: 'blue'
+          },
+          {
+            name: 'red'
+          },
+          {
+            name: 'green'
+          }
+        ]
+      };
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.color-chooser {
-  display: flex;
-
-  &__color-wrapper {
-    margin-right: 10px;
-    border-radius: 50px;
-    padding: 10px;
-
-    &--selected {
-      border: 1px solid $color-charcoal-dark;
-    }
-  }
-
-  &__selected-icon {
-    width: 17px;
-    fill: $color-charcoal-dark;
-  }
-
-  &__color {
-    width: 46px;
-    height: 46px;
-    border-radius: 23px;
+  .color-chooser {
     display: flex;
-    justify-content: center;
-    @supports (display: grid) {
-      display: grid;
-    }
-    justify-items: center;
-    align-items: center;
 
-    @include skillbox-colors;
+    &__color-wrapper {
+      margin-right: 10px;
+      border-radius: 50px;
+      padding: 10px;
+
+      &--selected {
+        border: 1px solid $color-charcoal-dark;
+      }
+    }
+
+    &__selected-icon {
+      width: 17px;
+      fill: $color-charcoal-dark;
+    }
+
+    &__color {
+      width: 46px;
+      height: 46px;
+      border-radius: 23px;
+      display: flex;
+      justify-content: center;
+      @supports (display: grid) {
+        display: grid
+      }
+      justify-items: center;
+      align-items: center;
+
+      @include skillbox-colors;
+    }
   }
-}
 </style>

client/src/components/ContentBlock.vue

@@ -1,20 +1,38 @@
 <template>
   <div
-    :class="{ 'hideable-element--greyed-out': hidden }"
+    :class="{'hideable-element--greyed-out': hidden}"
     class="content-block__container hideable-element content-list__parent"
   >
-    <div :class="specialClass" :style="instrumentStyle" class="content-block" data-cy="content-block">
-      <div class="block-actions" v-if="canEditModule && !isInstrumentBlock">
-        <user-widget v-bind="me" class="block-actions__user-widget content-block__user-widget" v-if="isMine" />
+    <div
+      :class="specialClass"
+      :style="instrumentStyle"
+      class="content-block"
+      data-cy="content-block"
+    >
+      <div
+        class="block-actions"
+        v-if="canEditModule && !isInstrumentBlock"
+      >
+        <user-widget
+          v-bind="me"
+          class="block-actions__user-widget content-block__user-widget"
+          v-if="isMine"
+        />
         <more-options-widget>
-          <li class="popover-links__link" v-if="!isInstrumentBlock">
+          <li
+            class="popover-links__link"
+            v-if="!isInstrumentBlock"
+          >
             <popover-link
               data-cy="duplicate-content-block-link"
               text="Duplizieren"
               @link-action="duplicateContentBlock(contentBlock)"
             />
           </li>
-          <li class="popover-links__link" v-if="isMine">
+          <li
+            class="popover-links__link"
+            v-if="isMine"
+          >
             <popover-link
               data-cy="delete-content-block-link"
               text="Löschen"
@@ -22,13 +40,22 @@
             />
           </li>
 
-          <li class="popover-links__link" v-if="isMine">
-            <popover-link text="Bearbeiten" @link-action="editContentBlock(contentBlock)" />
+          <li
+            class="popover-links__link"
+            v-if="isMine"
+          >
+            <popover-link
+              text="Bearbeiten"
+              @link-action="editContentBlock(contentBlock)"
+            />
           </li>
         </more-options-widget>
       </div>
       <div class="content-block__visibility">
-        <visibility-action :block="contentBlock" v-if="canEditModule" />
+        <visibility-action
+          :block="contentBlock"
+          v-if="canEditModule"
+        />
       </div>
 
       <h3
@@ -39,7 +66,10 @@
       >
         {{ instrumentLabel }}
       </h3>
-      <h4 class="content-block__title" v-if="!contentBlock.indent">
+      <h4
+        class="content-block__title"
+        v-if="!contentBlock.indent"
+      >
         {{ contentBlock.title }}
       </h4>
 
@@ -55,107 +85,110 @@
       />
     </div>
 
-    <add-content-button :where="{ after: contentBlock }" v-if="canEditModule" />
+    <add-content-button
+      :where="{after: contentBlock}"
+      v-if="canEditModule"
+    />
   </div>
 </template>
 
 <script>
-import AddContentButton from '@/components/AddContentButton';
-import MoreOptionsWidget from '@/components/MoreOptionsWidget';
-import UserWidget from '@/components/UserWidget';
-import VisibilityAction from '@/components/visibility/VisibilityAction';
+  import AddContentButton from '@/components/AddContentButton';
+  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+  import UserWidget from '@/components/UserWidget';
+  import VisibilityAction from '@/components/visibility/VisibilityAction';
 
-import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
-import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
-import DUPLICATE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/duplicateContentBlock.gql';
+  import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
+  import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
+  import DUPLICATE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/duplicateContentBlock.gql';
 
-import me from '@/mixins/me';
+  import me from '@/mixins/me';
 
-import { hidden } from '@/helpers/visibility';
-import { CONTENT_TYPE } from '@/consts/types';
-import PopoverLink from '@/components/ui/PopoverLink';
-import { insertAtIndex, removeAtIndex } from '@/graphql/immutable-operations';
-import { EDIT_CONTENT_BLOCK_PAGE } from '@/router/module.names';
-import { instrumentCategory } from '@/helpers/instrumentType';
+  import {hidden} from '@/helpers/visibility';
+  import {CONTENT_TYPE} from '@/consts/types';
+  import PopoverLink from '@/components/ui/PopoverLink';
+  import {insertAtIndex, removeAtIndex} from '@/graphql/immutable-operations';
+  import {EDIT_CONTENT_BLOCK_PAGE} from '@/router/module.names';
+  import {defineAsyncComponent} from 'vue';
+  import {instrumentCategory} from '@/helpers/instrumentType';
 
-const ContentComponent = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent');
+  const ContentComponent = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent'));
 
-export default {
-  name: 'ContentBlock',
-  props: {
-    contentBlock: {
-      type: Object,
-      default: () => ({}),
-    },
-    parent: {
-      type: Object,
-      default: () => ({}),
-    },
-    editMode: {
-      type: Boolean,
-      default: true,
-    },
-  },
 
-  mixins: [me],
+  export default {
+    name: 'ContentBlock',
+    props: {
+      contentBlock: {
+        type: Object,
+        default: () => ({}),
+      },
+      parent: {
+        type: Object,
+        default: () => ({}),
+      },
+      editMode: {
+        type: Boolean,
+        default: true,
+      },
+    },
 
-  components: {
-    PopoverLink,
-    ContentComponent,
-    AddContentButton,
-    VisibilityAction,
-    MoreOptionsWidget,
-    UserWidget,
-  },
+    mixins: [me],
 
-  computed: {
-    canEditModule() {
-      return !this.contentBlock.indent && this.editMode;
+    components: {
+      PopoverLink,
+      ContentComponent,
+      AddContentButton,
+      VisibilityAction,
+      MoreOptionsWidget,
+      UserWidget,
     },
-    specialClass() {
-      return `content-block--${this.contentBlock.type.toLowerCase()}`;
-    },
-    isInstrumentBlock() {
-      return !!this.contentBlock.instrumentCategory;
-    },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    instrumentStyle() {
-      if (this.isInstrumentBlock) {
-        return {
-          backgroundColor: this.contentBlock.instrumentCategory.background,
-        };
-      }
-      return {};
-    },
-    instrumentLabel() {
-      const contentType = this.contentBlock.type.toLowerCase();
-      if (contentType.startsWith('base')) {
-        // all legacy instruments start with `base`
-        return instrumentCategory(contentType);
-      }
-      if (this.isInstrumentBlock) {
-        return instrumentCategory(this.contentBlock.instrumentCategory.name);
-      }
-      return '';
-    },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    instrumentLabelStyle() {
-      if (this.isInstrumentBlock) {
-        return {
-          color: this.contentBlock.instrumentCategory.foreground,
-        };
-      }
-      return {};
-    },
-    canEditContentBlock() {
-      return this.isMine && !this.contentBlock.indent;
-    },
-    isMine() {
-      return this.contentBlock.mine;
-    },
-    contentBlocksWithContentLists() {
-      /*
+
+    computed: {
+      canEditModule() {
+        return !this.contentBlock.indent && this.editMode;
+      },
+      specialClass() {
+        return `content-block--${this.contentBlock.type.toLowerCase()}`;
+      },
+      isInstrumentBlock() {
+        return !!this.contentBlock.instrumentCategory;
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      instrumentStyle() {
+        if (this.isInstrumentBlock) {
+          return {
+            backgroundColor: this.contentBlock.instrumentCategory.background
+          };
+        }
+        return {};
+      },
+      instrumentLabel() {
+        const contentType = this.contentBlock.type.toLowerCase();
+        if (contentType.startsWith('base')) { // all legacy instruments start with `base`
+          return instrumentCategory(contentType);
+        }
+        if (this.isInstrumentBlock) {
+          return instrumentCategory(this.contentBlock.instrumentCategory.name);
+        }
+        return '';
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      instrumentLabelStyle() {
+        if (this.isInstrumentBlock) {
+          return {
+            color: this.contentBlock.instrumentCategory.foreground
+          };
+        }
+        return {};
+      },
+      canEditContentBlock() {
+        return this.isMine && !this.contentBlock.indent;
+      },
+      isMine() {
+        return this.contentBlock.mine;
+      },
+      contentBlocksWithContentLists() {
+        /*
         collects all content_list_items in content_lists:
         {
           text_block,
@@ -169,238 +202,221 @@ export default {
           text_block
         }
         */
-      let contentList = [];
-      let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
-        // collect content_list_items
-        if (content.type === 'content_list_item') {
-          contentList = [...contentList, content];
-          if (index === this.contentBlock.contents.length - 1) {
-            // content is last element of contents array
-            let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
-            return updatedContent;
-          }
-          return newContents;
-        } else {
-          // handle all other items and reset current content_list if necessary
-          if (contentList.length !== 0) {
-            newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
-            contentList = [];
+        let contentList = [];
+        let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
+          // collect content_list_items
+          if (content.type === 'content_list_item') {
+            contentList = [...contentList, content];
+            if (index === this.contentBlock.contents.length - 1) { // content is last element of contents array
+              let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
+              return updatedContent;
+            }
             return newContents;
           } else {
-            return [...newContents, content];
+            // handle all other items and reset current content_list if necessary
+            if (contentList.length !== 0) {
+              newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
+              contentList = [];
+              return newContents;
+            } else {
+              return [...newContents, content];
+            }
           }
-        }
-      }, []);
-      return Object.assign({}, this.contentBlock, {
-        contents: newContent,
-      });
+        }, []);
+        return Object.assign({}, this.contentBlock, {
+          contents: newContent,
+        });
+      },
+      hidden() {
+        return hidden({
+          block: this.contentBlock,
+          schoolClass: this.schoolClass,
+          type: CONTENT_TYPE,
+        });
+      },
+      root() {
+        // we need the root content block id, not the generated content block if inside a content list block
+        return this.contentBlock.root ? this.contentBlock.root : this.contentBlock.id;
+      },
     },
-    hidden() {
-      return hidden({
-        block: this.contentBlock,
-        schoolClass: this.schoolClass,
-        type: CONTENT_TYPE,
-      });
-    },
-    root() {
-      // we need the root content block id, not the generated content block if inside a content list block
-      return this.contentBlock.root ? this.contentBlock.root : this.contentBlock.id;
-    },
-  },
-  methods: {
-    duplicateContentBlock({ id }) {
-      const parent = this.parent;
-      this.$apollo.mutate({
-        mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
-        variables: {
-          input: {
-            id,
-          },
-        },
-        update(
-          store,
-          {
-            data: {
-              duplicateContentBlock: { contentBlock },
+    methods: {
+      duplicateContentBlock({id}) {
+        const parent = this.parent;
+        this.$apollo.mutate({
+          mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
+          variables: {
+            input: {
+              id,
             },
-          }
-        ) {
-          if (contentBlock) {
-            const query = CHAPTER_QUERY;
-            const variables = {
-              id: parent.id,
-            };
-            const { chapter } = store.readQuery({ query, variables });
-            const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
-            const contentBlocks = insertAtIndex(chapter.contentBlocks, index, contentBlock);
-            const data = {
-              chapter: {
-                ...chapter,
-                contentBlocks,
-              },
-            };
-            store.writeQuery({ query, variables, data });
-          }
-        },
-      });
-    },
-    editContentBlock(contentBlock) {
-      const route = {
-        name: EDIT_CONTENT_BLOCK_PAGE,
-        params: {
-          id: contentBlock.id,
-        },
-      };
-      this.$router.push(route);
-    },
-    deleteContentBlock(contentBlock) {
-      this.$modal
-        .open('confirm')
-        .then(() => {
-          this.doDeleteContentBlock(contentBlock);
-        })
-        .catch();
-    },
-    doDeleteContentBlock(contentBlock) {
-      const parent = this.parent;
-      const id = contentBlock.id;
-      this.$apollo.mutate({
-        mutation: DELETE_CONTENT_BLOCK_MUTATION,
-        variables: {
-          input: {
-            id,
           },
-        },
-        update(
-          store,
-          {
-            data: {
-              deleteContentBlock: { success },
+          update(store, {data: {duplicateContentBlock: {contentBlock}}}) {
+            if (contentBlock) {
+              const query = CHAPTER_QUERY;
+              const variables = {
+                id: parent.id,
+              };
+              const {chapter} = store.readQuery({query, variables});
+              const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
+              const contentBlocks = insertAtIndex(chapter.contentBlocks, index, contentBlock);
+              const data = {
+                chapter: {
+                  ...chapter,
+                  contentBlocks,
+                },
+              };
+              store.writeQuery({query, variables, data});
+            }
+          },
+        });
+
+      },
+      editContentBlock(contentBlock) {
+        const route = {
+          name: EDIT_CONTENT_BLOCK_PAGE,
+          params: {
+            id: contentBlock.id,
+          },
+        };
+        this.$router.push(route);
+      },
+      deleteContentBlock(contentBlock) {
+        this.$modal.open('confirm').then(() => {
+            this.doDeleteContentBlock(contentBlock);
+          })
+          .catch();
+      },
+      doDeleteContentBlock(contentBlock) {
+        const parent = this.parent;
+        const id = contentBlock.id;
+        this.$apollo.mutate({
+          mutation: DELETE_CONTENT_BLOCK_MUTATION,
+          variables: {
+            input: {
+              id,
             },
-          }
-        ) {
-          if (success) {
-            const query = CHAPTER_QUERY;
-            const variables = {
-              id: parent.id,
-            };
-            const { chapter } = store.readQuery({ query, variables });
-            const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
-            const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
-            const data = {
-              chapter: {
-                ...chapter,
-                contentBlocks,
-              },
-            };
-            store.writeQuery({ query, variables, data });
-          }
-        },
-      });
-    },
-    createContentListOrBlocks(contentList) {
-      return [
-        {
+          },
+          update(store, {data: {deleteContentBlock: {success}}}) {
+            if (success) {
+              const query = CHAPTER_QUERY;
+              const variables = {
+                id: parent.id,
+              };
+              const {chapter} = store.readQuery({query, variables});
+              const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
+              const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
+              const data = {
+                chapter: {
+                  ...chapter,
+                  contentBlocks,
+                },
+              };
+              store.writeQuery({query, variables, data});
+            }
+          },
+        });
+      },
+      createContentListOrBlocks(contentList) {
+        return [{
           type: 'content_list',
           contents: contentList,
           id: contentList[0].id,
-        },
-      ];
+        }];
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.content-block {
-  margin-bottom: $section-spacing;
-  position: relative;
-
-  &__container {
+  .content-block {
+    margin-bottom: $section-spacing;
     position: relative;
-  }
 
-  &__title {
-    line-height: 1.5;
-    margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
-  }
-
-  &__instrument-label {
-    margin-bottom: $medium-spacing;
-    @include regular-text();
-  }
-
-  &__action-button {
-    cursor: pointer;
-  }
-
-  &__user-widget {
-    margin-right: 0;
-  }
-
-  &--base_communication {
-    @include content-box($color-accent-1-list);
-
-    .content-block__instrument-label {
-      color: $color-accent-1-dark;
+    &__container {
+      position: relative;
     }
-  }
 
-  &--task {
-    @include light-border(bottom);
+    &__title {
+      line-height: 1.5;
+      margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
+    }
 
-    .content-block__title {
-      color: $color-brand;
-      margin-top: $default-padding;
-      margin-bottom: $large-spacing;
-      @include light-border(bottom);
+    &__instrument-label {
+      margin-bottom: $medium-spacing;
+      @include regular-text();
+    }
 
-      @include desktop {
-        margin-top: 0;
+    &__action-button {
+      cursor: pointer;
+    }
+
+    &__user-widget {
+      margin-right: 0;
+    }
+
+    &--base_communication {
+      @include content-box($color-accent-1-list);
+
+      .content-block__instrument-label {
+        color: $color-accent-1-dark;
       }
     }
-  }
 
-  &--base_society {
-    @include content-box($color-accent-2-list);
+    &--task {
+      @include light-border(bottom);
 
-    .content-block__instrument-label {
-      color: $color-accent-2-dark;
-    }
-  }
+      .content-block__title {
+        color: $color-brand;
+        margin-top: $default-padding;
+        margin-bottom: $large-spacing;
+        @include light-border(bottom);
 
-  &--base_interdisciplinary {
-    @include content-box($color-accent-4-list);
-
-    .content-block__instrument-label {
-      color: $color-accent-4-dark;
-    }
-  }
-
-  &--instrument {
-    @include content-box-base;
-  }
-
-  :deep(p) {
-    line-height: 1.5;
-    margin-bottom: 1em;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  :deep(.text-block) {
-    ul {
-      @include list-parent;
+        @include desktop {
+          margin-top: 0;
+        }
+      }
     }
 
-    li {
-      @include list-child;
+    &--base_society {
+      @include content-box($color-accent-2-list);
+
+      .content-block__instrument-label {
+        color: $color-accent-2-dark;
+      }
+    }
+
+    &--base_interdisciplinary {
+      @include content-box($color-accent-4-list);
+
+      .content-block__instrument-label {
+        color: $color-accent-4-dark;
+      }
+    }
+
+    &--instrument {
+      @include content-box-base;
+    }
+
+    /deep/ p {
       line-height: 1.5;
+      margin-bottom: 1em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
+
+    /deep/ .text-block {
+      ul {
+        @include list-parent;
+      }
+
+      li {
+        @include list-child;
+        line-height: 1.5;
+      }
+    }
+
   }
-}
 </style>

client/src/components/FullscreenInfographic.vue

@@ -1,35 +1,37 @@
 <template>
   <modal :fullscreen="true">
-    <component :value="value" :is="type" />
+    <component
+      :value="value"
+      :is="type"
+    />
   </modal>
 </template>
 
 <script>
-import Modal from '@/components/Modal';
-const InfogramBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock');
-const GeniallyBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock');
+  import Modal from '@/components/Modal';
+  import {defineAsyncComponent} from 'vue';
+  const InfogramBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock'));
+  const GeniallyBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock'));
 
-export default {
-  components: {
-    Modal,
-    InfogramBlock,
-    GeniallyBlock,
-  },
+  export default {
+    components: {
+      Modal,
+      InfogramBlock,
+      GeniallyBlock
+    },
 
-  computed: {
-    id() {
-      return this.$store.state.infographic.id;
-    },
-    type() {
-      return this.$store.state.infographic.type;
-    },
-    value() {
-      return {
-        id: this.id,
-      };
-    },
-  },
-};
+    computed: {
+      id() {
+        return this.$store.state.infographic.id;
+      },
+      type() {
+        return this.$store.state.infographic.type;
+      },
+      value() {
+        return {
+          id: this.id
+        };
+      }
+    }
+  };
 </script>

client/src/components/HeaderBar.vue

@@ -1,4 +1,10 @@
-    <a class="header-bar__sidebar-link" data-cy="open-sidebar-link" @click.stop="openSidebar('navigation')">
+<template>
+  <header class="header-bar">
+    <a
+      class="header-bar__sidebar-link"
+      data-cy="open-sidebar-link"
+      @click.stop="openSidebar('navigation')"
+    >
       <hamburger class="header-bar__sidebar-icon" />
     </a>
     <content-navigation class="header-bar__content-navigation" />
@@ -22,112 +28,113 @@
 </template>
 
 <script>
-import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
-import UserWidget from '@/components/UserWidget.vue';
-import CurrentClass from '@/components/school-class/CurrentClass';
+  import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
+  import UserWidget from '@/components/UserWidget.vue';
+  import CurrentClass from '@/components/school-class/CurrentClass';
 
-import openSidebar from '@/mixins/open-sidebar';
-import me from '@/mixins/me';
+  import openSidebar from '@/mixins/open-sidebar';
+  import me from '@/mixins/me';
+  import {defineAsyncComponent} from 'vue';
 
-const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
+  const Hamburger = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger'));
 
-export default {
-  mixins: [openSidebar, me],
+  export default {
+    mixins: [openSidebar, me],
 
-  components: {
-    ContentNavigation,
-    UserWidget,
-    CurrentClass,
-    Hamburger,
-  },
-};
+    components: {
+      ContentNavigation,
+      UserWidget,
+      CurrentClass,
+      Hamburger,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.header-bar {
-  display: flex;
-  flex-direction: row;
-  @supports (display: grid) {
-    display: grid;
-  }
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  grid-auto-rows: 50px;
-  width: 100%;
-  max-width: 100vw;
-
-  grid-template-columns: 1fr 1fr 1fr;
-
-  @include desktop {
-    grid-template-columns: 50px 1fr auto;
-    grid-template-rows: 50px;
-    grid-auto-rows: auto;
-  }
-
-  /*
-     * For IE10+
-     */
-  -ms-grid-columns: 1fr 1fr 1fr;
-  -ms-grid-rows: 50px 50px;
-
-  /*
-    * For IE10+
-    */
-  & > :nth-child(1) {
-    -ms-grid-column: 1;
-    -ms-grid-row-align: center;
-  }
-
-  &__content-navigation {
-    grid-column: 2;
+  .header-bar {
+    display: flex;
+    flex-direction: row;
+    @supports (display: grid) {
+      display: grid;
+    }
+    align-items: center;
     justify-content: space-between;
-  }
+    background-color: $color-white;
+    grid-auto-rows: 50px;
+    width: 100%;
+    max-width: 100vw;
 
-  &__sidebar-link {
-    padding: $small-spacing;
-    cursor: pointer;
-  }
-
-  &__sidebar-icon {
-    width: 30px;
-    height: 30px;
-  }
-
-  /*
-    * For IE10+
-    */
-  & > :nth-child(3) {
-    -ms-grid-column: 3;
-    -ms-grid-row-align: center;
-    -ms-grid-column-align: end;
-
-    justify-self: end;
-  }
-
-  & > :nth-child(4) {
-    -ms-grid-row: 2;
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 3;
-  }
-}
-
-.user-header {
-  display: flex;
-
-  &__current-class {
-    margin-right: $large-spacing;
-  }
-
-  &__sidebar-link {
-    cursor: pointer;
-    display: none;
+    grid-template-columns: 1fr 1fr 1fr;
 
     @include desktop {
-      display: flex;
+      grid-template-columns: 50px 1fr auto;
+      grid-template-rows: 50px;
+      grid-auto-rows: auto;
+    }
+
+    /*
+     * For IE10+
+     */
+    -ms-grid-columns: 1fr 1fr 1fr;
+    -ms-grid-rows: 50px 50px;
+
+    /*
+    * For IE10+
+    */
+    & > :nth-child(1) {
+      -ms-grid-column: 1;
+      -ms-grid-row-align: center;
+    }
+
+    &__content-navigation {
+      grid-column: 2;
+      justify-content: space-between;
+    }
+
+    &__sidebar-link {
+      padding: $small-spacing;
+      cursor: pointer;
+    }
+
+    &__sidebar-icon {
+      width: 30px;
+      height: 30px;
+    }
+
+    /*
+    * For IE10+
+    */
+    & > :nth-child(3) {
+      -ms-grid-column: 3;
+      -ms-grid-row-align: center;
+      -ms-grid-column-align: end;
+
+      justify-self: end;
+    }
+
+    & > :nth-child(4) {
+      -ms-grid-row: 2;
+      -ms-grid-column: 1;
+      -ms-grid-column-span: 3;
+    }
+  }
+
+  .user-header {
+    display: flex;
+
+    &__current-class {
+      margin-right: $large-spacing;
+    }
+
+    &__sidebar-link {
+      cursor: pointer;
+      display: none;
+
+      @include desktop {
+        display: flex;
+      }
     }
   }
-}
 </style>

client/src/components/HelpfulTooltip.vue

@@ -10,65 +10,67 @@
 </template>
 
 <script>
-const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
+  import {defineAsyncComponent} from 'vue';
+  const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
 
-export default {
-  props: ['text'],
+  export default {
+    props: ['text'],
 
-  components: {
-    InfoIcon,
-  },
-};
+    components: {
+      InfoIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.helpful-tooltip {
-  position: relative;
+  .helpful-tooltip {
+    position: relative;
 
-  &__icon {
-    width: 20px;
-    height: 20px;
-    fill: $color-silver-dark;
-  }
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-silver-dark;
+    }
 
-  &__tooltip {
-    visibility: hidden;
-    position: absolute;
-    left: 30px;
-    top: 0px;
-    width: 400px;
-  }
-
-  &__text {
-    display: inline-table;
-    width: auto;
-
-    background-color: $color-white;
-    border: 1px solid $color-silver-dark;
-    border-radius: 5px;
-    padding: $small-spacing;
-    @include small-text;
-
-    &::before {
-      content: '';
+    &__tooltip {
+      visibility: hidden;
       position: absolute;
-      left: 0;
-      top: 18px;
-      margin-left: -1px;
-      border-left: 1px solid $color-silver-dark;
-      border-top: 1px solid $color-silver-dark;
+      left: 30px;
+      top: 0px;
+      width: 400px;
+    }
+
+    &__text {
+      display: inline-table;
+      width: auto;
+
       background-color: $color-white;
-      width: 10px;
-      height: 10px;
-      transform: rotate(-45deg) translateY(-50%);
+      border: 1px solid $color-silver-dark;
+      border-radius: 5px;
+      padding: $small-spacing;
+      @include small-text;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 18px;
+        margin-left: -1px;
+        border-left: 1px solid $color-silver-dark;
+        border-top: 1px solid $color-silver-dark;
+        background-color: $color-white;
+        width: 10px;
+        height: 10px;
+        transform: rotate(-45deg) translateY(-50%);
+      }
+
+    }
+
+    &:hover &__tooltip {
+      visibility: visible;
     }
   }
-
-  &:hover &__tooltip {
-    visibility: visible;
-  }
-}
 </style>

client/src/components/LoadingButton.vue

@@ -1,51 +1,58 @@
 <template>
-  <button :disabled="loading || disabled" class="loading-button button button--primary button--big">
+  <button
+    :disabled="loading || disabled"
+    class="loading-button button button--primary button--big"
+  >
     <template v-if="!loading">
       {{ label }}
     </template>
-    <loading-icon class="loading-button__icon" v-else />
+    <loading-icon
+      class="loading-button__icon"
+      v-else
+    />
   </button>
 </template>
 
 <script>
-const LoadingIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon');
+  import {defineAsyncComponent} from 'vue';
+  const LoadingIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon'));
 
-export default {
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      label: {
+        type: String,
+        default: ''
+      }
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-  components: {
-    LoadingIcon,
-  },
-};
+    components: {
+      LoadingIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.loading-button {
-  height: 52px;
-  min-width: 100px;
-  display: inline-flex;
-  justify-content: center;
+  .loading-button {
+    height: 52px;
+    min-width: 100px;
+    display: inline-flex;
+    justify-content: center;
 
-  &__icon {
-    width: 14px;
-    height: 14px;
-    margin: 0 auto;
-    @include spin;
-    fill: $color-brand;
+    &__icon {
+      width: 14px;
+      height: 14px;
+      margin: 0 auto;
+      @include spin;
+      fill: $color-brand;
+    }
   }
-}
 </style>

client/src/components/MobileHeader.vue

@@ -4,59 +4,66 @@
       <hamburger class="mobile-header__hamburger" />
     </a>
 
-    <router-link to="/" data-cy="mobile-home-link">
+    <router-link
+      to="/"
+      data-cy="mobile-home-link"
+    >
       <logo />
     </router-link>
 
-    <user-widget v-bind="me" @click.stop="openSidebar('profile')" />
+    <user-widget
+      v-bind="me"
+      @click.stop="openSidebar('profile')"
+    />
   </div>
 </template>
 
 <script>
-import UserWidget from '@/components/UserWidget';
+  import UserWidget from '@/components/UserWidget';
 
-import me from '@/mixins/me';
-import openSidebar from '@/mixins/open-sidebar';
+  import me from '@/mixins/me';
+  import openSidebar from '@/mixins/open-sidebar';
+  import {defineAsyncComponent} from 'vue';
 
-const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
-const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
+  const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
+  const Hamburger = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger'));
 
-export default {
-  mixins: [me, openSidebar],
+  export default {
+    mixins: [me, openSidebar],
 
-  components: {
-    Logo,
-    Hamburger,
-    UserWidget,
-  },
-
-  methods: {
-    showMobileNavigation() {
-      this.$store.dispatch('showMobileNavigation', true);
+    components: {
+      Logo,
+      Hamburger,
+      UserWidget,
     },
-  },
-};
+
+    methods: {
+      showMobileNavigation() {
+        this.$store.dispatch('showMobileNavigation', true);
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.mobile-header {
-  justify-content: space-between;
-  align-items: center;
+  .mobile-header {
+    justify-content: space-between;
+    align-items: center;
 
-  display: flex;
+    display: flex;
 
-  @include desktop {
-    display: none;
+    @include desktop {
+      display: none;
+    }
+
+    padding: 0 $medium-spacing;
+
+    &__hamburger {
+      width: 30px;
+      height: 30px;
+      fill: $color-silver-dark;
+    }
   }
-
-  padding: 0 $medium-spacing;
-
-  &__hamburger {
-    width: 30px;
-    height: 30px;
-    fill: $color-silver-dark;
-  }
-}
 </style>

client/src/components/Modal.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="modal__backdrop">
     <div
-      :class="{
-        'modal--hide-header': hideHeader || fullscreen,
-        'modal--fullscreen': fullscreen,
-        'modal--small': small,
-      }"
+      :class="{'modal--hide-header': hideHeader || fullscreen, 'modal--fullscreen': fullscreen, 'modal--small': small}"
       class="modal"
     >
       <div class="modal__header">
@@ -13,14 +9,20 @@
       </div>
       <div class="modal__body">
         <slot />
-        <div class="modal__close-button" @click="hideModal">
+        <div
+          class="modal__close-button"
+          @click="hideModal"
+        >
           <cross class="modal__close-icon" />
         </div>
       </div>
       <div class="modal__footer">
         <slot name="footer">
           <!--<a class="button button&#45;&#45;active">Speichern</a>-->
-          <a class="button" @click="hideModal">Abbrechen</a>
+          <a
+            class="button"
+            @click="hideModal"
+          >Abbrechen</a>
         </slot>
       </div>
     </div>
@@ -28,158 +30,160 @@
 </template>
 
 <script>
-const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
+  import {defineAsyncComponent} from 'vue';
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
-export default {
-  props: {
-    hideHeader: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      hideHeader: {
+        type: Boolean,
+        default: false
+      },
+      fullscreen: {
+        type: Boolean,
+        default: false
+      },
+      small: {
+        type: Boolean,
+        default: false
+      }
     },
-    fullscreen: {
-      type: Boolean,
-      default: false,
-    },
-    small: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
-  components: {
-    Cross,
-  },
-
-  methods: {
-    hideModal() {
-      this.$store.dispatch('hideModal');
+    components: {
+      Cross
     },
-  },
-};
+
+    methods: {
+      hideModal() {
+        this.$store.dispatch('hideModal');
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "@/styles/_variables.scss";
 
-.modal {
-  align-self: center;
-  justify-self: center;
-  width: 700px;
-  height: 80vh;
-  background-color: $color-white;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
-  border: 1px solid $color-silver-light;
-  display: -ms-grid;
-  @supports (display: grid) {
-    display: grid;
-  }
-  grid-template-rows: auto 1fr 65px;
-  grid-template-areas: 'header' 'body' 'footer';
-  -ms-grid-rows: auto 1fr 65px;
-  position: relative;
-
-  &__backdrop {
-    display: flex;
-    justify-content: center;
+  .modal {
+    align-self: center;
+    justify-self: center;
+    width: 700px;
+    height: 80vh;
+    background-color: $color-white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+    border: 1px solid $color-silver-light;
+    display: -ms-grid;
     @supports (display: grid) {
       display: grid;
     }
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: rgba($color-white, 0.8);
-    z-index: 90;
-  }
+    grid-template-rows: auto 1fr 65px;
+    grid-template-areas: "header" "body" "footer";
+    -ms-grid-rows: auto 1fr 65px;
+    position: relative;
 
-  &__header {
-    grid-area: header;
-    -ms-grid-row: 1;
-    padding: 10px $modal-lateral-padding;
-    border-bottom: 1px solid $color-silver-light;
-  }
+    &__backdrop {
+      display: flex;
+      justify-content: center;
+      @supports (display: grid) {
+        display: grid;
+      }
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: rgba($color-white, 0.8);
+      z-index: 90;
+    }
 
-  &__body {
-    grid-area: body;
-    -ms-grid-row: 2;
-    padding: 10px $modal-lateral-padding;
-    overflow: auto;
-    box-sizing: border-box;
-    min-height: 30vh;
-  }
+    &__header {
+      grid-area: header;
+      -ms-grid-row: 1;
+      padding: 10px $modal-lateral-padding;
+      border-bottom: 1px solid $color-silver-light;
+    }
 
-  &__close-button {
-    display: none;
-    cursor: pointer;
-    position: absolute;
-    right: 15px;
-    top: 15px;
-    background: rgba($color-white, 0.5);
-    border-radius: 40px;
-    padding: 10px;
-    align-content: center;
-  }
+    &__body {
+      grid-area: body;
+      -ms-grid-row: 2;
+      padding: 10px $modal-lateral-padding;
+      overflow: auto;
+      box-sizing: border-box;
+      min-height: 30vh;
+    }
 
-  &__footer {
-    grid-area: footer;
-    -ms-grid-row: 3;
-    border-top: 1px solid $color-silver-light;
-    padding: 16px $modal-lateral-padding;
-  }
-
-  $parent: &;
-
-  &--hide-header {
-    grid-template-rows: 1fr 65px;
-    grid-template-areas: 'body' 'footer';
-
-    #{$parent}__header {
+    &__close-button {
       display: none;
+      cursor: pointer;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      background: rgba($color-white, 0.5);
+      border-radius: 40px;
+      padding: 10px;
+      align-content: center;
     }
 
-    #{$parent}__body {
-      padding: $default-padding;
-    }
-  }
-
-  &--fullscreen {
-    width: 95vw;
-    height: auto;
-    grid-template-rows: 1fr;
-    -ms-grid-rows: 1fr;
-    grid-template-areas: 'body';
-    overflow: hidden;
-
-    #{$parent}__footer {
-      display: none;
+    &__footer {
+      grid-area: footer;
+      -ms-grid-row: 3;
+      border-top: 1px solid $color-silver-light;
+      padding: 16px $modal-lateral-padding;
     }
 
-    #{$parent}__body {
-      padding: 0;
-      scrollbar-width: none;
-      margin-right: -5px;
+    $parent: &;
 
-      height: auto;
-      max-height: 95vh;
+    &--hide-header {
+      grid-template-rows: 1fr 65px;
+      grid-template-areas: "body" "footer";
 
-      &::-webkit-scrollbar {
+      #{$parent}__header {
         display: none;
       }
+
+      #{$parent}__body {
+        padding: $default-padding;
+      }
+
+    }
+
+    &--fullscreen {
+      width: 95vw;
+      height: auto;
+      grid-template-rows: 1fr;
+      -ms-grid-rows: 1fr;
+      grid-template-areas: "body";
+      overflow: hidden;
+
+      #{$parent}__footer {
+        display: none;
+      }
+
+      #{$parent}__body {
+        padding: 0;
+        scrollbar-width: none;
+        margin-right: -5px;
+
+        height: auto;
+        max-height: 95vh;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      #{$parent}__close-button {
+        display: flex;
+      }
     }
 
-    #{$parent}__close-button {
-      display: flex;
+    &--small {
+      height: auto;
+
+      #{$parent}__body {
+        min-height: 0;
+      }
     }
   }
-
-  &--small {
-    height: auto;
-
-    #{$parent}__body {
-      min-height: 0;
-    }
-  }
-}
 </style>

client/src/components/MoreOptionsWidget.vue

@@ -1,59 +1,68 @@
 <template>
   <div class="more-options">
-    <a class="more-options__more-link" data-cy="more-options-link" @click.stop="showMenu = !showMenu">
+    <a
+      class="more-options__more-link"
+      data-cy="more-options-link"
+      @click.stop="showMenu = !showMenu"
+    >
       <ellipses class="more-options__ellipses" />
     </a>
-    <widget-popover class="more-options__popover" v-if="showMenu" @hide-me="showMenu = false">
+    <widget-popover
+      class="more-options__popover"
+      v-if="showMenu"
+      @hide-me="showMenu = false"
+    >
       <slot />
     </widget-popover>
   </div>
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
+  import {defineAsyncComponent} from 'vue';
 
-const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue');
+  const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue'));
 
-export default {
-  components: {
-    WidgetPopover,
-    Ellipses,
-  },
+  export default {
+    components: {
+      WidgetPopover,
+      Ellipses
+    },
 
-  data() {
-    return {
-      showMenu: false,
-    };
-  },
-};
+    data() {
+      return {
+        showMenu: false
+      };
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.more-options {
-  display: flex;
-  justify-content: flex-end;
-
-  &__ellipses {
-    width: 30px;
-    height: 30px;
-    fill: $color-charcoal-dark;
-    margin-top: -7px;
-  }
-
-  &__more-link {
-    background-color: rgba($color-white, 0.9);
-    width: 35px;
-    height: 15px;
-    border-radius: 15px;
+  .more-options {
     display: flex;
-    justify-content: center;
-  }
+    justify-content: flex-end;
 
-  &__popover {
-    min-width: 200px;
-    @include popover-defaults();
+    &__ellipses {
+      width: 30px;
+      height: 30px;
+      fill: $color-charcoal-dark;
+      margin-top: -7px;
+    }
+
+    &__more-link {
+      background-color: rgba($color-white, 0.9);
+      width: 35px;
+      height: 15px;
+      border-radius: 15px;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__popover {
+      min-width: 200px;
+      @include popover-defaults();
+    }
   }
-}
 </style>

client/src/components/ScrollUp.vue

@@ -11,7 +11,8 @@
 </template>
 
 <script>
-  const ArrowUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp');
+  import {defineAsyncComponent} from 'vue';
+  const ArrowUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp'));
 
   export default {
     components: {

client/src/components/StudentSubmissionDocument.vue

@@ -1,40 +1,44 @@
 <template>
   <div class="submission-document">
-    <p class="submission-document__content content" v-if="document && document.length > 0">
+    <p
+      class="submission-document__content content"
+      v-if="document && document.length > 0"
+    >
       <document-icon class="content__icon" /><span class="content__text">{{ filename }}</span>
     </p>
   </div>
 </template>
 
 <script>
-import filenameFromUrl from '@/helpers/urls';
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
+  import {defineAsyncComponent} from 'vue';
+  import filenameFromUrl from '@/helpers/urls';
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
 
-export default {
-  name: 'StudentSubmissionDocument',
-  props: ['document'],
-  components: { DocumentIcon },
+  export default {
+    name: 'StudentSubmissionDocument',
+    props: ['document'],
+    components: { DocumentIcon },
 
-  computed: {
-    filename() {
-      return filenameFromUrl(this.document);
+    computed: {
+      filename() {
+        return filenameFromUrl(this.document);
+      }
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-.content {
-  display: flex;
+  .content {
+    display: flex;
 
-  &__icon {
-    width: 25px;
-    align-self: center;
-  }
+    &__icon {
+      width: 25px;
+      align-self: center;
+    }
 
-  &__text {
-    align-self: center;
-    padding-left: 5px;
+    &__text {
+      align-self: center;
+      padding-left: 5px;
+    }
   }
-}
 </style>

client/src/components/book-navigation/ContentNavigation.vue

@@ -1,9 +1,12 @@
 <template>
-  <nav :class="{ 'content-navigation--sidebar': isSidebar }" class="content-navigation">
+  <nav
+    :class="{'content-navigation--sidebar': isSidebar}"
+    class="content-navigation"
+  >
     <div class="content-navigation__primary">
       <div class="content-navigation__item">
         <router-link
-          :class="{ 'content-navigation__link--active': isActive('book') }"
+          :class="{'content-navigation__link--active': isActive('book')}"
           :to="topicRoute"
           active-class="content-navigation__link--active"
           class="content-navigation__link"
@@ -12,7 +15,9 @@
           {{ $flavor.textTopics }}
         </router-link>
 
-        <topic-navigation v-if="isSidebar" />
+        <topic-navigation
+          v-if="isSidebar"
+        />
       </div>
 
       <div class="content-navigation__item">
@@ -28,7 +33,7 @@
 
       <div class="content-navigation__item">
         <router-link
-          :to="{ name: 'news' }"
+          :to="{name: 'news'}"
           active-class="content-navigation__link--active"
           class="content-navigation__link"
           data-cy="news-navigation-link"
@@ -40,14 +45,19 @@
       </div>
     </div>
 
-    <router-link to="/" class="content-navigation__logo" data-cy="home-link" v-if="!isSidebar">
+    <router-link
+      to="/"
+      class="content-navigation__logo"
+      data-cy="home-link"
+      v-if="!isSidebar"
+    >
       <logo class="content-navigation__logo-icon" />
     </router-link>
 
     <div class="content-navigation__secondary">
       <div class="content-navigation__item content-navigation__item--secondary">
         <router-link
-          :class="{ 'content-navigation__link--active': isRoomUrl() }"
+          :class="{'content-navigation__link--active': isRoomUrl()}"
           to="/rooms"
           active-class="content-navigation__link--active"
           class="content-navigation__link content-navigation__link--secondary"
@@ -57,7 +67,10 @@
         </router-link>
       </div>
 
-      <div class="content-navigation__item content-navigation__item--secondary" v-if="showPortfolio">
+      <div
+        class="content-navigation__item content-navigation__item--secondary"
+        v-if="showPortfolio"
+      >
         <router-link
           to="/portfolio"
           active-class="content-navigation__link--active"
@@ -67,13 +80,16 @@
           Portfolio
         </router-link>
       </div>
-      <div class="content-navigation__item content-navigation__item--secondary" v-if="isSidebar">
+      <div
+        class="content-navigation__item content-navigation__item--secondary"
+        v-if="isSidebar"
+      >
         <a
           :href="$flavor.supportLink"
           target="_blank"
           class="content-navigation__link content-navigation__link--secondary"
           @click="close"
-          >Support
+        >Support
         </a>
       </div>
     </div>
@@ -81,142 +97,142 @@
 </template>
 
 <script>
-import TopicNavigation from '@/components/book-navigation/TopicNavigation';
+  import TopicNavigation from '@/components/book-navigation/TopicNavigation';
 
-import sidebarMixin from '@/mixins/sidebar';
-import meMixin from '@/mixins/me';
+  import sidebarMixin from '@/mixins/sidebar';
+  import meMixin from '@/mixins/me';
+  import {defineAsyncComponent} from 'vue';
 
-const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
+  const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
 
-export default {
-  props: {
-    isSidebar: {
-      default: false,
+  export default {
+    props: {
+      isSidebar: {
+        default: false
+      }
     },
-  },
 
-  mixins: [sidebarMixin, meMixin],
+    mixins: [sidebarMixin, meMixin],
 
-  components: {
-    TopicNavigation,
-    Logo,
-  },
+    components: {
+      TopicNavigation,
+      Logo
+    },
 
-  computed: {
-    showPortfolio() {
-      return this.$flavor.showPortfolio;
+    computed: {
+      showPortfolio() {
+        return this.$flavor.showPortfolio;
+      }
     },
-  },
 
-  methods: {
-    isActive(linkName) {
-      return linkName === 'book' && this.$route.path.indexOf('module') > -1;
-    },
-    isRoomUrl() {
-      return this.$route.path.indexOf('room') > -1;
-    },
-    close() {
-      this.closeSidebar('navigation');
-    },
-  },
-};
+    methods: {
+      isActive(linkName) {
+        return linkName === 'book' && this.$route.path.indexOf('module') > -1;
+      },
+      isRoomUrl() {
+        return this.$route.path.indexOf('room') > -1;
+      },
+      close() {
+        this.closeSidebar('navigation');
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.content-navigation {
-  display: flex;
-  align-items: center;
-
-  &__link {
-    padding: 0 24px;
-    @include navigation-link;
-  }
-
-  &__primary,
-  &__secondary {
-    display: none;
-    flex-direction: row;
-
-    @include desktop {
-      display: flex;
-    }
-  }
-
-  &__logo {
-    color: #17a887;
-    font-size: 36px;
-    font-weight: 800;
-    font-family: $sans-serif-font-family;
+  .content-navigation {
     display: flex;
-    justify-self: center;
+    align-items: center;
 
-    /*
-      * For IE10+
-      */
-    -ms-grid-column: 2;
-    -ms-grid-row-align: center;
-    -ms-grid-column-align: center;
-  }
-
-  &__logo-icon {
-    width: auto;
-    height: 31px;
-  }
-
-  &__link {
-    &--secondary {
-      @include regular-text;
+    &__link {
+      padding: 0 24px;
+      @include navigation-link;
     }
 
-    &--active {
-      color: $color-brand;
-    }
-  }
+    &__primary, &__secondary {
+      display: none;
+      flex-direction: row;
 
-  $parent: &;
-
-  &--sidebar {
-    flex-direction: column;
-
-    #{$parent}__primary,
-    #{$parent}__secondary {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-
-    #{$parent}__link {
-      @include heading-4;
-      line-height: 2.5em;
-      padding: 0;
-      display: block;
-      margin-bottom: 0.5 * $small-spacing;
-
-      &:only-child {
-        margin-bottom: 0;
+      @include desktop {
+        display: flex;
       }
     }
 
-    #{$parent}__item {
-      width: 100%;
-      //border-bottom: 1px solid $color-white;
+    &__logo {
+      color: #17A887;
+      font-size: 36px;
+      font-weight: 800;
+      font-family: $sans-serif-font-family;
+      display: flex;
+      justify-self: center;
 
-      /*&:nth-child(1) {*/
-      /*  order: 3;*/
-      /*  border-bottom: 0;*/
-      /*}*/
+      /*
+      * For IE10+
+      */
+      -ms-grid-column: 2;
+      -ms-grid-row-align: center;
+      -ms-grid-column-align: center;
+    }
 
-      /*&:nth-child(2) {*/
-      /*  order: 1;*/
-      /*}*/
+    &__logo-icon {
+      width: auto;
+      height: 31px;
+    }
 
-      /*&:nth-child(3) {*/
-      /*  order: 2;*/
-      /*}*/
+    &__link {
+      &--secondary {
+        @include regular-text;
+      }
+
+      &--active {
+        color: $color-brand;
+      }
+    }
+
+    $parent: &;
+
+    &--sidebar {
+      flex-direction: column;
+
+      #{$parent}__primary, #{$parent}__secondary {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      #{$parent}__link {
+        @include heading-4;
+        line-height: 2.5em;
+        padding: 0;
+        display: block;
+        margin-bottom: 0.5*$small-spacing;
+
+        &:only-child {
+          margin-bottom: 0;
+        }
+
+      }
+
+      #{$parent}__item {
+        width: 100%;
+        //border-bottom: 1px solid $color-white;
+
+        /*&:nth-child(1) {*/
+        /*  order: 3;*/
+        /*  border-bottom: 0;*/
+        /*}*/
+
+        /*&:nth-child(2) {*/
+        /*  order: 1;*/
+        /*}*/
+
+        /*&:nth-child(3) {*/
+        /*  order: 2;*/
+        /*}*/
+      }
     }
   }
-}
 </style>

client/src/components/book-navigation/NavigationSidebar.vue

@@ -23,8 +23,9 @@
   import ContentNavigation from '@/components/book-navigation/ContentNavigation';
 
   import sidebarMixin from '@/mixins/sidebar';
+  import {defineAsyncComponent} from 'vue';
 
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
   export default {
     mixins: [sidebarMixin],

client/src/components/book-navigation/SubNavigationItem.vue

@@ -1,44 +1,55 @@
 <template>
-  <div :class="{ 'sub-navigation-item--active': show }" class="sub-navigation-item" v-click-outside="close">
-    <div class="sub-navigation-item__title" @click="show = !show">
+  <div
+    :class="{ 'sub-navigation-item--active': show}"
+    class="sub-navigation-item"
+    v-click-outside="close"
+  >
+    <div
+      class="sub-navigation-item__title"
+      @click="show = !show"
+    >
       {{ title }}
       <chevron-down class="sub-navigation-item__icon sub-navigation-item__chevron-down" />
       <chevron-up class="sub-navigation-item__icon sub-navigation-item__chevron-up" />
     </div>
-    <div class="sub-navigation-item__nav-items book-subnavigation" v-if="show">
+    <div
+      class="sub-navigation-item__nav-items book-subnavigation"
+      v-if="show"
+    >
       <slot />
     </div>
   </div>
 </template>
 
 <script>
-const ChevronDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown');
-const ChevronUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronUp');
+  import {defineAsyncComponent} from 'vue';
+  const ChevronDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown'));
+  const ChevronUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronUp'));
 
-export default {
-  props: ['title'],
+  export default {
+    props: ['title'],
 
-  components: {
-    ChevronDown,
-    ChevronUp,
-  },
-
-  data() {
-    return {
-      show: false,
-    };
-  },
-
-  watch: {
-    $route() {
-      this.show = false;
+    components: {
+      ChevronDown,
+      ChevronUp
     },
-  },
 
-  methods: {
-    close() {
-      this.show = false;
+    data() {
+      return {
+        show: false
+      };
     },
-  },
-};
+
+    watch: {
+      $route() {
+        this.show = false;
+      }
+    },
+
+    methods: {
+      close() {
+        this.show = false;
+      }
+    }
+  };
 </script>

client/src/components/content-block-form/ContentElement.vue

@@ -26,10 +26,14 @@
           :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"
         />
@@ -39,321 +43,313 @@
 </template>
 
 <script>
-import ContentFormSection from '@/components/content-block-form/ContentFormSection';
-import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
+  import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+  import {defineAsyncComponent} from 'vue';
 
-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');
-const VideoForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/VideoForm');
-const ImageForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/ImageForm');
-const DocumentForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/DocumentForm');
-const AssignmentForm = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/AssignmentForm');
-const TextForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/TipTap.vue');
-const SubtitleForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/SubtitleForm');
-// readonly blocks
-const Assignment = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/assignment/Assignment');
-const SurveyBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/SurveyBlock');
-const Solution = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Solution');
-const ImageBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ImageBlock');
-const Instruction = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Instruction');
-const ModuleRoomSlug = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ModuleRoomSlug');
-const CmsDocumentBlock = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/CmsDocumentBlock');
-const ThinglinkBlock = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ThinglinkBlock');
-const InfogramBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/InfogramBlock');
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
+  const ContentBlockElementChooserWidget = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ContentBlockElementChooserWidget'));
+  const LinkForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/LinkForm'));
+  const VideoForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/VideoForm'));
+  const ImageForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ImageForm'));
+  const DocumentForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/DocumentForm'));
+  const AssignmentForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/AssignmentForm'));
+  const TextForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/TipTap.vue'));
+  const SubtitleForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/SubtitleForm'));
+  // readonly blocks
+  const Assignment = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/assignment/Assignment'));
+  const SurveyBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/SurveyBlock'));
+  const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Solution'));
+  const ImageBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ImageBlock'));
+  const Instruction = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Instruction'));
+  const ModuleRoomSlug = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ModuleRoomSlug'));
+  const CmsDocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/CmsDocumentBlock'));
+  const ThinglinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ThinglinkBlock'));
+  const InfogramBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/InfogramBlock'));
 
-const CHOOSER = 'content-block-element-chooser-widget';
+  const CHOOSER = 'content-block-element-chooser-widget';
 
-export default {
-  props: {
-    element: {
-      type: Object,
-      default: null,
+  export default {
+    props: {
+      element: {
+        type: Object,
+        default: null,
+      },
+      // is this element at the top level, or is it nested? we assume top level
+      topLevel: {
+        type: Boolean,
+        default: true,
+      },
+      firstElement: {
+        type: Boolean,
+        required: true,
+      },
+      lastElement: {
+        type: Boolean,
+        required: true,
+      },
     },
-    // is this element at the top level, or is it nested? we assume top level
-    topLevel: {
-      type: Boolean,
-      default: true,
-    },
-    firstElement: {
-      type: Boolean,
-      required: true,
-    },
-    lastElement: {
-      type: Boolean,
-      required: true,
-    },
-  },
 
-  components: {
-    ContentElementActions,
-    ContentFormSection,
-    TrashIcon,
-    ContentBlockElementChooserWidget,
-    LinkForm,
-    VideoForm,
-    ImageForm,
-    DocumentForm,
-    AssignmentForm,
-    TextForm,
-    SubtitleForm,
-    SurveyBlock,
-    Solution,
-    ImageBlock,
-    Instruction,
-    ModuleRoomSlug,
-    CmsDocumentBlock,
-    InfogramBlock,
-    ThinglinkBlock,
-    Assignment,
-  },
+    components: {
+      ContentElementActions,
+      ContentFormSection,
+      TrashIcon,
+      ContentBlockElementChooserWidget,
+      LinkForm,
+      VideoForm,
+      ImageForm,
+      DocumentForm,
+      AssignmentForm,
+      TextForm,
+      SubtitleForm,
+      SurveyBlock,
+      Solution,
+      ImageBlock,
+      Instruction,
+      ModuleRoomSlug,
+      CmsDocumentBlock,
+      InfogramBlock,
+      ThinglinkBlock,
+      Assignment
+    },
 
-  computed: {
-    actions() {
-      return {
-        up: !this.firstElement,
-        down: !this.lastElement,
-        extended: this.topLevel,
-      };
+    computed: {
+      actions() {
+        return {
+          up: !this.firstElement,
+          down: !this.lastElement,
+          extended: this.topLevel,
+        };
+      },
+      isChooser() {
+        return this.component === CHOOSER;
+      },
+      type() {
+        return this.getType(this.element);
+      },
+      component() {
+        return this.type.component;
+      },
+      title() {
+        return this.type.title;
+      },
+      icon() {
+        return this.type.icon;
+      },
     },
-    isChooser() {
-      return this.component === CHOOSER;
-    },
-    type() {
-      return this.getType(this.element);
-    },
-    component() {
-      return this.type.component;
-    },
-    title() {
-      return this.type.title;
-    },
-    icon() {
-      return this.type.icon;
-    },
-  },
 
-  methods: {
-    getType(element) {
-      switch (element.type) {
-        case 'subtitle':
-          return {
-            component: 'subtitle-form',
-            title: 'Untertitel',
-            icon: 'title-icon',
-          };
-        case 'link_block':
-          return {
-            component: 'link-form',
-            title: 'Link',
-            icon: 'link-icon',
-          };
-        case 'video_block':
-          return {
-            component: 'video-form',
-            title: 'Video',
-            icon: 'video-icon',
-          };
-        case 'image_url_block':
-          return {
-            component: 'image-form',
-            title: 'Bild',
-            icon: 'image-icon',
-          };
-        case 'text_block':
-          return {
-            component: 'text-form',
-            title: 'Text',
-            icon: 'text-icon',
-          };
-        case 'assignment':
-          return {
-            component: element.id ? 'assignment' : 'assignment-form', // prevent editing of existing assignments
-            title: 'Aufgabe & Ergebnis',
-            icon: 'speech-bubble-icon',
-          };
-        case 'document_block':
-          return {
-            component: 'document-form',
-            title: 'Dokument',
-            icon: 'document-icon',
-          };
-        case 'survey':
-          return {
-            component: 'survey-block',
-            title: 'Übung',
-          };
-        case 'solution':
-          return {
-            component: 'solution',
-            title: 'Lösung',
-          };
-        case 'image_block':
-          return {
-            component: 'image-block',
-            title: 'Bild',
-          };
-        case 'instruction':
-          return {
-            component: 'instruction',
-            title: 'Instruktion',
-          };
-        case 'module_room_slug':
-          return {
-            component: 'module-room-slug',
-            title: 'Raum',
-          };
-        case 'cms_document_block':
-          return {
-            component: 'cms-document-block',
-            title: 'Dokument',
-          };
-        case 'thinglink_block':
-          return {
-            component: 'thinglink-block',
-            title: 'Interaktive Grafik',
-          };
-        case 'infogram_block':
-          return {
-            component: 'infogram-block',
-            title: 'Interaktive Grafik',
-          };
-      }
-      return {
-        component: CHOOSER,
-        title: '',
-        icon: '',
-      };
-    },
-    _updateProperty(value, key) {
-      // const content = this.localContentBlock.contents[index];
-      const content = this.element;
-      this.update({
-        ...content,
-        value: {
-          ...content.value,
-          [key]: value,
-        },
-      });
-    },
-    changeUrl(value) {
-      this._updateProperty(value, 'url');
-    },
-    changeText(value) {
-      this._updateProperty(value, 'text');
-    },
-    changeAssignmentTitle(value) {
-      this._updateProperty(value, 'title');
-    },
-    changeAssignmentAssignment(value) {
-      this._updateProperty(value, 'assignment');
-    },
-    changeType({ type, convertToList }, value) {
-      let el = {
-        type: type,
-        value: Object.assign({}, value),
-      };
-      switch (type) {
-        case 'subtitle':
-          el = {
-            ...el,
-            value: {
-              text: '',
-            },
-          };
-          break;
-        case 'text_block':
-          el = {
-            ...el,
-            value: {
-              text: '',
-            },
-          };
-          break;
-        case 'link_block':
-          el = {
-            ...el,
-            value: {
-              text: '',
-              url: '',
-            },
-          };
-          break;
-        case 'video_block':
-          el = {
-            ...el,
-            value: {
-              url: '',
-            },
-          };
-          break;
-        case 'document_block':
-          el = {
-            ...el,
-            value: Object.assign(
-              {
+    methods: {
+      getType(element) {
+        switch (element.type) {
+          case 'subtitle':
+            return {
+              component: 'subtitle-form',
+              title: 'Untertitel',
+              icon: 'title-icon',
+            };
+          case 'link_block':
+            return {
+              component: 'link-form',
+              title: 'Link',
+              icon: 'link-icon',
+            };
+          case 'video_block':
+            return {
+              component: 'video-form',
+              title: 'Video',
+              icon: 'video-icon',
+            };
+          case 'image_url_block':
+            return {
+              component: 'image-form',
+              title: 'Bild',
+              icon: 'image-icon',
+            };
+          case 'text_block':
+            return {
+              component: 'text-form',
+              title: 'Text',
+              icon: 'text-icon',
+            };
+          case 'assignment':
+            return {
+              component: element.id ? 'assignment' : 'assignment-form', // prevent editing of existing assignments
+              title: 'Aufgabe & Ergebnis',
+              icon: 'speech-bubble-icon',
+            };
+          case 'document_block':
+            return {
+              component: 'document-form',
+              title: 'Dokument',
+              icon: 'document-icon',
+            };
+          case 'survey':
+            return {
+              component: 'survey-block',
+              title: 'Übung',
+            };
+          case 'solution':
+            return {
+              component: 'solution',
+              title: 'Lösung',
+            };
+          case 'image_block':
+            return {
+              component: 'image-block',
+              title: 'Bild',
+            };
+          case 'instruction':
+            return {
+              component: 'instruction',
+              title: 'Instruktion',
+            };
+          case 'module_room_slug':
+            return {
+              component: 'module-room-slug',
+              title: 'Raum',
+            };
+          case 'cms_document_block':
+            return {
+              component: 'cms-document-block',
+              title: 'Dokument',
+            };
+          case 'thinglink_block':
+            return {
+              component: 'thinglink-block',
+              title: 'Interaktive Grafik'
+            };
+          case 'infogram_block':
+            return {
+              component: 'infogram-block',
+              title: 'Interaktive Grafik'
+            };
+        }
+        return {
+          component: CHOOSER,
+          title: '',
+          icon: '',
+        };
+      },
+      _updateProperty(value, key) {
+        // const content = this.localContentBlock.contents[index];
+        const content = this.element;
+        this.update({
+          ...content,
+          value: {
+            ...content.value,
+            [key]: value,
+          },
+        });
+      },
+      changeUrl(value) {
+        this._updateProperty(value, 'url');
+      },
+      changeText(value) {
+        this._updateProperty(value, 'text');
+      },
+      changeAssignmentTitle(value) {
+        this._updateProperty(value, 'title');
+      },
+      changeAssignmentAssignment(value) {
+        this._updateProperty(value, 'assignment');
+      },
+      changeType({type, convertToList}, value) {
+        let el = {
+          type: type,
+          value: Object.assign({}, value),
+        };
+        switch (type) {
+          case 'subtitle':
+            el = {
+              ...el,
+              value: {
+                text: '',
+              },
+            };
+            break;
+          case 'text_block':
+            el = {
+              ...el,
+              value: {
+                text: '',
+              },
+            };
+            break;
+          case 'link_block':
+            el = {
+              ...el,
+              value: {
+                text: '',
                 url: '',
               },
-              value
-            ),
-          };
-          break;
-        case 'image_url_block':
-          el = {
-            ...el,
-            value: {
-              url: '',
-            },
-          };
-          break;
-      }
+            };
+            break;
+          case 'video_block':
+            el = {
+              ...el,
+              value: {
+                url: '',
+              },
+            };
+            break;
+          case 'document_block':
+            el = {
+              ...el,
+              value: Object.assign({
+                url: '',
+              }, value),
+            };
+            break;
+          case 'image_url_block':
+            el = {
+              ...el,
+              value: {
+                url: '',
+              },
+            };
+            break;
+        }
 
-      if (convertToList) {
-        el = {
-          type: 'content_list_item',
-          contents: [el],
-        };
-      }
-      this.update(el);
+        if (convertToList) {
+          el = {
+            type: 'content_list_item',
+            contents: [el],
+          };
+        }
+        this.update(el);
+      },
+      update(element) {
+        this.$emit('update', element);
+      },
+      switchToDocument(value) {
+        this.changeType('document_block', value);
+      },
     },
-    update(element) {
-      this.$emit('update', element);
-    },
-    switchToDocument(value) {
-      this.changeType('document_block', value);
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.content-element {
-  display: flex;
-  flex-direction: column;
+  .content-element {
+    display: flex;
+    flex-direction: column;
 
-  &__actions {
-    display: inline-flex;
-    justify-self: flex-end;
-    align-self: flex-end;
+    &__actions {
+      display: inline-flex;
+      justify-self: flex-end;
+      align-self: flex-end;
+    }
+
+    &__section {
+      display: grid;
+      //grid-template-columns: 1fr 50px;
+      grid-auto-rows: auto;
+      /*width: 95%; // reserve space for scrollbar*/
+    }
+
+    &__chooser {
+      grid-column: 1 / span 2;
+    }
   }
-
-  &__section {
-    display: grid;
-    //grid-template-columns: 1fr 50px;
-    grid-auto-rows: auto;
-    /*width: 95%; // reserve space for scrollbar*/
-  }
-
-  &__chooser {
-    grid-column: 1 / span 2;
-  }
-}
 </style>

client/src/components/content-block-form/ContentsForm.vue

@@ -18,150 +18,167 @@
       />
     </template>
 
-    <add-content-element :index="-1" class="contents-form__add" @add-element="addElement" />
-    <div class="contents-form__element" v-for="(element, index) in localContentBlock.contents" :key="index">
-      <content-element :element="element" @update="update(index, $event)" @remove="remove(index)" />
+    <add-content-element
+      :index="-1"
+      class="contents-form__add"
+      @add-element="addElement"
+    />
+    <div
+      class="contents-form__element"
+      v-for="(element, index) in localContentBlock.contents"
+      :key="index"
+    >
+      <content-element
+        :element="element"
+        @update="update(index, $event)"
+        @remove="remove(index)"
+      />
 
-      <add-content-element :index="index" class="contents-form__add" @add-element="addElement" />
+      <add-content-element
+        :index="index"
+        class="contents-form__add"
+        @add-element="addElement"
+      />
     </div>
 
     <template #footer>
       <div>
         <a
-          :class="{ 'button--disabled': disableSave }"
+          :class="{'button--disabled': disableSave}"
           class="button button--primary"
           data-cy="modal-save-button"
           @click="save"
-          >Speichern</a
-        >
-        <a class="button" @click="$emit('hide')">Abbrechen</a>
+        >Speichern</a>
+        <a
+          class="button"
+          @click="$emit('hide')"
+        >Abbrechen</a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-import { meQuery } from '@/graphql/queries';
+  import {defineAsyncComponent} from 'vue';
+  import {meQuery} from '@/graphql/queries';
 
-const ModalInput = () => import(/* webpackChunkName: "content-forms" */ '@/components/ModalInput');
-const AddContentElement = () => import(/* webpackChunkName: "content-forms" */ '@/components/AddContentElement');
-const ContentElement = () =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/ContentElement');
+  const ModalInput = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/ModalInput'));
+  const AddContentElement = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/AddContentElement'));
+  const ContentElement = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/ContentElement'));
 
-const Modal = () => import('@/components/Modal.vue');
-const Checkbox = () => import('@/components/ui/Checkbox.vue');
+  const Modal = defineAsyncComponent(() => import('@/components/Modal'));
+  const Checkbox = defineAsyncComponent(() => import('@/components/ui/Checkbox'));
 
-export default {
-  props: {
-    contentBlock: Object,
-    blockType: {
-      type: String,
-      default: 'ContentBlock',
+  export default {
+    props: {
+      contentBlock: Object,
+      blockType: {
+        type: String,
+        default: 'ContentBlock',
+      },
+      showTaskSelection: {
+        type: Boolean,
+        default: false,
+      },
+      disableSave: {
+        type: Boolean,
+        default: false,
+      },
     },
-    showTaskSelection: {
-      type: Boolean,
-      default: false,
-    },
-    disableSave: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
-  components: {
-    ContentElement,
-    Modal,
-    ModalInput,
-    AddContentElement,
-    Checkbox,
-  },
+    components: {
+      ContentElement,
+      Modal,
+      ModalInput,
+      AddContentElement,
+      Checkbox,
+    },
 
-  data() {
-    return {
-      error: false,
-      localContentBlock: Object.assign(
-        {},
-        {
+    data() {
+      return {
+        error: false,
+        localContentBlock: Object.assign({}, {
           title: this.contentBlock.title,
           contents: [...this.contentBlock.contents],
           id: this.contentBlock.id || undefined,
           isAssignment: this.contentBlock.type && this.contentBlock.type.toLowerCase() === 'task',
+        }),
+        me: {},
+      };
+    },
+
+    apollo: {
+      me: meQuery,
+    },
+
+    computed: {
+      titlePlaceholder() {
+        return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
+      },
+      taskSelection() {
+        return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
+      },
+    },
+
+    methods: {
+      setContentBlockType(checked) {
+        this.localContentBlock.isAssignment = checked;
+      },
+      update(index, element) {
+        this.localContentBlock.contents.splice(index, 1, element);
+      },
+      save() {
+        if (!this.disableSave) {
+          if (!this.localContentBlock.title) {
+            this.error = true;
+            return false;
+          }
+          this.$emit('save', this.localContentBlock);
         }
-      ),
-      me: {},
-    };
-  },
+      },
+      updateTitle(title) {
+        this.localContentBlock.title = title;
+        this.error = false;
+      },
+      addElement(index) {
+        this.localContentBlock.contents.splice(index + 1, 0, {
+          hideAssignment: this.blockType !== 'ContentBlock',
+        });
+      },
+      remove(index) {
+        this.localContentBlock.contents.splice(index, 1);
+      },
 
-  apollo: {
-    me: meQuery,
-  },
-
-  computed: {
-    titlePlaceholder() {
-      return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
     },
-    taskSelection() {
-      return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
-    },
-  },
-
-  methods: {
-    setContentBlockType(checked) {
-      this.localContentBlock.isAssignment = checked;
-    },
-    update(index, element) {
-      this.localContentBlock.contents.splice(index, 1, element);
-    },
-    save() {
-      if (!this.disableSave) {
-        if (!this.localContentBlock.title) {
-          this.error = true;
-          return false;
-        }
-        this.$emit('save', this.localContentBlock);
-      }
-    },
-    updateTitle(title) {
-      this.localContentBlock.title = title;
-      this.error = false;
-    },
-    addElement(index) {
-      this.localContentBlock.contents.splice(index + 1, 0, {
-        hideAssignment: this.blockType !== 'ContentBlock',
-      });
-    },
-    remove(index) {
-      this.localContentBlock.contents.splice(index, 1);
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.contents-form {
-  /* top level does not exist, because of the modal */
+  .contents-form {
+    /* top level does not exist, because of the modal */
 
-  &__element {
+    &__element {
+
+    }
+
+    &__element-component {
+      margin-bottom: 25px;
+    }
+
+    &__remove {
+    }
+
+    &__trash-icon {
+    }
+
+    &__add {
+      grid-column: 1 / span 2;
+    }
+
+    &__task {
+      margin: 15px 0 10px;
+    }
   }
-
-  &__element-component {
-    margin-bottom: 25px;
-  }
-
-  &__remove {
-  }
-
-  &__trash-icon {
-  }
-
-  &__add {
-    grid-column: 1 / span 2;
-  }
-
-  &__task {
-    margin: 15px 0 10px;
-  }
-}
 </style>

client/src/components/content-blocks/ContentListBlock.vue

@@ -1,40 +1,43 @@
 <template>
-  <content-list :items="contentBlocks">
+  <content-list
+    :items="contentBlocks"
+  >
     <template #default="{ item }">
-      <content-block :content-block="item" :parent="parent" />
+      <content-block
+        :content-block="item"
+        :parent="parent"
+      />
     </template>
   </content-list>
 </template>
 
 <script>
-import ContentList from '@/components/content-blocks/ContentList.vue';
-export default {
-  name: 'ContentBlockList',
-  props: ['contents', 'parent'],
+  import {defineAsyncComponent} from 'vue';
+  const ContentList = defineAsyncComponent(() => import('@/components/content-blocks/ContentList'));
+  const ContentBlock = defineAsyncComponent(() => import('@/components/ContentBlock'));
 
-  components: {
-    ContentList,
-    // https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-    ContentBlock: () => import('@/components/ContentBlock.vue'),
-  },
+  export default {
+    name: 'ContentBlockList',
+    props: ['contents', 'parent'],
 
-  computed: {
-    contentBlocks() {
-      return this.contents.map((contentBlock) => {
-        const contents = contentBlock.value ? [...contentBlock.value] : [];
-        return Object.assign({}, contentBlock, {
-          contents,
-          indent: true,
-          bookmarks: this.parent.bookmarks,
-          notes: this.parent.notes,
-          root: this.parent.id,
-        });
-      });
+    components: {
+      ContentList,
+      ContentBlock
     },
-  },
-};
-</script>
 
-<style scoped lang="scss">
-@import '~styles/helpers';
-</style>
+    computed: {
+      contentBlocks() {
+        return this.contents.map(contentBlock => {
+          const contents = contentBlock.value ? [...contentBlock.value] : [];
+          return Object.assign({}, contentBlock, {
+            contents,
+            indent: true,
+            bookmarks: this.parent.bookmarks,
+            notes: this.parent.notes,
+            root: this.parent.id
+          });
+        });
+      }
+    }
+  };
+</script>

client/src/components/content-blocks/DocumentBlock.vue

@@ -1,71 +1,80 @@
 <template>
   <div class="document-block">
     <document-icon class="document-block__icon" />
-    <a :href="value.url" class="document-block__link" target="_blank">{{ urlName }}</a>
-    <a class="document-block__remove" v-if="showTrashIcon" @click="$emit('trash')">
+    <a
+      :href="value.url"
+      class="document-block__link"
+      target="_blank"
+    >{{ urlName }}</a>
+    <a
+      class="document-block__remove"
+      v-if="showTrashIcon"
+      @click="$emit('trash')"
+    >
       <trash-icon class="document-block__trash-icon" />
     </a>
   </div>
 </template>
 
 <script>
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+  import {defineAsyncComponent} from 'vue';
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
 
-export default {
-  props: {
-    value: Object,
-    showTrashIcon: Boolean,
-  },
-
-  components: {
-    DocumentIcon,
-    TrashIcon,
-  },
-
-  computed: {
-    urlName: function () {
-      if (this.value && this.value.url) {
-        const parts = this.value.url.split('/');
-        return parts[parts.length - 1];
-      }
-      return null;
+  export default {
+    props: {
+      value: Object,
+      showTrashIcon: Boolean,
     },
-  },
-};
+
+    components: {
+      DocumentIcon,
+      TrashIcon,
+    },
+
+    computed: {
+      urlName: function() {
+        if (this.value && this.value.url) {
+          const parts = this.value.url.split('/');
+          return parts[parts.length - 1];
+        }
+        return null;
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.document-block {
-  display: grid;
-  grid-template-columns: 50px 1fr 50px;
-  align-items: center;
-
-  &__icon {
-    width: 30px;
-    height: 30px;
-  }
-
-  &__link {
-    text-decoration: underline;
-  }
-
-  &__remove {
-    display: flex;
-    justify-content: center;
+  .document-block {
+    display: grid;
+    grid-template-columns: 50px 1fr 50px;
     align-items: center;
-    width: 50px;
-    height: 50px;
-  }
 
-  &__trash-icon {
-    width: 25px;
-    height: 25px;
-    fill: $color-silver-dark;
-    cursor: pointer;
-    justify-self: center;
+    &__icon {
+      width: 30px;
+      height: 30px;
+    }
+
+    &__link {
+      text-decoration: underline;
+    }
+
+    &__remove {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      height: 50px;
+    }
+
+    &__trash-icon {
+      width: 25px;
+      height: 25px;
+      fill: $color-silver-dark;
+      cursor: pointer;
+      justify-self: center;
+    }
   }
-}
 </style>

client/src/components/content-blocks/Instruction.vue

@@ -1,50 +1,57 @@
 <template>
-  <div class="instruction" v-if="me.isTeacher">
+  <div
+    class="instruction"
+    v-if="me.isTeacher"
+  >
     <bulb-icon class="instruction__icon" />
-    <a :href="url" class="instruction__link">{{ text }}</a>
+    <a
+      :href="url"
+      class="instruction__link"
+    >{{ text }}</a>
   </div>
 </template>
 
 <script>
-import me from '@/mixins/me';
-const BulbIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BulbIcon');
+  import me from '@/mixins/me';
+  import {defineAsyncComponent} from 'vue';
+  const BulbIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon'));
 
-export default {
-  props: ['value'],
+  export default {
+    props: ['value'],
 
-  mixins: [me],
+    mixins: [me],
 
-  components: {
-    BulbIcon,
-  },
-
-  computed: {
-    text() {
-      return this.value.text ? this.value.text : 'Anweisungen';
+    components: {
+      BulbIcon
     },
-    url() {
-      return this.value.document ? this.value.document.url : this.value.url;
-    },
-  },
-};
+
+    computed: {
+      text() {
+        return this.value.text ? this.value.text : 'Anweisungen';
+      },
+      url() {
+        return this.value.document ? this.value.document.url : this.value.url;
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_mixins.scss";
 
-.instruction {
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
+  .instruction {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
 
-  &__icon {
-    width: 40px;
-    height: 40px;
-    margin-right: $small-spacing;
+    &__icon {
+      width: 40px;
+      height: 40px;
+      margin-right: $small-spacing;
+    }
+
+    &__link {
+      @include heading-3;
+    }
   }
-
-  &__link {
-    @include heading-3;
-  }
-}
 </style>

client/src/components/content-blocks/LinkBlock.vue

@@ -1,52 +1,60 @@
 <template>
-  <div :class="{ 'link-block--no-margin': noMargin }" class="link-block">
+  <div
+    :class="{ 'link-block--no-margin': noMargin}"
+    class="link-block"
+  >
     <link-icon class="link-block__icon" />
-    <a :href="href" class="link-block__link" target="_blank">{{ value.text }}</a>
+    <a
+      :href="href"
+      class="link-block__link"
+      target="_blank"
+    >{{ value.text }}</a>
   </div>
 </template>
 
 <script>
-const LinkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon');
+  import {defineAsyncComponent} from 'vue';
+  const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon'));
 
-export default {
-  props: {
-    value: Object,
-    noMargin: {
-      default: false,
+  export default {
+    props: {
+      value: Object,
+      noMargin: {
+        default: false
+      }
     },
-  },
 
-  components: {
-    LinkIcon,
-  },
-
-  computed: {
-    href() {
-      const url = this.value.url;
-      return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
+    components: {
+      LinkIcon
     },
-  },
-};
+
+    computed: {
+      href() {
+        const url = this.value.url;
+        return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-.link-block {
-  margin-bottom: 30px;
-  display: grid;
-  grid-template-columns: 50px 1fr;
-  align-items: center;
+  .link-block {
+    margin-bottom: 30px;
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    align-items: center;
 
-  &--no-margin {
-    margin-bottom: 0;
-  }
+    &--no-margin {
+      margin-bottom: 0;
+    }
 
-  &__icon {
-    width: 30px;
-    height: 30px;
-  }
+    &__icon {
+      width: 30px;
+      height: 30px;
+    }
 
-  &__link {
-    text-decoration: underline;
+    &__link {
+      text-decoration: underline;
+    }
   }
-}
 </style>

client/src/components/content-blocks/assignment/Assignment.vue

@@ -1,9 +1,19 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <div :data-scrollto="value.id" class="assignment">
-    <p class="assignment__main-text" data-cy="assignment-main-text" v-html="assignment.assignment" />
+  <div
+    :data-scrollto="value.id"
+    class="assignment"
+  >
+    <p
+      class="assignment__main-text"
+      data-cy="assignment-main-text"
+      v-html="assignment.assignment"
+    />
 
-    <solution :value="solution" v-if="assignment.solution" />
+    <solution
+      :value="solution"
+      v-if="assignment.solution"
+    />
 
     <template v-if="isStudent">
       <submission-form
@@ -23,92 +33,101 @@
         @spellcheck="spellcheck"
       />
 
-      <spell-check :corrections="corrections" :text="submission.text" />
+      <spell-check
+        :corrections="corrections"
+        :text="submission.text"
+      />
 
-      <p class="assignment__feedback" v-if="assignment.submission.submissionFeedback" v-html="feedbackText" />
+      <p
+        class="assignment__feedback"
+        v-if="assignment.submission.submissionFeedback"
+        v-html="feedbackText"
+      />
     </template>
     <template v-if="!isStudent">
-      <router-link :to="{ name: 'submissions', params: { id: assignment.id } }" class="button button--primary">
-        Zu den Ergebnissen
+      <router-link
+        :to="{name: 'submissions', params: { id: assignment.id }}"
+        class="button button--primary"
+      >
+        Zu den
+        Ergebnissen
       </router-link>
     </template>
   </div>
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex';
-import ASSIGNMENT_QUERY from '@/graphql/gql/queries/assignmentQuery.gql';
-import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
-import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
-import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
-import debounce from 'lodash/debounce';
-import cloneDeep from 'lodash/cloneDeep';
-import { sanitize } from '@/helpers/text';
+  import {mapActions, mapGetters} from 'vuex';
+  import ASSIGNMENT_QUERY from '@/graphql/gql/queries/assignmentQuery.gql';
+  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+  import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
+  import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
+  import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
+  import debounce from 'lodash/debounce';
+  import cloneDeep from 'lodash/cloneDeep';
+  import {sanitize} from '@/helpers/text';
+  import {defineAsyncComponent} from 'vue';
 
-const SubmissionForm = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SubmissionForm');
-const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
-const SpellCheck = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SpellCheck');
+  const SubmissionForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SubmissionForm'));
+  const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
+  const SpellCheck = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SpellCheck'));
 
-export default {
-  props: ['value'],
+  export default {
+    props: ['value'],
 
-  components: {
-    Solution,
-    SubmissionForm,
-    SpellCheck,
-  },
-
-  data() {
-    return {
-      assignment: {
-        submission: this.initialSubmission(),
-      },
-      me: {
-        permissions: [],
-      },
-      inputType: 'text',
-      unsaved: false,
-      saving: 0,
-      corrections: '',
-      spellcheckLoading: false,
-    };
-  },
-
-  computed: {
-    ...mapGetters(['scrollToAssignmentId']),
-    final() {
-      return !!this.submission && this.submission.final;
+    components: {
+      Solution,
+      SubmissionForm,
+      SpellCheck,
     },
-    submission() {
-      return this.assignment.submission ? this.assignment.submission : {};
-    },
-    isStudent() {
-      return !this.me.permissions.includes('users.can_manage_school_class_content');
-    },
-    solution() {
+
+    data() {
       return {
-        text: this.assignment.solution,
+        assignment: {
+          submission: this.initialSubmission(),
+        },
+        me: {
+          permissions: [],
+        },
+        inputType: 'text',
+        unsaved: false,
+        saving: 0,
+        corrections: '',
+        spellcheckLoading: false,
       };
     },
-    id() {
-      return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
-    },
-    feedbackText() {
-      let feedback = this.assignment.submission.submissionFeedback;
-      let sanitizedFeedbackText = sanitize(feedback.text);
-      return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
-    },
-  },
 
-  methods: {
-    ...mapActions(['scrollToAssignmentReady']),
-    _save: debounce(function (submission) {
-      this.saving++;
-      this.$apollo
-        .mutate({
+    computed: {
+      ...mapGetters(['scrollToAssignmentId']),
+      final() {
+        return !!this.submission && this.submission.final;
+      },
+      submission() {
+        return this.assignment.submission ? this.assignment.submission : {};
+      },
+      isStudent() {
+        return !this.me.permissions.includes('users.can_manage_school_class_content');
+      },
+      solution() {
+        return {
+          text: this.assignment.solution,
+        };
+      },
+      id() {
+        return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
+      },
+      feedbackText() {
+        let feedback = this.assignment.submission.submissionFeedback;
+        let sanitizedFeedbackText = sanitize(feedback.text);
+        return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
+      },
+    },
+
+    methods: {
+      ...mapActions(['scrollToAssignmentReady']),
+      _save: debounce(function (submission) {
+        this.saving++;
+        this.$apollo.mutate({
           mutation: UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS,
           variables: {
             input: {
@@ -119,14 +138,7 @@ export default {
               },
             },
           },
-          update(
-            store,
-            {
-              data: {
-                updateAssignment: { successful, updatedAssignment },
-              },
-            }
-          ) {
+          update(store, {data: {updateAssignment: {successful, updatedAssignment}}}) {
             try {
               if (successful) {
                 const query = ASSIGNMENT_QUERY;
@@ -137,82 +149,80 @@ export default {
                   submission,
                 });
                 const data = {
-                  assignment,
+                  assignment
                 };
-                store.writeQuery({ query, variables, data });
+                store.writeQuery({query, variables, data});
               }
             } catch (e) {
               console.error(e);
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
           },
-        })
-        .then(() => {
+        }).then(() => {
           this.saving--;
           if (this.saving === 0) {
             this.unsaved = false;
           }
         });
-    }, 500),
-    saveInput: function (answer) {
-      // reset corrections on input
-      this.corrections = '';
-      this.unsaved = true;
-      /*
+      }, 500),
+      saveInput: function (answer) {
+        // reset corrections on input
+        this.corrections = '';
+        this.unsaved = true;
+        /*
           We update the assignment on this component, so the changes are reflected on it. The server does not return
           the updated entity, to prevent the UI to update when the user is entering his input
          */
-      this.assignment.submission.text = answer;
-      this._save(this.assignment.submission);
-    },
-    changeDocumentUrl(documentUrl) {
-      this.assignment.submission.document = documentUrl;
-      this._save(this.assignment.submission);
-    },
-    turnIn() {
-      // reset corrections on turn in
-      this.corrections = '';
-      this.$apollo.mutate({
-        mutation: UPDATE_ASSIGNMENT_MUTATION,
-        variables: {
-          input: {
-            assignment: {
-              id: this.assignment.id,
-              answer: this.assignment.submission.text,
-              document: this.assignment.submission.document,
-              final: true,
+        this.assignment.submission.text = answer;
+        this._save(this.assignment.submission);
+      },
+      changeDocumentUrl(documentUrl) {
+        this.assignment.submission.document = documentUrl;
+        this._save(this.assignment.submission);
+      },
+      turnIn() {
+        // reset corrections on turn in
+        this.corrections = '';
+        this.$apollo.mutate({
+          mutation: UPDATE_ASSIGNMENT_MUTATION,
+          variables: {
+            input: {
+              assignment: {
+                id: this.assignment.id,
+                answer: this.assignment.submission.text,
+                document: this.assignment.submission.document,
+                final: true,
+              },
             },
           },
-        },
-      });
-    },
-    reopen() {
-      this.$apollo.mutate({
-        mutation: UPDATE_ASSIGNMENT_MUTATION,
-        variables: {
-          input: {
-            assignment: {
-              id: this.assignment.id,
-              answer: this.assignment.submission.text,
-              document: this.assignment.submission.document,
-              final: false,
+        });
+      },
+      reopen() {
+        this.$apollo.mutate({
+          mutation: UPDATE_ASSIGNMENT_MUTATION,
+          variables: {
+            input: {
+              assignment: {
+                id: this.assignment.id,
+                answer: this.assignment.submission.text,
+                document: this.assignment.submission.document,
+                final: false,
+              },
             },
           },
-        },
-      });
-    },
-    initialSubmission() {
-      return {
-        text: '',
-        document: '',
-        final: false,
-      };
-    },
-    spellcheck() {
-      let self = this;
-      this.spellcheckLoading = true;
-      this.$apollo
-        .mutate({
+        });
+      },
+      initialSubmission() {
+        return {
+          text: '',
+          document: '',
+          final: false,
+        };
+      },
+      spellcheck() {
+        let self = this;
+        this.spellcheckLoading = true;
+        this.$apollo.mutate({
           mutation: SPELL_CHECK_MUTATION,
           variables: {
             input: {
@@ -220,96 +230,90 @@ export default {
               text: this.assignment.submission.text,
             },
           },
-          update(
-            store,
-            {
-              data: {
-                spellCheck: { results },
-              },
-            }
-          ) {
+          update(store, {data: {spellCheck: {results}}}) {
             self.corrections = results;
           },
-        })
-        .then(() => {
+        }).then(() => {
           this.spellcheckLoading = false;
         });
+      },
     },
-  },
 
-  apollo: {
-    assignment: {
-      query: ASSIGNMENT_QUERY,
-      variables() {
-        return {
-          id: this.value.id,
-        };
+    apollo: {
+      assignment: {
+        query: ASSIGNMENT_QUERY,
+        variables() {
+          return {
+            id: this.value.id,
+          };
+        },
+        result(response) {
+          const data = response.data;
+          this.assignment = cloneDeep(data.assignment);
+          this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
+          if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
+            this.$nextTick(() => this.scrollToAssignmentReady(true));
+          }
+        },
       },
-      result(response) {
-        const data = response.data;
-        this.assignment = cloneDeep(data.assignment);
-        this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
-        if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
-          this.$nextTick(() => this.scrollToAssignmentReady(true));
-        }
+      me: {
+        query: ME_QUERY,
       },
     },
-    me: {
-      query: ME_QUERY,
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_functions.scss';
-@import '@/styles/_mixins.scss';
+  @import '@/styles/_variables.scss';
+  @import '@/styles/_functions.scss';
+  @import '@/styles/_mixins.scss';
 
-.assignment {
-  margin-bottom: 3rem;
-  position: relative;
+  .assignment {
+    margin-bottom: 3rem;
+    position: relative;
 
-  &__title {
-    font-size: toRem(17px);
-    margin-bottom: 1rem;
-  }
-
-  &__main-text {
-    :deep(ul) {
-      @include list-parent;
+    &__title {
+      font-size: toRem(17px);
+      margin-bottom: 1rem;
     }
 
-    :deep(li) {
-      @include list-child;
+    &__main-text {
+      /deep/ ul{
+        @include list-parent
+      }
+
+      /deep/ li {
+        @include list-child;
+      }
     }
-  }
 
-  &__toggle-input-container {
-    display: flex;
-    margin-bottom: 15px;
-  }
-
-  &__toggle-input {
-    border: 0;
-    font-family: $sans-serif-font-family;
-    background: transparent;
-    font-size: toRem(14px);
-    padding: 5px 0;
-    margin-right: 15px;
-    outline: 0;
-    color: $color-silver-dark;
-    cursor: pointer;
-    border-bottom: 2px solid transparent;
-
-    &--active {
-      border-bottom-color: $color-charcoal-dark;
-      color: $color-charcoal-dark;
+    &__toggle-input-container {
+      display: flex;
+      margin-bottom: 15px;
     }
+
+    &__toggle-input {
+      border: 0;
+      font-family: $sans-serif-font-family;
+      background: transparent;
+      font-size: toRem(14px);
+      padding: 5px 0;
+      margin-right: 15px;
+      outline: 0;
+      color: $color-silver-dark;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+
+      &--active {
+        border-bottom-color: $color-charcoal-dark;
+        color: $color-charcoal-dark;
+      }
+    }
+
+    &__feedback {
+      @include regular-text;
+    }
+
   }
 
-  &__feedback {
-    @include regular-text;
-  }
-}
 </style>

client/src/components/content-blocks/assignment/FinalSubmission.vue

@@ -1,99 +1,109 @@
 <template>
-  <div class="final-submission" data-cy="final-submission">
-    <document-block :value="{ url: userInput.document }" class="final-submission__document" v-if="userInput.document" />
+  <div
+    class="final-submission"
+    data-cy="final-submission"
+  >
+    <document-block
+      :value="{url: userInput.document}"
+      class="final-submission__document"
+      v-if="userInput.document"
+    />
     <div class="final-submission__explanation">
       <info-icon class="final-submission__explanation-icon" />
       <span class="final-submission__explanation-text">{{ sharedMsg }}</span>
-      <a class="final-submission__reopen" data-cy="final-submission-reopen" v-if="showReopen" @click="$emit('reopen')"
-        >Bearbeiten</a
-      >
+      <a
+        class="final-submission__reopen"
+        data-cy="final-submission-reopen"
+        v-if="showReopen"
+        @click="$emit('reopen')"
+      >Bearbeiten</a>
     </div>
   </div>
 </template>
 
 <script>
-import { newLineToParagraph } from '@/helpers/text';
-const DocumentBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
+  import {newLineToParagraph} from '@/helpers/text';
+  import {defineAsyncComponent} from 'vue';
+  const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
 
-const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
+  const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
 
-export default {
-  props: {
-    userInput: {
-      type: Object,
-      default: () => ({}),
+  export default {
+    props: {
+      userInput: {
+        type: Object,
+        default: () => ({})
+      },
+      showReopen: {
+        type: Boolean,
+        default: true
+      },
+      sharedMsg: {
+        type: String,
+        default: ''
+      }
     },
-    showReopen: {
-      type: Boolean,
-      default: true,
-    },
-    sharedMsg: {
-      type: String,
-      default: '',
-    },
-  },
 
-  components: {
-    InfoIcon,
-    DocumentBlock,
-  },
-
-  computed: {
-    text() {
-      return newLineToParagraph(this.userInput.text);
+    components: {
+      InfoIcon,
+      DocumentBlock,
     },
-  },
-};
+
+    computed: {
+      text() {
+        return newLineToParagraph(this.userInput.text);
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.final-submission {
-  &__text {
-    background-color: $color-white;
-    @include input-box-shadow;
-    border-radius: $input-border-radius;
-    padding: 15px;
-    font-size: toRem(17px);
-    font-family: $sans-serif-font-family;
-    margin-bottom: 20px;
-    font-weight: $font-weight-regular;
+  .final-submission {
+    &__text {
+      background-color: $color-white;
+      @include input-box-shadow;
+      border-radius: $input-border-radius;
+      padding: 15px;
+      font-size: toRem(17px);
+      font-family: $sans-serif-font-family;
+      margin-bottom: 20px;
+      font-weight: $font-weight-regular;
 
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    hyphens: auto;
-    word-break: break-word;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+      hyphens: auto;
+      word-break: break-word;
+    }
+
+    &__document {
+      margin-bottom: $small-spacing;
+    }
+
+    &__explanation {
+      display: flex;
+      align-items: center;
+    }
+
+    &__explanation-icon {
+      width: 40px;
+      height: 40px;
+      fill: $color-brand;
+      margin-right: 8px;
+    }
+
+    &__explanation-text {
+      color: $color-brand;
+      font-family: $sans-serif-font-family;
+      font-weight: $font-weight-regular;
+      margin-right: $medium-spacing;
+    }
+
+    &__reopen {
+      @include small-text;
+      cursor: pointer;
+      color: $color-charcoal-light;
+    }
   }
-
-  &__document {
-    margin-bottom: $small-spacing;
-  }
-
-  &__explanation {
-    display: flex;
-    align-items: center;
-  }
-
-  &__explanation-icon {
-    width: 40px;
-    height: 40px;
-    fill: $color-brand;
-    margin-right: 8px;
-  }
-
-  &__explanation-text {
-    color: $color-brand;
-    font-family: $sans-serif-font-family;
-    font-weight: $font-weight-regular;
-    margin-right: $medium-spacing;
-  }
-
-  &__reopen {
-    @include small-text;
-    cursor: pointer;
-    color: $color-charcoal-light;
-  }
-}
 </style>

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -10,7 +10,10 @@
       />
     </div>
 
-    <div class="submission-form-container__actions" v-if="!isFinalOrReadOnly">
+    <div
+      class="submission-form-container__actions"
+      v-if="!isFinalOrReadOnly"
+    >
       <button
         class="submission-form-container__submit button button--primary button--white-bg"
         data-cy="submission-form-submit"
@@ -26,7 +29,11 @@
       >
         {{ spellcheckText }}
       </button>
-      <file-upload :document="userInput.document" v-if="allowsDocuments" @change-document-url="changeDocumentUrl" />
+      <file-upload
+        :document="userInput.document"
+        v-if="allowsDocuments"
+        @change-document-url="changeDocumentUrl"
+      />
       <slot />
     </div>
 
@@ -41,112 +48,116 @@
 </template>
 
 <script>
-const SubmissionInput = () => import('@/components/content-blocks/assignment/SubmissionInput.vue');
-const FinalSubmission = () => import('@/components/content-blocks/assignment/FinalSubmission.vue');
-const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
+  import {defineAsyncComponent} from 'vue';
+  const SubmissionInput = defineAsyncComponent(() => import('@/components/content-blocks/assignment/SubmissionInput'));
+  const FinalSubmission = defineAsyncComponent(() => import('@/components/content-blocks/assignment/FinalSubmission'));
+  const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload'));
 
-export default {
-  props: {
-    userInput: Object,
-    saved: Boolean,
-    placeholder: String,
-    action: String,
-    reopen: Function,
-    document: String,
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
-    spellcheck: {
-      type: Boolean,
-      default: false,
-    },
-    spellcheckLoading: {
-      type: Boolean,
-      default: false,
-    },
-    sharedMsg: String,
-  },
 
-  components: {
-    FileUpload,
-    SubmissionInput,
-    FinalSubmission,
-  },
+  export default {
+    props: {
+      userInput: Object,
+      saved: Boolean,
+      placeholder: String,
+      action: String,
+      reopen: Function,
+      document: String,
+      readOnly: {
+        type: Boolean,
+        default: false,
+      },
+      spellcheck: {
+        type: Boolean,
+        default: false,
+      },
+      spellcheckLoading: {
+        type: Boolean,
+        default: false,
+      },
+      sharedMsg: String,
+    },
 
-  computed: {
-    final() {
-      return !!this.userInput && this.userInput.final;
+    components: {
+      FileUpload,
+      SubmissionInput,
+      FinalSubmission,
     },
-    isFinalOrReadOnly() {
-      return this.final || this.readOnly;
-    },
-    allowsDocuments() {
-      return 'document' in this.userInput;
-    },
-    showSpellcheckButton() {
-      return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
-    },
-    spellcheckText() {
-      if (!this.spellcheckLoading) {
-        return 'Rechtschreibung prüfen';
-      } else {
-        return 'Wird geprüft...';
-      }
-    },
-  },
 
-  methods: {
-    reopenSubmission() {
-      this.$emit('reopen');
+    computed: {
+      final() {
+        return !!this.userInput && this.userInput.final;
+      },
+      isFinalOrReadOnly() {
+        return this.final || this.readOnly;
+      },
+      allowsDocuments() {
+        return 'document' in this.userInput;
+      },
+      showSpellcheckButton() {
+        return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
+      },
+      spellcheckText() {
+        if (!this.spellcheckLoading) {
+          return 'Rechtschreibung prüfen';
+        } else {
+          return 'Wird geprüft...';
+        }
+      },
     },
-    saveInput(input) {
-      this.$emit('saveInput', input);
+
+    methods: {
+      reopenSubmission() {
+        this.$emit('reopen');
+      },
+      saveInput(input) {
+        this.$emit('saveInput', input);
+      },
+      changeDocumentUrl(documentUrl) {
+        this.$emit('changeDocumentUrl', documentUrl);
+      },
     },
-    changeDocumentUrl(documentUrl) {
-      this.$emit('changeDocumentUrl', documentUrl);
-    },
-  },
-};
+
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.submission-form-container {
-  @include form-with-border;
+  .submission-form-container {
+    @include form-with-border;
 
-  margin-bottom: $medium-spacing;
+    margin-bottom: $medium-spacing;
 
-  display: none;
-  @include desktop {
-    display: block;
-  }
+    display: none;
+    @include desktop {
+      display: block;
+    }
 
-  &__inputs {
-    margin-bottom: 12px;
-  }
+    &__inputs {
+      margin-bottom: 12px;
+    }
 
-  &__submit {
-    margin-right: $medium-spacing;
-  }
+    &__submit {
+      margin-right: $medium-spacing;
+    }
 
-  &__actions {
-    display: flex;
-    align-items: center;
-  }
+    &__actions {
+      display: flex;
+      align-items: center;
+    }
 
-  &__document {
-    &:hover {
-      cursor: pointer;
+    &__document {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &__spellcheck {
+      /* so the button does not change size when changing the text */
+      width: 235px;
+      text-align: center;
+      display: inline-block;
     }
   }
 
-  &__spellcheck {
-    /* so the button does not change size when changing the text */
-    width: 235px;
-    text-align: center;
-    display: inline-block;
-  }
-}
 </style>

client/src/components/content-blocks/assignment/SubmissionInput.vue

@@ -4,68 +4,75 @@
       :placeholder="placeholder"
       :readonly="readonly"
       :value="inputText"
-      :class="{ 'submission-form__textarea--readonly': readonly }"
+      :class="{'submission-form__textarea--readonly': readonly}"
       data-cy="submission-textarea"
       rows="1"
       class="submission-form__textarea"
       v-auto-grow
       @input="$emit('input', $event.target.value)"
     />
-    <div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
+    <div
+      class="submission-form__save-status submission-form__save-status--saved"
+      v-if="saved"
+    >
       <tick-circle-icon class="submission-form__save-status-icon" />
     </div>
-    <div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved">
+    <div
+      class="submission-form__save-status submission-form__save-status--unsaved"
+      v-if="!saved"
+    >
       <loading-icon class="submission-form__save-status-icon submission-form__saving-icon" />
     </div>
   </div>
 </template>
 
 <script>
-const TickCircleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TickCircleIcon');
-const LoadingIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon');
+  import {defineAsyncComponent} from 'vue';
+  const TickCircleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TickCircleIcon'));
+  const LoadingIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon'));
 
-export default {
-  props: {
-    inputText: String,
-    saved: Boolean,
-    readonly: Boolean,
-    placeholder: {
-      type: String,
-      default: 'Ergebnis erfassen',
+  export default {
+    props: {
+      inputText: String,
+      saved: Boolean,
+      readonly: Boolean,
+      placeholder: {
+        type: String,
+        default: 'Ergebnis erfassen'
+      }
     },
-  },
-  components: {
-    TickCircleIcon,
-    LoadingIcon,
-  },
-};
+    components: {
+      TickCircleIcon,
+      LoadingIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.submission-form {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  .submission-form {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
-  &__textarea {
-    @include borderless-textarea;
+    &__textarea {
+      @include borderless-textarea;
+    }
+
+    &__save-status {
+      position: relative;
+      align-items: center;
+    }
+
+    &__save-status-icon {
+      width: 22px;
+      height: 22px;
+      fill: $color-silver-dark;
+    }
+
+    &__saving-icon {
+      @include spin;
+    }
   }
-
-  &__save-status {
-    position: relative;
-    align-items: center;
-  }
-
-  &__save-status-icon {
-    width: 22px;
-    height: 22px;
-    fill: $color-silver-dark;
-  }
-
-  &__saving-icon {
-    @include spin;
-  }
-}
 </style>

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

@@ -5,7 +5,7 @@
       class="assignment-form__title skillbox-input"
       placeholder="Aufgabentitel"
       @input="$emit('assignment-change-title', $event.target.value, index)"
-    />
+    >
     <textarea
       :value="value.assignment"
       class="assignment-form__exercise-text skillbox-textarea"
@@ -20,43 +20,44 @@
 </template>
 
 <script>
-const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
+  import {defineAsyncComponent} from 'vue';
+  const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
 
-export default {
-  props: ['value', 'index'],
+  export default {
+    props: ['value', 'index'],
 
-  components: {
-    InfoIcon,
-  },
-};
+    components: {
+      InfoIcon
+    }
+  };
 </script>
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.assignment-form {
-  display: grid;
-  grid-auto-rows: auto;
-  grid-row-gap: 13px;
-  grid-template-columns: 40px 1fr;
-  grid-column-gap: 16px;
-  align-items: center;
+  .assignment-form {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-row-gap: 13px;
+    grid-template-columns: 40px 1fr;
+    grid-column-gap: 16px;
+    align-items: center;
 
-  &__title {
-    width: $modal-input-width;
-    grid-column: span 2;
+    &__title {
+      width: $modal-input-width;
+      grid-column: span 2;
+    }
+
+    &__exercise-text {
+      width: $modal-input-width;
+      grid-column: span 2;
+    }
+
+    &__help-icon {
+      width: 40px;
+      height: 40px;
+    }
+
+    &__help-description {
+    }
   }
-
-  &__exercise-text {
-    width: $modal-input-width;
-    grid-column: span 2;
-  }
-
-  &__help-icon {
-    width: 40px;
-    height: 40px;
-  }
-
-  &__help-description {
-  }
-}
 </style>

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

@@ -1,119 +1,133 @@
 <template>
-  <div class="document-form" ref="documentform">
-    <div v-if="!value.url" ref="uploadcare-panel" />
-    <div class="document-form__spinner" v-if="loading">
+  <div
+    class="document-form"
+    ref="documentform"
+  >
+    <div
+      v-if="!value.url"
+      ref="uploadcare-panel"
+    />
+    <div
+      class="document-form__spinner"
+      v-if="loading"
+    >
       <loading-icon class="document-form__loading-icon" />
     </div>
-    <div class="document-form__uploaded" v-if="value.url">
+    <div
+      class="document-form__uploaded"
+      v-if="value.url"
+    >
       <document-icon class="document-form__icon" />
-      <a :href="previewUrl" class="document-form__link" target="_blank">{{ previewLink }}</a>
+      <a
+        :href="previewUrl"
+        class="document-form__link"
+        target="_blank"
+      >{{ previewLink }}</a>
     </div>
   </div>
 </template>
 
 <script>
-import { uploadcare } from '@/helpers/uploadcare';
-import LoadingIcon from '@/components/icons/LoadingIcon';
+  import {uploadcare} from '@/helpers/uploadcare';
+  import LoadingIcon from '@/components/icons/LoadingIcon';
+  import {defineAsyncComponent} from 'vue';
 
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
 
-export default {
-  props: ['value', 'index'],
+  export default {
+    props: ['value', 'index'],
 
-  components: {
-    LoadingIcon,
-    DocumentIcon,
-  },
-
-  data() {
-    return {
-      loading: false,
-    };
-  },
-
-  computed: {
-    previewUrl() {
-      if (this.value && this.value.url) {
-        return this.value.url;
-      }
-      return null;
+    components: {
+      LoadingIcon,
+      DocumentIcon,
     },
-    previewLink() {
-      if (this.value && this.value.url) {
-        const parts = this.value.url.split('/');
-        return parts[parts.length - 1];
-      }
-      return '';
-    },
-  },
 
-  mounted() {
-    uploadcare(
-      this,
-      (url) => {
+    data() {
+      return {
+        loading: false,
+      };
+    },
+
+    computed: {
+      previewUrl() {
+        if (this.value && this.value.url) {
+          return this.value.url;
+        }
+        return null;
+      },
+      previewLink() {
+        if (this.value && this.value.url) {
+          const parts = this.value.url.split('/');
+          return parts[parts.length - 1];
+        }
+        return '';
+      },
+    },
+
+    mounted() {
+      uploadcare(this, url => {
         this.$emit('change-url', url, this.index);
         this.loading = false;
-      },
-      () => {
+      }, () => {
         this.loading = true;
-      }
-    );
-  },
-};
+
+      });
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.document-form {
-  &__uploaded {
-    display: flex;
-    align-items: center;
-  }
-
-  &__link {
-    text-decoration: underline;
-  }
-
-  &__spinner {
-    width: 100%;
-    height: 150px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__loading-icon {
-    @include spin;
-    fill: $color-silver-dark;
-  }
-
-  &__icon {
-    width: 30px;
-    height: 30px;
-    margin-right: $small-spacing;
-  }
-
-  &__file-input {
-    width: 0.1px;
-    height: 0.1px;
-    overflow: hidden;
-    opacity: 0;
-    position: absolute;
-    z-index: -1;
-
-    & + label {
-      cursor: pointer;
-      background-color: $color-silver-light;
-      height: 150px;
+  .document-form {
+    &__uploaded {
       display: flex;
-      width: 100%;
-      justify-content: center;
       align-items: center;
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-regular;
+    }
+
+    &__link {
       text-decoration: underline;
     }
+
+    &__spinner {
+      width: 100%;
+      height: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__loading-icon {
+      @include spin;
+      fill: $color-silver-dark;
+    }
+
+    &__icon {
+      width: 30px;
+      height: 30px;
+      margin-right: $small-spacing;
+    }
+
+    &__file-input {
+      width: 0.1px;
+      height: 0.1px;
+      overflow: hidden;
+      opacity: 0;
+      position: absolute;
+      z-index: -1;
+
+      & + label {
+        cursor: pointer;
+        background-color: $color-silver-light;
+        height: 150px;
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        font-family: $sans-serif-font-family;
+        font-weight: $font-weight-regular;
+        text-decoration: underline;
+      }
+    }
   }
-}
 </style>

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

@@ -1,11 +1,21 @@
 <template>
   <div>
-    <div class="video-form" v-if="!isVimeo && !isYoutube && !isSrf">
+    <div
+      class="video-form"
+      v-if="!isVimeo && !isYoutube && !isSrf"
+    >
       <info-icon class="video-form__help-icon help-text__icon" />
       <p class="video-form__help-description help-text__description">
-        Sie können Videos auf
-        <a class="video-form__platform-link help-text__link" href="https://youtube.com/" target="_blank">Youtube</a>
-        oder <a class="video-form__platform-link help-text__link" href="https://vimeo.com/" target="_blank">Vimeo</a>
+        Sie können Videos auf <a
+          class="video-form__platform-link help-text__link"
+          href="https://youtube.com/"
+          target="_blank"
+        >Youtube</a>
+        oder <a
+          class="video-form__platform-link help-text__link"
+          href="https://vimeo.com/"
+          target="_blank"
+        >Vimeo</a>
         hochladen und anschliessen einen Link hier einfügen.
       </p>
 
@@ -14,7 +24,7 @@
         class="video-form__video-link skillbox-input"
         placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ"
         @input="$emit('change-url', $event.target.value, index)"
-      />
+      >
     </div>
 
     <div v-if="isYoutube">
@@ -30,64 +40,67 @@
 </template>
 
 <script>
-import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
-import VimeoEmbed from '@/components/videos/VimeoEmbed';
-import SrfEmbed from '@/components/videos/SrfEmbed';
-import { isVimeoUrl, isYoutubeUrl, isSrfUrl } from '@/helpers/video';
-const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
+  import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
+  import VimeoEmbed from '@/components/videos/VimeoEmbed';
+  import SrfEmbed from '@/components/videos/SrfEmbed';
+  import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';
+  import {defineAsyncComponent} from 'vue';
+  const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
 
-export default {
-  props: ['value', 'index'],
+  export default {
+    props: ['value', 'index'],
 
-  components: {
-    InfoIcon,
-    YoutubeEmbed,
-    VimeoEmbed,
-    SrfEmbed,
-  },
+    components: {
+      InfoIcon,
+      YoutubeEmbed,
+      VimeoEmbed,
+      SrfEmbed
+    },
 
-  computed: {
-    isYoutube() {
-      return isYoutubeUrl(this.value.url);
-    },
-    isVimeo() {
-      return isVimeoUrl(this.value.url);
-    },
-    isSrf() {
-      return isSrfUrl(this.value.url);
-    },
-  },
-};
+    computed: {
+      isYoutube() {
+        return isYoutubeUrl(this.value.url);
+      },
+      isVimeo() {
+        return isVimeoUrl(this.value.url);
+      },
+      isSrf() {
+        return isSrfUrl(this.value.url);
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_functions.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
 
-.video-form {
-  display: grid;
-  grid-auto-rows: auto;
-  grid-template-columns: 40px 1fr;
-  grid-column-gap: 16px;
-  grid-row-gap: 20px;
-  align-items: center;
+  .video-form {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 40px 1fr;
+    grid-column-gap: 16px;
+    grid-row-gap: 20px;
+    align-items: center;
 
-  &__help-icon {
+    &__help-icon {
+
+    }
+
+    &__help-description {
+
+    }
+
+    &__platform-link {
+      font-family: $sans-serif-font-family;
+      text-decoration: underline;
+      font-weight: $font-weight-regular;
+      font-size: toRem(17px);
+    }
+
+    &__video-link {
+      grid-column: 1 / span 2;
+      width: $modal-input-width
+    }
   }
-
-  &__help-description {
-  }
-
-  &__platform-link {
-    font-family: $sans-serif-font-family;
-    text-decoration: underline;
-    font-weight: $font-weight-regular;
-    font-size: toRem(17px);
-  }
-
-  &__video-link {
-    grid-column: 1 / span 2;
-    width: $modal-input-width;
-  }
-}
 </style>

client/src/components/instruments/FilterEntry.vue

@@ -1,164 +1,176 @@
 <template>
-  <a :class="typeClass" class="filter-entry" data-cy="filter-entry" :style="categoryStyle">
+  <a
+    :class="typeClass"
+    class="filter-entry"
+    data-cy="filter-entry"
+    :style="categoryStyle"
+  >
     <span class="filter-entry__text">{{ text }}</span>
-    <span :style="activeStyle" class="filter-entry__icon-wrapper">
-      <chevron-right :style="{ fill: category.foreground }" class="filter-entry__icon" />
+    <span
+      :style="activeStyle"
+      class="filter-entry__icon-wrapper"
+    >
+      <chevron-right
+        :style="{fill: category.foreground}"
+        class="filter-entry__icon"
+      />
     </span>
+
   </a>
 </template>
 
 <script>
-import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+  import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+  import {defineAsyncComponent} from 'vue';
+  const ChevronRight = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight'));
 
-const ChevronRight = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight');
-
-export default {
-  props: {
-    text: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-      default: '',
-    },
-    isCategory: {
-      type: Boolean,
-      default: false,
-    },
-    category: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  components: {
-    ChevronRight,
-  },
-
-  apollo: {
-    instrumentFilter: {
-      query: INSTRUMENT_FILTER_QUERY,
-    },
-  },
-
-  data() {
-    return {
-      instrumentFilter: {
-        currentFilter: '',
+  export default {
+    props: {
+      text: {
+        type: String,
+        required: true,
       },
-    };
-  },
+      id: {
+        type: String,
+        default: '',
+      },
+      isCategory: {
+        type: Boolean,
+        default: false,
+      },
+      category: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
 
-  computed: {
-    isActive() {
-      if (!this.instrumentFilter.currentFilter) {
-        return this.id === '';
-      }
-      // eslint-disable-next-line
-      const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
-      return this.id === identifier;
+    components: {
+      ChevronRight,
     },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    activeStyle() {
-      if (this.isActive) {
-        return {
-          backgroundColor: this.category.background,
-        };
-      }
-      return {};
+
+    apollo: {
+      instrumentFilter: {
+        query: INSTRUMENT_FILTER_QUERY,
+      },
     },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    categoryStyle() {
-      if (this.isCategory) {
-        return {
-          color: this.category.foreground,
-        };
-      }
-      return {};
-    },
-    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    typeClass() {
+
+    data() {
       return {
-        'filter-entry--active': this.isActive,
-        'filter-entry--category': this.isCategory,
+        instrumentFilter: {
+          currentFilter: '',
+        },
       };
     },
-  },
-};
+
+    computed: {
+      isActive() {
+        if (!this.instrumentFilter.currentFilter) {
+          return this.id === '';
+        }
+        // eslint-disable-next-line
+        const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
+        return this.id === identifier;
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      activeStyle() {
+        if (this.isActive) {
+          return {
+            backgroundColor: this.category.background,
+          };
+        }
+        return {};
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      categoryStyle() {
+        if (this.isCategory) {
+          return {
+            color: this.category.foreground,
+          };
+        }
+        return {};
+      },
+      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+      typeClass() {
+        return {
+          'filter-entry--active': this.isActive,
+          'filter-entry--category': this.isCategory,
+        };
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.filter-entry {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-
-  &__text {
-    @include sub-heading;
-    line-height: 1.5;
-    color: inherit;
-  }
-
-  &__icon-wrapper {
+  .filter-entry {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
-    height: 20px;
-    width: 20px;
-    border-radius: 10px;
-  }
+    cursor: pointer;
 
-  &__icon {
-    width: 10px;
-    height: 10px;
-  }
-
-  $root: &;
-
-  @mixin filter-block($color) {
-    &#{$root}--category {
-      color: $color;
+    &__text {
+      @include sub-heading;
+      line-height: 1.5;
+      color: inherit;
     }
 
-    &#{$root}--active {
-      #{$root}__icon-wrapper {
-        background-color: $color;
+    &__icon-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 20px;
+      width: 20px;
+      border-radius: 10px;
+    }
+
+    &__icon {
+      width: 10px;
+      height: 10px;
+    }
+
+    $root: &;
+
+    @mixin filter-block($color) {
+      &#{$root}--category {
+        color: $color;
+      }
+
+      &#{$root}--active {
+        #{$root}__icon-wrapper {
+          background-color: $color;
+        }
+      }
+
+      #{$root}__icon {
+        fill: $color;
       }
     }
 
-    #{$root}__icon {
-      fill: $color;
-    }
-  }
-
-  &--language-communication {
-    @include filter-block($color-accent-1-dark);
-  }
-
-  &--society {
-    @include filter-block($color-accent-2-dark);
-  }
-
-  &--interdisciplinary {
-    @include filter-block($color-accent-4-dark);
-  }
-
-  &--active {
-    #{$root}__text {
-      font-weight: 600;
+    &--language-communication {
+      @include filter-block($color-accent-1-dark);
     }
 
-    #{$root}__icon-wrapper {
-      background-color: black;
+    &--society {
+      @include filter-block($color-accent-2-dark);
     }
 
-    #{$root}__icon {
-      fill: white;
+    &--interdisciplinary {
+      @include filter-block($color-accent-4-dark);
+    }
+
+    &--active {
+      #{$root}__text {
+        font-weight: 600;
+      }
+
+      #{$root}__icon-wrapper {
+        background-color: black;
+      }
+
+      #{$root}__icon {
+        fill: white;
+      }
     }
   }
-}
 </style>

client/src/components/modals/index.js

@@ -1,11 +1,12 @@
-const Modal = () => import(/* webpackChunkName: "modals" */ '@/components/Modal');
-const FullscreenImage = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenImage');
-const FullscreenInfographic = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenInfographic');
-const FullscreenVideo = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenVideo');
-const DeactivatePerson = () => import(/* webpackChunkName: "modals" */ '@/components/profile/DeactivatePerson');
-const SnapshotCreated = () => import(/* webpackChunkName: "modals" */ '@/components/modules/SnapshotCreated');
-const ChangeVisibility = () => import(/* webpackChunkName: "modals" */ '@/components/rooms/ChangeVisibility');
-const Confirm = () => import(/* webpackChunkName: "modals" */ '@/components/modals/Confirm');
+import {defineAsyncComponent} from 'vue';
+const Modal = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/Modal'));
+const FullscreenImage = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/FullscreenImage'));
+const FullscreenInfographic = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/FullscreenInfographic'));
+const FullscreenVideo = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/FullscreenVideo'));
+const DeactivatePerson = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/profile/DeactivatePerson'));
+const SnapshotCreated = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/modules/SnapshotCreated'));
+const ChangeVisibility = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/rooms/ChangeVisibility'));
+const Confirm = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/modals/Confirm'));
 
 export default {
   Modal,

client/src/components/notes/BookmarkActions.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="bookmark-actions" v-if="!editMode">
+  <div
+    class="bookmark-actions"
+    v-if="!editMode"
+  >
     <a
-      :class="{ 'bookmark-actions__action--bookmarked': bookmarked }"
+      :class="{'bookmark-actions__action--bookmarked': bookmarked}"
       class="bookmark-actions__action bookmark-actions__bookmark"
       data-cy="bookmark-action"
       @click="$emit('bookmark')"
@@ -29,73 +32,74 @@
 </template>
 
 <script>
-const BookmarkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BookmarkIcon');
-const AddNoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddNoteIcon');
-const NoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/NoteIcon');
+  import {defineAsyncComponent} from 'vue';
+  const BookmarkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BookmarkIcon'));
+  const AddNoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddNoteIcon'));
+  const NoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/NoteIcon'));
 
-export default {
-  props: {
-    bookmarked: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      bookmarked: {
+        type: Boolean,
+        default: false
+      },
+      note: {
+        type: [Object, Boolean],
+        default: false
+      },
+      editMode: {
+        type: Boolean,
+        default: false
+      }
     },
-    note: {
-      type: [Object, Boolean],
-      default: false,
+    components: {
+      BookmarkIcon,
+      AddNoteIcon,
+      NoteIcon
     },
-    editMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    BookmarkIcon,
-    AddNoteIcon,
-    NoteIcon,
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.bookmark-actions {
-  height: 100%;
-  min-height: 60px;
+  .bookmark-actions {
+    height: 100%;
+    min-height: 60px;
 
-  padding: 0 2 * $large-spacing;
-  position: absolute;
-  right: -5 * $large-spacing;
+    padding: 0 2*$large-spacing;
+    position: absolute;
+    right: -5*$large-spacing;
 
-  display: none;
+    display: none;
 
-  @include desktop {
-    display: flex;
-  }
+    @include desktop {
+      display: flex;
+    }
 
-  flex-direction: column;
-  align-content: center;
+    flex-direction: column;
+    align-content: center;
 
-  &__action {
-    opacity: 0;
-    transition: opacity 0.3s;
-    cursor: pointer;
-    width: 26px;
-    display: flex;
-    justify-content: center;
+    &__action {
+      opacity: 0;
+      transition: opacity 0.3s;
+      cursor: pointer;
+      width: 26px;
+      display: flex;
+      justify-content: center;
 
-    &--bookmarked,
-    &--noted {
-      opacity: 1;
+      &--bookmarked, &--noted {
+        opacity: 1;
+      }
+    }
+
+    $parent: &;
+
+    &:hover {
+      #{$parent}__action {
+        opacity: 1;
+      }
     }
   }
 
-  $parent: &;
-
-  &:hover {
-    #{$parent}__action {
-      opacity: 1;
-    }
-  }
-}
 </style>

client/src/components/objective-groups/ObjectiveForm.vue

@@ -6,36 +6,40 @@
       placeholder="Lernziel erfassen..."
       @input="$emit('input', $event)"
     />
-    <a class="icon-button" @click="$emit('delete')">
+    <a
+      class="icon-button"
+      @click="$emit('delete')"
+    >
       <trash-icon class="icon-button__icon icon-button__icon--subtle" />
     </a>
   </div>
 </template>
 
 <script>
-import ModalInput from '@/components/ModalInput';
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+  import ModalInput from '@/components/ModalInput';
+  import {defineAsyncComponent} from 'vue';
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
 
-export default {
-  props: ['objective'],
+  export default {
+    props: ['objective'],
 
-  components: {
-    ModalInput,
-    TrashIcon,
-  },
-};
+    components: {
+      ModalInput,
+      TrashIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "@/styles/_variables.scss";
 
-.objective-form {
-  display: grid;
-  grid-template-columns: 1fr 50px;
-  margin-bottom: 10px;
+  .objective-form {
+    display: grid;
+    grid-template-columns: 1fr 50px;
+    margin-bottom: 10px;
 
-  &__input {
-    width: $modal-input-width;
+    &__input {
+      width: $modal-input-width;
+    }
   }
-}
 </style>

client/src/components/portfolio/AddProjectEntry.vue

@@ -1,45 +1,49 @@
 <template>
-  <a class="add-project-entry" @click="addProjectEntry">
+  <a
+    class="add-project-entry"
+    @click="addProjectEntry"
+  >
     <plus-icon class="add-project-entry__icon" />
     <span class="add-project-entry__text">Beitrag erfassen</span>
   </a>
 </template>
 
 <script>
-const PlusIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PlusIcon');
-export default {
-  props: ['project'],
-  components: { PlusIcon },
+  import {defineAsyncComponent} from 'vue';
+  const PlusIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon'));
+  export default {
+    props: ['project'],
+    components: {PlusIcon},
 
-  methods: {
-    addProjectEntry() {
-      this.$store.dispatch('addProjectEntry', this.project);
-    },
-  },
-};
+    methods: {
+      addProjectEntry() {
+        this.$store.dispatch('addProjectEntry', this.project);
+      }
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.add-project-entry {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid $color-brand;
-  border-radius: $default-border-radius;
-  cursor: pointer;
+  .add-project-entry {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid $color-brand;
+    border-radius: $default-border-radius;
+    cursor: pointer;
 
-  &__icon {
-    width: 20px;
-    height: 20px;
-    fill: $color-brand;
-    margin-right: $small-spacing;
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-brand;
+      margin-right: $small-spacing;
+    }
+
+    &__text {
+      @include navigation-link;
+      color: $color-brand;
+    }
   }
-
-  &__text {
-    @include navigation-link;
-    color: $color-brand;
-  }
-}
 </style>

client/src/components/portfolio/PortfolioOnboarding.vue

@@ -1,9 +1,25 @@
 <template>
   <div class="portfolio-onboarding">
-    <h1 class="portfolio-onboarding__heading" data-cy="page-title">Portfolio</h1>
-    <portfolio-illustration data-cy="portfolio-onboarding-illustration" class="portfolio-onboarding__illustration" />
-    <h2 class="portfolio-onboarding__subheading" data-cy="portfolio-onboarding-subtitle">Woran denken Sie gerade?</h2>
-    <p class="portfolio-onboarding__text" data-cy="portfolio-onboarding-text">
+    <h1
+      class="portfolio-onboarding__heading"
+      data-cy="page-title"
+    >
+      Portfolio
+    </h1>
+    <portfolio-illustration
+      data-cy="portfolio-onboarding-illustration"
+      class="portfolio-onboarding__illustration"
+    />
+    <h2
+      class="portfolio-onboarding__subheading"
+      data-cy="portfolio-onboarding-subtitle"
+    >
+      Woran denken Sie gerade?
+    </h2>
+    <p
+      class="portfolio-onboarding__text"
+      data-cy="portfolio-onboarding-text"
+    >
       Hier können Sie Projekte erstellen, um Ihre Gedanken festzuhalten oder Ihre Arbeit zu dokumentieren.
     </p>
 
@@ -12,33 +28,34 @@
 </template>
 
 <script>
-const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration.vue');
-const CreateProjectButton = () => import('@/components/portfolio/CreateProjectButton.vue');
-export default {
-  components: { CreateProjectButton, PortfolioIllustration },
-};
+  import {defineAsyncComponent} from 'vue';
+  const PortfolioIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration'));
+  const CreateProjectButton = defineAsyncComponent(() => import('@/components/portfolio/CreateProjectButton'));
+  export default {
+    components: {CreateProjectButton, PortfolioIllustration},
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.portfolio-onboarding {
-  @include onboarding-page;
+  .portfolio-onboarding {
+    @include onboarding-page;
 
-  &__heading {
-    @include heading-1;
+    &__heading {
+      @include heading-1;
+    }
+
+    &__subheading {
+      @include heading-2;
+    }
+
+    &__illustration {
+      @include onboarding-illustration;
+    }
+
+    &__text {
+      @include onboarding-text;
+    }
   }
-
-  &__subheading {
-    @include heading-2;
-  }
-
-  &__illustration {
-    @include onboarding-illustration;
-  }
-
-  &__text {
-    @include onboarding-text;
-  }
-}
 </style>

client/src/components/portfolio/ProjectActions.vue

@@ -1,20 +1,48 @@
 <template>
-  <div class="project-actions" data-cy="project-actions">
-    <a class="project-actions__more-link" @click.stop="toggleMenu">
+  <div
+    class="project-actions"
+    data-cy="project-actions"
+  >
+    <a
+      class="project-actions__more-link"
+      @click.stop="toggleMenu"
+    >
       <ellipses />
     </a>
-    <widget-popover class="project-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
+    <widget-popover
+      class="project-actions__popover"
+      v-if="showMenu"
+      @hide-me="showMenu = false"
+    >
       <li class="popover-links__link">
-        <a data-cy="delete-project" @click="deleteProject(slug)">Projekt löschen</a>
+        <a
+          data-cy="delete-project"
+          @click="deleteProject(slug)"
+        >Projekt löschen</a>
       </li>
       <li class="popover-links__link">
-        <a data-cy="edit-project" @click="editProject(slug)">Projekt bearbeiten</a>
+        <a
+          data-cy="edit-project"
+          @click="editProject(slug)"
+        >Projekt bearbeiten</a>
       </li>
-      <li class="popover-links__link" v-if="!final && shareButtons">
-        <a data-cy="share-project" @click="updateProjectShareState(slug, true)">Projekt teilen</a>
+      <li
+        class="popover-links__link"
+        v-if="!final && shareButtons"
+      >
+        <a
+          data-cy="share-project"
+          @click="updateProjectShareState(slug, true)"
+        >Projekt teilen</a>
       </li>
-      <li class="popover-links__link" v-if="final && shareButtons">
-        <a data-cy="unshare-project" @click="updateProjectShareState(slug, false)">Projekt nicht mehr teilen</a>
+      <li
+        class="popover-links__link"
+        v-if="final && shareButtons"
+      >
+        <a
+          data-cy="unshare-project"
+          @click="updateProjectShareState(slug, false)"
+        >Projekt nicht mehr teilen</a>
       </li>
     </widget-popover>
   </div>
@@ -27,8 +55,9 @@ import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
 import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
 
 import updateProjectShareState from '@/mixins/update-project-share-state';
-import { removeAtIndex } from '@/graphql/immutable-operations.ts';
-const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue');
+import {removeAtIndex} from '@/graphql/immutable-operations.ts';
+import {defineAsyncComponent} from 'vue';
+const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue'));
 
 export default {
   props: {
@@ -64,50 +93,42 @@ export default {
       this.showMenu = !this.showMenu;
     },
     editProject(slug) {
-      this.$router.push({ name: 'edit-project', params: { slug } });
+      this.$router.push({name: 'edit-project', params: {slug}});
     },
     deleteProject(slug) {
-      this.$apollo
-        .mutate({
-          mutation: DELETE_PROJECT_MUTATION,
-          variables: {
-            input: {
-              slug,
-            },
+      this.$apollo.mutate({
+        mutation: DELETE_PROJECT_MUTATION,
+        variables: {
+          input: {
+            slug,
           },
-          update(
-            store,
-            {
-              data: {
-                deleteProject: { success },
-              },
-            }
-          ) {
-            if (success) {
-              const { projects: prevProjects } = store.readQuery({ query: PROJECTS_QUERY });
+        },
+        update(store, {data: {deleteProject: {success}}}) {
+          if (success) {
+            const {projects: prevProjects} = store.readQuery({query: PROJECTS_QUERY});
 
-              if (prevProjects) {
-                let index = prevProjects.findIndex((project) => project.slug === slug);
-                const projects = removeAtIndex(prevProjects, index);
 
-                const data = {
-                  projects,
-                };
-                store.writeQuery({ query: PROJECTS_QUERY, data });
-              }
+            if (prevProjects) {
+              let index = prevProjects.findIndex(project => project.slug === slug);
+              const projects = removeAtIndex(prevProjects, index);
+
+              const data = {
+                projects
+              };
+              store.writeQuery({query: PROJECTS_QUERY, data});
             }
-          },
-        })
-        .then(() => {
-          this.$router.push('/portfolio');
-        });
+          }
+        },
+      }).then(() => {
+        this.$router.push('/portfolio');
+      });
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_helpers.scss';
+@import "~styles/_helpers.scss";
 
 .project-actions {
   position: relative;

client/src/components/portfolio/ProjectEntry.vue

@@ -1,22 +1,44 @@
 <template>
-  <div class="project-entry" data-cy="project-entry">
-    <more-options-widget class="project-entry__more" data-cy="project-entry-more" v-if="!readOnly">
+  <div
+    class="project-entry"
+    data-cy="project-entry"
+  >
+    <more-options-widget
+      class="project-entry__more"
+      data-cy="project-entry-more"
+      v-if="!readOnly"
+    >
       <li class="popover-links__link">
-        <a data-cy="edit-project-entry" @click="editProjectEntry()">Eintrag bearbeiten</a>
+        <a
+          data-cy="edit-project-entry"
+          @click="editProjectEntry()"
+        >Eintrag bearbeiten</a>
       </li>
       <li class="popover-links__link">
-        <a data-cy="delete-project-entry" @click="deleteProjectEntry()">Eintrag löschen</a>
+        <a
+          data-cy="delete-project-entry"
+          @click="deleteProjectEntry()"
+        >Eintrag löschen</a>
       </li>
     </more-options-widget>
 
-    <h3 class="project-entry__heading" data-cy="project-entry-date">
+    <h3
+      class="project-entry__heading"
+      data-cy="project-entry-date"
+    >
       {{ createdDateTime }}
     </h3>
-    <p class="project-entry__paragraph" data-cy="project-entry-activity">
+    <p
+      class="project-entry__paragraph"
+      data-cy="project-entry-activity"
+    >
       {{ description }}
     </p>
-    <p class="project-entry__paragraph" v-if="documentUrl">
-      <document-block :value="{ url: documentUrl }" />
+    <p
+      class="project-entry__paragraph"
+      v-if="documentUrl"
+    >
+      <document-block :value="{url: documentUrl}" />
     </p>
     <div class="project-entry__date">
       {{ createdDate }}
@@ -25,116 +47,110 @@
 </template>
 
 <script>
-import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
 
-import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
-import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
-import { dateFilter, dateTimeFilter } from '@/filters/date-filter';
-import { removeAtIndex } from '@/graphql/immutable-operations.ts';
+  import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
+  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+  import {dateFilter, dateTimeFilter} from '@/filters/date-filter';
+  import {removeAtIndex} from '@/graphql/immutable-operations.ts';
+  import {defineAsyncComponent} from 'vue';
+  const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
 
-const DocumentBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
 
-export default {
-  props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
-  components: {
-    DocumentBlock,
-    MoreOptionsWidget,
-  },
-
-  computed: {
-    createdDate() {
-      return dateFilter(this.created);
+  export default {
+    props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
+    components: {
+      DocumentBlock,
+      MoreOptionsWidget,
     },
-    createdDateTime() {
-      return dateTimeFilter(this.created);
-    },
-  },
 
-  methods: {
-    editProjectEntry() {
-      this.$store.dispatch('editProjectEntry', this.id);
+    computed: {
+      createdDate() {
+        return dateFilter(this.created);
+      },
+      createdDateTime() {
+        return dateTimeFilter(this.created);
+      },
     },
-    deleteProjectEntry() {
-      const projectEntry = this; // otherwise we run into scope errors
-      this.$apollo.mutate({
-        mutation: DELETE_PROJECT_ENTRY_MUTATION,
-        variables: {
-          input: {
-            id: this.id,
-          },
-        },
-        update(
-          store,
-          {
-            data: {
-              deleteProjectEntry: { success },
+
+    methods: {
+      editProjectEntry() {
+        this.$store.dispatch('editProjectEntry', this.id);
+      },
+      deleteProjectEntry() {
+        const projectEntry = this; // otherwise we run into scope errors
+        this.$apollo.mutate({
+          mutation: DELETE_PROJECT_ENTRY_MUTATION,
+          variables: {
+            input: {
+              id: this.id,
             },
-          }
-        ) {
-          if (success) {
-            const query = PROJECT_QUERY;
-            const variables = {
-              slug: projectEntry.$route.params.slug,
-            };
-            const { project } = store.readQuery({ query, variables });
-            if (project) {
-              const index = project.entries.findIndex((entry) => entry.id === projectEntry.id);
-              const entries = removeAtIndex(project.entries, index);
-              const data = {
-                project: {
-                  ...project,
-                  entries,
-                },
+          },
+          update(store, {data: {deleteProjectEntry: {success}}}) {
+            if (success) {
+              const query = PROJECT_QUERY;
+              const variables = {
+                slug: projectEntry.$route.params.slug,
               };
-              store.writeQuery({ query, variables, data });
+              const {project} = store.readQuery({query, variables});
+              if (project) {
+                const index = project.entries.findIndex(entry => entry.id === projectEntry.id);
+                const entries = removeAtIndex(project.entries, index);
+                const data = {
+                  project: {
+                    ...project,
+                    entries,
+                  },
+                };
+                store.writeQuery({query, variables, data});
+              }
             }
-          }
-        },
-      });
+          },
+        });
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.project-entry {
-  background-color: $color-white;
-  border-radius: $default-border-radius;
-  padding: 30px 20px;
-  position: relative;
+  .project-entry {
+    background-color: $color-white;
+    border-radius: $default-border-radius;
+    padding: 30px 20px;
+    position: relative;
 
-  &__heading {
-    font-size: toRem(22px);
-    margin-bottom: 6px;
-  }
-
-  &__paragraph {
-    margin-bottom: 30px;
-    white-space: pre-line;
-  }
-
-  &__date {
-    font-family: $sans-serif-font-family;
-    color: $color-silver-dark;
-    font-size: toRem(17px);
-  }
-
-  &__link {
-    cursor: pointer;
-    @include heading-4;
-  }
-
-  &__more {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    display: none;
-    @include desktop {
-      display: block;
+    &__heading {
+      font-size: toRem(22px);
+      margin-bottom: 6px;
     }
+
+    &__paragraph {
+      margin-bottom: 30px;
+      white-space: pre-line;
+    }
+
+    &__date {
+      font-family: $sans-serif-font-family;
+      color: $color-silver-dark;
+      font-size: toRem(17px);
+    }
+
+    &__link {
+      cursor: pointer;
+      @include heading-4;
+    }
+
+    &__more {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      display: none;
+      @include desktop {
+        display: block;
+      }
+    }
+
   }
-}
 </style>

client/src/components/portfolio/ProjectEntryForm.vue

@@ -1,7 +1,12 @@
 <template>
   <modal :hide-header="false">
     <template #header>
-      <h2 class="project-entry-modal__heading" data-cy="modal-title">Beitrag erfassen</h2>
+      <h2
+        class="project-entry-modal__heading"
+        data-cy="modal-title"
+      >
+        Beitrag erfassen
+      </h2>
     </template>
 
     <div class="project-entry-modal">
@@ -30,26 +35,6 @@
         </div>
       </div>
     </div>
-<<<<<<< HEAD
-    <div slot="footer">
-      <a class="button button--primary" data-cy="modal-save-button" @click="$emit('save', localProjectEntry)"
-        >Speichern</a
-      >
-      <a class="button" @click="$emit('hide')">Abbrechen</a>
-    </div>
-||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
-    <div slot="footer">
-      <a
-        class="button button--primary"
-        data-cy="modal-save-button"
-        @click="$emit('save', localProjectEntry)"
-      >Speichern</a>
-      <a
-        class="button"
-        @click="$emit('hide')"
-      >Abbrechen</a>
-    </div>
-=======
     <template #footer>
       <a
         class="button button--primary"
@@ -61,105 +46,96 @@
         @click="$emit('hide')"
       >Abbrechen</a>
     </template>
->>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
   </modal>
 </template>
 
 <script>
-import Modal from '@/components/Modal';
-import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
+  import Modal from '@/components/Modal';
+  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
 
-<<<<<<< HEAD
-import { PROJECT_ENTRY_TEMPLATE } from '@/consts/strings.consts';
-const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
-||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
-  import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
-  const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
-=======
   import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
 
-  const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
->>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
+  import {defineAsyncComponent} from 'vue';
+  const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload'));
 
-export default {
-  props: {
-    projectEntry: {
-      type: Object,
-      default: null,
+  export default {
+    props: {
+      projectEntry: {
+        type: Object,
+        default: null,
+      },
     },
-  },
 
-  components: {
-    FileUpload,
-    ButtonWithIconAndText,
-    Modal,
-  },
+    components: {
+      FileUpload,
+      ButtonWithIconAndText,
+      Modal,
+    },
 
-  data() {
-    return {
-      localProjectEntry: Object.assign(
-        {},
-        {
+    data() {
+      return {
+        localProjectEntry: Object.assign({}, {
           ...this.projectEntry,
-        }
-      ),
-    };
-  },
+        }),
+      };
+    },
 
-  methods: {
-    setDocumentUrl(url) {
-      this.localProjectEntry.documentUrl = url;
+    methods: {
+      setDocumentUrl(url) {
+        this.localProjectEntry.documentUrl = url;
+      },
+      useTemplate() {
+        this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
+      },
     },
-    useTemplate() {
-      this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
-    },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.project-entry-modal {
-  display: flex;
-  flex-direction: column;
-
-  &__form-field {
-    @include inputstyle;
-    padding: 0;
+  .project-entry-modal {
     display: flex;
     flex-direction: column;
-    grid-template-rows: auto 1rem;
-    grid-template-columns: 1fr 1fr;
-    width: 100%;
-  }
 
-  &__textarea {
-    @include auto-grow;
-    border: 0;
-    min-height: 400px;
-    padding: $medium-spacing;
-  }
-
-  &__buttons {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: $medium-spacing;
-  }
-
-  &__button {
-    @include regular-text;
-
-    &--template {
+    &__form-field {
+      @include inputstyle;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      grid-template-rows: auto 1rem;
+      grid-template-columns: 1fr 1fr;
+      width: 100%;
     }
 
-    &--document {
+    &__textarea {
+      @include auto-grow;
+      border: 0;
+      min-height: 400px;
+      padding: $medium-spacing;
     }
+
+    &__buttons {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      padding: $medium-spacing;
+    }
+
+    &__button {
+      @include regular-text;
+
+      &--template {
+      }
+
+      &--document {
+      }
+    }
+
+    &__heading {
+      @include heading-3;
+      margin-bottom: 0;
+    }
+
   }
 
-  &__heading {
-    @include heading-3;
-    margin-bottom: 0;
-  }
-}
 </style>

client/src/components/portfolio/ShareLink.vue

@@ -9,35 +9,36 @@
 </template>
 
 <script>
-const ShareIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ShareIcon');
+  import {defineAsyncComponent} from 'vue';
+  const ShareIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ShareIcon'));
 
-export default {
-  props: {
-    final: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      final: {
+        type: Boolean,
+        default: false,
+      },
     },
-  },
-  components: { ShareIcon },
-};
+    components: {ShareIcon},
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.share-icon {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+  .share-icon {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 
-  &__icon {
-    width: 20px;
-    height: 20px;
-    margin-right: $small-spacing;
+    &__icon {
+      width: 20px;
+      height: 20px;
+      margin-right: $small-spacing;
+    }
+
+    &__text {
+      @include large-link;
+    }
   }
-
-  &__text {
-    @include large-link;
-  }
-}
 </style>

client/src/components/profile/ActivityEntry.vue

@@ -7,60 +7,64 @@
       <slot />
     </div>
 
-    <div class="activity-entry__link" @click="$emit('link')">
+    <div
+      class="activity-entry__link"
+      @click="$emit('link')"
+    >
       <chevron-right class="activity-entry__icon" />
     </div>
   </div>
 </template>
 
 <script>
-const ChevronRight = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight');
+  import {defineAsyncComponent} from 'vue';
+  const ChevronRight = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight'));
 
-export default {
-  props: ['title'],
+  export default {
+    props: ['title'],
 
-  components: {
-    ChevronRight,
-  },
-};
+    components: {
+      ChevronRight
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.activity-entry {
-  padding: $small-spacing 0;
-  border-bottom: 1px solid $color-silver;
-  display: flex;
-  justify-content: space-between;
-
-  &__title {
-    @include small-text;
-    // todo: make style definition for small text and silver color
-    color: $color-silver-dark;
-    margin-bottom: 0;
-  }
-
-  &__content {
-    flex-grow: 1;
-    @include regular-text;
-    line-height: $default-line-height;
-  }
-  &__link {
+  .activity-entry {
+    padding: $small-spacing 0;
+    border-bottom: 1px solid $color-silver;
     display: flex;
-    flex-grow: 0;
-    align-content: center;
-    cursor: pointer;
-  }
+    justify-content: space-between;
 
-  &__icon {
-    fill: $color-brand;
-    width: 30px;
-  }
+    &__title {
+      @include small-text;
+      // todo: make style definition for small text and silver color
+      color: $color-silver-dark;
+      margin-bottom: 0;
+    }
 
-  :deep(p) {
-    @include regular-text;
+    &__content {
+      flex-grow: 1;
+      @include regular-text;
+      line-height: $default-line-height;
+    }
+    &__link {
+      display: flex;
+      flex-grow: 0;
+      align-content: center;
+      cursor: pointer;
+    }
+
+    &__icon {
+      fill: $color-brand;
+      width: 30px;
+    }
+
+    /deep/ p {
+      @include regular-text;
+    }
   }
-}
 </style>

client/src/components/profile/Avatar.vue

@@ -35,9 +35,10 @@
 
 <script>
   import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
+  import {defineAsyncComponent} from 'vue';
 
-  const DefaultAvatar = () => import(/* webpackChunkName: "icons" */'@/components/icons/DefaultAvatar');
-  const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
+  const DefaultAvatar = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DefaultAvatar'));
+  const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon'));
 
   export default {
     props: {

client/src/components/profile/ContentBookmark.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="content-bookmark module-activity-entry">
     <!-- eslint-disable vue/no-v-html -->
-    <div v-if="content.type === 'text_block'" v-html="text" />
+    <div
+      v-if="content.type === 'text_block'"
+      v-html="text"
+    />
     <div v-else-if="content.type === 'link_block'">
-      <link-block :value="content.value" :no-margin="true" />
+      <link-block
+        :value="content.value"
+        :no-margin="true"
+      />
     </div>
     <p v-else>
       {{ type }}
@@ -12,34 +18,35 @@
 </template>
 
 <script>
-const LinkBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/LinkBlock');
+  import {defineAsyncComponent} from 'vue';
+  const LinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock'));
 
-export default {
-  props: ['bookmark'],
-  components: { LinkBlock },
-  computed: {
-    content() {
-      return this.bookmark.contentBlock
-        ? this.bookmark.contentBlock.contents.find((e) => e.id === this.bookmark.uuid)
-        : this.bookmark.instrument.contents.find((e) => e.id === this.bookmark.uuid);
-    },
-    text() {
-      return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';
-    },
-    type() {
-      switch (this.content.type) {
-        case 'assignment':
-          return 'Aufgabe & Ergebnis';
-        case 'link_block':
-          return this.content;
-        case 'survey':
-          return 'Übung';
-        case 'image_url_block':
-          return 'Bild';
-        default:
-          return this.content.type;
+  export default {
+    props: ['bookmark'],
+    components: {LinkBlock},
+    computed: {
+      content() {
+        return this.bookmark.contentBlock
+          ? this.bookmark.contentBlock.contents.find(e => e.id === this.bookmark.uuid)
+          : this.bookmark.instrument.contents.find(e => e.id === this.bookmark.uuid);
+      },
+      text() {
+        return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';
+      },
+      type() {
+        switch (this.content.type) {
+          case 'assignment':
+            return 'Aufgabe & Ergebnis';
+          case 'link_block':
+            return this.content;
+          case 'survey':
+            return 'Übung';
+          case 'image_url_block':
+            return 'Bild';
+          default:
+            return this.content.type;
+        }
       }
-    },
-  },
-};
+    }
+  };
 </script>

client/src/components/profile/EditGroupName.vue

@@ -1,27 +1,32 @@
 <template>
-  <a class="edit-group-name" data-cy="edit-group-name-link" @click="$emit('edit')">
+  <a
+    class="edit-group-name"
+    data-cy="edit-group-name-link"
+    @click="$emit('edit')"
+  >
     <pen-icon class="edit-group-name__icon" />
   </a>
 </template>
 
 <script>
-const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
+  import {defineAsyncComponent} from 'vue';
+  const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon'));
 
-export default {
-  components: {
-    PenIcon,
-  },
-};
+  export default {
+    components: {
+      PenIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_variables.scss';
+  @import "~styles/_variables.scss";
 
-.edit-group-name {
-  &__icon {
-    width: 20px;
-    height: 20px;
-    fill: $color-brand;
+  .edit-group-name {
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-brand;
+    }
   }
-}
 </style>

client/src/components/profile/Profile.vue

@@ -1,101 +1,105 @@
 <template>
   <div class="profile">
-    <h1 class="profile__header">Profilbild</h1>
-    <div class="profile-avatar" v-if="me.avatarUrl">
+    <h1 class="profile__header">
+      Profilbild
+    </h1>
+    <div
+      class="profile-avatar"
+      v-if="me.avatarUrl"
+    >
       <div class="profile-avatar__image">
         <avatar :avatar-url="me.avatarUrl" />
       </div>
-      <a class="profile-avatar__remove icon-button" @click="deleteAvatar()">
+      <a
+        class="profile-avatar__remove icon-button"
+        @click="deleteAvatar()"
+      >
         <trash-icon class="profile-avatar__remove-icon icon-button__icon icon-button__icon--subtle" />
       </a>
     </div>
-    <avatar-upload-form v-else @avatarUpdate="updateAvatar" />
+    <avatar-upload-form
+      v-else
+      @avatarUpdate="updateAvatar"
+    />
   </div>
 </template>
 
 <script>
-import UPDATE_AVATAR_QUERY from '@/graphql/gql/mutations/updateAvatarUrl.gql';
-import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
-import Avatar from '@/components/profile/Avatar';
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+  import UPDATE_AVATAR_QUERY from '@/graphql/gql/mutations/updateAvatarUrl.gql';
+  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+  import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
+  import Avatar from '@/components/profile/Avatar';
+  import {defineAsyncComponent} from 'vue';
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
 
-export default {
-  components: {
-    AvatarUploadForm,
-    Avatar,
-    TrashIcon,
-  },
+  export default {
+    components: {
+      AvatarUploadForm,
+      Avatar,
+      TrashIcon
+    },
 
-  data() {
-    return {
+    data() {
+      return {
+        me: {
+          avatarUrl: ''
+        }
+      };
+    },
+    apollo: {
       me: {
-        avatarUrl: '',
+        query: ME_QUERY,
       },
-    };
-  },
-  apollo: {
-    me: {
-      query: ME_QUERY,
     },
-  },
-  methods: {
-    deleteAvatar() {
-      this.updateAvatar('');
-    },
-    updateAvatar(url) {
-      this.$apollo
-        .mutate({
+    methods: {
+      deleteAvatar () {
+        this.updateAvatar('');
+      },
+      updateAvatar (url) {
+        this.$apollo.mutate({
           mutation: UPDATE_AVATAR_QUERY,
           variables: {
             input: {
-              avatarUrl: url,
-            },
-          },
-          update(
-            store,
-            {
-              data: {
-                updateAvatar: { success },
-              },
+              avatarUrl: url
             }
-          ) {
+          },
+          update(store, {data: {updateAvatar: {success}}}) {
             if (success) {
-              const { me } = store.readQuery({ query: ME_QUERY });
+              const {me} = store.readQuery({query: ME_QUERY});
               if (me) {
                 const data = {
                   me: {
                     ...me,
-                    avatarUrl: url,
-                  },
+                    avatarUrl: url
+                  }
                 };
-                store.writeQuery({ query: ME_QUERY, data });
+                store.writeQuery({query: ME_QUERY, data});
               }
             }
-          },
-        })
-        .catch((error) => {
+          }
+        }).catch((error) => {
           console.warn('UploadError', error);
         });
-    },
-  },
-};
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "@/styles/_variables.scss";
 
-.profile-avatar {
-  display: flex;
-  flex-direction: row;
+  .profile-avatar {
+    display: flex;
+    flex-direction: row;
 
-  &__image {
-    height: 230px;
-    width: 230px;
+    &__image {
+      height: 230px;
+      width: 230px;
+    }
+  }
+
+  .profile-avatar {
+    margin-bottom: $large-spacing;
   }
-}
 
-.profile-avatar {
-  margin-bottom: $large-spacing;
-}
 </style>

client/src/components/profile/ProfileSidebar.vue

@@ -84,7 +84,8 @@
   import me from '@/mixins/me';
   import LogoutWidget from '@/components/LogoutWidget';
   import {MY_TEAM} from '@/router/me.names';
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
+  import {defineAsyncComponent} from 'vue';
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
   export default {
 

client/src/components/rooms/AddRoomEntryButton.vue

@@ -1,60 +1,65 @@
 <template>
-  <router-link class="add-room-entry-button" data-cy="add-room-entry-button" :to="addRoomEntryRoute">
+  <router-link
+    class="add-room-entry-button"
+    data-cy="add-room-entry-button"
+    :to="addRoomEntryRoute"
+  >
     <plus-icon class="add-room-entry-button__icon" />
     <span class="add-room-entry-button__text">Beitrag erfassen</span>
   </router-link>
 </template>
 
 <script>
-import { ADD_ROOM_ENTRY_PAGE } from '@/router/room.names';
-const PlusIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PlusIcon');
+  import {defineAsyncComponent} from 'vue';
+  const PlusIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon'));
+  import { ADD_ROOM_ENTRY_PAGE }  from '@/router/room.names';
 
-export default {
-  props: ['parent'],
+  export default {
+    props: ['parent'],
 
-  components: {
-    PlusIcon,
-  },
+    components: {
+      PlusIcon,
+    },
 
-  data() {
-    return {
-      addRoomEntryRoute: {
-        name: ADD_ROOM_ENTRY_PAGE,
-      },
-    };
-  },
-};
+    data() {
+      return {
+        addRoomEntryRoute: {
+          name: ADD_ROOM_ENTRY_PAGE,
+        },
+      };
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.add-room-entry-button {
-  border: 2px solid $color-white;
-  border-radius: 12px;
-  height: 150px;
-  box-sizing: border-box;
-  margin-bottom: 25px;
-  justify-content: center;
-  align-items: center;
-  break-inside: avoid-column;
-  overflow: hidden;
-  cursor: pointer;
+  .add-room-entry-button {
+    border: 2px solid $color-white;
+    border-radius: 12px;
+    height: 150px;
+    box-sizing: border-box;
+    margin-bottom: 25px;
+    justify-content: center;
+    align-items: center;
+    break-inside: avoid-column;
+    overflow: hidden;
+    cursor: pointer;
 
-  display: none;
-  @include desktop {
-    display: flex;
+    display: none;
+    @include desktop {
+      display: flex;
+    }
+
+    &__icon {
+      width: 20px;
+      fill: $color-white;
+      margin-right: $small-spacing;
+    }
+
+    &__text {
+      @include regular-text;
+      color: $color-white;
+    }
   }
-
-  &__icon {
-    width: 20px;
-    fill: $color-white;
-    margin-right: $small-spacing;
-  }
-
-  &__text {
-    @include regular-text;
-    color: $color-white;
-  }
-}
 </style>

client/src/components/rooms/EntryCountWidget.vue

@@ -1,56 +1,56 @@
 <template>
   <div class="entry-count-widget">
     <component :is="icon" />
-    <span data-cy="entry-count"
-      >{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span
-    >
+    <span data-cy="entry-count">{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span>
   </div>
 </template>
 
 <script>
-import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
-const Cards = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Cards.vue');
+  import {defineAsyncComponent} from 'vue';
+  import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
+  const Cards = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Cards.vue'));
 
-export default {
-  props: {
-    entryCount: {
-      type: Number,
+  export default {
+    props: {
+      entryCount: {
+        type: Number,
+      },
+      verbose: {
+        type: Boolean,
+        default: true,
+      },
+      icon: {
+        type: String,
+        default: 'cards'
+      }
     },
-    verbose: {
-      type: Boolean,
-      default: true,
-    },
-    icon: {
-      type: String,
-      default: 'cards',
-    },
-  },
 
-  components: {
-    'speech-bubble': SpeechBubbleIcon,
-    SpeechBubbleIcon,
-    Cards,
-  },
-};
+    components: {
+      'speech-bubble': SpeechBubbleIcon,
+      SpeechBubbleIcon,
+      Cards,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.entry-count-widget {
-  display: flex;
-  align-items: center;
-  opacity: 0.6;
-  margin-right: $medium-spacing;
+  .entry-count-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+    margin-right: $medium-spacing;
 
-  svg {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    margin-right: 15px;
+    svg {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;
+    }
   }
 
-  & > span {
-    @include room-widget-text-style;
-  }
-}
 </style>

client/src/components/rooms/MoreActions.vue

@@ -1,66 +1,71 @@
 <template>
   <div class="more-actions">
     <a
-      :class="{ 'more-actions__toggle--background': background }"
+      :class="{'more-actions__toggle--background': background}"
       class="more-actions__toggle"
       data-cy="toggle-more-actions-menu"
       @click.stop="toggleMenu"
     >
       <ellipses />
     </a>
-    <widget-popover class="more-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
+    <widget-popover
+      class="more-actions__popover"
+      v-if="showMenu"
+      @hide-me="showMenu = false"
+    >
       <slot :toggle="toggleMenu" />
     </widget-popover>
   </div>
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
-const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses');
+  import WidgetPopover from '@/components/ui/WidgetPopover';
+  import {defineAsyncComponent} from 'vue';
+  const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses'));
 
-export default {
-  props: {
-    background: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      background: {
+        type: Boolean,
+        default: false
+      }
     },
-  },
 
-  components: {
-    Ellipses,
-    WidgetPopover,
-  },
-  data() {
-    return {
-      showMenu: false,
-    };
-  },
-
-  methods: {
-    toggleMenu: function () {
-      this.showMenu = !this.showMenu;
+    components: {
+      Ellipses,
+      WidgetPopover,
     },
-  },
-};
+    data() {
+      return {
+        showMenu: false,
+      };
+    },
+
+    methods: {
+      toggleMenu: function () {
+        this.showMenu = !this.showMenu;
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.more-actions {
-  svg {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    //margin-right: 15px;
-  }
+  .more-actions {
+    svg {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      //margin-right: 15px;
+    }
 
-  &__toggle {
-    display: flex;
-    border-radius: 5px;
+    &__toggle {
+      display: flex;
+      border-radius: 5px;
 
-    &--background {
-      background: white;
+      &--background {
+       background: white;
+      }
     }
   }
-}
 </style>

client/src/components/rooms/RoomGroupWidget.vue

@@ -8,33 +8,34 @@
 </template>
 
 <script>
-const Group = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Group.vue');
+  import {defineAsyncComponent} from 'vue';
+  const Group = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Group.vue'));
 
-export default {
-  props: ['name'],
+  export default {
+    props: ['name'],
 
-  components: {
-    Group,
-  },
-};
+    components: {
+      Group
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.room-group-widget {
-  display: flex;
-  align-items: center;
-  opacity: 0.6;
+  .room-group-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
 
-  svg {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    margin-right: 15px;
+    svg {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;;
+    }
   }
-
-  & > span {
-    @include room-widget-text-style;
-  }
-}
 </style>

client/src/components/rooms/RoomVisibilityWidget.vue

@@ -12,41 +12,43 @@
 </template>
 
 <script>
-const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
-const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon');
 
-export default {
-  props: {
-    restricted: {
-      type: Boolean,
-      default: false,
+  import {defineAsyncComponent} from 'vue';
+  const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
+  const ClosedEyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon'));
+
+  export default {
+    props: {
+      restricted: {
+        type: Boolean,
+        default: false
+      }
     },
-  },
 
-  components: {
-    ClosedEyeIcon,
-    EyeIcon,
-  },
-};
+    components: {
+      ClosedEyeIcon,
+      EyeIcon
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.room-visibility-widget {
-  display: flex;
-  align-items: center;
-  opacity: 0.6;
+  .room-visibility-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
 
-  &__icon {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    margin-right: 15px;
-    flex-shrink: 0;
+    &__icon {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;
+    }
   }
 
-  & > span {
-    @include room-widget-text-style;
-  }
-}
 </style>

client/src/components/rooms/RoomsOnboarding.vue

@@ -1,12 +1,25 @@
 <template>
   <div class="rooms-onboarding">
-    <h1 class="rooms-onboarding__heading" data-cy="page-title">Räume</h1>
+    <h1
+      class="rooms-onboarding__heading"
+      data-cy="page-title"
+    >
+      Räume
+    </h1>
     <rooms-illustration class="rooms-onboarding__illustration" />
-    <p data-cy="rooms-onboarding-text" class="rooms-onboarding__text">
+    <p
+      data-cy="rooms-onboarding-text"
+      class="rooms-onboarding__text"
+    >
       Hier können Sie Räume erstellen, damit SchülerInnen zusammenarbeiten und Beiträge teilen können.
     </p>
     <div class="rooms-onboarding__button">
-      <router-link :to="newRoomRoute" class="button button--primary" data-cy="create-room-button" v-if="isTeacher">
+      <router-link
+        :to="newRoomRoute"
+        class="button button--primary"
+        data-cy="create-room-button"
+        v-if="isTeacher"
+      >
         Raum erstellen
       </router-link>
     </div>
@@ -14,43 +27,43 @@
 </template>
 
 <script>
-import { NEW_ROOM_PAGE } from '@/router/room.names';
-const RoomsIllustration = () =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration');
+  import {NEW_ROOM_PAGE} from '@/router/room.names';
+  import {defineAsyncComponent} from 'vue';
+  const RoomsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration'));
 
-export default {
-  props: {
-    isTeacher: {
-      type: Boolean,
-      default: false,
+  export default {
+    props: {
+      isTeacher: {
+        type: Boolean,
+        default: false,
+      },
     },
-  },
-  components: { RoomsIllustration },
+    components: {RoomsIllustration},
 
-  data() {
-    return {
-      newRoomRoute: NEW_ROOM_PAGE,
-    };
-  },
-};
+    data() {
+      return {
+        newRoomRoute: NEW_ROOM_PAGE,
+      };
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.rooms-onboarding {
-  @include onboarding-page;
+  .rooms-onboarding {
+    @include onboarding-page;
 
-  &__heading {
-    margin-bottom: $large-spacing;
+    &__heading {
+      margin-bottom: $large-spacing;
+    }
+
+    &__illustration {
+      @include onboarding-illustration;
+    }
+
+    &__text {
+      @include onboarding-text;
+    }
   }
-
-  &__illustration {
-    @include onboarding-illustration;
-  }
-
-  &__text {
-    @include onboarding-text;
-  }
-}
 </style>

client/src/components/school-class/ClassSelectionWidget.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="class-selection" v-if="currentClassSelection">
+  <div
+    class="class-selection"
+    v-if="currentClassSelection"
+  >
     <div
       data-cy="class-selection"
       class="class-selection__selected-class selected-class"
@@ -8,7 +11,12 @@
       <current-class class="selected-class__text" />
       <chevron-down class="selected-class__dropdown-icon" />
     </div>
-    <widget-popover :mobile="mobile" class="class-selection__popover" v-if="showPopover" @hide-me="showPopover = false">
+    <widget-popover
+      :mobile="mobile"
+      class="class-selection__popover"
+      v-if="showPopover"
+      @hide-me="showPopover = false"
+    >
       <li
         :label="schoolClass.name"
         :item="schoolClass"
@@ -26,105 +34,121 @@
         v-if="me.isTeacher && !me.readOnly"
         @click="closeSidebar"
       >
-        <router-link :to="{ name: 'create-class' }" tag="span" class="popover-links__link-with-icon">
+        <router-link
+          :to="{name: 'create-class'}"
+          tag="span"
+          class="popover-links__link-with-icon"
+        >
           <add-icon class="popover-links__icon" />
           <span>Klasse erfassen</span>
         </router-link>
       </li>
-      <li class="popover-links__link popover-links__link--large popover-links__divider" @click="closeSidebar">
-        <router-link :to="{ name: 'old-classes' }" tag="span"> Alte Klassen anzeigen </router-link>
+      <li
+        class="popover-links__link popover-links__link--large popover-links__divider"
+        @click="closeSidebar"
+      >
+        <router-link
+          :to="{name: 'old-classes'}"
+          tag="span"
+        >
+          Alte Klassen anzeigen
+        </router-link>
       </li>
     </widget-popover>
   </div>
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
-import CurrentClass from '@/components/school-class/CurrentClass';
+  import WidgetPopover from '@/components/ui/WidgetPopover';
+  import CurrentClass from '@/components/school-class/CurrentClass';
 
-import updateSelectedClassMixin from '@/mixins/update-selected-class';
-import sidebarMixin from '@/mixins/sidebar';
-import meMixin from '@/mixins/me';
-const ChevronDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown');
-const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon');
+  import updateSelectedClassMixin from '@/mixins/update-selected-class';
+  import sidebarMixin from '@/mixins/sidebar';
+  import meMixin from '@/mixins/me';
+  import {defineAsyncComponent} from 'vue';
+  const ChevronDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown'));
+  const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon'));
 
-export default {
-  props: {
-    mobile: {
-      type: Boolean,
-      default: false,
+  export default {
+
+    props: {
+      mobile: {
+        type: Boolean,
+        default: false
+      }
     },
-  },
 
-  mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
-  components: {
-    WidgetPopover,
-    ChevronDown,
-    CurrentClass,
-    AddIcon,
-  },
-
-  data() {
-    return {
-      showPopover: false,
-    };
-  },
-
-  computed: {
-    currentClassSelection() {
-      let currentClass = this.me.schoolClasses.find((schoolClass) => {
-        return schoolClass.id === this.me.selectedClass.id;
-      });
-      return currentClass || this.me.schoolClasses[0];
+    mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
+    components: {
+      WidgetPopover,
+      ChevronDown,
+      CurrentClass,
+      AddIcon
     },
-  },
 
-  methods: {
-    updateSelectedClassAndHidePopover(selectedClass) {
-      this.updateSelectedClass(selectedClass);
-      this.showPopover = false;
-      this.closeSidebar('profile');
+    data() {
+      return {
+        showPopover: false
+      };
     },
-  },
-};
+
+    computed: {
+      currentClassSelection() {
+        let currentClass = this.me.schoolClasses.find(schoolClass => {
+          return schoolClass.id === this.me.selectedClass.id;
+        });
+        return currentClass || this.me.schoolClasses[0];
+      }
+    },
+
+    methods: {
+      updateSelectedClassAndHidePopover(selectedClass) {
+        this.updateSelectedClass(selectedClass);
+        this.showPopover = false;
+        this.closeSidebar('profile');
+      }
+    },
+
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.class-selection {
-  position: relative;
-  cursor: pointer;
-  margin-bottom: $medium-spacing;
-  border-radius: 4px;
+  .class-selection {
+    position: relative;
+    cursor: pointer;
+    margin-bottom: $medium-spacing;
+    border-radius: 4px;
 
-  &__popover {
-    white-space: nowrap;
-    top: 100%;
-    left: 0;
-    transform: translateY($small-spacing);
-  }
-}
+    &__popover {
+      white-space: nowrap;
+      top: 100%;
+      left: 0;
+      transform: translateY($small-spacing);
+    }
 
-.selected-class {
-  width: 100%;
-  box-sizing: border-box;
-  padding: $small-spacing 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  &__text {
-    line-height: $large-spacing;
-    @include heading-4;
-    margin-right: $small-spacing;
   }
 
-  &__dropdown-icon {
-    width: 20px;
-    height: 20px;
-    fill: $color-charcoal-dark;
+  .selected-class {
+    width: 100%;
+    box-sizing: border-box;
+    padding: $small-spacing 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    &__text {
+      line-height: $large-spacing;
+      @include heading-4;
+      margin-right: $small-spacing;
+    }
+
+    &__dropdown-icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-charcoal-dark;
+    }
   }
-}
 </style>

client/src/components/ui/BaseInput.vue

@@ -6,39 +6,47 @@
       class="base-input-container__input"
       data-cy="base-input-input"
       @change.prevent="$emit('input', $event.target.checked, item)"
-    />
+    >
     <span
-      :class="{
-        'base-input-container__checkbox': type === 'checkbox',
-        'base-input-container__radiobutton': type === 'radiobutton',
-      }"
+      :class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}"
       class="base-input-container__icon checkbox"
     >
       <tick v-if="type === 'checkbox'" />
-      <circle-icon data-cy="circle-icon" v-if="type === 'radiobutton'" />
+      <circle-icon
+        data-cy="circle-icon"
+        v-if="type === 'radiobutton'"
+      />
     </span>
-    <span class="base-input-container__label" data-cy="base-input-label" v-if="label">{{ label }}</span>
-    <slot class="base-input-container__label" v-if="!label" />
+    <span
+      class="base-input-container__label"
+      data-cy="base-input-label"
+      v-if="label"
+    >{{ label }}</span>
+    <slot
+      class="base-input-container__label"
+      v-if="!label"
+    />
   </label>
 </template>
 
 <script>
-const Tick = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick');
-const CircleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CircleIcon');
+  import {defineAsyncComponent} from 'vue';
+  const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Tick'));
+  const CircleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CircleIcon'));
 
-export default {
-  props: {
-    label: String,
-    checked: {
-      type: Boolean,
+  export default {
+    props: {
+      label: String,
+      checked: {
+        type: Boolean
+      },
+      item: Object,
+      type: String
     },
-    item: Object,
-    type: String,
-  },
 
-  components: {
-    Tick,
-    CircleIcon,
-  },
-};
+    components: {
+      Tick,
+      CircleIcon
+    }
+  };
 </script>

client/src/components/ui/PopoverLink.vue

@@ -1,56 +1,65 @@
 <template>
-  <li class="popover-links__link">
-    <a class="popover-link" @click="$emit('link-action')">
-      <component class="popover-link__icon" :is="icon" />
+  <li
+    class="popover-links__link"
+  >
+    <a
+      class="popover-link"
+      @click="$emit('link-action')"
+    >
+      <component
+        class="popover-link__icon"
+        :is="icon"
+      />
       <span class="popover-link__text">{{ text }}</span>
     </a>
   </li>
 </template>
 
 <script>
-const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
-const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
+  import {defineAsyncComponent} from 'vue';
+  const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
+  const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
+  const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon'));
 
-export default {
-  props: {
-    icon: {
-      type: String,
-      default: '',
+  export default {
+    props: {
+      icon: {
+        type: String,
+        default: '',
+      },
+      text: {
+        type: String,
+        default: '',
+      },
     },
-    text: {
-      type: String,
-      default: '',
+    components: {
+      EyeIcon,
+      TrashIcon,
+      PenIcon,
     },
-  },
-  components: {
-    EyeIcon,
-    TrashIcon,
-    PenIcon,
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.popover-link {
-  @include popover-link;
+  .popover-link {
+    @include popover-link;
 
-  &__icon {
-    width: 30px;
-    fill: $color-charcoal-dark;
-    margin-right: 15px;
-    display: flex;
-    flex-basis: auto;
-    flex-shrink: 0;
+    &__icon {
+      width: 30px;
+      fill: $color-charcoal-dark;
+      margin-right: 15px;
+      display: flex;
+      flex-basis: auto;
+      flex-shrink: 0;
+    }
+
+    &__text {
+      width: auto;
+      display: flex;
+      flex-basis: auto;
+      flex-shrink: 0;
+    }
   }
-
-  &__text {
-    width: auto;
-    display: flex;
-    flex-basis: auto;
-    flex-shrink: 0;
-  }
-}
 </style>

client/src/components/ui/file-upload/FileUpload.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="file-upload">
     <template v-if="document">
-      <document-block :value="{ url: document }" show-trash-icon @trash="$emit('change-document-url', '')" />
+      <document-block
+        :value="{url: document}"
+        show-trash-icon
+        @trash="$emit('change-document-url', '')"
+      />
     </template>
     <template v-else>
       <simple-file-upload
@@ -14,24 +18,26 @@
 </template>
 
 <script>
-const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload.vue');
-const DocumentBlock = () => import('@/components/content-blocks/DocumentBlock.vue');
+  import {defineAsyncComponent} from 'vue';
+  const SimpleFileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUpload'));
+  const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
 
-export default {
-  props: {
-    document: {
-      type: String,
-      default: '',
+  export default {
+    props: {
+      document: {
+        type: String,
+        default: '',
+      },
+      withText: {
+        type: Boolean,
+        default: false
+      }
     },
-    withText: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: { SimpleFileUpload, DocumentBlock },
-};
+    components: {SimpleFileUpload, DocumentBlock},
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
+
 </style>

client/src/components/ui/file-upload/SimpleFileUpload.vue

@@ -1,80 +1,72 @@
 <template>
   <div class="simple-file-upload">
-<<<<<<< HEAD
-    <component :is="button" @click.native="clickUploadCare" />
-||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
-    <component
-      :is="button"
-      @click.native="clickUploadCare"
-    />
-=======
     <component
       :is="button"
       @click="clickUploadCare"
     />
->>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
     <simple-file-upload-hidden-input @link-change-url="$emit('link-change-url', $event)" />
   </div>
 </template>
 
 <script>
-const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
-const SimpleFileUploadIcon = () => import('@/components/ui/file-upload/SimpleFileUploadIcon.vue');
-const SimpleFileUploadIconAndText = () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText.vue');
-const DocumentIcon = () => import('@/components/icons/DocumentIcon.vue');
+  import {defineAsyncComponent} from 'vue';
+  const SimpleFileUploadHiddenInput = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput'));
+  const SimpleFileUploadIcon = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIcon'));
+  const SimpleFileUploadIconAndText = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIconAndText'));
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
 
-export default {
-  props: {
-    value: {
-      type: String,
-      default: '',
+  export default {
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      withText: {
+        type: Boolean,
+        default: false
+      }
     },
-    withText: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
-  components: {
-    SimpleFileUploadHiddenInput,
-    DocumentIcon,
-    SimpleFileUploadIcon,
-    SimpleFileUploadIconAndText,
-  },
-
-  computed: {
-    button() {
-      return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
+    components: {
+      SimpleFileUploadHiddenInput,
+      DocumentIcon,
+      SimpleFileUploadIcon,
+      SimpleFileUploadIconAndText
     },
-  },
 
-  methods: {
-    clickUploadCare() {
-      // workaround for styling the uploadcare widget
-      let button = this.$el.querySelector('.uploadcare--widget__button');
-      button.click();
+    computed: {
+      button() {
+        return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
+      }
     },
-  },
-};
+
+    methods: {
+      clickUploadCare() {
+        // workaround for styling the uploadcare widget
+        let button = this.$el.querySelector('.uploadcare--widget__button');
+        button.click();
+      }
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_helpers';
+  @import "~styles/_helpers";
 
-.simple-file-upload {
-  height: 25px;
-  overflow: hidden;
-  cursor: pointer;
-
-  &__link {
-    display: inline-block;
-    overflow: hidden;
-    width: 25px;
+  .simple-file-upload {
     height: 25px;
-  }
-}
+    overflow: hidden;
+    cursor: pointer;
 
-:deep(.uploadcare--widget) {
-  display: none;
-}
+    &__link {
+      display: inline-block;
+      overflow: hidden;
+      width: 25px;
+      height: 25px;
+    }
+  }
+
+  /deep/ .uploadcare--widget {
+    display: none;
+  }
 </style>

client/src/components/ui/file-upload/SimpleFileUploadIcon.vue

@@ -5,20 +5,21 @@
 </template>
 
 <script>
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
+  import {defineAsyncComponent} from 'vue';
+  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
 
-export default {
-  components: { DocumentIcon },
-};
+  export default {
+    components: {DocumentIcon},
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.simple-file-upload-icon {
-  &__icon {
-    width: 25px;
-    fill: $color-silver-dark;
+  .simple-file-upload-icon {
+    &__icon {
+      width: 25px;
+      fill: $color-silver-dark;
+    }
   }
-}
 </style>

client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue

@@ -12,49 +12,50 @@
 </template>
 
 <script>
-const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
-const ButtonWithIconAndText = () => import('@/components/ui/ButtonWithIconAndText.vue');
+  import {defineAsyncComponent} from 'vue';
+  const SimpleFileUploadHiddenInput = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput'));
+  const ButtonWithIconAndText = defineAsyncComponent(() => import('@/components/ui/ButtonWithIconAndText'));
 
-export default {
-  props: ['value'],
+  export default {
+    props: ['value'],
 
-  components: {
-    ButtonWithIconAndText,
-    SimpleFileUploadHiddenInput,
-  },
-
-  methods: {
-    clickUploadCare() {
-      // workaround for styling the uploadcare widget
-      let button = this.$el.querySelector('.uploadcare--widget__button');
-      button.click();
+    components: {
+      ButtonWithIconAndText,
+      SimpleFileUploadHiddenInput,
     },
-  },
-};
+
+    methods: {
+      clickUploadCare() {
+        // workaround for styling the uploadcare widget
+        let button = this.$el.querySelector('.uploadcare--widget__button');
+        button.click();
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_helpers';
+  @import "~styles/_helpers";
 
-.simple-file-upload {
-  width: 25px;
-  height: 25px;
-  overflow: hidden;
-
-  &__icon {
-    width: 25px;
-    fill: $color-silver-dark;
-  }
-
-  &__link {
-    display: inline-block;
-    overflow: hidden;
+  .simple-file-upload {
     width: 25px;
     height: 25px;
-  }
-}
+    overflow: hidden;
 
-:deep(.uploadcare--widget) {
-  display: none;
-}
+    &__icon {
+      width: 25px;
+      fill: $color-silver-dark;
+    }
+
+    &__link {
+      display: inline-block;
+      overflow: hidden;
+      width: 25px;
+      height: 25px;
+    }
+  }
+
+  /deep/ .uploadcare--widget {
+    display: none;
+  }
 </style>

client/src/components/ui/form-element-icons.js

@@ -1,18 +1,17 @@
-const LinkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon');
-const VideoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/VideoIcon');
-const ImageIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ImageIcon');
-const TextIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TextIcon');
-const SpeechBubbleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/SpeechBubbleIcon');
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
-const TitleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TitleIcon');
-const DocumentWithLinesIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentWithLinesIcon');
-
-const ArrowThinBottom = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinBottom');
-const ArrowThinDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinDown');
-const ArrowThinTop = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinTop');
-const ArrowThinUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinUp');
-
-const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+import {defineAsyncComponent} from 'vue';
+const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon'));
+const VideoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/VideoIcon'));
+const ImageIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ImageIcon'));
+const TextIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TextIcon'));
+const SpeechBubbleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/SpeechBubbleIcon'));
+const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
+const TitleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TitleIcon'));
+const DocumentWithLinesIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentWithLinesIcon'));
+const ArrowThinBottom = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinBottom'));
+const ArrowThinDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinDown'));
+const ArrowThinTop = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinTop'));
+const ArrowThinUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinUp'));
+const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
 
 /*
   for icons with a single word, leave the *-icon name, to prevent conflicts
@@ -31,5 +30,5 @@ export default {
   ArrowThinDown,
   ArrowThinTop,
   ArrowThinUp,
-  TrashIcon,
+  TrashIcon
 };

client/src/components/visibility/VisibilityAction.vue

@@ -1,84 +1,93 @@
 <template>
   <div class="visibility-action">
-    <a class="visibility-action__action-button" v-if="canManageContent" @click="toggleVisibility()">
-      <closed-eye-icon class="visibility-action__action-icon action-icon" v-if="hidden" />
-      <eye-icon class="visibility-action__action-icon action-icon" v-else />
+    <a
+      class="visibility-action__action-button"
+      v-if="canManageContent"
+      @click="toggleVisibility()"
+    >
+      <closed-eye-icon
+        class="visibility-action__action-icon action-icon"
+        v-if="hidden"
+      />
+      <eye-icon
+        class="visibility-action__action-icon action-icon"
+        v-else
+      />
     </a>
   </div>
 </template>
 
 <script>
-import me from '@/mixins/me';
+  import me from '@/mixins/me';
 
-import { TYPES, CONTENT_TYPE } from '@/consts/types';
-import { createVisibilityMutation, hidden } from '@/helpers/visibility';
+  import {TYPES, CONTENT_TYPE} from '@/consts/types';
+  import {createVisibilityMutation, hidden} from '@/helpers/visibility';
 
-const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
-const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon');
+  import {defineAsyncComponent} from 'vue';
+  const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
+  const ClosedEyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon'));
 
-export default {
-  props: {
-    block: {
-      type: Object,
-      default: () => ({}),
+  export default {
+    props: {
+      block: {
+        type: Object,
+        default: () => ({})
+      },
+      type: {
+        type: String,
+        default: CONTENT_TYPE,
+        validator: value => {
+          // value must be one of TYPES
+          return TYPES.indexOf(value) !== -1;
+        }
+      }
     },
-    type: {
-      type: String,
-      default: CONTENT_TYPE,
-      validator: (value) => {
-        // value must be one of TYPES
-        return TYPES.indexOf(value) !== -1;
+
+    mixins: [me],
+
+    components: {
+      EyeIcon,
+      ClosedEyeIcon
+    },
+
+    computed: {
+      hidden() {
+        return hidden({type: this.type, block: this.block, schoolClass: this.schoolClass});
+      }
+    },
+
+    methods: {
+      toggleVisibility() {
+        const hidden = !this.hidden;
+        const schoolClassId = this.schoolClass.id;
+
+        const visibility = [{
+          schoolClassId,
+          hidden
+        }];
+
+        const {mutation, variables} = createVisibilityMutation(this.type, this.block.id, visibility);
+
+        this.$apollo.mutate({
+          mutation,
+          variables
+        });
       },
     },
-  },
-
-  mixins: [me],
-
-  components: {
-    EyeIcon,
-    ClosedEyeIcon,
-  },
-
-  computed: {
-    hidden() {
-      return hidden({ type: this.type, block: this.block, schoolClass: this.schoolClass });
-    },
-  },
-
-  methods: {
-    toggleVisibility() {
-      const hidden = !this.hidden;
-      const schoolClassId = this.schoolClass.id;
-
-      const visibility = [
-        {
-          schoolClassId,
-          hidden,
-        },
-      ];
-
-      const { mutation, variables } = createVisibilityMutation(this.type, this.block.id, visibility);
-
-      this.$apollo.mutate({
-        mutation,
-        variables,
-      });
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-.visibility-action {
-  margin-top: 9px;
+  .visibility-action {
+    margin-top: 9px;
 
-  position: absolute;
-  left: -70px;
-  top: 0px;
-  display: grid;
+    position: absolute;
+    left: -70px;
+    top: 0px;
+    display: grid;
 
-  &__visibility-menu {
-    top: 40px;
+    &__visibility-menu {
+      top: 40px;
+    }
   }
-}
 </style>

client/src/layouts/FullScreenLayout.vue

@@ -1,6 +1,12 @@
 <template>
-  <div :class="specialContainerClass" class="container layout layout--fullscreen">
-    <div class="close-button" @click="back">
+  <div
+    :class="specialContainerClass"
+    class="container layout layout--fullscreen"
+  >
+    <div
+      class="close-button"
+      @click="back"
+    >
       <cross class="close-button__icon" />
     </div>
 
@@ -9,37 +15,39 @@
 </template>
 
 <script>
-const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
+  import {defineAsyncComponent} from 'vue';
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
-export default {
-  components: {
-    Cross,
-  },
+  export default {
+    components: {
+      Cross
+    },
 
-  computed: {
-    specialContainerClass() {
-      let cls = this.$store.state.specialContainerClass;
-      return [cls ? `skillbox--${cls}` : ''];
+    computed: {
+      specialContainerClass() {
+        let cls = this.$store.state.specialContainerClass;
+        return [cls ? `skillbox--${cls}` : ''];
+      }
     },
-  },
-  methods: {
-    back() {
-      this.$router.go(-1);
-    },
-  },
-};
+    methods: {
+      back() {
+        this.$router.go(-1);
+      }
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/_default-layout.scss';
+  @import "@/styles/_default-layout.scss";
 
-.close-button {
-  margin-top: $medium-spacing;
-  margin-right: $medium-spacing;
-  justify-self: end;
-  cursor: pointer;
+  .close-button {
+    margin-top: $medium-spacing;
+    margin-right: $medium-spacing;
+    justify-self: end;
+    cursor: pointer;
+
+    display:flex;
+    justify-content:flex-end;
+  }
 
-  display: flex;
-  justify-content: flex-end;
-}
 </style>

client/src/layouts/SimpleLayout.vue

@@ -1,98 +1,107 @@
 <template>
-  <div :class="{ 'layout--full-width': $route.meta.fullWidth }" class="skillbox layout layout--simple">
-    <div class="close-button" @click="back">
+  <div
+    :class="{'layout--full-width': $route.meta.fullWidth}"
+    class="skillbox layout layout--simple"
+  >
+    <div
+      class="close-button"
+      @click="back"
+    >
       <cross class="close-button__icon" />
     </div>
     <router-view class="layout__content" />
-    <simple-footer class="layout__footer" v-if="enableFooter" />
+    <simple-footer
+      class="layout__footer"
+      v-if="enableFooter"
+    />
   </div>
 </template>
 
 <script>
-import SimpleFooter from '@/layouts/SimpleFooter';
+  import SimpleFooter from '@/layouts/SimpleFooter';
+  import {defineAsyncComponent} from 'vue';
+  const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
 
-const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
+  export default {
+    components: {
+      Cross,
+      SimpleFooter
+    },
 
-export default {
-  components: {
-    Cross,
-    SimpleFooter,
-  },
-
-  computed: {
-    enableFooter() {
-      if (this.$route.meta.hideFooter) {
-        return false;
+    computed: {
+      enableFooter() {
+        if (this.$route.meta.hideFooter) {
+          return false;
+        }
+        return this.$flavor.showFooter;
       }
-      return this.$flavor.showFooter;
     },
-  },
 
-  methods: {
-    back() {
-      this.$router.go(-1);
-    },
-  },
-};
+    methods: {
+      back() {
+        this.$router.go(-1);
+      }
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.layout {
-  &--simple {
-    display: -ms-grid;
-    @supports (display: grid) {
-      display: grid;
+  .layout {
+    &--simple {
+      display: -ms-grid;
+      @supports (display: grid) {
+        display: grid;
+      }
+
+      width: 100%;
+
+      @include desktop {
+        grid-template-columns: 1fr 640px 1fr;
+        grid-template-rows: 60px auto-fill 105px;
+        -ms-grid-columns: 1fr 640px 1fr;
+
+        & > :nth-child(2) {
+          grid-column: 2;
+          -ms-grid-column: 2;
+        }
+      }
     }
 
-    width: 100%;
+    $parent: &;
 
-    @include desktop {
-      grid-template-columns: 1fr 640px 1fr;
-      grid-template-rows: 60px auto-fill 105px;
-      -ms-grid-columns: 1fr 640px 1fr;
+    &--full-width {
+      #{$parent}__content {
+        grid-column: 1 / span 3;
+        grid-row: 1 / span 2;
+      }
+    }
 
-      & > :nth-child(2) {
-        grid-column: 2;
-        -ms-grid-column: 2;
+    &__footer {
+      @include desktop {
+        grid-column: 1 / span 3;
       }
     }
   }
 
-  $parent: &;
+  .close-button {
+    justify-self: end;
+    cursor: pointer;
 
-  &--full-width {
-    #{$parent}__content {
-      grid-column: 1 / span 3;
-      grid-row: 1 / span 2;
-    }
-  }
+    display:flex;
+    justify-content:flex-end;
+
+    margin-right: $small-spacing;
+    margin-top: $small-spacing;
 
-  &__footer {
     @include desktop {
-      grid-column: 1 / span 3;
+      grid-column: 3;
+      grid-row: 1;
+      -ms-grid-column: 3;
+      -ms-grid-row: 1;
+      margin-right: $medium-spacing;
+      margin-top: $medium-spacing;
     }
   }
-}
-
-.close-button {
-  justify-self: end;
-  cursor: pointer;
-
-  display: flex;
-  justify-content: flex-end;
-
-  margin-right: $small-spacing;
-  margin-top: $small-spacing;
-
-  @include desktop {
-    grid-column: 3;
-    grid-row: 1;
-    -ms-grid-column: 3;
-    -ms-grid-row: 1;
-    margin-right: $medium-spacing;
-    margin-top: $medium-spacing;
-  }
-}
 </style>

client/src/layouts/SplitLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['split-view', { 'split-view--illustration': illustration }]">
+  <div :class="['split-view', {'split-view--illustration': illustration}]">
     <div :class="['split-view__illustration', illustrationAlignment]">
       <component :is="illustration" />
     </div>
@@ -10,155 +10,154 @@
 </template>
 
 <script>
-import flavorValues from '@/helpers/app-flavor';
-const ContentsIllustration = () =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/ContentsIllustration');
-const PortfolioIllustration = () =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/PortfolioIllustration');
-const RoomsIllustration = () =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration');
+  import {defineAsyncComponent} from 'vue';
+  import flavorValues from '@/helpers/app-flavor';
+  const ContentsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration'));
+  const PortfolioIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration'));
+  const RoomsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration'));
+  const HelloIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloIllustration'));
+  const HelloMyKVIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloMyKVIllustration'));
+  const Hello = flavorValues.appFlavor === 'my-kv' ? HelloMyKVIllustration : HelloIllustration;
 
-export default {
-  components: {
-    contents: ContentsIllustration,
-    portfolio: PortfolioIllustration,
-    rooms: RoomsIllustration,
-    hello: flavorValues.helloIllustration,
-  },
+  export default {
+    components: {
+      contents: ContentsIllustration,
+      portfolio: PortfolioIllustration,
+      rooms: RoomsIllustration,
+      hello: Hello
+    },
 
-  computed: {
-    illustration() {
-      return this.$route.meta.illustration;
+    computed: {
+      illustration() {
+        return this.$route.meta.illustration;
+      },
+      illustrationAlignment() {
+        return this.$route.meta.illustrationAlign ? `split-view__illustration--${this.$route.meta.illustrationAlign}` : '';
+      }
     },
-    illustrationAlignment() {
-      return this.$route.meta.illustrationAlign
-        ? `split-view__illustration--${this.$route.meta.illustrationAlign}`
-        : '';
-    },
-  },
-};
+  };
 </script>
 
 <style lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.split-view {
-  background-color: $color-brand;
-
-  display: flex;
-  position: relative;
-  width: 100%;
-  min-height: 100vh;
-
-  &--illustration {
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      top: 50%;
-      background: $color-brand-dark;
-    }
-  }
-
-  &__illustration {
-    width: 30vw;
-    min-width: 400px;
-    align-self: center;
+  .split-view {
     background-color: $color-brand;
-    z-index: 1;
-    display: none;
 
-    &--top {
-      align-self: center;
-      margin-top: -400px;
-    }
-
-    & > svg {
-      max-width: 300px;
-      max-height: 400px;
-    }
-
-    @include desktop {
-      display: flex;
-      justify-content: center;
-    }
-  }
-
-  &__content {
-    background-color: $color-white;
-    padding: $medium-spacing;
     display: flex;
-    flex-direction: column;
-    z-index: 1;
+    position: relative;
     width: 100%;
+    min-height: 100vh;
 
-    @include desktop {
-      padding: 2 * $large-spacing;
+    &--illustration {
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 50%;
+        background: $color-brand-dark;
+      }
     }
-  }
 
-  &__logo {
-    width: 300px;
-    height: 50px;
-    margin-bottom: $large-spacing;
+    &__illustration {
+      width: 30vw;
+      min-width: 400px;
+      align-self: center;
+      background-color: $color-brand;
+      z-index: 1;
+      display: none;
 
-    @include desktop {
+      &--top {
+        align-self: center;
+        margin-top: -400px;
+      }
+
+      & > svg {
+        max-width: 300px;
+        max-height: 400px;
+      }
+
+      @include desktop {
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    &__content {
+      background-color: $color-white;
+      padding: $medium-spacing;
+      display: flex;
+      flex-direction: column;
+      z-index: 1;
+      width: 100%;
+
+      @include desktop {
+        padding: 2*$large-spacing;
+      }
+    }
+
+    &__logo {
+      width: 300px;
+      height: 50px;
+      margin-bottom: $large-spacing;
+
+      @include desktop {
+        margin-bottom: 70px;
+      }
+    }
+
+    &__page-subheading {
+      @include regular-text;
+      color: $color-brand;
+      margin-bottom: $small-spacing;
+    }
+
+    &__page-heading {
+      @include heading-2;
+      color: $color-brand;
+      margin-bottom: 2*$large-spacing;
+    }
+
+    &__heading {
+      @include heading-2;
+      margin-bottom: $small-spacing;
+    }
+
+    &__claim {
+      @include heading-2;
       margin-bottom: 70px;
     }
-  }
 
-  &__page-subheading {
-    @include regular-text;
-    color: $color-brand;
-    margin-bottom: $small-spacing;
-  }
+    &__paragraph {
+      @include regular-text;
+      margin-bottom: $medium-spacing;
 
-  &__page-heading {
-    @include heading-2;
-    color: $color-brand;
-    margin-bottom: 2 * $large-spacing;
-  }
+      &:last-of-type {
+        margin-bottom: 2*$large-spacing;
+      }
+    }
 
-  &__heading {
-    @include heading-2;
-    margin-bottom: $small-spacing;
-  }
+    &__button {
+      @include regular-text;
+      flex-grow: 0;
+      align-self: flex-start;
+      min-width: 150px;
+      display: inline-flex;
+      box-sizing: border-box;
+      justify-content: center;
+      margin-bottom: $large-spacing;
+      cursor: pointer;
+    }
 
-  &__claim {
-    @include heading-2;
-    margin-bottom: 70px;
-  }
+    &__secondary-link {
+      @include inline-title;
+      cursor: pointer;
 
-  &__paragraph {
-    @include regular-text;
-    margin-bottom: $medium-spacing;
-
-    &:last-of-type {
-      margin-bottom: 2 * $large-spacing;
+      @include desktop {
+        margin-top: auto;
+      }
     }
   }
-
-  &__button {
-    @include regular-text;
-    flex-grow: 0;
-    align-self: flex-start;
-    min-width: 150px;
-    display: inline-flex;
-    box-sizing: border-box;
-    justify-content: center;
-    margin-bottom: $large-spacing;
-    cursor: pointer;
-  }
-
-  &__secondary-link {
-    @include inline-title;
-    cursor: pointer;
-
-    @include desktop {
-      margin-top: auto;
-    }
-  }
-}
 </style>

client/src/pages/article.vue

@@ -37,13 +37,14 @@
   import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
   import CommentInput from '@/components/rooms/CommentInput';
   import Comment from '@/components/rooms/Comment';
-  const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
-  const ImageBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock');
-  const ImageUrlBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock');
-  const VideoBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock');
-  const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
-  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
-  const SubtitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock');
+  import {defineAsyncComponent} from 'vue';
+  const TextBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock'));
+  const ImageBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock'));
+  const ImageUrlBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock'));
+  const VideoBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock'));
+  const LinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock'));
+  const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
+  const SubtitleBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock'));
 
   export default {
     components: {

client/src/pages/hello.vue

@@ -1,39 +1,64 @@
 <template>
-  <div class="hello" data-cy="hello-page">
+  <div
+    class="hello"
+    data-cy="hello-page"
+  >
     <div class="about">
       <div class="about__logos logos">
-        <a href="https://www.hep-verlag.ch/" target="_blank">
+        <a
+          href="https://www.hep-verlag.ch/"
+          target="_blank"
+        >
           <hep-logo-no-claim class="logos__logo" />
         </a>
-        <a href="https://www.ehb.swiss/" target="_blank" v-if="$flavor.showEHB">
+        <a
+          href="https://www.ehb.swiss/"
+          target="_blank"
+          v-if="$flavor.showEHB"
+        >
           <ehb-logo class="logos__logo" />
         </a>
       </div>
       <p class="about__text">
         <template v-if="$flavor.showEHB">
-          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in Zusammenarbeit mit der Eidgenössischen Hochschule
-          für Berufsbildung (EHB).
+          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in
+          Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB).
+        </template>
+        <template v-else>
+          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags.
         </template>
-        <template v-else> {{ $flavor.textAppName }} ist ein Angebot des hep Verlags. </template>
       </p>
     </div>
     <logo class="logo" />
     <div class="login-actions">
-      <h2 class="login-actions__title" data-cy="hello-title">
+      <h2
+        class="login-actions__title"
+        data-cy="hello-title"
+      >
         Wollen Sie {{ $flavor.textAppName }} im Unterricht verwenden?
       </h2>
-      <a class="button button--primary button--big actions__submit" href="/api/oauth/login/" data-cy="oauth-login"
-        >Mit hep Konto anmelden</a
-      >
+      <a
+        class="button button--primary button--big actions__submit"
+        href="/api/oauth/login/"
+        data-cy="oauth-login"
+      >Mit hep Konto anmelden</a>
 
       <div class="login-actions__register register">
         <p>Haben Sie noch kein hep Konto?</p>
-        <a class="hep-link" href="/api/oauth/login/" data-cy="oauth-login">Jetzt registrieren</a>
+        <a
+          class="hep-link"
+          href="/api/oauth/login/"
+          data-cy="oauth-login"
+        >Jetzt registrieren</a>
       </div>
     </div>
     <div class="information">
       <p>Was ist ein hep Konto und wie kann ich mich dafür registrieren?</p>
-      <a class="hep-link" href="https://myskillbox.ch/anleitung" data-cy="oauth-login">Anleitung anschauen</a>
+      <a
+        class="hep-link"
+        href="https://myskillbox.ch/anleitung"
+        data-cy="oauth-login"
+      >Anleitung anschauen</a>
     </div>
     <div class="links">
       <ul class="links__list">
@@ -52,131 +77,133 @@
 </template>
 
 <script>
-const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */ '@/components/icons/HepLogoNoClaim');
-const EhbLogo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EhbLogo');
-const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
+  import {defineAsyncComponent} from 'vue';
+  const HepLogoNoClaim = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim'));
+  const EhbLogo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo'));
+  const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
 
-export default {
-  components: {
-    HepLogoNoClaim,
-    EhbLogo,
-    Logo,
-  },
+  export default {
+    components: {
+      HepLogoNoClaim,
+      EhbLogo,
+      Logo
+    },
 
-  data() {
-    return {
-      email: '',
-      submitted: false,
-      loading: false,
-    };
-  },
-};
+    data() {
+      return {
+        email: '',
+        submitted: false,
+        loading: false
+      };
+    },
+
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-$hello-block-margin: 2 * $medium-spacing;
+  $hello-block-margin: 2*$medium-spacing;
 
-.hello {
-  max-width: 600px;
-  margin: 0 auto;
-  @include desktop {
+  .hello {
     max-width: 600px;
     margin: 0 auto;
+    @include desktop {
+      max-width: 600px;
+      margin: 0 auto;
+    }
   }
-}
 
-.logo {
-  display: block;
-  width: 300px;
-  margin: $small-spacing auto $hello-block-margin;
-
-  @include desktop {
-    display: none;
-  }
-}
-
-.about {
-  display: none;
-  margin-bottom: $hello-block-margin;
-
-  @include desktop {
+  .logo {
     display: block;
-  }
-
-  &__text {
-    margin-top: $medium-spacing;
-    @include regular-text;
-  }
-
-  &__logos {
-    & a:first-child {
-      margin-right: $large-spacing;
-    }
-  }
-}
-
-.logos {
-  &__logo {
-    height: 30px;
-  }
-}
-
-.login-actions {
-  @include widget-shadow;
-  padding: $medium-spacing;
-  margin-bottom: $hello-block-margin;
-
-  &__title {
-    font-size: 2.125rem; // 34px
-    font-weight: 700;
-  }
-
-  &__register {
-    margin-top: $large-spacing;
-
-    > p,
-    a {
-      @include regular-text;
-    }
-  }
-}
-
-.information {
-  margin-top: $hello-block-margin;
-  > p,
-  a {
-    @include regular-text;
-  }
-}
-
-.links {
-  margin-top: $hello-block-margin;
-  display: flex;
-
-  &__list-item {
-    color: $color-silver-dark;
-
-    > a {
-      @include regular-text;
-    }
-
-    flex-direction: column;
-    margin-top: $medium-spacing;
-
-    &:first-child {
-      margin-top: 0;
-    }
+    width: 300px;
+    margin: $small-spacing auto $hello-block-margin;
 
     @include desktop {
-      display: inline-block;
-      flex-direction: row;
+      display: none;
+    }
+  }
 
-      &:not(:last-child) {
-        margin-right: 1rem;
+  .about {
+    display: none;
+    margin-bottom: $hello-block-margin;
+
+    @include desktop {
+      display: block;
+    }
+
+    &__text {
+      margin-top: $medium-spacing;
+      @include regular-text;
+    }
+
+    &__logos {
+      & a:first-child {
+        margin-right: $large-spacing;
       }
     }
   }
-}
+
+  .logos {
+    &__logo {
+      height: 30px;
+    }
+  }
+
+  .login-actions {
+    @include widget-shadow;
+    padding: $medium-spacing;
+    margin-bottom: $hello-block-margin;
+
+    &__title {
+        font-size: 2.125rem; // 34px
+        font-weight: 700;
+    }
+
+    &__register {
+      margin-top: $large-spacing;
+
+      > p, a {
+        @include regular-text;
+      }
+    }
+  }
+
+  .information {
+    margin-top: $hello-block-margin;
+    > p, a {
+      @include regular-text;
+    }
+  }
+
+  .links {
+    margin-top: $hello-block-margin;
+    display: flex;
+
+    &__list-item {
+
+      color: $color-silver-dark;
+
+      > a {
+        @include regular-text;
+      }
+
+      flex-direction: column;
+      margin-top: $medium-spacing;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      @include desktop {
+        display: inline-block;
+        flex-direction: row;
+
+        &:not(:last-child) {
+          margin-right: 1rem;
+        }
+     }
+    }
+  }
+
 </style>

client/src/pages/instrument.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="instrument">
-    <h1 class="instrument__title" data-cy="instrument-title">
+    <h1
+      class="instrument__title"
+      data-cy="instrument-title"
+    >
       {{ instrument.title }}
     </h1>
 
     <!-- eslint-disable vue/no-v-html -->
-    <div class="instrument__intro intro" data-cy="instrument-intro" v-html="instrument.intro" />
+    <div
+      class="instrument__intro intro"
+      data-cy="instrument-intro"
+      v-html="instrument.intro"
+    />
 
     <content-component
       :component="component"
@@ -20,80 +27,80 @@
 </template>
 
 <script>
-import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
+  import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
 
-const ContentComponent = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent');
+  import {defineAsyncComponent} from 'vue';
+  const ContentComponent = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent'));
 
-export default {
-  apollo: {
-    instrument() {
-      return {
-        query: INSTRUMENT_QUERY,
-        variables: {
-          slug: this.$route.params.slug,
-        },
-      };
+  export default {
+    apollo: {
+      instrument() {
+        return {
+          query: INSTRUMENT_QUERY,
+          variables: {
+            slug: this.$route.params.slug
+          }
+        };
+      }
     },
-  },
 
-  components: {
-    ContentComponent,
-  },
+    components: {
+      ContentComponent
+    },
 
-  data() {
-    return {
-      instrument: {},
-    };
-  },
-};
+    data() {
+      return {
+        instrument: {}
+      };
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.instrument {
-  &__title {
-    font-size: toRem(35px);
-    margin-bottom: $large-spacing;
-    line-height: $default-heading-line-height;
-  }
-
-  & :deep() {
-    & p {
+  .instrument {
+    &__title {
+      font-size: toRem(35px);
       margin-bottom: $large-spacing;
+      line-height: $default-heading-line-height;
     }
 
-    & p:last-child {
-      margin-bottom: 0;
-    }
+    & /deep/ {
+      & p {
+        margin-bottom: $large-spacing;
+      }
 
-    & ul {
-      @include list-parent;
-    }
+      & p:last-child {
+        margin-bottom: 0;
+      }
 
-    & p + ul {
-      margin-top: -30px;
-    }
+      & ul {
+        @include list-parent;
+      }
 
-    & li {
-      @include list-child;
-      line-height: 1.5;
-    }
+      & p + ul {
+        margin-top: -30px;
+      }
 
-    & b {
-      font-weight: 600;
-    }
+      & li {
+        @include list-child;
+        line-height: 1.5;
+      }
 
-    .brand {
-      color: $color-brand;
-      font-weight: 600;
-    }
+      & b {
+        font-weight: 600;
+      }
 
-    .secondary {
-      color: $color-accent-2;
-      font-weight: 600;
+      .brand {
+        color: $color-brand;
+        font-weight: 600;
+      }
+
+      .secondary {
+        color: $color-accent-2;
+        font-weight: 600;
+      }
     }
   }
-}
 </style>

client/src/pages/license-activation.vue

@@ -2,11 +2,14 @@
   <div class="license-activation public-page">
     <header class="info-header">
       <p class="info-header__text small-emph">
-        Für <span class="info-header__emph">{{ me.email }}</span> haben wir keine gültige Lizenz gefunden
+        Für <span class="info-header__emph">{{ me.email }}</span> haben wir keine
+        gültige Lizenz gefunden
       </p>
     </header>
     <section class="coupon">
-      <ValidationObserver v-slot="{ handleSubmit }">
+      <ValidationObserver
+        v-slot="{handleSubmit}"
+      >
         <form
           class="license-activation__form license-activation-form"
           novalidate
@@ -30,7 +33,12 @@
               data-cy="coupon-button"
               label="Coupon abschicken"
             />
-            <a class="button button--big" data-cy="license-activation-cancel" @click="logout">Abmelden </a>
+            <a
+              class="button button--big"
+              data-cy="license-activation-cancel"
+              @click="logout"
+            >Abmelden
+            </a>
           </div>
         </form>
       </ValidationObserver>
@@ -39,10 +47,16 @@
       <h2>Oder, kaufen Sie eine Lizenz</h2>
       <ul class="license-links">
         <li class="license-links__item">
-          <a :href="teacherEditionUrl" class="hep-link">{{ $flavor.textAppName }} für Lehrpersonen</a>
+          <a
+            :href="teacherEditionUrl"
+            class="hep-link"
+          >{{ $flavor.textAppName }} für Lehrpersonen</a>
         </li>
         <li class="license-links__item">
-          <a :href="studentEditionUrl" class="hep-link">{{ $flavor.textAppName }} für Lernende</a>
+          <a
+            :href="studentEditionUrl"
+            class="hep-link"
+          >{{ $flavor.textAppName }} für Lernende</a>
         </li>
       </ul>
     </section>
@@ -50,101 +64,103 @@
 </template>
 
 <script>
-import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
-import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-import LoadingButton from '@/components/LoadingButton';
-import { ValidationObserver } from 'vee-validate';
 
-import me from '@/mixins/me';
-import logout from '@/mixins/logout';
+  import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
+  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+  import LoadingButton from '@/components/LoadingButton';
+  import {ValidationObserver} from 'vee-validate';
 
-const ValidatedInput = () => import('@/components/validation/ValidatedInput.vue');
+  import me from '@/mixins/me';
+  import logout from '@/mixins/logout';
 
-export default {
-  mixins: [me, logout],
-  components: {
-    LoadingButton,
-    ValidationObserver,
-    ValidatedInput,
-  },
+  import {defineAsyncComponent} from 'vue';
+  const ValidatedInput = defineAsyncComponent(() => import('@/components/validation/ValidatedInput'));
 
-  data() {
-    return {
-      coupon: '',
-      couponErrors: [],
-      loginError: '',
-      submitted: false,
-      me: {
-        email: '',
-      },
-      teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
-      studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
-      loading: false,
-    };
-  },
-  methods: {
-    validateBeforeSubmit() {
-      this.submitted = true;
-      this.loading = true;
-      this.$apollo
-        .mutate({
+  export default {
+    mixins: [me, logout],
+    components: {
+      LoadingButton,
+      ValidationObserver,
+      ValidatedInput,
+    },
+
+    data() {
+      return {
+        coupon: '',
+        couponErrors: [],
+        loginError: '',
+        submitted: false,
+        me: {
+          email: '',
+        },
+        teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
+        studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
+        loading: false,
+      };
+    },
+    methods: {
+      validateBeforeSubmit() {
+        this.submitted = true;
+        this.loading = true;
+        this.$apollo.mutate({
           mutation: REDEEM_COUPON,
           variables: {
             input: {
               couponCode: this.coupon,
             },
           },
-          update: (store, { data: { coupon } }) => {
+          update: (
+            store,
+            {
+              data: {coupon},
+            },
+          ) => {
             if (coupon.success) {
               this.couponErrors = [];
-              this.$apollo
-                .query({
-                  query: ME_QUERY,
-                  fetchPolicy: 'network-only',
-                })
-                .then(() => this.$router.push('/'));
+              this.$apollo.query({
+                query: ME_QUERY,
+                fetchPolicy: 'network-only',
+              }).then(() => this.$router.push('/'));
             }
           },
-        })
-        .catch(({ message }) => {
-          if (message.indexOf('invalid_coupon') > -1) {
-            this.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
-          } else {
-            this.couponErrors = [
-              'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.',
-            ];
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
+        }).catch(({message}) => {
+            if (message.indexOf('invalid_coupon') > -1) {
+              this.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
+            } else {
+              this.couponErrors = ['Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.'];
+            }
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.text-link {
-  font-family: $sans-serif-font-family;
-  color: $color-brand;
-}
-
-.actions {
-  &__reset {
-    display: inline-block;
-    margin-left: $large-spacing;
+  .text-link {
+    font-family: $sans-serif-font-family;
+    color: $color-brand;
   }
-}
 
-.get-license {
-  margin-top: $large-spacing;
-}
-
-.license-links {
-  &__item {
-    margin-bottom: $medium-spacing;
+  .actions {
+    &__reset {
+      display: inline-block;
+      margin-left: $large-spacing;
+    }
   }
-}
+
+  .get-license {
+    margin-top: $large-spacing
+  }
+
+  .license-links {
+    &__item {
+      margin-bottom: $medium-spacing;
+    }
+  }
+
 </style>

client/src/pages/module/moduleVisibility.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="module-visibility">
-    <h1 class="module-visibility__page-title">Sichtbarkeit</h1>
+    <h1 class="module-visibility__page-title">
+      Sichtbarkeit
+    </h1>
     <div class="module-visibility__section">
       <p class="module-visibility__paragraph">
         Wollen Sie die angepasste Sichtbarkeit (
@@ -16,113 +18,127 @@
         class="skillbox-input skillbox-dropdown module-visibility__dropdown"
         @change="select($event.target.value)"
       >
-        <option value="" selected>-</option>
-        <option :value="schoolClass.id" v-for="schoolClass in schoolClasses" :key="schoolClass.id">
+        <option
+          value=""
+          selected
+        >
+          -
+        </option>
+        <option
+          :value="schoolClass.id"
+          v-for="schoolClass in schoolClasses"
+          :key="schoolClass.id"
+        >
           {{ schoolClass.name }}
         </option>
       </select>
       für {{ currentClassName }} übernehmen.
     </div>
     <div class="module-visibility__section">
-      <a class="button button--primary" data-cy="save-visibility-button" @click="sync">Anpassungen übernehmen</a>
+      <a
+        class="button button--primary"
+        data-cy="save-visibility-button"
+        @click="sync"
+      >Anpassungen übernehmen</a>
     </div>
   </div>
 </template>
 
 <script>
-import me from '@/mixins/me';
+  import me from '@/mixins/me';
 
-import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
-import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-import { MODULE_PAGE } from '@/router/module.names';
+  import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
+  import {MODULE_PAGE} from '@/router/module.names';
 
-const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
+  import {defineAsyncComponent} from 'vue';
+  const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
 
-export default {
-  mixins: [me],
-  components: {
-    EyeIcon,
-  },
+  export default {
 
-  data() {
-    return {
-      selectedClassId: '',
-    };
-  },
-
-  computed: {
-    schoolClasses() {
-      return this.me.schoolClasses.filter((schoolClass) => schoolClass.id !== this.me.selectedClass.id);
+    mixins: [me],
+    components: {
+      EyeIcon,
     },
-    slug() {
-      return this.$route.params.slug;
-    },
-  },
 
-  methods: {
-    select(selectedClassId) {
-      this.selectedClassId = selectedClassId;
+    data() {
+      return {
+        selectedClassId: '',
+      };
     },
-    sync() {
-      if (this.selectedClassId) {
-        const slug = this.slug;
-        this.$apollo
-          .mutate({
-            mutation: SYNC_VISIBILITY_MUTATION,
-            variables: {
-              input: {
-                module: slug,
-                templateSchoolClass: this.selectedClassId,
-                schoolClass: this.me.selectedClass.id,
-              },
-            },
-            refetchQueries: [
-              {
-                query: MODULE_DETAILS_QUERY,
-                variables: {
-                  slug,
+
+    computed: {
+      schoolClasses() {
+        return this.me.schoolClasses.filter(schoolClass => schoolClass.id !== this.me.selectedClass.id);
+      },
+      slug() {
+        return this.$route.params.slug;
+      }
+    },
+
+    methods: {
+      select(selectedClassId) {
+        this.selectedClassId = selectedClassId;
+      },
+      sync() {
+        if (this.selectedClassId) {
+          const slug = this.slug;
+          this.$apollo.mutate({
+              mutation: SYNC_VISIBILITY_MUTATION,
+              variables: {
+                input: {
+                  module: slug,
+                  templateSchoolClass: this.selectedClassId,
+                  schoolClass: this.me.selectedClass.id,
                 },
               },
-            ],
-          })
-          .then(() => {
+              refetchQueries: [
+                {
+                  query: MODULE_DETAILS_QUERY,
+                  variables: {
+                    slug,
+                  },
+                },
+              ],
+            },
+          ).then(() => {
             this.$router.push({
               name: MODULE_PAGE,
               params: {
-                slug,
-              },
+                slug
+              }
             });
           });
-      }
+        }
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_helpers';
+  @import '~styles/_helpers';
 
-.module-visibility {
-  @include settings-page;
+  .module-visibility {
+    @include settings-page;
 
-  margin: 0 auto;
+    margin: 0 auto;
 
-  &__inline-icon {
-    width: 25px;
-    height: 25px;
-    vertical-align: middle;
+    &__inline-icon {
+      width: 25px;
+      height: 25px;
+      vertical-align: middle;
+    }
+
+    &__dropdown {
+      width: 200px;
+      margin: 0 $medium-spacing;
+    }
+
+    &__form {
+      display: flex;
+      align-items: center;
+      @include regular-text;
+      font-weight: 600;
+    }
   }
-
-  &__dropdown {
-    width: 200px;
-    margin: 0 $medium-spacing;
-  }
-
-  &__form {
-    display: flex;
-    align-items: center;
-    @include regular-text;
-    font-weight: 600;
-  }
-}
 </style>

client/src/pages/onboarding/start.vue

@@ -1,18 +1,23 @@
 <template>
   <div>
     <logo class="onboarding__logo" />
-    <h1 class="onboarding__heading">Herzlich willkommen!</h1>
+    <h1 class="onboarding__heading">
+      Herzlich willkommen!
+    </h1>
 
-    <p class="onboarding__claim">Schauen Sie sich die Einführung an und lernen Sie {{ $flavor.textAppName }} kennen.</p>
+    <p class="onboarding__claim">
+      Schauen Sie sich die Einführung an und lernen Sie {{ $flavor.textAppName }} kennen.
+    </p>
   </div>
 </template>
 
 <script>
-const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
+  import {defineAsyncComponent} from 'vue';
+  const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
 
-export default {
-  components: {
-    Logo,
-  },
-};
+  export default {
+    components: {
+      Logo
+    },
+  };
 </script>

client/src/pages/survey.vue

@@ -5,282 +5,258 @@
     </h1>
     <div id="survey" />
 
-    <solution :value="solution" v-if="showSolution" />
+    <solution
+      :value="solution"
+      v-if="showSolution"
+    />
     <div v-if="surveyComplete">
-      <a class="button button--primary" @click="reopen">Übung bearbeiten</a>
+      <a
+        class="button button--primary"
+        @click="reopen"
+      >Übung bearbeiten</a>
     </div>
   </div>
 </template>
 
 <script>
-import '@/styles/survey.modern.css';
-import '@/styles/survey.reset.css';
-import { css } from '@/survey.config';
-import gql from 'graphql-tag';
-import { Model, StylesManager } from 'survey-knockout';
-// we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
+  import {css} from '@/survey.config';
+  import gql from 'graphql-tag';
+  import {Model} from 'survey-core';
+  // we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
+  import 'survey-knockout-ui';
 
-import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
-import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
+  import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
+  import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
 
-import { extractSurveySolutions } from '@/helpers/survey-solutions';
-import { isTeacher } from '@/helpers/is-teacher';
+  import {extractSurveySolutions} from '@/helpers/survey-solutions';
+  import {isTeacher} from '@/helpers/is-teacher';
 
-import { meQuery } from '@/graphql/queries';
+  import {meQuery} from '@/graphql/queries';
 
-const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
-StylesManager.applyTheme('modern');
+  import {defineAsyncComponent} from 'vue';
+  const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
 
-const MODULE_QUERY = gql`
-  query ModuleSolutions($slug: String) {
-    module(slug: $slug) {
-      solutionsEnabled
-      slug
+  const MODULE_QUERY = gql`
+    query ModuleSolutions($slug: String) {
+        module(slug: $slug) {
+            solutionsEnabled
+            slug
+        }
     }
-  }
 `;
 
-export default {
-  props: ['id'],
-  components: {
-    Solution,
-  },
-
-  data() {
-    return {
-      survey: this.initSurvey(),
-      currentPage: null,
-      surveyData: null,
-      title: '',
-      module: {},
-      completed: false,
-      me: {
-        permissions: [],
-      },
-      saveDisabled: false,
-    };
-  },
-
-  computed: {
-    surveyComplete() {
-      return this.survey && this.survey.isCompleted;
+  export default {
+    props: ['id'],
+    components: {
+      Solution,
     },
-    showSolution() {
-      return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
-    },
-    solution() {
-      // todo: should this be done inside of Solution.vue?
+
+    data() {
       return {
-        text: this.answers.reduce((previous, answer) => {
-          if (!answer.answer) {
-            return previous;
-          }
-          if (answer.type === 'matrix' || answer.type === 'checkbox') {
-            // wrap all the answers inside li tags and convert to a single string
-            const answerText = answer.answer.map((a) => `<li class="solution-text__list-item">${a}</li>`).join('');
-            return `
+        survey: this.initSurvey(),
+        title: '',
+        module: {},
+        completed: false,
+        me: {
+          permissions: [],
+        },
+        saveDisabled: false,
+      };
+    },
+
+    computed: {
+      surveyComplete() {
+        return this.survey && this.survey.isCompleted;
+      },
+      showSolution() {
+        return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
+      },
+      solution() {
+        // todo: should this be done inside of Solution.vue?
+        return {
+          text: this.answers.reduce((previous, answer) => {
+            if (!answer.answer) {
+              return previous;
+            }
+            if (answer.type === 'matrix' || answer.type === 'checkbox') {
+              // wrap all the answers inside li tags and convert to a single string
+              const answerText = answer.answer.map(a => `<li class="solution-text__list-item">${a}</li>`).join('');
+              return `
             ${previous}
             <h2 class="solution-text__heading">${answer.title}</h2>
             <ul class="solution-text__answer solution-text__list">${answerText}</ul>
             `;
-          } else {
-            return `
+            } else {
+              return `
             ${previous}
              <h2 class="solution-text__heading">${answer.title}</h2>
              <p class="solution-text__answer">${answer.answer}</p>
              `;
-          }
-        }, ''),
-      };
-    },
-    answers() {
-      return this.currentPage && this.currentPage.elements
-        ? this.currentPage.elements.reduce(extractSurveySolutions, [])
-        : [];
-    },
-    isTeacher() {
-      return isTeacher(this);
-    },
-  },
-
-  mounted() {
-    if (this.surveyData) {
-      this.loadSurveyFromServer(this.surveyData);
-    }
-  },
-
-  destroyed() {},
-
-  methods: {
-    initSurvey(data, answers) {
-      let survey = new Model(data);
-      const flatAnswers = {};
-      for (let k in answers) {
-        flatAnswers[k] = answers[k].answer;
-      }
-      if (Object.keys(flatAnswers).length > 0) {
-        // answers are not empty
-        survey.data = flatAnswers;
-      }
-
-      this.currentPage = survey.currentPage;
-
-      const updatePage = (sender, { oldCurrentPage, newCurrentPage }) => {
-        console.log(oldCurrentPage, newCurrentPage);
-        this.currentPage = newCurrentPage;
-      };
-
-      const saveSurvey = (sender, { exit }) => {
-        if (this.saveDisabled) {
-          return;
-        }
-
-        this.completed = true;
-
-        const data = {};
-
-        for (let k in survey.data) {
-          // if (survey.data.hasOwnProperty(k)) {
-          if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
-            let question = sender.getQuestionByName(k);
-            data[k] = {
-              answer: survey.data[k],
-              correct: question && question.correctAnswer ? question.correctAnswer : '',
-            };
-          }
-        }
-        if (Object.keys(data).length === 0) {
-          // data is empty
-          return;
-        }
-        const answer = {
-          surveyId: this.id,
-          data: JSON.stringify(data),
+            }
+          }, ''),
         };
+      },
+      answers() {
+        return this.survey.currentPage && this.survey.currentPage.elements
+          ? this.survey.currentPage.elements.reduce(extractSurveySolutions, [])
+          : [];
+      },
+      isTeacher() {
+        return isTeacher(this);
+      },
+    },
 
-        this.$apollo
-          .mutate({
+    methods: {
+      initSurvey(data, answers) {
+        let survey = new Model(data);
+        const flatAnswers = {};
+        for (let k in answers) {
+          flatAnswers[k] = answers[k].answer;
+        }
+        this.$log.debug('flatAnswers', flatAnswers);
+        this.$log.debug('data', survey.data);
+        if (Object.keys(flatAnswers).length > 0) {
+          // answers are not empty
+          survey.data = flatAnswers;
+        }
+
+        const saveSurvey = (sender, {exit}) => {
+          this.$log.debug('saving survey', sender);
+          if (this.saveDisabled) {
+            return;
+          }
+
+          this.completed = true;
+
+          const data = {};
+
+          for (let k in survey.data) {
+            // if (survey.data.hasOwnProperty(k)) {
+              if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
+              let question = sender.getQuestionByName(k);
+              data[k] = {
+                answer: survey.data[k],
+                correct: question && question.correctAnswer ? question.correctAnswer : '',
+              };
+            }
+          }
+          if (Object.keys(data).length === 0) {
+            // data is empty
+            return;
+          }
+          const answer = {
+            surveyId: this.id,
+            data: JSON.stringify(data),
+          };
+
+          this.$apollo.mutate({
             mutation: UPDATE_ANSWER,
             variables: {
               input: {
                 answer,
               },
             },
-            update: (
-              store,
-              {
-                data: {
-                  updateAnswer: { answer },
-                },
-              }
-            ) => {
+            update: (store, {data: {updateAnswer: {answer}}}) => {
               const query = SURVEY_QUERY;
-              const variables = { id: this.id };
-              const { survey } = store.readQuery({ query, variables });
+              const variables = {id: this.id};
+              const {survey} = store.readQuery({query, variables});
               if (survey) {
-                const newData = {
-                  // data is already in use in parent scope
+                const newData = { // data is already in use in parent scope
                   survey: {
                     ...survey,
-                    answer,
-                  },
+                    answer
+                  }
                 };
-                store.writeQuery({ query, variables, data: newData });
+                store.writeQuery({query, variables, data: newData});
               }
             },
-          })
-          .then(() => {
+          }).then(() => {
             if (exit) {
               this.$router.go(-1);
             }
           });
-      };
-
-      survey.onComplete.add((sender, options) => {
-        saveSurvey(sender, {
-          ...options,
-          exit: true,
-        });
-      });
-      survey.onCurrentPageChanged.add(saveSurvey);
-      survey.onCurrentPageChanged.add(updatePage);
-
-      survey.css = css;
-      survey.locale = 'de';
-      survey.showProgressBar = 'bottom';
-      survey.pageNextText = 'Speichern & Weiter';
-      survey.render('survey');
-      return survey;
-    },
-    reopen() {
-      this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
-      this.completed = false;
-      let data = this.survey.data; // save the data
-      this.survey.clear();
-      this.survey.data = data; // reapply it
-      this.saveDisabled = false;
-    },
-    loadSurveyFromServer(survey) {
-      let json = JSON.parse(survey.data);
-      json.showTitle = false;
-      json.showProgressBar = 'bottom';
-      let answer = {};
-      if (survey.answer && survey.answer.data) {
-        answer = JSON.parse(survey.answer.data);
-      }
-
-      if (!this.completed) {
-        this.survey = this.initSurvey(json, answer);
-      }
-      this.title = json.title;
-    },
-  },
-
-  apollo: {
-    survey: {
-      query: SURVEY_QUERY,
-      variables() {
-        return {
-          id: this.id,
         };
-      },
-      manual: true,
-      result({ data, loading }) {
-        if (!loading) {
-          this.surveyData = data.survey;
-          this.loadSurveyFromServer(data.survey);
-          const module = data.survey.module;
 
-          this.$apollo.addSmartQuery('module', {
-            query: MODULE_QUERY,
-            variables: {
-              slug: module.slug,
-            },
+        survey.onComplete.add((sender, options) => {
+          saveSurvey(sender, {
+            ...options,
+            exit: true
           });
-        }
+        });
+        survey.onCurrentPageChanged.add(saveSurvey);
+
+        survey.css = css;
+        survey.locale = 'de';
+        survey.showProgressBar = 'bottom';
+        survey.pageNextText = 'Speichern & Weiter';
+        this.$log.debug(survey.data);
+        survey.render('survey');
+        return survey;
+      },
+      reopen() {
+        this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
+        this.completed = false;
+        let data = this.survey.data; // save the data
+        this.survey.clear();
+        this.survey.data = data; // reapply it
+        this.saveDisabled = false;
       },
     },
-    me: meQuery,
-  },
-};
+
+    apollo: {
+      survey: {
+        query: SURVEY_QUERY,
+        variables() {
+          return {
+            id: this.id,
+          };
+        },
+        manual: true,
+        result({data, loading }) {
+          if (!loading) {
+            let json = JSON.parse(data.survey.data);
+            json.showTitle = false;
+            let answer = {};
+            if (data.survey.answer && data.survey.answer.data) {
+              answer = JSON.parse(data.survey.answer.data);
+            }
+
+            if (!this.completed) {
+              this.survey = this.initSurvey(json, answer);
+            }
+            this.title = json.title;
+            const module = data.survey.module;
+
+            this.$apollo.addSmartQuery('module', {
+              query: MODULE_QUERY,
+              variables: {
+                slug: module.slug
+              },
+            });
+          }
+        },
+      },
+      me: meQuery,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.survey-page {
-  max-width: 800px;
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-auto-rows: auto;
-  grid-row-gap: $large-spacing;
-  justify-self: center;
-  padding: 100px 0;
-  width: 100%;
+  .survey-page {
+    max-width: 800px;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-auto-rows: auto;
+    grid-row-gap: $large-spacing;
+    justify-self: center;
+    padding: 100px 0;
+    width: 100%;
 
-  &__title {
-    @include meta-title;
-    margin: 0;
+    &__title {
+      @include meta-title;
+      margin: 0;
+    }
   }
-}
 </style>

client/src/pages/topic-page.vue

@@ -46,15 +46,15 @@
 
 <script>
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
+  import {defineAsyncComponent} from 'vue';
   import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
   import me from '@/mixins/me';
   import TopicNavigation from '@/components/book-navigation/TopicNavigation';
 
   import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-
-  const PlayIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/Play');
-  const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');
+  const PlayIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Play'));
+  const BulbIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon'));
 
   export default {