From 81e5704fbe188dfd06b53d8a286f64dad94722df Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 17 Mar 2021 18:07:58 +0100
Subject: [PATCH] Add back-to-module link

---
 client/src/components/BackLink.vue            |  55 ++++++++++
 .../components/modules/ModuleNavigation.vue   |  28 +++--
 .../modules/ModuleSubNavigation.vue           | 103 ++++++++++++++++++
 client/src/pages/module/module-base.vue       |  10 +-
 client/src/pages/module/moduleSettings.vue    |   2 +-
 client/src/router/module.routes.js            |  70 ++++++------
 6 files changed, 218 insertions(+), 50 deletions(-)
 create mode 100644 client/src/components/BackLink.vue
 create mode 100644 client/src/components/modules/ModuleSubNavigation.vue

diff --git a/client/src/components/BackLink.vue b/client/src/components/BackLink.vue
new file mode 100644
index 00000000..ce5e534b
--- /dev/null
+++ b/client/src/components/BackLink.vue
@@ -0,0 +1,55 @@
+<template>
+  <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 ChevronLeft from '@/components/icons/ChevronLeft';
+  import {MODULE_PAGE} from '@/router/module.names';
+
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: '',
+      },
+      type: {
+        type: String,
+        default: 'topic',
+      },
+      slug: {
+        type: String,
+        default: '',
+      },
+    },
+
+    components: {
+      ChevronLeft,
+    },
+
+    computed: {
+      to() {
+        if (this.type === 'topic') {
+          return {name: 'topic', params: {topicSlug: this.slug}};
+        } else {
+          return {name: MODULE_PAGE};
+        }
+      },
+      fullTitle() {
+        return this.type === 'topic' ? `Thema: ${this.title}` : `Modul: ${this.title}`;
+      }
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .back-link {
+    @include regular-text;
+  }
+</style>
diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index 2e8f909c..77f906a5 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -1,12 +1,11 @@
 <template>
   <nav
     class="module-navigation sub-navigation">
-    <router-link
-      :to="{name: 'topic', params: {topicSlug: module.topic.slug}}"
-      class="sub-navigation-item module-navigation__topic-link">
-      <chevron-left class="sub-navigation-item__icon" />
-      Thema: {{ module.topic.title }}
-    </router-link>
+    <back-link
+      :title="module.topic.title"
+      :slug="module.topic.slug"
+      class="module-navigation__topic-link"
+      type="topic"/>
     <div
       class="module-navigation__module-content"
       v-if="false"> <!-- Do not display this for now, might be used later again though -->
@@ -52,7 +51,8 @@
       <router-link
         :to="{name: 'module-settings'}"
         class="module-navigation__actions"
-        data-cy="module-settings-button">Einstellungen</router-link>
+        data-cy="module-settings-button">Einstellungen
+      </router-link>
       <toggle-editing v-if="onModulePage"/>
     </div>
   </nav>
@@ -60,12 +60,11 @@
 </template>
 
 <script>
+  import BackLink from '@/components/BackLink';
   import {moduleQuery} from '@/graphql/queries';
 
   import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
-  import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
   import ToggleEditing from '@/components/toggle-menu/ToggleEditing';
-  import ChevronLeft from '@/components/icons/ChevronLeft';
   import me from '@/mixins/me';
 
   export default {
@@ -76,17 +75,16 @@
     mixins: [me],
 
     components: {
+      BackLink,
       SubNavigationItem,
-      ToggleSolutionsForModule,
       ToggleEditing,
-      ChevronLeft
     },
 
     data() {
       return {
         module: {
           assignments: [],
-          topic: {}
+          topic: {},
         },
       };
     },
@@ -106,7 +104,7 @@
           return [];
         }
         return this.extractAssignmentsFromChapters(this.module.chapters, []);
-      }
+      },
     },
 
     methods: {
@@ -155,8 +153,8 @@
       flattenArray(arrayToFlatten) {
         // https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays
         return [].concat.apply([], arrayToFlatten);
-      }
-    }
+      },
+    },
   };
 </script>
 
diff --git a/client/src/components/modules/ModuleSubNavigation.vue b/client/src/components/modules/ModuleSubNavigation.vue
new file mode 100644
index 00000000..a5f4383c
--- /dev/null
+++ b/client/src/components/modules/ModuleSubNavigation.vue
@@ -0,0 +1,103 @@
+<template>
+  <nav
+    class="module-sub-navigation sub-navigation">
+    <back-link
+      :title="module.title"
+      type="module"/>
+  </nav>
+
+</template>
+
+<script>
+  import BackLink from '@/components/BackLink';
+  import {moduleQuery} from '@/graphql/queries';
+
+  import me from '@/mixins/me';
+
+  export default {
+    apollo: {
+      module: moduleQuery,
+    },
+
+    mixins: [me],
+
+    components: {
+      BackLink,
+    },
+
+    data() {
+      return {
+        module: {},
+      };
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~styles/helpers";
+
+  @mixin module-navigation-typography {
+    font-family: $sans-serif-font-family;
+    color: $color-silver-dark;
+    font-weight: $font-weight-regular;
+  }
+
+  .module-sub-navigation {
+    display: none;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 11;
+    background-color: $color-white;
+    border-top: 1px solid $color-silver;
+
+    &__topic-link {
+      @include regular-text;
+    }
+
+    @include desktop {
+      display: flex;
+    }
+
+    &__module-content {
+      margin-bottom: 18px;
+    }
+
+    &__heading {
+      @include module-navigation-typography;
+      margin: 0;
+      font-size: 1.0625rem;
+      cursor: pointer;
+    }
+
+    &__anchors {
+      display: flex;
+      flex-direction: column;
+      padding: 16px 24px 0;
+    }
+
+    &__anchor {
+      @include module-navigation-typography;
+      font-size: 0.875rem;
+      line-height: 1.2rem;
+      margin-bottom: .6875rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &--active {
+        color: $color-brand;
+      }
+    }
+
+    &__toggle-menu {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+    }
+
+    &__actions {
+      @include regular-text;
+      margin-right: $medium-spacing;
+    }
+  }
+</style>
diff --git a/client/src/pages/module/module-base.vue b/client/src/pages/module/module-base.vue
index b6c529c6..fd5a4933 100644
--- a/client/src/pages/module/module-base.vue
+++ b/client/src/pages/module/module-base.vue
@@ -1,21 +1,27 @@
 <template>
   <div class="module-page">
     <module-navigation v-if="showNavigation" />
+    <module-sub-navigation v-if="showSubNavigation" />
     <router-view/>
   </div>
 </template>
 
 <script>
   import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
+  import ModuleSubNavigation from '@/components/modules/ModuleSubNavigation.vue';
 
   export default {
     components: {
-      ModuleNavigation
+      ModuleNavigation,
+      ModuleSubNavigation
     },
 
     computed: {
       showNavigation() {
-        return !this.$route.meta.hideNavigation;
+        return !this.$route.meta.hideNavigation && !this.$route.meta.showSubNavigation;
+      },
+      showSubNavigation() {
+        return !!this.$route.meta.showSubNavigation;
       }
     }
   };
diff --git a/client/src/pages/module/moduleSettings.vue b/client/src/pages/module/moduleSettings.vue
index d7734daf..d4bc05f9 100644
--- a/client/src/pages/module/moduleSettings.vue
+++ b/client/src/pages/module/moduleSettings.vue
@@ -35,7 +35,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import 'styles/_helpers';
+  @import '~styles/_helpers';
 
   .module-settings {
     @include settings-page;
diff --git a/client/src/router/module.routes.js b/client/src/router/module.routes.js
index ba1d79f1..1f0ac4bd 100644
--- a/client/src/router/module.routes.js
+++ b/client/src/router/module.routes.js
@@ -6,36 +6,42 @@ import {MODULE_PAGE, MODULE_SETTINGS_PAGE, SUBMISSIONS_PAGE, VISIBILITY_PAGE} fr
 import settingsPage from '@/pages/module/moduleSettings';
 
 export default [
-    {
-        path: '/module/:slug',
-        component: moduleBase,
-        children: [
-            {
-                path: '',
-                name: MODULE_PAGE,
-                component: module,
-                meta: {filter: true},
-            },
-            {
-                path: 'submissions/:id',
-                name: SUBMISSIONS_PAGE,
-                component: submissions,
-                meta: {filter: true},
-            },
-            {
-                path: 'settings',
-                name: MODULE_SETTINGS_PAGE,
-                component: settingsPage,
-            },
-            {
-                path: 'visibility',
-                name: VISIBILITY_PAGE,
-                component: moduleVisibility,
-                meta: {
-                    layout: 'simple',
-                    hideNavigation: true,
-                },
-            },
-        ],
-    },
+  {
+    path: '/module/:slug',
+    component: moduleBase,
+    children: [
+      {
+        path: '',
+        name: MODULE_PAGE,
+        component: module,
+        meta: {filter: true},
+      },
+      {
+        path: 'submissions/:id',
+        name: SUBMISSIONS_PAGE,
+        component: submissions,
+        meta: {
+          filter: true,
+          showSubNavigation: true,
+        },
+      },
+      {
+        path: 'settings',
+        name: MODULE_SETTINGS_PAGE,
+        component: settingsPage,
+        meta: {
+          showSubNavigation: true,
+        },
+      },
+      {
+        path: 'visibility',
+        name: VISIBILITY_PAGE,
+        component: moduleVisibility,
+        meta: {
+          layout: 'simple',
+          hideNavigation: true,
+        },
+      },
+    ],
+  },
 ];