Lint some more code

client/.eslintrc.js

@@ -9,6 +9,9 @@ module.exports = {
   env: {
     browser: true,
   },
+  globals: {
+    process: "readonly"
+  },
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
@@ -59,6 +62,9 @@ module.exports = {
         'CONTENT'
       ]
     }],
+    "vue/multi-word-component-names": ["off", {
+    "ignores": []
+    }],
     'vue/order-in-components': ['error', {
       'order': [
         'el',

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

@@ -69,11 +69,9 @@
             this.$emit('link-change-url', fileInfo.cdnUrl, this.index);
           });
 
-          panelResult.progress(p => {
+          // the api also provides these methods
-          });
+          // panelResult.progress(p => {});
-
+          // panelResult.fail(uploadResult => {});
-          panelResult.fail(uploadResult => {
-          });
         });
       },
       switchToDocument() {

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

@@ -23,7 +23,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
 
   .link-form {
     display: grid;

client/src/components/portfolio/ProjectEntryForm.vue

@@ -51,16 +51,10 @@
 
 <script>
   import Modal from '@/components/Modal';
-  import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
-  import DocumentForm from '@/components/content-forms/DocumentForm';
-  import TextForm from '@/components/content-forms/TextForm';
   import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
 
   import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
-  const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload');
   const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
-  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
-  const NoteIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/NoteIcon');
 
   export default {
     props: {
@@ -72,14 +66,8 @@
 
     components: {
       FileUpload,
-      SimpleFileUpload,
       ButtonWithIconAndText,
-      NoteIcon,
-      DocumentIcon,
-      TextForm,
-      DocumentForm,
       Modal,
-      TextFormWithHelpText,
     },
 
     data() {

client/src/components/portfolio/ProjectForm.vue

@@ -36,7 +36,6 @@
 <script>
   import PageForm from '@/components/page-form/PageForm';
   import PageFormInput from '@/components/page-form/PageFormInput';
-  import ColorChooser from '@/components/ColorChooser';
 
   export default {
     props: ['project'],
@@ -44,7 +43,6 @@
     components: {
       PageForm,
       PageFormInput,
-      ColorChooser
     },
 
     data() {

client/src/components/portfolio/ProjectList.vue

@@ -14,10 +14,6 @@
 </template>
 
 <script>
-  import OwnerWidget from '@/components/portfolio/OwnerWidget';
-  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-  import MoreActions from '@/components/rooms/MoreActions';
-  import ProjectActions from '@/components/portfolio/ProjectActions';
   import ProjectListItem from '@/components/portfolio/ProjectListItem';
 
   export default {
@@ -27,7 +23,7 @@
         default: () => ([]),
       },
     },
-    components: {ProjectListItem, MoreActions, EntryCountWidget, OwnerWidget, ProjectActions},
+    components: {ProjectListItem},
   };
 </script>
 

client/src/components/profile/AvatarUploadForm.vue

@@ -9,7 +9,6 @@
 </template>
 
 <script>
-
   import ImageForm from '@/components/content-forms/ImageForm';
 
   export default {
@@ -24,14 +23,9 @@
       };
     },
     methods: {
-      changeLinkUrl(value, index) {
+      changeLinkUrl(value) {
         this.$emit('avatarUpdate', value);
       }
     },
   };
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-</style>

client/src/components/profile/ContentBookmark.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="content-bookmark module-activity-entry">
+    <!-- eslint-disable vue/no-v-html -->
     <div
       v-if="content.type === 'text_block'"
       v-html="text"

client/src/components/rooms/RoomEntry.vue

@@ -19,6 +19,7 @@
         <h2 class="room-entry__title">
           {{ title }}
         </h2>
+        <!-- eslint-disable vue/no-v-html -->
         <p
           class="room-entry__teaser"
           v-html="teaser"
@@ -43,9 +44,7 @@
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
   import UserMetaWidget from '@/components/UserMetaWidget';
-  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
   import teaser from '@/helpers/teaser';
-  import WidgetFooter from '@/components/ui/WidgetFooter';
   import RoomEntryActions from '@/components/rooms/RoomEntryActions';
 
   export default {
@@ -53,8 +52,6 @@
 
     components: {
       RoomEntryActions,
-      WidgetFooter,
-      MoreOptionsWidget,
       UserMetaWidget,
     },
 

client/src/directives/auto-grow.js

@@ -6,15 +6,15 @@ const resizeElement = (el) => {
 export default {
   update: resizeElement,
   inserted: resizeElement,
-  bind(el, binding, vnode) {
+  bind(el) {
     el.classList.add('skillbox-auto-grow');
-    el.addEventListener('input', event => {
+    el.addEventListener('input', () => {
       resizeElement(el);
     });
   },
   unbind(el) {
     el.classList.remove('skillbox-auto-grow');
-    el.removeEventListener('input', event => {
+    el.removeEventListener('input', ()  => {
       resizeElement(el);
     });
   }

client/src/helpers/update-content-bookmark-mutation.js

@@ -18,7 +18,7 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare
           bookmarked
         }
       },
-      update: (store, response) => {
+      update: (store) => {
         const fragment = INSTRUMENT_FRAGMENT;
         const id = `InstrumentNode:${root}`;
         const data = store.readFragment({

client/src/layouts/DefaultLayout.vue

@@ -23,7 +23,6 @@
 
 <script>
   import HeaderBar from '@/components/HeaderBar';
-  import MobileHeader from '@/components/MobileHeader';
   import ProfileSidebar from '@/components/profile/ProfileSidebar';
   import DefaultFooter from '@/layouts/DefaultFooter';
   import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
@@ -32,7 +31,6 @@
   export default {
     components: {
       HeaderBar,
-      MobileHeader,
       ProfileSidebar,
       NavigationSidebar,
       DefaultFooter

client/src/pages/beta-login.vue

@@ -3,7 +3,7 @@
     <h1 class="login__title public-page__title">
       Melden Sie sich jetzt an
     </h1>
-    <ValidationObserver v-slot="{invalid, handleSubmit}">
+    <ValidationObserver v-slot="{handleSubmit}">
       <form
         class="login__form login-form"
         novalidate
@@ -20,7 +20,6 @@
         />
 
         <validated-input
-          v-slot="{errors}"
           :remote-errors="passwordErrors"
           label="Passwort"
           rules="required"

client/src/pages/createContentBlock.vue

@@ -11,6 +11,7 @@
         class="create-content-block__task-toggle"
         label="Inhaltsblock als Auftrag formatieren"
       />
+
       <content-form-section title="Titel">
         <input-with-label
           :value="title"
@@ -229,5 +230,4 @@
       grid-area: footer;
     }
   }
-
 </style>

client/src/pages/hello.vue

@@ -71,19 +71,14 @@
 </template>
 
 <script>
-
-  import LoadingButton from '@/components/LoadingButton';
   import pageTitleMixin from '@/mixins/page-title';
   const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim');
   const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
-  const HelloIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloIllustration');
 
   export default {
     mixins: [pageTitleMixin],
     components: {
-      LoadingButton,
-      HelloIllustration,
       HepLogoNoClaim,
       EhbLogo,
       Logo
@@ -101,8 +96,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   $hello-block-margin: 2*$medium-spacing;
 

client/src/pages/instrument.vue

@@ -7,6 +7,7 @@
       {{ instrument.title }}
     </h1>
 
+    <!-- eslint-disable vue/no-v-html -->
     <div
       class="instrument__intro intro"
       data-cy="instrument-intro"

client/src/pages/license-activation.vue

@@ -8,7 +8,7 @@
     </header>
     <section class="coupon">
       <ValidationObserver
-        v-slot="{handleSubmit, invalid}"
+        v-slot="{handleSubmit}"
       >
         <form
           class="license-activation__form license-activation-form"

client/src/pages/me/myTeam.vue

@@ -76,7 +76,9 @@
         this.$apollo.mutate({
           mutation: LEAVE_TEAM_MUTATION,
           update(store, {data: {leaveTeam: {success}}}) {
-            addTeam(store, null);
+            if (success){
+              addTeam(store, null);
+            }
           },
         });
       },

client/src/pages/module/module.vue

@@ -140,7 +140,7 @@
               bookmarked,
             },
           },
-          update: (store, response) => {
+          update: (store) => {
             const fragment = MODULE_FRAGMENT;
             const id = `ModuleNode:${slug}`;
             const data = store.readFragment({
@@ -187,13 +187,6 @@
             container: 'body',
             easing: 'ease',
             offset: -60,
-            onStart: (element) => {
-            },
-            onDone: (element) => {
-            },
-            onCancel: function () {
-              // scrolling has been interrupted
-            },
             x: false,
             y: true,
           };

client/src/pages/module/moduleRoom.vue

@@ -64,7 +64,7 @@
         },
         // manual: true,
         // todo: do we really need manual here? update should do the trick too
-        result({data, loading, networkStatus}) {
+        result({data, loading}) {
           if (!loading) {
             this.room = Object.assign({}, this.$getRidOfEdges(data).moduleRoom);
             this.$store.dispatch('setSpecialContainerClass', this.room.appearance);

client/src/pages/module/moduleSettings.vue

@@ -35,13 +35,11 @@
 </template>
 
 <script>
-  import Checkbox from '@/components/ui/Checkbox';
   import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
 
   export default {
     components: {
       ToggleSolutionsForModule,
-      Checkbox
     }
   };
 </script>

client/src/pages/portfolio/portfolio.vue

@@ -22,8 +22,6 @@
 </template>
 
 <script>
-  import ProjectWidget from '@/components/portfolio/ProjectWidget';
-
   import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
   import PortfolioOnboarding from '@/components/portfolio/PortfolioOnboarding';
   import CreateProjectButton from '@/components/portfolio/CreateProjectButton';
@@ -38,7 +36,6 @@
       ProjectList,
       CreateProjectButton,
       PortfolioOnboarding,
-      ProjectWidget
     },
 
     apollo: {

client/src/pages/portfolio/project.vue

@@ -71,7 +71,6 @@
   import ShareLink from '@/components/portfolio/ShareLink';
 
   import updateProjectShareState from '@/mixins/update-project-share-state';
-  const ShareIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ShareIcon');
 
   export default {
     props: ['slug'],
@@ -80,7 +79,6 @@
 
     components: {
       ShareLink,
-      ShareIcon,
       BackLink,
       AddProjectEntry,
       ProjectEntry,

client/src/pages/room.vue

@@ -77,7 +77,7 @@
     mounted() {
       this.$watch(
         'me.selectedClass.id',
-        (newValue, _) => {
+        (newValue) => {
           if (this.room.schoolClass.id !== newValue) {
             this.$router.push({
               name: ROOMS_PAGE,

client/src/pages/snapshot/snapshot.vue

@@ -17,7 +17,6 @@
   import SNAPSHOT_DETAIL_QUERY from '@/graphql/gql/queries/snapshots/detail.gql';
 
   import Module from '@/components/modules/Module';
-  import Checkbox from '@/components/ui/Checkbox';
   import SnapshotHeader from '@/components/modules/SnapshotHeader';
 
   export default {
@@ -30,7 +29,6 @@
 
     components: {
       SnapshotHeader,
-      Checkbox,
       Module,
     },
 

client/src/pages/start-old.vue

@@ -1,264 +0,0 @@
-<template>
-  <div class="start-page">
-    <header-bar class="start-page__header" />
-
-    <div class="start-page__sections start-sections">
-      <section-block
-        :link-text="moduleText"
-        :route="moduleRoute"
-        class="start-sections__section"
-        title="Inhalte"
-        subtitle="Neues Wissen erwerben"
-        data-cy="current-module-link"
-      >
-        <contents-illustration />
-      </section-block>
-      <section-block
-        class="start-sections__section"
-        title="Räume"
-        subtitle="Beiträge mit der Klasse teilen"
-        data-cy="rooms-link"
-        link-text="Alle Räume anzeigen"
-        route="/rooms"
-      >
-        <rooms-illustration />
-      </section-block>
-      <section-block
-        class="start-sections__section"
-        title="Portfolio"
-        subtitle="Projekt dokumentieren und reflektieren"
-        link-text="Portfolio anzeigen"
-        route="/portfolio"
-      >
-        <portfolio-illustration />
-      </section-block>
-    </div>
-    <div class="start-page__news news">
-      <h2 class="news__title">
-        News
-      </h2>
-      <news-teaser
-        date="27. Mai 2020"
-        title="Lockdown"
-        url="https://myskillbox-abu-news.webflow.io/lockdown"
-      />
-      <news-teaser
-        date="11. März 2020"
-        title="Brexit"
-        url="https://myskillbox-abu-news.webflow.io/brexit"
-      />
-      <news-teaser
-        date="20. Dezember 2019"
-        title="Blockchain"
-        url="https://myskillbox-abu-news.webflow.io/blockchain"
-      />
-      <!--<news-teaser date="31. Oktober 2018" title="Sommerzeit - Festivalzeit"-->
-      <!--url="https://abunews.webflow.io/"></news-teaser>-->
-      <div class="news__more">
-        Mehr...
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  import SectionBlock from '@/components/SectionBlock.vue';
-  import NewsTeaser from '@/components/news/NewsTeaserOld.vue';
-  import HeaderBar from '@/components/HeaderBar';
-
-  import MobileHeader from '@/components/MobileHeader';
-
-  import meMixin from '@/mixins/me';
-
-  const ContentsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration');
-  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
-  const RoomsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration');
-
-  export default {
-
-    mixins: [meMixin],
-    components: {
-      MobileHeader,
-      HeaderBar,
-      SectionBlock,
-      NewsTeaser,
-      ContentsIllustration,
-      PortfolioIllustration,
-      RoomsIllustration
-    },
-
-    computed: {
-      moduleRoute() {
-        if (this.me.lastModule && this.me.lastModule.slug) {
-          return `/module/${this.me.lastModule.slug}`;
-        }
-        return '/book/topic/berufliche-grundbildung';
-      },
-      moduleText() {
-        if (this.me.lastModule && this.me.lastModule.slug) {
-          return 'Aktuelles Modul anzeigen';
-        }
-        return 'Alle Inhalte anzeigen';
-      }
-    },
-
-  };
-</script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .start-page {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    @supports (display: grid) {
-      display: grid;
-      justify-content: stretch;
-    }
-    grid-template-rows: auto 1fr auto;
-    min-height: 100vh;
-    width: 100vw;
-    box-sizing: border-box;
-
-    &__header {
-
-    }
-
-    &__title {
-      color: $color-brand;
-      text-align: center;
-      border-bottom: 1px solid $color-silver-light;
-      padding-bottom: 30px;
-      margin-left: 30px;
-      margin-right: 30px;
-      margin-bottom: 60px;
-    }
-
-    &__my {
-      color: $color-white;
-      /*font-size: 2rem;*/
-      font-weight: 800;
-      -webkit-text-stroke: 1px $color-brand;
-      /*text-shadow: -1px -1px 0 $color-brand,
-      1px -1px 0 $color-brand,
-      -1px 1px 0 $color-brand,
-      1px 1px 0 $color-brand;*/
-    }
-  }
-
-  .start-sections {
-    margin: 0 30px;
-    @include desktop {
-      padding-left: 120px;
-      padding-right: 120px;
-    }
-    display: -ms-grid;
-    -ms-grid-column-align: center;
-    -ms-grid-columns: 1fr 1fr 1fr;
-    margin-bottom: 90px;
-    @supports (display: grid) {
-      display: grid;
-    }
-    @include desktop {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    grid-row-gap: 15px;
-    grid-column-gap: 50px;
-    justify-items: start;
-    align-items: center;
-
-    /*
-     * For IE10+
-     */
-    & > :nth-child(1) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 1;
-    }
-
-    & > :nth-child(2) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 2;
-    }
-
-    & > :nth-child(3) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 3;
-    }
-
-  }
-
-  .news {
-    background-color: $color-charcoal-dark;
-    color: $color-white;
-    padding-top: $large-spacing;
-    padding-bottom: $large-spacing;
-    display: flex;
-    justify-content: space-around;
-    -ms-grid-columns: 1fr 1fr 1fr;
-    @supports (display: grid) {
-      display: grid;
-      grid-template-columns: 1fr;
-    }
-
-    grid-row-gap: $large-spacing;
-
-    @include desktop {
-      grid-template-columns: repeat(5, 1fr);
-    }
-
-    /*
-     * For IE10+
-     */
-    & > :nth-child(1) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 1;
-    }
-
-    & > :nth-child(2) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 2;
-    }
-
-    & > :nth-child(3) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 3;
-    }
-
-    & > :nth-child(4) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 4;
-    }
-
-    @include desktop {
-      /*padding-left: 120px;*/
-      /*padding-right: 120px;*/
-    }
-
-    &__title {
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-bold;
-      text-transform: uppercase;
-      font-size: 2.1875rem;
-      padding-bottom: 24px;
-      text-align: center;
-      color: inherit;
-      margin-bottom: 0;
-    }
-
-    &__more {
-      color: $color-white;
-      font-family: $sans-serif-font-family;
-      line-height: $default-line-height;
-      padding-left: $medium-spacing;
-      font-weight: $font-weight-bold;
-      text-align: center;
-
-      @include desktop {
-        text-align: left;
-        border-left: 1px solid $color-silver-light;
-      }
-    }
-  }
-</style>

client/src/pages/start.vue

@@ -79,36 +79,21 @@
   </div>
 </template>
 <script>
-  import SectionBlock from '@/components/SectionBlock.vue';
   import NewsTeaser from '@/components/news/NewsTeaser.vue';
-  import NewsTeasers from '@/components/news/NewsTeasers.vue';
-  import HeaderBar from '@/components/HeaderBar';
   import ModuleTeaser from '@/components/modules/ModuleTeaser';
 
-  import MobileHeader from '@/components/MobileHeader';
 
   import meQuery from '@/mixins/me';
   import news from '@/mixins/news';
 
   import pageTitleMixin from '@/mixins/page-title';
 
-  const ContentsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration');
-  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
-  const RoomsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration');
-
   export default {
 
     mixins: [meQuery, news, pageTitleMixin],
 
     components: {
-      MobileHeader,
-      HeaderBar,
-      SectionBlock,
       NewsTeaser,
-      NewsTeasers,
-      ContentsIllustration,
-      PortfolioIllustration,
-      RoomsIllustration,
       ModuleTeaser
     },
 

client/src/pages/studentSubmission.vue

@@ -6,6 +6,7 @@
     </div>
     <div class="submission-page__content submission-content">
       <h2>Ergebnis von {{ fullName }}</h2>
+      <!-- eslint-disable-next-line vue/no-v-html -->
       <p v-html="text" />
       <p
         class="article-content__document"

client/src/pages/survey.vue

@@ -131,7 +131,8 @@
           const data = {};
 
           for (let k in survey.data) {
-            if (survey.data.hasOwnProperty(k)) {
+            // if (survey.data.hasOwnProperty(k)) {
+              if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
               let question = sender.getQuestionByName(k);
               data[k] = {
                 answer: survey.data[k],
@@ -205,7 +206,7 @@
           };
         },
         manual: true,
-        result({data, loading, networkStatus}) {
+        result({data, loading }) {
           if (!loading) {
             let json = JSON.parse(data.survey.data);
             json.showTitle = false;
@@ -235,8 +236,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .survey-page {
     max-width: 800px;

client/src/styles/_nested-content-lists.scss

@@ -1,6 +1,7 @@
 .content-list {
   /* https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses */
 
+
   // parent element needs to reset the counter-increment
   // either use this class, or use the attribute on it
   &__parent {

client/tests/unit/text-form.spec.js

@@ -1,7 +1,7 @@
-import {createLocalVue, shallowMount} from '@vue/test-utils'
+import {createLocalVue, shallowMount} from '@vue/test-utils';
 import TextForm from '@/components/content-forms/TextForm';
 
-const localVue = createLocalVue()
+const localVue = createLocalVue();
 
 describe('TextForm.vue', () => {
 
@@ -19,7 +19,7 @@ describe('TextForm.vue', () => {
     const textInput = wrapper.find('[data-cy="text-form-input"]');
     await textInput.setValue(inputText);
 
-    expect(wrapper.emitted()['text-change-value'][0]).toEqual([inputText, props.index]);
+    expect(wrapper.emitted()['change-text'][0]).toEqual([inputText, props.index]);
   });
 
-})
+});