Re-add the module component

client/src/pages/module/module.vue

@@ -1,51 +1,13 @@
 <template>
-  <div class="module">
+  <module
-    <h2
+    :module="module"
-      class="module__meta-title"
+    @editNote="editNote"
-      id="meta-title">{{ module.metaTitle }}</h2>
+    @addNote="addNote"
-    <h1
+    @bookmark="bookmark"/>
-      class="module__title"
-      data-cy="module-title">{{ module.title }}</h1>
-    <img
-      :src="module.heroImage"
-      alt=""
-      class="module__hero">
-
-    <div class="module__intro-wrapper">
-      <bookmark-actions
-        :bookmarked="module.bookmark"
-        :note="note"
-        class="module__bookmark-actions"
-        @add-note="addNote"
-        @edit-note="editNote"
-        @bookmark="bookmark(!module.bookmark)"/>
-      <div
-        class="module__intro intro"
-        v-html="module.intro"/>
-    </div>
-
-    <h3 id="objectives">Lernziele</h3>
-
-    <div class="module__objective-groups">
-      <objective-groups :groups="languageCommunicationObjectiveGroups"/>
-
-      <objective-groups :groups="societyObjectiveGroups"/>
-
-      <objective-groups :groups="interdisciplinaryObjectiveGroups"/>
-    </div>
-
-    <chapter
-      :chapter="chapter"
-      :index="index"
-      :key="chapter.id"
-      v-for="(chapter, index) in module.chapters"/>
-
-  </div>
 </template>
 
 <script>
-  import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
+  import Module from '@/components/modules/Module';
-  import Chapter from '@/components/Chapter.vue';
 
   import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
   import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
@@ -54,17 +16,14 @@
   import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
   import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
 
-  import BookmarkActions from '@/components/notes/BookmarkActions';
   import meMixin from '@/mixins/me';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/moduleDetailsQuery';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
 
   export default {
     mixins: [meMixin],
 
     components: {
-      BookmarkActions,
+      Module
-      ObjectiveGroups,
-      Chapter,
     },
 
     data() {
@@ -73,30 +32,6 @@
       };
     },
 
-    computed: {
-      languageCommunicationObjectiveGroups() {
-        return this.module.objectiveGroups ? this.module.objectiveGroups
-          .filter(group => group.title === 'LANGUAGE_COMMUNICATION') : [];
-      },
-      societyObjectiveGroups() {
-        return this.module.objectiveGroups ? this.module.objectiveGroups
-          .filter(group => group.title === 'SOCIETY') : [];
-      },
-      interdisciplinaryObjectiveGroups() {
-        return this.module.objectiveGroups ? this.module.objectiveGroups
-          .filter(group => group.title === 'INTERDISCIPLINARY') : [];
-      },
-      isStudent() {
-        return !this.me.permissions.includes('users.can_manage_school_class_content');
-      },
-      note() {
-        if (!(this.module && this.module.bookmark)) {
-          return;
-        }
-        return this.module.bookmark.note;
-      },
-    },
-
     created() {
       this.updateLastVisitedModule(this.module.id);
     },
@@ -135,30 +70,6 @@
               id: moduleId,
             },
           },
-          // update(store, {data: {updateLastModule: {lastModule}}}) {
-          //   if (lastModule) {
-          //     const data = store.readQuery({query: ME_QUERY});
-          //     if (data) {
-          //       data.me.lastModule = lastModule;
-          //       let recentModules = data.me.recentModules.edges;
-          //       let newRecentModules;
-          //       let index = recentModules.findIndex(element => element.node.id === lastModule.id);
-          //       if (index > -1) {
-          //         newRecentModules = [...recentModules.slice(0, index), ...recentModules.slice(index + 1)];
-          //       } else if (recentModules.length >= 3) {
-          //         newRecentModules = recentModules.slice(0, recentModules.length - 1);
-          //       } else {
-          //         newRecentModules = recentModules;
-          //       }
-          //       newRecentModules.unshift({
-          //         __typename: 'ModuleNodeEdge',
-          //         node: lastModule,
-          //       });
-          //       data.me.recentModules.edges = newRecentModules;
-          //       store.writeQuery({query: ME_QUERY, data});
-          //     }
-          //   }
-          // },
         });
       },
       bookmark(bookmarked) {
@@ -244,55 +155,5 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
-  @import "@/styles/_mixins.scss";
 
-  .module {
-    display: flex;
-    justify-self: center;
-    max-width: 100vw;
-
-    @include desktop {
-      width: 800px;
-    }
-    flex-direction: column;
-    padding: $large-spacing 15px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-
-    &__hero {
-      margin-bottom: 35px;
-      border-radius: 12px;
-      max-width: 100%;
-    }
-
-    &__meta-title {
-      @include meta-title;
-    }
-
-    &__intro-wrapper {
-      position: relative;
-    }
-
-    &__intro {
-      > /deep/ p {
-        font-size: toRem(25px);
-        margin-bottom: $large-spacing;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-
-    &__bookmark-actions {
-      margin-top: 3px;
-    }
-
-    &__objective-groups {
-      margin-bottom: $large-spacing;
-    }
-  }
 </style>

client/src/pages/module/moduleVisibility.vue

@@ -43,7 +43,7 @@
   import me from '@/mixins/me';
 
   import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/moduleDetailsQuery';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
   import {MODULE_PAGE} from '@/router/module.names';
 
   export default {

client/src/pages/snapshot/snapshot.vue

@@ -2,13 +2,15 @@
   <div>
     Hello
     {{ id }}
-
+    <module :module="snapshot" />
   </div>
 </template>
 
 <script>
   import SNAPSHOT_DETAIL_QUERY from '@/graphql/gql/queries/snapshots/detail.gql';
 
+  import Module from '@/components/modules/Module';
+
   export default {
     props: {
       id: {
@@ -17,6 +19,10 @@
       },
     },
 
+    components: {
+      Module
+    },
+
     apollo: {
       snapshot: {
         query: SNAPSHOT_DETAIL_QUERY,