Apply prettier on project again

2023-02-07 14:31:26 +01:00 · 2023-02-07 14:31:26 +01:00 · 0bfc4f9bcb
parent af4f19720b
commit 0bfc4f9bcb
263 changed files with 3251 additions and 1036 deletions
--- a/client/build/webpack.base.conf.js
+++ b/client/build/webpack.base.conf.js
@ -60,7 +60,7 @@ module.exports = {
          },
          compilerOptions: {
            compatConfig: {
-              MODE: 2
+              MODE: 2,
            },
          },
        },
--- a/client/cypress/e2e/frontend/modules/snapshots.spec.js
+++ b/client/cypress/e2e/frontend/modules/snapshots.spec.js
@ -89,9 +89,8 @@ const waitNTimes = (n) => {
  }
 };

-
 describe('Snapshot', () => {
-  const operations = isTeacher => ({
+  const operations = (isTeacher) => ({
    operations: {
      UpdateSnapshot: {
        updateSnapshot: {
@ -129,7 +128,6 @@ describe('Snapshot', () => {
              };
            }
            return result;
-
          },
        },
      },
@ -279,5 +277,4 @@ describe('Snapshot', () => {
    cy.getByDataCy('rename-snapshot-button').should('not.exist');
    waitNTimes(4);
  });
-
 });
--- a/client/index.html
+++ b/client/index.html
@ -2,20 +2,60 @@
 <html>
  <head>
    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
    <title><%= htmlWebpackPlugin.options.VUE_APP_TITLE %></title>

-    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css" />
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800" rel="stylesheet" />
-    <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Material+Icons"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800"
+      rel="stylesheet"
+    />
+    <link
+      href="https://use.typekit.net/tck7ptw.css"
+      rel="stylesheet"
+    />

-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_32 %>" />
-    <link rel="icon" type="image/png" sizes="16x16" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_16 %>" />
-    <link rel="manifest" href="/static/site.webmanifest" />
-    <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/static/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_32 %>"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_16 %>"
+    />
+    <link
+      rel="manifest"
+      href="/static/site.webmanifest"
+    />
+    <link
+      rel="mask-icon"
+      href="/static/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+    <meta
+      name="msapplication-TileColor"
+      content="#da532c"
+    />
+    <meta
+      name="theme-color"
+      content="#ffffff"
+    />

    <script>
      window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';
--- a/client/jest.config.js
+++ b/client/jest.config.js
@ -17,13 +17,8 @@ module.exports = {
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    url: 'http://localhost/',
-    customExportConditions: ['node', 'node-addons'] // needed according to https://github.com/vuejs/vue-jest/issues/479
+    customExportConditions: ['node', 'node-addons'], // needed according to https://github.com/vuejs/vue-jest/issues/479
  },
-  testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
-  ],
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname',
-  ],
+  testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 };
--- a/client/package.json
+++ b/client/package.json
@ -4,12 +4,10 @@
  "description": "skillbox vue client",
  "author": "ramon / chrigu",
  "prettier": {
-    "singleQuote": true
+    "singleQuote": true,
+    "singleAttributePerLine": true
  },
  "private": true,
-  "prettier": {
-    "singleQuote": true
-  },
  "scripts": {
    "dev": "webpack serve --progress --config build/webpack.dev.conf.js",
    "analyze": "webpack --profile --json --config build/webpack.dev.conf.js > dist/stats.json && webpack-bundle-analyzer dist/stats.json",
--- a/client/src/App.vue
+++ b/client/src/App.vue
@ -1,9 +1,19 @@
 <template>
-  <div :class="{ 'no-scroll': showModal || showMobileNavigation }" class="app" id="app">
+  <div
+    :class="{ 'no-scroll': showModal || showMobileNavigation }"
+    class="app"
+    id="app"
+  >
    <read-only-banner />
    <scroll-up />
-    <component :is="showModalDeprecated" v-if="showModalDeprecated" />
-    <component :is="showModal" v-if="showModal" />
+    <component
+      :is="showModalDeprecated"
+      v-if="showModalDeprecated"
+    />
+    <component
+      :is="showModal"
+      v-if="showModal"
+    />
    <component :is="layout" />
  </div>
 </template>
--- a/client/src/components/AddContentButton.vue
+++ b/client/src/components/AddContentButton.vue
@ -1,19 +1,19 @@
 <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 {defineAsyncComponent} from 'vue';
+import { CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE } from '@/router/module.names';
+import { defineAsyncComponent } from 'vue';

-  const AddPointer = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer'));
+const AddPointer = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/AddPointer'));

 export default {
  props: {
--- a/client/src/components/AddContentElement.vue
+++ b/client/src/components/AddContentElement.vue
@ -1,12 +1,15 @@
 <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>
-  import {defineAsyncComponent} from 'vue';
-  const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon'));
+import { defineAsyncComponent } from 'vue';
+const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon'));

 export default {
  props: ['index'],
--- a/client/src/components/AddWidget.vue
+++ b/client/src/components/AddWidget.vue
@ -11,8 +11,8 @@
 </template>

 <script>
-  import {defineAsyncComponent} from 'vue';
-  const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon.vue'));
+import { defineAsyncComponent } from 'vue';
+const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon.vue'));

 export default {
  props: {
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/client/src/components/AssignmentWithSubmissions.vue
@ -1,15 +1,24 @@
 <template>
  <!-- eslint-disable vue/no-v-html -->
  <div class="assignment-with-submissions">
-    <p class="assignment-with-submissions__text" data-cy="assignment-main-text" v-html="assignment.assignment" />
+    <p
+      class="assignment-with-submissions__text"
+      data-cy="assignment-main-text"
+      v-html="assignment.assignment"
+    />

    <div>
-      <a class="button button--primary submissions-page__back" @click="$emit('back')"
+      <a
+        class="button button--primary submissions-page__back"
+        @click="$emit('back')"
        >Aufgabe im {{ $flavor.textModule }} anzeigen</a
      >
    </div>

-    <div class="assignment-with-submissions__solution" v-if="assignment.solution">
+    <div
+      class="assignment-with-submissions__solution"
+      v-if="assignment.solution"
+    >
      <h4 class="assignment-with-submissions__heading">Lösung</h4>
      <p
        class="assignment-with-submissions__solution-text"
@ -17,11 +26,17 @@
        v-html="assignment.solution"
      />
    </div>
-    <p class="assignment-with-submissions__no-submissions" v-if="!assignment.submissions.length">
+    <p
+      class="assignment-with-submissions__no-submissions"
+      v-if="!assignment.submissions.length"
+    >
      Zu diesem Auftrag sind noch keine Ergebnisse vorhanden.
    </p>

-    <div class="assignment-with-submissions__submissions submissions" v-if="assignment.submissions.length">
+    <div
+      class="assignment-with-submissions__submissions submissions"
+      v-if="assignment.submissions.length"
+    >
      <div class="submissions__header student-submission-row submission-header">
        <p class="submission-header__title">Lernende</p>
        <p class="submission-header__title">Ergebnisse</p>
@ -33,7 +48,10 @@
        v-for="submission in submissions"
        :key="submission.id"
      >
-        <student-submission :submission="submission" class="assignment-with-submissions__submission" />
+        <student-submission
+          :submission="submission"
+          class="assignment-with-submissions__submission"
+        />
      </router-link>
    </div>
  </div>
--- a/client/src/components/BackLink.vue
+++ b/client/src/components/BackLink.vue
@ -1,17 +1,22 @@
 <template>
-  <router-link :to="to" class="sub-navigation-item back-link">
+  <router-link
+    :to="to"
+    class="sub-navigation-item back-link"
+  >
    <chevron-left class="back-link__icon sub-navigation-item__icon" />
    {{ fullTitle }}
  </router-link>
 </template>

 <script>
-  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';
+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 = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft'));
+const ChevronLeft = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronLeft')
+);

 export default {
  props: {
@ -33,35 +38,35 @@ export default {
    ChevronLeft,
  },

-    computed: {
-      to() {
-        switch (this.type) {
-          case 'topic':
-            if (this.slug) {
-              return {name: 'topic', params: {topicSlug: this.slug}};
-            } else {
-              return {};
-            }
-          case 'module':
-            return {name: MODULE_PAGE};
-          case 'portfolio':
-            return {name: PROJECTS_PAGE};
-          default:
-            return {name: ROOMS_PAGE};
-        }
-      },
-      fullTitle() {
-        switch (this.type) {
-          case 'topic':
-            return `${this.$flavor.textTopic}: ${this.title}`;
-          case 'module':
-            return `${this.$flavor.textModule}: ${this.title}`;
-          default:
-            return this.title;
-        }
-      },
+  computed: {
+    to() {
+      switch (this.type) {
+        case 'topic':
+          if (this.slug) {
+            return { name: 'topic', params: { topicSlug: this.slug } };
+          } else {
+            return {};
+          }
+        case 'module':
+          return { name: MODULE_PAGE };
+        case 'portfolio':
+          return { name: PROJECTS_PAGE };
+        default:
+          return { name: ROOMS_PAGE };
+      }
    },
-  };
+    fullTitle() {
+      switch (this.type) {
+        case 'topic':
+          return `${this.$flavor.textTopic}: ${this.title}`;
+        case 'module':
+          return `${this.$flavor.textModule}: ${this.title}`;
+        default:
+          return this.title;
+      }
+    },
+  },
+};
 </script>

 <style scoped lang="scss">
--- a/client/src/components/Chapter.vue
+++ b/client/src/components/Chapter.vue
@ -1,12 +1,24 @@
 <template>
-  <div :data-scrollto="chapter.id" class="chapter" data-cy="chapter">
-    <div :class="{ 'hideable-element--greyed-out': titleGreyedOut }" class="hideable-element" v-if="!titleHidden">
+  <div
+    :data-scrollto="chapter.id"
+    class="chapter"
+    data-cy="chapter"
+  >
+    <div
+      :class="{ 'hideable-element--greyed-out': titleGreyedOut }"
+      class="hideable-element"
+      v-if="!titleHidden"
+    >
      <h3 :id="'chapter-' + index">
        {{ chapter.title }}
      </h3>
    </div>

-    <visibility-action :block="chapter" type="chapter-title" v-if="editMode" />
+    <visibility-action
+      :block="chapter"
+      type="chapter-title"
+      v-if="editMode"
+    />

    <bookmark-actions
      :bookmarked="!!chapter.bookmark"
@ -23,13 +35,21 @@
      class="chapter__intro intro hideable-element"
      v-if="!descriptionHidden"
    >
-      <visibility-action :block="chapter" :chapter="true" type="chapter-description" v-if="editMode" />
+      <visibility-action
+        :block="chapter"
+        :chapter="true"
+        type="chapter-description"
+        v-if="editMode"
+      />
      <p class="chapter__description">
        {{ chapter.description }}
      </p>
    </div>

-    <add-content-button :where="{ parent: chapter }" v-if="editMode" />
+    <add-content-button
+      :where="{ parent: chapter }"
+      v-if="editMode"
+    />

    <content-block
      :content-block="contentBlock"
--- a/client/src/components/ColorChooser.vue
+++ b/client/src/components/ColorChooser.vue
@ -8,16 +8,22 @@
      :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>
-  import {defineAsyncComponent} from 'vue';
-  const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Tick'));
+import { defineAsyncComponent } from 'vue';
+const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick'));

 export default {
  props: ['selectedColor'],
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@ -3,18 +3,36 @@
    :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,7 +85,10 @@
      />
    </div>

-    <add-content-button :where="{ after: contentBlock }" v-if="canEditModule" />
+    <add-content-button
+      :where="{ after: contentBlock }"
+      v-if="canEditModule"
+    />
  </div>
 </template>

@ -158,19 +191,19 @@ export default {
    },
    contentBlocksWithContentLists() {
      /*
-        collects all content_list_items in content_lists:
-        {
-          text_block,
-          content_list_item: [contents...],
-          content_list_item: [contents...],
-          text_block
-        } becomes
-        {
-          text_block,
-          content_list: [content_list_item: [contents...], content_list_item: [contents...]],
-          text_block
-        }
-        */
+                      collects all content_list_items in content_lists:
+                      {
+                        text_block,
+                        content_list_item: [contents...],
+                        content_list_item: [contents...],
+                        text_block
+                      } becomes
+                      {
+                        text_block,
+                        content_list: [content_list_item: [contents...], content_list_item: [contents...]],
+                        text_block
+                      }
+                      */
      let contentList = [];
      let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
        // collect content_list_items
--- a/client/src/components/FullscreenImage.vue
+++ b/client/src/components/FullscreenImage.vue
@ -1,6 +1,13 @@
 <template>
-  <modal :hide-header="true" :fullscreen="true" class="fullscreen-image">
-    <img :src="imageUrl" class="fullscreen-image__image" />
+  <modal
+    :hide-header="true"
+    :fullscreen="true"
+    class="fullscreen-image"
+  >
+    <img
+      :src="imageUrl"
+      class="fullscreen-image__image"
+    />
  </modal>
 </template>

--- a/client/src/components/FullscreenInfographic.vue
+++ b/client/src/components/FullscreenInfographic.vue
@ -1,6 +1,9 @@
 <template>
  <modal :fullscreen="true">
-    <component :value="value" :is="type" />
+    <component
+      :value="value"
+      :is="type"
+    />
  </modal>
 </template>

--- a/client/src/components/FullscreenVideo.vue
+++ b/client/src/components/FullscreenVideo.vue
@ -1,5 +1,9 @@
 <template>
-  <modal :hide-header="true" :fullscreen="true" class="fullscreen-video">
+  <modal
+    :hide-header="true"
+    :fullscreen="true"
+    class="fullscreen-video"
+  >
    <iframe
      :src="src"
      width="2000"
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@ -1,15 +1,26 @@
 <template>
  <header class="header-bar">
-    <a class="header-bar__sidebar-link" data-cy="open-sidebar-link" @click.stop="openSidebar('navigation')">
+    <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" />
    <div class="user-header">
      <a class="user-header__sidebar-link">
-        <current-class class="user-header__current-class" @click="openSidebar('profile')" />
+        <current-class
+          class="user-header__current-class"
+          @click="openSidebar('profile')"
+        />
      </a>

-      <user-widget :avatar-url="me.avatarUrl" data-cy="header-user-widget" @click="openSidebar('profile')" />
+      <user-widget
+        :avatar-url="me.avatarUrl"
+        data-cy="header-user-widget"
+        @click="openSidebar('profile')"
+      />
    </div>
  </header>
 </template>
--- a/client/src/components/LoadingButton.vue
+++ b/client/src/components/LoadingButton.vue
@ -1,9 +1,15 @@
 <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>

--- a/client/src/components/LogoutWidget.vue
+++ b/client/src/components/LogoutWidget.vue
@ -1,6 +1,11 @@
 <template>
  <div class="logout-widget">
-    <a class="logout-widget__logout" data-cy="logout" @click="logout()">Abmelden</a>
+    <a
+      class="logout-widget__logout"
+      data-cy="logout"
+      @click="logout()"
+      >Abmelden</a
+    >
  </div>
 </template>

--- a/client/src/components/MobileHeader.vue
+++ b/client/src/components/MobileHeader.vue
@ -4,11 +4,17 @@
      <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>

--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@ -13,14 +13,21 @@
      </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>
--- a/client/src/components/ModalInput.vue
+++ b/client/src/components/ModalInput.vue
@ -7,7 +7,12 @@
      class="modal-input__inputfield skillbox-input"
      @input="$emit('input', $event.target.value)"
    />
-    <div class="modal-input__error" v-if="error">Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.</div>
+    <div
+      class="modal-input__error"
+      v-if="error"
+    >
+      Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
+    </div>
  </div>
 </template>

--- a/client/src/components/MoreOptionsWidget.vue
+++ b/client/src/components/MoreOptionsWidget.vue
@ -1,9 +1,17 @@
 <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>
--- a/client/src/components/Radiobutton.vue
+++ b/client/src/components/Radiobutton.vue
@ -1,5 +1,11 @@
 <template>
-  <base-input :label="label" :checked="checked" :item="item" :type="'radiobutton'" @input="passOn" />
+  <base-input
+    :label="label"
+    :checked="checked"
+    :item="item"
+    :type="'radiobutton'"
+    @input="passOn"
+  />
 </template>

 <script>
--- a/client/src/components/ReadOnlyBanner.vue
+++ b/client/src/components/ReadOnlyBanner.vue
@ -1,5 +1,9 @@
 <template>
-  <div class="read-only-banner" data-cy="read-only-banner" v-if="me.readOnly || me.selectedClass.readOnly">
+  <div
+    class="read-only-banner"
+    data-cy="read-only-banner"
+    v-if="me.readOnly || me.selectedClass.readOnly"
+  >
    <div class="read-only-banner__content">
      <p class="read-only-banner__text">{{ readOnlyText }} Sie können Inhalte lesen, aber nicht bearbeiten.</p>
      <div class="read-only-banner__buttons">
@ -11,7 +15,10 @@
        >
          Neuen Lizenzcode eingeben
        </router-link>
-        <a target="_blank" href="https://myskillbox.ch/lesemodus" class="button button--secondary"
+        <a
+          target="_blank"
+          href="https://myskillbox.ch/lesemodus"
+          class="button button--secondary"
          >Mehr Informationen zum Lesemodus</a
        >
      </div>
--- a/client/src/components/ScrollUp.vue
+++ b/client/src/components/ScrollUp.vue
@ -1,6 +1,10 @@
 <template>
  <transition name="fade">
-    <a class="scroll-up" v-if="scroll > 200" @click="scrollTop">
+    <a
+      class="scroll-up"
+      v-if="scroll > 200"
+      @click="scrollTop"
+    >
      <arrow-up class="scroll-up__icon" />
    </a>
  </transition>
--- a/client/src/components/SectionBlock.vue
+++ b/client/src/components/SectionBlock.vue
@ -1,10 +1,18 @@
 <template>
  <div class="section-block">
-    <div :class="{ 'section-block--navigatable': route }" class="section-block__illustration" @click="navigate()">
+    <div
+      :class="{ 'section-block--navigatable': route }"
+      class="section-block__illustration"
+      @click="navigate()"
+    >
      <slot />
    </div>

-    <div :class="{ 'section-block--navigatable': route }" class="section-block__title block-title" @click="navigate()">
+    <div
+      :class="{ 'section-block--navigatable': route }"
+      class="section-block__title block-title"
+      @click="navigate()"
+    >
      <h2 class="block-title__title">
        {{ title }}
      </h2>
@ -22,7 +30,11 @@
        >
          {{ linkText }}
        </a>
-        <span class="subsection__content subsection__content--disabled" v-if="!route">Noch nicht verfügbar</span>
+        <span
+          class="subsection__content subsection__content--disabled"
+          v-if="!route"
+          >Noch nicht verfügbar</span
+        >
      </div>
    </div>
  </div>
--- a/client/src/components/StudentSubmission.vue
+++ b/client/src/components/StudentSubmission.vue
@ -5,12 +5,24 @@
    </div>
    <div class="student-submission__entry entry">
      <p>{{ text }}</p>
-      <p class="entry__document" v-if="submission.document && submission.document.length > 0">
-        <student-submission-document :document="submission.document" class="entry-document" />
+      <p
+        class="entry__document"
+        v-if="submission.document && submission.document.length > 0"
+      >
+        <student-submission-document
+          :document="submission.document"
+          class="entry-document"
+        />
      </p>
    </div>
-    <div class="student-submission__feedback entry" v-if="submission.submissionFeedback">
-      <p :class="{ 'entry__text--final': submission.submissionFeedback.final }" class="entry__text">
+    <div
+      class="student-submission__feedback entry"
+      v-if="submission.submissionFeedback"
+    >
+      <p
+        :class="{ 'entry__text--final': submission.submissionFeedback.final }"
+        class="entry__text"
+      >
        {{ feedback }}
      </p>
    </div>
--- a/client/src/components/StudentSubmissionDocument.vue
+++ b/client/src/components/StudentSubmissionDocument.vue
@ -1,13 +1,16 @@
 <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 { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent } from 'vue';
 import filenameFromUrl from '@/helpers/urls';
 const DocumentIcon = defineAsyncComponent(() =>
  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
--- a/client/src/components/UserMetaWidget.vue
+++ b/client/src/components/UserMetaWidget.vue
@ -4,7 +4,11 @@
      <avatar :avatar-url="avatarUrl" />
    </div>
    <span class="user-widget__name">{{ firstName }} {{ lastName }}</span>
-    <span class="user-widget__date" v-if="date">{{ date }}</span>
+    <span
+      class="user-widget__date"
+      v-if="date"
+      >{{ date }}</span
+    >
  </div>
 </template>

--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@ -1,7 +1,17 @@
 <template>
-  <div :class="{ 'user-widget--is-profile': isProfile }" class="user-widget" @click.stop="$emit('click', $event)">
-    <div class="user-widget__avatar" data-cy="user-widget-avatar">
-      <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile" />
+  <div
+    :class="{ 'user-widget--is-profile': isProfile }"
+    class="user-widget"
+    @click.stop="$emit('click', $event)"
+  >
+    <div
+      class="user-widget__avatar"
+      data-cy="user-widget-avatar"
+    >
+      <avatar
+        :avatar-url="avatarUrl"
+        :icon-highlighted="isProfile"
+      />
    </div>
  </div>
 </template>
@ -18,7 +28,8 @@ export default {

  emits: ['click'],

-  emits: ['click'],components: {
+  emits: ['click'],
+  components: {
    Avatar,
  },
  computed: {
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@ -1,5 +1,8 @@
 <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
@ -40,7 +43,12 @@
      </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>

@ -57,7 +65,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,7 +78,10 @@
          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"
@ -83,11 +97,11 @@
 <script>
 import TopicNavigation from '@/components/book-navigation/TopicNavigation';

-  import sidebarMixin from '@/mixins/sidebar';
-  import meMixin from '@/mixins/me';
-  import {defineAsyncComponent} from 'vue';
+import sidebarMixin from '@/mixins/sidebar';
+import meMixin from '@/mixins/me';
+import { defineAsyncComponent } from 'vue';

-  const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
+const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo'));

 export default {
  props: {
--- a/client/src/components/book-navigation/NavigationSidebar.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@ -1,8 +1,18 @@
 <template>
  <transition name="slide">
-    <div class="navigation-sidebar" v-if="sidebar.navigation" v-click-outside="close">
-      <content-navigation :is-sidebar="true" class="navigation-sidebar__main" />
-      <div class="navigation-sidebar__close-button" @click="close">
+    <div
+      class="navigation-sidebar"
+      v-if="sidebar.navigation"
+      v-click-outside="close"
+    >
+      <content-navigation
+        :is-sidebar="true"
+        class="navigation-sidebar__main"
+      />
+      <div
+        class="navigation-sidebar__close-button"
+        @click="close"
+      >
        <cross class="navigation-sidebar__close-icon" />
      </div>
    </div>
--- a/client/src/components/book-navigation/SubNavigationItem.vue
+++ b/client/src/components/book-navigation/SubNavigationItem.vue
@ -1,20 +1,32 @@
 <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>
-  import {defineAsyncComponent} from 'vue';
-  const ChevronDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown'));
-  const ChevronUp = defineAsyncComponent(() => 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'],
--- a/client/src/components/book-navigation/TopicNavigation.vue
+++ b/client/src/components/book-navigation/TopicNavigation.vue
@ -58,7 +58,7 @@ import sidebarMixin from '@/mixins/sidebar';
 </script>

 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';

 .topic-navigation {
  &__topic {
--- a/client/src/components/content-block-form/AddContentLink.vue
+++ b/client/src/components/content-block-form/AddContentLink.vue
@ -1,5 +1,8 @@
 <template>
-  <a class="add-content-link" data-cy="add-content-link" @click="$emit('click')"
+  <a
+    class="add-content-link"
+    data-cy="add-content-link"
+    @click="$emit('click')"
    ><plus-icon class="add-content-link__icon" /> <span class="add-content-link__text">Inhalt hinzufügen</span></a
  >
 </template>
--- a/client/src/components/content-block-form/ContentBlockForm.vue
+++ b/client/src/components/content-block-form/ContentBlockForm.vue
@ -1,7 +1,10 @@
 <template>
  <div class="content-block-form content-list__parent">
    <div class="content-block-form__content">
-      <h1 class="heading-1 content-block-form__heading" data-cy="content-block-form-heading">
+      <h1
+        class="heading-1 content-block-form__heading"
+        data-cy="content-block-form-heading"
+      >
        {{ title }}
      </h1>

@ -16,7 +19,10 @@
      />

      <!-- Form for title of content block -->
-      <content-form-section data-cy="content-form-title-section" title="Titel (Pflichtfeld)">
+      <content-form-section
+        data-cy="content-form-title-section"
+        title="Titel (Pflichtfeld)"
+      >
        <input-with-label
          :value="localContentBlock.title"
          data-cy="content-block-title"
@ -35,7 +41,11 @@
        :key="block.id"
      >
        <!-- If the block is a content list -->
-        <div class="content-block-form__segment" data-cy="content-list" v-if="block.type === 'content_list_item'">
+        <div
+          class="content-block-form__segment"
+          data-cy="content-list"
+          v-if="block.type === 'content_list_item'"
+        >
          <content-element-actions
            class="content-block-form__actions"
            :actions="{ extended: true, up: outer > 0, down: outer < localContentBlock.contents.length }"
@ -45,8 +55,15 @@
            @move-top="top(outer)"
            @move-bottom="bottom(outer)"
          />
-          <ol class="content-list__item" data-cy="content-list-item">
-            <li class="content-block-form__segment" v-for="(content, index) in block.contents" :key="content.id">
+          <ol
+            class="content-list__item"
+            data-cy="content-list-item"
+          >
+            <li
+              class="content-block-form__segment"
+              v-for="(content, index) in block.contents"
+              :key="content.id"
+            >
              <content-element
                :first-element="index === 0"
                :last-element="index === block.contents.length - 1"
@ -61,7 +78,10 @@
                @bottom="bottom(outer, index)"
              />

-              <add-content-link class="content-block-form__add-button" @click="addBlock(outer, index)" />
+              <add-content-link
+                class="content-block-form__add-button"
+                @click="addBlock(outer, index)"
+              />
            </li>
          </ol>
        </div>
@ -98,7 +118,11 @@
        >
          Speichern
        </button>
-        <a class="button" @click="$emit('back')">Abbrechen</a>
+        <a
+          class="button"
+          @click="$emit('back')"
+          >Abbrechen</a
+        >
      </div>
    </footer>
  </div>
--- a/client/src/components/content-block-form/ContentElement.vue
+++ b/client/src/components/content-block-form/ContentElement.vue
@ -39,29 +39,63 @@
 </template>

 <script>
-  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
-  import ContentElementActions from '@/components/content-block-form/ContentElementActions';
-  import {defineAsyncComponent} from 'vue';
+import ContentFormSection from '@/components/content-block-form/ContentFormSection';
+import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+import { defineAsyncComponent } from 'vue';

-  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 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';

--- a/client/src/components/content-block-form/ContentElementActions.vue
+++ b/client/src/components/content-block-form/ContentElementActions.vue
@ -1,9 +1,17 @@
 <template>
  <div class="content-element-actions">
-    <button class="icon-button" @click.stop="toggle(true)">
+    <button
+      class="icon-button"
+      @click.stop="toggle(true)"
+    >
      <ellipses class="icon-button__icon" />
    </button>
-    <widget-popover class="content-element-actions__popover" :no-padding="true" v-if="show" @hide-me="toggle(false)">
+    <widget-popover
+      class="content-element-actions__popover"
+      :no-padding="true"
+      v-if="show"
+      @hide-me="toggle(false)"
+    >
      <section class="content-element-actions__section">
        <button-with-icon-and-text
          class="content-element-actions__button"
--- a/client/src/components/content-block-form/ContentFormSection.vue
+++ b/client/src/components/content-block-form/ContentFormSection.vue
@ -1,8 +1,15 @@
 <template>
  <div class="content-form-section">
    <h2 class="content-form-section__heading">
-      <component class="content-form-section__icon" :is="icon" />
-      <span class="content-form-section__title" data-cy="content-form-section-title">{{ title }}</span>
+      <component
+        class="content-form-section__icon"
+        :is="icon"
+      />
+      <span
+        class="content-form-section__title"
+        data-cy="content-form-section-title"
+        >{{ title }}</span
+      >
    </h2>

    <content-element-actions
@ -22,31 +29,31 @@
 </template>

 <script lang="ts">
-  import {defineComponent} from "vue";
-  import formElementIcons from '@/components/ui/form-element-icons.js';
-  import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
-  import {ActionOptions} from "@/@types";
+import { defineComponent } from 'vue';
+import formElementIcons from '@/components/ui/form-element-icons.js';
+import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
+import { ActionOptions } from '@/@types';

-  export default defineComponent({
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-      icon: {
-        type: String,
-        default: ''
-      },
-      actions: {
-        type: Object as () => ActionOptions,
-        default: () => {}
-      }
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: '',
    },
-    components: {
-      ContentElementActions,
-      ...formElementIcons
-    }
-  });
+    icon: {
+      type: String,
+      default: '',
+    },
+    actions: {
+      type: Object as () => ActionOptions,
+      default: () => {},
+    },
+  },
+  components: {
+    ContentElementActions,
+    ...formElementIcons,
+  },
+});
 </script>

 <style scoped lang="scss">
--- a/client/src/components/content-block-form/ContentsForm.vue
+++ b/client/src/components/content-block-form/ContentsForm.vue
@ -18,11 +18,27 @@
      />
    </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>
@ -34,22 +50,32 @@
          @click="save"
          >Speichern</a
        >
-        <a class="button" @click="$emit('hide')">Abbrechen</a>
+        <a
+          class="button"
+          @click="$emit('hide')"
+          >Abbrechen</a
+        >
      </div>
    </template>
  </modal>
 </template>

 <script>
-  import {defineAsyncComponent} from 'vue';
-  import {meQuery} from '@/graphql/queries';
+import { defineAsyncComponent } from 'vue';
+import { meQuery } from '@/graphql/queries';

-  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 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 = defineAsyncComponent(() => import('@/components/Modal'));
-  const Checkbox = defineAsyncComponent(() => import('@/components/ui/Checkbox'));
+const Modal = defineAsyncComponent(() => import('@/components/Modal'));
+const Checkbox = defineAsyncComponent(() => import('@/components/ui/Checkbox'));

 export default {
  props: {
--- a/client/src/components/content-block-form/EditContentBlockWizard.vue
+++ b/client/src/components/content-block-form/EditContentBlockWizard.vue
@ -1,5 +1,10 @@
 <template>
-  <contents-form :content-block="contentBlock" :show-task-selection="true" @save="saveContentBlock" @hide="hideModal" />
+  <contents-form
+    :content-block="contentBlock"
+    :show-task-selection="true"
+    @save="saveContentBlock"
+    @hide="hideModal"
+  />
 </template>

 <script>
--- a/client/src/components/content-blocks/CmsDocumentBlock.vue
+++ b/client/src/components/content-blocks/CmsDocumentBlock.vue
@ -1,62 +1,70 @@
 <template>
-  <div :class="{ 'cms-document-block--solution': solution }" class="cms-document-block">
+  <div
+    :class="{ 'cms-document-block--solution': solution }"
+    class="cms-document-block"
+  >
    <document-icon class="cms-document-block__icon" />
-    <a :href="value.url" class="cms-document-block__link" target="_blank">{{ value.display_text }}</a>
+    <a
+      :href="value.url"
+      class="cms-document-block__link"
+      target="_blank"
+      >{{ value.display_text }}</a
+    >
  </div>
 </template>

 <script>
-  import {defineAsyncComponent} from 'vue';
+import { defineAsyncComponent } from 'vue';

-  const DocumentIcon = defineAsyncComponent(() =>
-    import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
-  );
+const DocumentIcon = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
+);

-  export default {
-    props: {
-      value: Object,
-      solution: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  props: {
+    value: Object,
+    solution: {
+      type: Boolean,
+      default: false,
    },
+  },

-    components: {
-      DocumentIcon,
-    },
-  };
+  components: {
+    DocumentIcon,
+  },
+};
 </script>

 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';

-  .cms-document-block {
-    display: grid;
-    grid-template-columns: 50px 1fr 50px;
-    align-items: center;
-    margin-bottom: $large-spacing;
+.cms-document-block {
+  display: grid;
+  grid-template-columns: 50px 1fr 50px;
+  align-items: center;
+  margin-bottom: $large-spacing;

-    &__icon {
-      width: 30px;
-      height: 30px;
+  &__icon {
+    width: 30px;
+    height: 30px;
+  }
+
+  &__link {
+    text-decoration: underline;
+  }
+
+  $parent: &;
+
+  &--solution {
+    margin-bottom: $small-spacing;
+
+    #{$parent}__link {
+      color: $color-silver-dark;
    }

-    &__link {
-      text-decoration: underline;
-    }
-
-    $parent: &;
-
-    &--solution {
-      margin-bottom: $small-spacing;
-
-      #{$parent}__link {
-        color: $color-silver-dark;
-      }
-
-      #{$parent}__icon {
-        fill: $color-silver-dark;
-      }
+    #{$parent}__icon {
+      fill: $color-silver-dark;
    }
  }
+}
 </style>
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@ -1,5 +1,9 @@
 <template>
-  <div :class="componentClass" :data-scrollto="component.id" data-cy="content-component">
+  <div
+    :class="componentClass"
+    :data-scrollto="component.id"
+    data-cy="content-component"
+  >
    <bookmark-actions
      :bookmarked="bookmarked"
      :note="note"
@ -9,34 +13,78 @@
      @edit-note="editNote"
      @bookmark="bookmarkContent(component.id, !bookmarked)"
    />
-    <component v-bind="component" :parent="parent" :is="component.type" />
+    <component
+      v-bind="component"
+      :parent="parent"
+      :is="component.type"
+    />
  </div>
 </template>

 <script>
-import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
-import {defineAsyncComponent} from 'vue';
+import { constructContentComponentBookmarkMutation } from '@/helpers/update-content-bookmark-mutation';
+import { defineAsyncComponent } from 'vue';

-const TextBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock'));
-const InstrumentWidget = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InstrumentWidget'));
-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 CmsDocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/CmsDocumentBlock'));
-const InfogramBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock'));
-const ThinglinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ThinglinkBlock'));
-const GeniallyBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock'));
-const SubtitleBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock'));
-const SectionTitleBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SectionTitleBlock'));
-const ContentListBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentListBlock'));
-const ModuleRoomSlug = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ModuleRoomSlug'));
-const Assignment = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/Assignment'));
-const Survey = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SurveyBlock'));
-const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
-const Instruction = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Instruction'));
-const BookmarkActions = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/notes/BookmarkActions'));
+const TextBlock = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/TextBlock')
+);
+const InstrumentWidget = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InstrumentWidget')
+);
+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 CmsDocumentBlock = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/CmsDocumentBlock')
+);
+const InfogramBlock = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock')
+);
+const ThinglinkBlock = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ThinglinkBlock')
+);
+const GeniallyBlock = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock')
+);
+const SubtitleBlock = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SubtitleBlock')
+);
+const SectionTitleBlock = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SectionTitleBlock')
+);
+const ContentListBlock = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentListBlock')
+);
+const ModuleRoomSlug = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ModuleRoomSlug')
+);
+const Assignment = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/Assignment')
+);
+const Survey = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SurveyBlock')
+);
+const Solution = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution')
+);
+const Instruction = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Instruction')
+);
+const BookmarkActions = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/notes/BookmarkActions')
+);

 export default {
  props: {
--- a/client/src/components/content-blocks/ContentList.vue
+++ b/client/src/components/content-blocks/ContentList.vue
@ -1,7 +1,14 @@
 <template>
  <ol class="content-list">
-    <li class="content-list__item" v-for="(item, index) in items" :key="item.id">
-      <slot :item="item" :index="index">
+    <li
+      class="content-list__item"
+      v-for="(item, index) in items"
+      :key="item.id"
+    >
+      <slot
+        :item="item"
+        :index="index"
+      >
        {{ item.id }}
      </slot>
    </li>
--- a/client/src/components/content-blocks/ContentListBlock.vue
+++ b/client/src/components/content-blocks/ContentListBlock.vue
@ -1,38 +1,41 @@
 <template>
  <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 {defineAsyncComponent} from 'vue';
-  const ContentList = defineAsyncComponent(() => import('@/components/content-blocks/ContentList'));
-  const ContentBlock = defineAsyncComponent(() => import('@/components/ContentBlock'));
+import { defineAsyncComponent } from 'vue';
+const ContentList = defineAsyncComponent(() => import('@/components/content-blocks/ContentList'));
+const ContentBlock = defineAsyncComponent(() => import('@/components/ContentBlock'));

-  export default {
-    name: 'ContentBlockList',
-    props: ['contents', 'parent'],
+export default {
+  name: 'ContentBlockList',
+  props: ['contents', 'parent'],

-    components: {
-      ContentList,
-      ContentBlock
-    },
+  components: {
+    ContentList,
+    ContentBlock,
+  },

-    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
-          });
+  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>
--- a/client/src/components/content-blocks/DocumentBlock.vue
+++ b/client/src/components/content-blocks/DocumentBlock.vue
@ -1,17 +1,28 @@
 <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>
-  import {defineAsyncComponent} from 'vue';
-  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
-  const TrashIcon = defineAsyncComponent(() => 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: {
--- a/client/src/components/content-blocks/ImageBlock.vue
+++ b/client/src/components/content-blocks/ImageBlock.vue
@ -1,5 +1,10 @@
 <template>
-  <img :src="value.path" alt="" class="image-block" @click="openFullscreen" />
+  <img
+    :src="value.path"
+    alt=""
+    class="image-block"
+    @click="openFullscreen"
+  />
 </template>

 <script>
--- a/client/src/components/content-blocks/ImageUrlBlock.vue
+++ b/client/src/components/content-blocks/ImageUrlBlock.vue
@ -1,5 +1,10 @@
 <template>
-  <img :src="value.url" alt="" class="image-block" @click="openFullscreen" />
+  <img
+    :src="value.url"
+    alt=""
+    class="image-block"
+    @click="openFullscreen"
+  />
 </template>

 <script>
--- a/client/src/components/content-blocks/Instruction.vue
+++ b/client/src/components/content-blocks/Instruction.vue
@ -1,7 +1,14 @@
 <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>

--- a/client/src/components/content-blocks/InstrumentWidget.vue
+++ b/client/src/components/content-blocks/InstrumentWidget.vue
@ -1,7 +1,10 @@
 <template>
  <!-- eslint-disable vue/no-v-html -->
  <div class="instrument-widget">
-    <div class="instrument-widget__description" v-html="value.description" />
+    <div
+      class="instrument-widget__description"
+      v-html="value.description"
+    />
    <router-link
      :to="{ name: 'instrument', params: { slug: value.slug } }"
      class="instrument-widget__button button"
--- a/client/src/components/content-blocks/LinkBlock.vue
+++ b/client/src/components/content-blocks/LinkBlock.vue
@ -1,7 +1,15 @@
 <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>

--- a/client/src/components/content-blocks/ModuleRoomSlug.vue
+++ b/client/src/components/content-blocks/ModuleRoomSlug.vue
@ -1,6 +1,9 @@
 <template>
  <div class="module-slug">
-    <router-link :to="{ name: 'moduleRoom', params: { slug: value.slug } }" class="button button--primary">
+    <router-link
+      :to="{ name: 'moduleRoom', params: { slug: value.slug } }"
+      class="button button--primary"
+    >
      Raum anzeigen
    </router-link>
  </div>
--- a/client/src/components/content-blocks/SectionTitleBlock.vue
+++ b/client/src/components/content-blocks/SectionTitleBlock.vue
@ -1,6 +1,9 @@
 <template>
  <!-- eslint-disable vue/no-v-html -->
-  <h4 class="section-title" v-html="value.text" />
+  <h4
+    class="section-title"
+    v-html="value.text"
+  />
 </template>

 <script>
--- a/client/src/components/content-blocks/Solution.vue
+++ b/client/src/components/content-blocks/Solution.vue
@ -1,15 +1,33 @@
 <template>
  <!-- eslint-disable vue/no-v-html -->
-  <div class="solution" data-cy="solution">
-    <a class="solution__toggle" data-cy="show-solution" @click="toggle"
+  <div
+    class="solution"
+    data-cy="solution"
+  >
+    <a
+      class="solution__toggle"
+      data-cy="show-solution"
+      @click="toggle"
      >Lösung
      <template v-if="!visible">anzeigen</template>
      <template v-else>ausblenden</template>
    </a>
    <transition name="fade">
-      <div class="solution__hidden fade" v-if="visible">
-        <p class="solution__text solution-text" data-cy="solution-text" v-html="sanitizedText" />
-        <cms-document-block :solution="true" class="solution__document" :value="value.document" v-if="value.document" />
+      <div
+        class="solution__hidden fade"
+        v-if="visible"
+      >
+        <p
+          class="solution__text solution-text"
+          data-cy="solution-text"
+          v-html="sanitizedText"
+        />
+        <cms-document-block
+          :solution="true"
+          class="solution__document"
+          :value="value.document"
+          v-if="value.document"
+        />
      </div>
    </transition>
  </div>
--- a/client/src/components/content-blocks/SubtitleBlock.vue
+++ b/client/src/components/content-blocks/SubtitleBlock.vue
@ -1,6 +1,10 @@
 <template>
  <!-- eslint-disable vue/no-v-html -->
-  <h5 class="subtitle" data-cy="subtitle-block" v-html="sanitizedText" />
+  <h5
+    class="subtitle"
+    data-cy="subtitle-block"
+    v-html="sanitizedText"
+  />
 </template>

 <script>
--- a/client/src/components/content-blocks/SurveyBlock.vue
+++ b/client/src/components/content-blocks/SurveyBlock.vue
@ -1,6 +1,12 @@
 <template>
-  <div :data-scrollto="value.id" class="survey-block">
-    <router-link :to="{ name: 'survey', params: { id: value.id } }" class="button button--primary">
+  <div
+    :data-scrollto="value.id"
+    class="survey-block"
+  >
+    <router-link
+      :to="{ name: 'survey', params: { id: value.id } }"
+      class="button button--primary"
+    >
      Übung anzeigen
    </router-link>
  </div>
--- a/client/src/components/content-blocks/Task.vue
+++ b/client/src/components/content-blocks/Task.vue
@ -1,7 +1,10 @@
 <template>
  <!-- eslint-disable vue/no-v-html -->
  <div class="task">
-    <div class="task__text" v-html="value.text" />
+    <div
+      class="task__text"
+      v-html="value.text"
+    />
  </div>
 </template>

--- a/client/src/components/content-blocks/TextBlock.vue
+++ b/client/src/components/content-blocks/TextBlock.vue
@ -1,6 +1,10 @@
 <template>
  <!-- eslint-disable vue/no-v-html -->
-  <div class="text-block" data-cy="text-block" v-html="sanitizedText" />
+  <div
+    class="text-block"
+    data-cy="text-block"
+    v-html="sanitizedText"
+  />
 </template>

 <script>
--- a/client/src/components/content-blocks/VideoBlock.vue
+++ b/client/src/components/content-blocks/VideoBlock.vue
@ -1,8 +1,17 @@
 <template>
  <div class="video-block">
-    <youtube-embed :url="value.url" v-if="isYoutube" />
-    <vimeo-embed :url="value.url" v-if="isVimeo" />
-    <srf-embed :url="value.url" v-if="isSrf" />
+    <youtube-embed
+      :url="value.url"
+      v-if="isYoutube"
+    />
+    <vimeo-embed
+      :url="value.url"
+      v-if="isVimeo"
+    />
+    <srf-embed
+      :url="value.url"
+      v-if="isSrf"
+    />
  </div>
 </template>

--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/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,12 +33,22 @@
        @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">
+      <router-link
+        :to="{ name: 'submissions', params: { id: assignment.id } }"
+        class="button button--primary"
+      >
        Zu den Ergebnissen
      </router-link>
    </template>
--- a/client/src/components/content-blocks/assignment/FinalSubmission.vue
+++ b/client/src/components/content-blocks/assignment/FinalSubmission.vue
@ -1,10 +1,21 @@
 <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')"
+      <a
+        class="final-submission__reopen"
+        data-cy="final-submission-reopen"
+        v-if="showReopen"
+        @click="$emit('reopen')"
        >Bearbeiten</a
      >
    </div>
--- a/client/src/components/content-blocks/assignment/SpellCheck.vue
+++ b/client/src/components/content-blocks/assignment/SpellCheck.vue
@ -1,6 +1,9 @@
 <template>
  <!-- eslint-disable vue/no-v-html -->
-  <p class="spellcheck" v-if="corrections">
+  <p
+    class="spellcheck"
+    v-if="corrections"
+  >
    <span class="inline-title">Rechtschreibung:</span> <span v-html="highlightedText" />
  </p>
 </template>
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/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>

--- a/client/src/components/content-blocks/assignment/SubmissionInput.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionInput.vue
@ -11,10 +11,16 @@
      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>
--- a/client/src/components/content-forms/AssignmentForm.vue
+++ b/client/src/components/content-forms/AssignmentForm.vue
@ -20,8 +20,8 @@
 </template>

 <script>
-  import {defineAsyncComponent} from 'vue';
-  const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
+import { defineAsyncComponent } from 'vue';
+const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon'));

 export default {
  props: ['value', 'index'],
--- a/client/src/components/content-forms/ChooserElement.vue
+++ b/client/src/components/content-forms/ChooserElement.vue
@ -1,6 +1,13 @@
 <template>
-  <div :class="['chooser-element', subclass]" :data-cy="cy" @click="$emit('select')">
-    <component class="chooser-element__icon" :is="icon" />
+  <div
+    :class="['chooser-element', subclass]"
+    :data-cy="cy"
+    @click="$emit('select')"
+  >
+    <component
+      class="chooser-element__icon"
+      :is="icon"
+    />
    <div class="chooser-element__title">
      {{ title }}
    </div>
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@ -1,9 +1,17 @@
 <template>
  <div class="content-block-element-chooser-widget__wrapper">
-    <button class="content-block-element-chooser-widget__remove-button icon-button" @click="remove">
+    <button
+      class="content-block-element-chooser-widget__remove-button icon-button"
+      @click="remove"
+    >
      <cross-icon class="icon-button__icon" />
    </button>
-    <h3 class="content-block-element-chooser-widget__heading" data-cy="chooser-heading">Neuer Inhalt</h3>
+    <h3
+      class="content-block-element-chooser-widget__heading"
+      data-cy="chooser-heading"
+    >
+      Neuer Inhalt
+    </h3>
    <template v-if="includeListOption && hasDefaultFeatures">
      <checkbox
        class="content-block-element-chooser-widget__list-toggle"
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@ -1,22 +1,41 @@
 <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 {defineAsyncComponent} from 'vue';
+import { uploadcare } from '@/helpers/uploadcare';
+import LoadingIcon from '@/components/icons/LoadingIcon';
+import { defineAsyncComponent } from 'vue';

-  const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
+const DocumentIcon = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
+);

 export default {
  props: ['value', 'index'],
--- a/client/src/components/content-forms/ImageForm.vue
+++ b/client/src/components/content-forms/ImageForm.vue
@ -1,17 +1,35 @@
 <template>
  <div class="image-form">
-    <div class="image-form__error" v-if="hadError">
+    <div
+      class="image-form__error"
+      v-if="hadError"
+    >
      Ups, das scheint kein Bild zu sein. Bitte versuche es nochmal mit einer anderen Datei, oder lade die Datei als
-      <a class="image-form__link" @click="switchToDocument">Dokument</a> hoch.
+      <a
+        class="image-form__link"
+        @click="switchToDocument"
+        >Dokument</a
+      >
+      hoch.
    </div>

-    <div class="image-form__spinner" v-if="loading">
+    <div
+      class="image-form__spinner"
+      v-if="loading"
+    >
      <loading-icon class="image-form__loading-icon" />
    </div>

-    <div v-if="!value.url || hadError" ref="uploadcare-panel" />
+    <div
+      v-if="!value.url || hadError"
+      ref="uploadcare-panel"
+    />
    <div v-if="value.url && !hadError">
-      <img alt="" :src="previewUrl" @error="error" />
+      <img
+        alt=""
+        :src="previewUrl"
+        @error="error"
+      />
    </div>
  </div>
 </template>
--- a/client/src/components/content-forms/TextFormWithHelpText.vue
+++ b/client/src/components/content-forms/TextFormWithHelpText.vue
@ -4,7 +4,10 @@
      <span class="text-form-with-help-text__title">{{ title }}</span>
      <helpful-tooltip :text="helpText" />
    </h3>
-    <text-form :value="v" @change-text="$emit('change', $event)" />
+    <text-form
+      :value="v"
+      @change-text="$emit('change', $event)"
+    />
  </div>
 </template>

--- a/client/src/components/content-forms/TipTap.vue
+++ b/client/src/components/content-forms/TipTap.vue
@ -1,8 +1,16 @@
 <template>
  <div class="tip-tap">
-    <editor-content class="tip-tap__editor-wrapper" :editor="editor" />
+    <editor-content
+      class="tip-tap__editor-wrapper"
+      :editor="editor"
+    />

-    <toggle :bordered="false" :checked="isList" label="Als Liste formatieren" @input="toggleList" />
+    <toggle
+      :bordered="false"
+      :checked="isList"
+      label="Als Liste formatieren"
+      @input="toggleList"
+    />
  </div>
 </template>

--- a/client/src/components/content-forms/VideoForm.vue
+++ b/client/src/components/content-forms/VideoForm.vue
@ -1,11 +1,25 @@
 <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>
+        <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>

--- a/client/src/components/icons/AddIcon.vue
+++ b/client/src/components/icons/AddIcon.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="6 6 88 88" id="shape">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="6 6 88 88"
+    id="shape"
+  >
    <path
      d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"
    />
--- a/client/src/components/icons/AddNoteIcon.vue
+++ b/client/src/components/icons/AddNoteIcon.vue
@ -1,5 +1,9 @@
 <template>
-  <svg class="add-note-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <svg
+    class="add-note-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
    <path
      d="M81.5,88.39746H18.7627a2.49981,2.49981,0,0,1-2.5-2.5V35.35352L1.72559,20.71191A2.50054,2.50054,0,0,1,3.5,16.4502h78a2.49981,2.49981,0,0,1,2.5,2.5V85.89746A2.49981,2.49981,0,0,1,81.5,88.39746Zm-60.2373-5H79V21.4502H9.50488L20.53711,32.56152a2.5013,2.5013,0,0,1,.72559,1.76172Z"
    />
--- a/client/src/components/icons/AddPointer.vue
+++ b/client/src/components/icons/AddPointer.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    id="shape"
+  >
    <path
      d="M61.74,13.24a36.43,36.43,0,0,0-22.06,7.35L2.52,48a2.5,2.5,0,0,0,0,4L39.66,79.39A36.76,36.76,0,1,0,61.74,13.24Zm0,68.52a31.5,31.5,0,0,1-19.09-6.38L8.21,50,42.66,24.6A31.76,31.76,0,1,1,61.74,81.76Z"
    />
--- a/client/src/components/icons/ArrowThinBottom.vue
+++ b/client/src/components/icons/ArrowThinBottom.vue
@ -1,5 +1,8 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
    <path
      d="M79 80.8H51.6l.1-.1 25.7-25.8c1-1 1-2.6 0-3.5-1-1-2.6-1-3.5 0L52.5 72.9V16.7c0-1.4-1.1-2.5-2.5-2.5s-2.5 1.1-2.5 2.5v56.2L26.1 51.4c-1-1-2.6-1-3.5 0-1 1-1 2.6 0 3.5l25.7 25.8.1.1H21c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5h58c1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"
      id="shape"
--- a/client/src/components/icons/ArrowThinDown.vue
+++ b/client/src/components/icons/ArrowThinDown.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    xml:space="preserve"
+  >
    <path
      d="M77.5 55.7c-1-1-2.6-1-3.5 0L52.5 77.2V21.1c0-1.4-1.1-2.5-2.5-2.5s-2.5 1.1-2.5 2.5v56.2L26.1 55.8c-1-1-2.6-1-3.5 0-1 1-1 2.6 0 3.5l25.7 25.8c.1.1.2.2.4.3 0 0 .1 0 .1.1.1.1.2.1.3.2h.1c.1 0 .2.1.3.1h1c.1 0 .2-.1.3-.1h.1c.1 0 .2-.1.3-.2 0 0 .1 0 .1-.1.1-.1.3-.2.4-.3l25.7-25.8c1.1-1 1.1-2.6.1-3.6z"
      id="arrow-thin-down"
--- a/client/src/components/icons/ArrowThinTop.vue
+++ b/client/src/components/icons/ArrowThinTop.vue
@ -1,5 +1,11 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" id="shape">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="100"
+    viewBox="0 0 100 100"
+    id="shape"
+  >
    <path
      d="M79,14.2H21a2.5,2.5,0,0,0,0,5H48.35l-.12.1h0L22.52,45.08a2.5,2.5,0,1,0,3.54,3.53L47.5,27.12V83.3a2.5,2.5,0,1,0,5,0V27.12L73.94,48.61a2.5,2.5,0,1,0,3.54-3.53L51.77,19.3h0l-.12-.1H79a2.5,2.5,0,0,0,0-5Z"
    />
--- a/client/src/components/icons/ArrowThinUp.vue
+++ b/client/src/components/icons/ArrowThinUp.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    xml:space="preserve"
+  >
    <path
      d="M77.5 45.1 51.8 19.3c-.5-.5-1.1-.7-1.8-.7s-1.3.3-1.8.7L22.5 45.1c-1 1-1 2.6 0 3.5 1 1 2.6 1 3.5 0l21.4-21.5v56.2c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5V27.1l21.4 21.5c.5.5 1.1.7 1.8.7.6 0 1.3-.2 1.8-.7 1.1-1 1.1-2.5.1-3.5z"
      id="arrow-thin-up"
--- a/client/src/components/icons/ArrowUp.vue
+++ b/client/src/components/icons/ArrowUp.vue
@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="100"
+    viewBox="0 0 100 100"
+  >
    <path
      d="M85.56934,50.543l-33.5-49.44531a2.49942,2.49942,0,0,0-4.13867,0l-33.5,49.44531A2.49925,2.49925,0,0,0,16.5,54.44531H32.36035V97.5a2.49981,2.49981,0,0,0,2.5,2.5h30.2793a2.49981,2.49981,0,0,0,2.5-2.5V54.44531H83.5A2.49925,2.49925,0,0,0,85.56934,50.543ZM62.63965,49.44531V95H37.36035V49.44531H21.21387L50,6.957,78.78613,49.44531Z"
    />
--- a/client/src/components/icons/BookmarkIcon.vue
+++ b/client/src/components/icons/BookmarkIcon.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="bookmark-icon">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    class="bookmark-icon"
+  >
    <g :class="{ 'bookmark-icon--bookmarked': bookmarked }">
      <path
        class="bookmark-icon__background"
--- a/client/src/components/icons/BulbIcon.vue
+++ b/client/src/components/icons/BulbIcon.vue
@ -1,7 +1,17 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="100"
+    viewBox="0 0 100 100"
+  >
    <g id="shape">
-      <circle cx="50" cy="50" r="50" style="fill: #17a887" />
+      <circle
+        cx="50"
+        cy="50"
+        r="50"
+        style="fill: #17a887"
+      />
      <path
        d="M57.96318,62.73515H41.99379A2.48236,2.48236,0,0,1,39.51288,60.34c-.06061-1.72061-.21515-2.61273-3.23576-5.60545a20.69086,20.69086,0,1,1,27.55152-.18485l-.27394.26848c-2.89273,2.86424-3.04424,3.76485-3.11091,5.52848A2.48231,2.48231,0,0,1,57.96318,62.73515ZM44.17652,57.7703H55.77409c.50667-2.1903,1.72788-3.94606,4.29636-6.48909l.317-.3103c.02364-.023.04727-.04545.07212-.06788a15.62483,15.62483,0,1,0-20.85788.14364c.03848.03333.07606.06848.11273.10424C42.38379,53.78848,43.65439,55.58424,44.17652,57.7703Z"
        style="fill: #fff"
--- a/client/src/components/icons/Cards.vue
+++ b/client/src/components/icons/Cards.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    id="shape"
+  >
    <path
      d="M30.89,21v9.67H17.44v9.67H4V79H69.11V69.34H82.56V59.67H96V21Zm3.77,3.77H92.23V55.89H82.56V30.65H34.67ZM21.22,34.43H78.78V65.57H69.11V40.33H21.22ZM7.77,44.1H65.34V75.24H7.77Z"
      id="Fill-1"
--- a/client/src/components/icons/ChevronDown.vue
+++ b/client/src/components/icons/ChevronDown.vue
@ -1,5 +1,8 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
    <path d="M50,74.07,6.86,30.93A2.93,2.93,0,0,1,11,26.79l39,39,39-39a2.93,2.93,0,1,1,4.15,4.15Z" />
  </svg>
 </template>
--- a/client/src/components/icons/ChevronLeft.vue
+++ b/client/src/components/icons/ChevronLeft.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="chevron">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    class="chevron"
+  >
    <path d="M74.07,50,30.93,93.14A2.93,2.93,0,0,1,26.79,89l39-39-39-39a2.93,2.93,0,0,1,4.15-4.15Z" />
  </svg>
 </template>
--- a/client/src/components/icons/ChevronRight.vue
+++ b/client/src/components/icons/ChevronRight.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="chevron">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    class="chevron"
+  >
    <path d="M74.07,50,30.93,93.14A2.93,2.93,0,0,1,26.79,89l39-39-39-39a2.93,2.93,0,0,1,4.15-4.15Z" />
  </svg>
 </template>
--- a/client/src/components/icons/ChevronUp.vue
+++ b/client/src/components/icons/ChevronUp.vue
@ -1,5 +1,8 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
    <path d="M50,18.93,93.14,62.07A2.93,2.93,0,1,1,89,66.21l-39-39-39,39a2.93,2.93,0,1,1-4.15-4.15Z" />
  </svg>
 </template>
--- a/client/src/components/icons/CircleIcon.vue
+++ b/client/src/components/icons/CircleIcon.vue
@ -1,5 +1,12 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <circle r="25" cx="50" cy="50" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
+    <circle
+      r="25"
+      cx="50"
+      cy="50"
+    />
  </svg>
 </template>
--- a/client/src/components/icons/ClosedEyeIcon.vue
+++ b/client/src/components/icons/ClosedEyeIcon.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    id="shape"
+  >
    <path
      d="M99.5,48.11a56.91,56.91,0,0,0-21-21.19L91.18,14.26a3.85,3.85,0,1,0-5.44-5.44L71.21,23.36A56.73,56.73,0,0,0,.5,48.11a3.84,3.84,0,0,0,0,3.79,56.92,56.92,0,0,0,21,21.19L8.82,85.74a3.85,3.85,0,1,0,5.44,5.44L28.79,76.64A56.66,56.66,0,0,0,50,80.79,57,57,0,0,0,99.5,51.89,3.84,3.84,0,0,0,99.5,48.11ZM8.32,50a49.09,49.09,0,0,1,56.9-20.66L27.15,67.42A49.25,49.25,0,0,1,8.32,50ZM50,73.09a49,49,0,0,1-15.22-2.43L72.85,32.59A49.25,49.25,0,0,1,91.68,50,49.27,49.27,0,0,1,50,73.09Z"
    />
--- a/client/src/components/icons/CrossIcon.vue
+++ b/client/src/components/icons/CrossIcon.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="cross-icon">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    class="cross-icon"
+  >
    <path
      d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"
    />
--- a/client/src/components/icons/DefaultAvatar.vue
+++ b/client/src/components/icons/DefaultAvatar.vue
@ -1,12 +1,26 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 400 400"
+  >
    <defs>
      <clipPath id="avatar-clip-path">
-        <circle class="cls-1" cx="200" cy="200" r="197" />
+        <circle
+          class="cls-1"
+          cx="200"
+          cy="200"
+          r="197"
+        />
      </clipPath>
    </defs>
    <g id="bg">
-      <circle class="cls-2" cx="200" cy="200" r="197" />
+      <circle
+        class="cls-2"
+        cx="200"
+        cy="200"
+        r="197"
+      />
    </g>
    <g id="objects">
      <g class="cls-3">
@ -22,7 +36,13 @@
          class="cls-6"
          d="M237.057,266.23162H166.56944c0,34.9025-27.34,45.73431-43.07576,50.90769,15.73577,67.03868,142.10688,67.03868,156.63909,0C260.78642,311.96593,241.52987,305.94826,237.057,266.23162Z"
        />
-        <ellipse class="cls-7" cx="202.35227" cy="179.47219" rx="79.23803" ry="97.02616" />
+        <ellipse
+          class="cls-7"
+          cx="202.35227"
+          cy="179.47219"
+          rx="79.23803"
+          ry="97.02616"
+        />
        <path
          class="cls-8"
          d="M117.61519,154.166c10.8764-3.25836,22.30778,5.29762,25.51206,19.09451,3.20424,13.7965-3.02464,27.64251-13.90108,30.90087-10.87644,3.25678-22.30919-5.29877-25.51339-19.09389-3.20425-13.79708,3.026-27.64273,13.90241-30.90149Z"
--- a/client/src/components/icons/DocumentIcon.vue
+++ b/client/src/components/icons/DocumentIcon.vue
@ -1,5 +1,8 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
    <path
      d="M22.64,5.3a8.38,8.38,0,0,0-8.37,8.37V86.33a8.38,8.38,0,0,0,8.37,8.37H77.36a8.38,8.38,0,0,0,8.37-8.37v-57L61.39,5.3ZM79.17,88.08a2.74,2.74,0,0,1-2.11.94H22.34a3,3,0,0,1-3-3V13.37a3,3,0,0,1,3-3H54V28.32a7.78,7.78,0,0,0,7.77,7.77H79.75V85.73A2.85,2.85,0,0,1,79.17,88.08ZM62.11,31a2.34,2.34,0,0,1-2.39-2.39V11.15L79.58,31Z"
    />
@ -7,6 +10,9 @@
      d="M61.81,36.1A7.78,7.78,0,0,1,54,28.32V10.38H22.34a3,3,0,0,0-3,3V86a3,3,0,0,0,3,3H77.06a2.74,2.74,0,0,0,2.11-.94,2.85,2.85,0,0,0,.59-2.35V36.1Z"
      style="fill: #fff"
    />
-    <path d="M59.72,28.62A2.34,2.34,0,0,0,62.11,31H79.58L59.72,11.15Z" style="fill: #fff" />
+    <path
+      d="M59.72,28.62A2.34,2.34,0,0,0,62.11,31H79.58L59.72,11.15Z"
+      style="fill: #fff"
+    />
  </svg>
 </template>
--- a/client/src/components/icons/DocumentWithLinesIcon.vue
+++ b/client/src/components/icons/DocumentWithLinesIcon.vue
@ -1,6 +1,14 @@
 <template>
-  <svg viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="51" height="51" fill="white" />
+  <svg
+    viewBox="0 0 51 51"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      width="51"
+      height="51"
+      fill="white"
+    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
--- a/client/src/components/icons/EhbLogo.vue
+++ b/client/src/components/icons/EhbLogo.vue
@ -1,33 +1,102 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.6006 25.5117">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 79.6006 25.5117"
+  >
    <g id="bild_wortmarke">
      <path d="M42.6597,6.811h8.1616V9.2915H45.6001v2.6211H50.041v2.46H45.6001v3.0009h5.4214V19.854H42.6597Z" />
      <path d="M54.9195,6.811h2.9404v5.0215h4.5005V6.811h2.9609V19.854H62.3604V14.4126H57.8599V19.854H54.9195Z" />
      <path
        d="M69.6983,6.811h4.4609c2.7012,0,4.8018.7403,4.8018,3.2412a2.84374,2.84374,0,0,1-2.1807,2.8204v.08c1.8604.3399,2.8203,1.3204,2.8203,3.0606,0,2.6601-2.2402,3.8408-5.0605,3.8408H69.6983Zm4.3213,5.2618c1.4404,0,2.0605-.6202,2.0605-1.6006s-.6602-1.3809-2.041-1.3809H72.6397v2.9815Zm.2802,5.5009c1.5996,0,2.42-.6006,2.42-1.7802,0-1.1407-.7999-1.6407-2.42-1.6407H72.6397v3.4209Z"
      />
-      <polygon class="cls-1" points="7.087 0 0 4.252 7.087 8.504 7.087 0" />
-      <polygon class="cls-1" points="7.087 8.504 14.173 4.252 7.087 0 7.087 8.504" />
-      <polygon class="cls-2" points="7.087 17.008 0 21.26 7.087 25.512 7.087 17.008" />
-      <polygon class="cls-2" points="7.087 25.512 14.173 21.26 7.087 17.008 7.087 25.512" />
-      <polygon class="cls-1" points="7.087 8.511 7.093 8.507 7.087 8.504 7.087 8.511" />
-      <polygon class="cls-3" points="0 4.252 0 12.756 7.087 8.504 0 4.252" />
-      <polygon class="cls-4" points="7.087 8.504 7.087 17.008 14.173 12.756 7.087 8.504" />
-      <polygon class="cls-5" points="7.087 8.504 7.087 17.008 0 12.756 7.087 8.504" />
-      <polygon class="cls-5" points="14.173 12.756 14.173 4.252 7.087 8.504 14.173 12.756" />
-      <polygon class="cls-2" points="0 12.756 0 21.26 7.087 17.008 0 12.756" />
-      <polygon class="cls-6" points="14.173 21.26 14.173 12.756 7.087 17.008 14.173 21.26" />
-      <polygon class="cls-7" points="21.26 0 14.173 4.252 21.26 8.504 21.26 0" />
-      <polygon class="cls-7" points="21.26 8.504 28.347 4.252 21.26 0 21.26 8.504" />
-      <polygon class="cls-8" points="21.26 17.008 14.173 21.26 21.26 25.512 21.26 17.008" />
-      <polygon class="cls-8" points="21.26 25.512 28.347 21.26 21.26 17.008 21.26 25.512" />
-      <polygon class="cls-1" points="21.26 8.511 21.266 8.507 21.26 8.504 21.26 8.511" />
-      <polygon class="cls-9" points="14.173 4.252 14.173 12.756 21.26 8.504 14.173 4.252" />
-      <polygon class="cls-10" points="21.26 8.504 21.26 17.008 28.347 12.756 21.26 8.504" />
-      <polygon class="cls-9" points="21.26 8.504 21.26 17.008 14.173 12.756 21.26 8.504" />
-      <polygon class="cls-11" points="28.347 12.756 28.347 4.252 21.26 8.504 28.347 12.756" />
-      <polygon class="cls-6" points="14.173 12.756 14.173 21.26 21.26 17.008 14.173 12.756" />
-      <polygon class="cls-8" points="28.347 21.26 28.347 12.756 21.26 17.008 28.347 21.26" />
+      <polygon
+        class="cls-1"
+        points="7.087 0 0 4.252 7.087 8.504 7.087 0"
+      />
+      <polygon
+        class="cls-1"
+        points="7.087 8.504 14.173 4.252 7.087 0 7.087 8.504"
+      />
+      <polygon
+        class="cls-2"
+        points="7.087 17.008 0 21.26 7.087 25.512 7.087 17.008"
+      />
+      <polygon
+        class="cls-2"
+        points="7.087 25.512 14.173 21.26 7.087 17.008 7.087 25.512"
+      />
+      <polygon
+        class="cls-1"
+        points="7.087 8.511 7.093 8.507 7.087 8.504 7.087 8.511"
+      />
+      <polygon
+        class="cls-3"
+        points="0 4.252 0 12.756 7.087 8.504 0 4.252"
+      />
+      <polygon
+        class="cls-4"
+        points="7.087 8.504 7.087 17.008 14.173 12.756 7.087 8.504"
+      />
+      <polygon
+        class="cls-5"
+        points="7.087 8.504 7.087 17.008 0 12.756 7.087 8.504"
+      />
+      <polygon
+        class="cls-5"
+        points="14.173 12.756 14.173 4.252 7.087 8.504 14.173 12.756"
+      />
+      <polygon
+        class="cls-2"
+        points="0 12.756 0 21.26 7.087 17.008 0 12.756"
+      />
+      <polygon
+        class="cls-6"
+        points="14.173 21.26 14.173 12.756 7.087 17.008 14.173 21.26"
+      />
+      <polygon
+        class="cls-7"
+        points="21.26 0 14.173 4.252 21.26 8.504 21.26 0"
+      />
+      <polygon
+        class="cls-7"
+        points="21.26 8.504 28.347 4.252 21.26 0 21.26 8.504"
+      />
+      <polygon
+        class="cls-8"
+        points="21.26 17.008 14.173 21.26 21.26 25.512 21.26 17.008"
+      />
+      <polygon
+        class="cls-8"
+        points="21.26 25.512 28.347 21.26 21.26 17.008 21.26 25.512"
+      />
+      <polygon
+        class="cls-1"
+        points="21.26 8.511 21.266 8.507 21.26 8.504 21.26 8.511"
+      />
+      <polygon
+        class="cls-9"
+        points="14.173 4.252 14.173 12.756 21.26 8.504 14.173 4.252"
+      />
+      <polygon
+        class="cls-10"
+        points="21.26 8.504 21.26 17.008 28.347 12.756 21.26 8.504"
+      />
+      <polygon
+        class="cls-9"
+        points="21.26 8.504 21.26 17.008 14.173 12.756 21.26 8.504"
+      />
+      <polygon
+        class="cls-11"
+        points="28.347 12.756 28.347 4.252 21.26 8.504 28.347 12.756"
+      />
+      <polygon
+        class="cls-6"
+        points="14.173 12.756 14.173 21.26 21.26 17.008 14.173 12.756"
+      />
+      <polygon
+        class="cls-8"
+        points="28.347 21.26 28.347 12.756 21.26 17.008 28.347 21.26"
+      />
      <polyline
        class="cls-12"
        points="26.794 11.486 26.794 14.04 23.815 14.04 23.815 17.02 21.26 17.02 21.26 14.04 18.28 14.04 18.28 11.486 21.26 11.486 21.26 8.506 23.814 8.506 23.815 11.486 26.794 11.486"
--- a/client/src/components/icons/Ellipses.vue
+++ b/client/src/components/icons/Ellipses.vue
@ -1,7 +1,22 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <circle cx="18.75" cy="50" r="5" />
-    <circle cx="50" cy="50" r="5" />
-    <circle cx="81.25" cy="50" r="5" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
+    <circle
+      cx="18.75"
+      cy="50"
+      r="5"
+    />
+    <circle
+      cx="50"
+      cy="50"
+      r="5"
+    />
+    <circle
+      cx="81.25"
+      cy="50"
+      r="5"
+    />
  </svg>
 </template>
--- a/client/src/components/icons/EyeIcon.vue
+++ b/client/src/components/icons/EyeIcon.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    id="shape"
+  >
    <path
      d="M99.5,48.11a56.85,56.85,0,0,0-99,0,3.84,3.84,0,0,0,0,3.79,56.85,56.85,0,0,0,99,0A3.84,3.84,0,0,0,99.5,48.11ZM50,30.75A12.31,12.31,0,1,1,37.69,43.06,12.32,12.32,0,0,1,50,30.75Zm0,42.34A49.28,49.28,0,0,1,8.32,50,49.3,49.3,0,0,1,35.75,29a20,20,0,1,0,28.5,0A49.3,49.3,0,0,1,91.68,50,49.28,49.28,0,0,1,50,73.09Z"
    />
--- a/client/src/components/icons/Group.vue
+++ b/client/src/components/icons/Group.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    id="shape"
+  >
    <title>group</title>
    <path
      d="M84.56,47H71.69a15.5,15.5,0,0,0-7.63,2,15.85,15.85,0,0,0-5,4.46,15.61,15.61,0,0,0-2.62-.22H43.57a15.51,15.51,0,0,0-2.6.22A15.85,15.85,0,0,0,36,49a15.5,15.5,0,0,0-7.63-2H15.49A15.66,15.66,0,0,0-.1,62.55v8.73A1.77,1.77,0,0,0,1.66,73H28v4.49a1.76,1.76,0,0,0,1.76,1.76H70.28A1.76,1.76,0,0,0,72,77.52V73H98.34a1.77,1.77,0,0,0,1.76-1.76V62.55A15.66,15.66,0,0,0,84.56,47ZM72,64.5V64l-.17-.48a15.8,15.8,0,0,0-8.39-8.85A12.31,12.31,0,0,1,65.79,52a12,12,0,0,1,5.88-1.55H84.56A12.13,12.13,0,0,1,96.62,62.55v7H72V64.8ZM31.52,66.22l.26-1a12.12,12.12,0,0,1,11.47-8.33l.36-.18H56.46a12.15,12.15,0,0,1,12,10.51,3,3,0,0,0,.07.77v7.73h-37V66.22Zm5.83-11.68A15.68,15.68,0,0,0,28.12,67.3v2.2H3.43v-7A12.13,12.13,0,0,1,15.49,50.49H28.36A12,12,0,0,1,34.24,52,12.22,12.22,0,0,1,37.35,54.54Z"
--- a/client/src/components/icons/Hamburger.vue
+++ b/client/src/components/icons/Hamburger.vue
@ -1,5 +1,11 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" id="shape">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="100"
+    viewBox="0 0 100 100"
+    id="shape"
+  >
    <path d="M82,21H18a3,3,0,0,1,0-6H82a3,3,0,0,1,0,6Z" />
    <path d="M82,85H18a3,3,0,0,1,0-6H82a3,3,0,0,1,0,6Z" />
    <path d="M82,53H18a3,3,0,0,1,0-6H82a3,3,0,0,1,0,6Z" />
--- a/Show More
+++ b/Show More