From 98a8acac4f172017522489084de4433e2b7e707f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 16 Jul 2019 16:15:20 +0200
Subject: [PATCH] Refactor subnavigation and implement module subnavigation

---
 client/src/components/HeaderBar.vue           |  4 +-
 .../book-navigation/BookNavigation.vue        | 44 +++------
 .../book-navigation/BookTopicNavigation.vue   | 45 ++++++----
 .../book-navigation/SubNavigationItem.vue     |  8 +-
 client/src/components/modules/Module.vue      | 15 +---
 .../components/modules/ModuleNavigation.vue   | 89 +++++++++++--------
 client/src/graphql/gql/allTopicsQuery.gql     | 12 +++
 client/src/pages/book.vue                     |  2 +-
 client/src/router/index.js                    |  2 +-
 client/src/styles/_navigation.scss            | 64 +++++++++++++
 client/src/styles/main.scss                   |  2 +-
 server/books/schema/queries.py                |  2 +-
 server/core/management/commands/dummy_data.py |  6 ++
 13 files changed, 188 insertions(+), 107 deletions(-)
 create mode 100644 client/src/graphql/gql/allTopicsQuery.gql

diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 913708c6..d0fc01e1 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -1,7 +1,9 @@
 <template>
   <header class="header-bar">
     <top-navigation></top-navigation>
-    <router-link to="/" class="header-bar__logo" data-cy="home-link"><logo></logo></router-link>
+    <router-link to="/" class="header-bar__logo" data-cy="home-link">
+      <logo></logo>
+    </router-link>
     <div class="user-header">
       <router-link to="/me/activity">
         <user-widget v-bind="me"></user-widget>
diff --git a/client/src/components/book-navigation/BookNavigation.vue b/client/src/components/book-navigation/BookNavigation.vue
index 68502926..33d8aaa2 100644
--- a/client/src/components/book-navigation/BookNavigation.vue
+++ b/client/src/components/book-navigation/BookNavigation.vue
@@ -1,48 +1,28 @@
 <template>
-  <aside class="book-navigation">
-    <book-navigation-item title="Themen">
+  <aside class="sub-navigation">
+    <sub-navigation-item title="Themen">
       <book-topic-navigation></book-topic-navigation>
-    </book-navigation-item>
-    <book-navigation-item title="Instrument">
-      <div>
-        <router-link to="/basic-knowledge">Sprache und Kommunikation</router-link>
-      </div>
-      <div>
-        <router-link to="/basic-knowledge">Gesellschaft</router-link>
-      </div>
-    </book-navigation-item>
-    <book-navigation-item title="News">
+    </sub-navigation-item>
+    <sub-navigation-item title="Instrument">
+        <router-link tag="div" class="book-subnavigation__item" to="/basic-knowledge">Sprache und Kommunikation</router-link>
+        <router-link tag="div" class="book-subnavigation__item" to="/basic-knowledge">Gesellschaft</router-link>
+    </sub-navigation-item>
+    <sub-navigation-item title="News">
       <template slot="title">
-        <h2 class="book-navigation__title" slot="title">ABU News</h2>
+        <h2 class="sub-navigation__title" slot="title">ABU News</h2>
       </template>
-    </book-navigation-item>
+    </sub-navigation-item>
   </aside>
 </template>
 
 <script>
-  import BookNavigationItem from '@/components/book-navigation/BookNavigationItem';
+  import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
   export default {
     components: {
-      BookNavigationItem,
+      SubNavigationItem,
       BookTopicNavigation
     }
   }
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_functions.scss";
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .book-navigation {
-    display: none;
-
-    @include desktop {
-      display: flex;
-    }
-
-    padding: $medium-spacing;
-  }
-</style>
diff --git a/client/src/components/book-navigation/BookTopicNavigation.vue b/client/src/components/book-navigation/BookTopicNavigation.vue
index 9cb04857..edf1ddb7 100644
--- a/client/src/components/book-navigation/BookTopicNavigation.vue
+++ b/client/src/components/book-navigation/BookTopicNavigation.vue
@@ -1,24 +1,44 @@
 <template>
   <nav class="book-topics">
-    <div class="book-topics__topic"
+    <router-link :to="{name: 'topic', params: {topicSlug: topic.slug}}"
+      tag="div"
+      class="book-topics__topic book-subnavigation__item"
          :class="{'book-topics__topic--active': topic.active}"
          v-for="topic in topics"
-         :key="topic.id">{{topic.id}}. {{topic.title}}
-    </div>
+         :key="topic.id">
+      {{topic.order}}.
+      {{topic.title}}
+    </router-link>
   </nav>
 </template>
 
 <script>
+  import ALL_TOPICS_QUERY from '@/graphql/gql/allTopicsQuery.gql';
+
   export default {
     data() {
       return {
         topics: [
-          {id: 2, title: 'Geld und Kauf', active: true},
-          {id: 3, title: 'Geld und Kauf', active: false},
-          {id: 4, title: 'Geld und Kauf', active: false},
-          {id: 5, title: 'Geld und Kauf', active: false},
         ]
       }
+    },
+
+    methods: {
+      topicId(id) {
+        return atob(id)
+      }
+    },
+
+    apollo: {
+      topics: {
+        query: ALL_TOPICS_QUERY,
+        manual: true,
+        result({data, loading, networkStatus}) {
+          if (!loading) {
+            this.topics = this.$getRidOfEdges(data).topics
+          }
+        }
+      }
     }
   }
 </script>
@@ -27,18 +47,7 @@
   @import "@/styles/_variables.scss";
 
   .book-topics {
-    padding-left: 24px;
-    margin-bottom: 25px;
-
     &__topic {
-      font-family: $sans-serif-font-family;
-      font-size: toRem(14px);
-      margin-bottom: 20px;
-      color: $color-silver-dark;
-
-      &--active {
-        color: $color-brand;
-      }
     }
   }
 </style>
diff --git a/client/src/components/book-navigation/SubNavigationItem.vue b/client/src/components/book-navigation/SubNavigationItem.vue
index 76dce019..e1bcd649 100644
--- a/client/src/components/book-navigation/SubNavigationItem.vue
+++ b/client/src/components/book-navigation/SubNavigationItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sub-navigation-item" :class="{ 'sub-navigation-item--active': show}">
+  <div class="sub-navigation-item" :class="{ 'sub-navigation-item--active': show}" 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-down>
@@ -27,6 +27,12 @@
       return {
         show: false
       }
+    },
+
+    methods: {
+      close() {
+        this.show = false;
+      }
     }
   }
 </script>
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 6cf8b602..07de26e0 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -1,12 +1,5 @@
 <template>
   <div class="module">
-
-    <toggle-solutions-for-module
-      :module="module.id"
-      :enabled="module.solutionsEnabled"
-      class="module__solution-toggle"
-      data-cy="toggle-enable-solutions"></toggle-solutions-for-module>
-
     <h2 class="module__meta-title" id="meta-title">{{module.metaTitle}}</h2>
     <h1 class="module__title" data-cy="module-title">{{module.title}}</h1>
     <img
@@ -33,7 +26,6 @@
   import ObjectiveGroupControl from '@/components/objective-groups/ObjectiveGroupControl.vue';
   import AddObjectiveGroupButton from '@/components/AddObjectiveGroupButton';
   import Chapter from '@/components/Chapter.vue';
-  import ToggleSolutionsForModule from '@/components/ToggleSolutionsForModule.vue';
 
   import UPDATE_OBJECTIVE_PROGRESS_MUTATION from '@/graphql/gql/mutations/updateObjectiveProgress.gql';
   import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
@@ -47,8 +39,7 @@
       ObjectiveGroups,
       ObjectiveGroupControl,
       AddObjectiveGroupButton,
-      Chapter,
-      ToggleSolutionsForModule
+      Chapter
     },
 
     props: {
@@ -155,10 +146,6 @@
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 
-    &__solution-toggle {
-      margin-bottom: $large-spacing;
-    }
-
     &__hero {
       margin-bottom: 35px;
       border-radius: 12px;
diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index d9f54bf6..2b9d021e 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -1,49 +1,53 @@
 <template>
-  <div>
-    <nav v-if="false" class="module-navigation">
-      <div class="module-navigation__module-content">
-        <router-link
-          tag="h3"
-          :to="moduleContentLink"
-          class="module-navigation__heading"
-        >Inhalte: {{module.metaTitle}}
-        </router-link>
-        <div class="module-navigation__anchors" v-if="onModulePage">
-          <a href="#" v-scroll-to="'#meta-title'" class="module-navigation__anchor">Einleitung</a>
-          <a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>
+  <nav class="module-navigation sub-navigation">
+    <div class="sub-navigation-item">
+      <router-link class="sub-navigation-item__title" :to="moduleContentLink">Modul</router-link>
+    </div>
+    <sub-navigation-item title="Ergebnisse">
+      <router-link
+        :to="submissionsLink(assignment)"
+        v-for="assignment in assignments"
+        :key="assignment.id"
+        class="module-navigation__anchor"
+        exact-active-class="module-navigation__anchor--active"
+      >{{assignmentTitle(assignment)}}
+      </router-link>
+    </sub-navigation-item>
+    <div class="module-navigation__module-content" v-if="false">
+      <router-link
+        tag="h3"
+        :to="moduleContentLink"
+        class="module-navigation__heading"
+      >Inhalte: {{module.metaTitle}}
+      </router-link>
+      <div class="module-navigation__anchors" v-if="onModulePage">
+        <a href="#" v-scroll-to="'#meta-title'" class="module-navigation__anchor">Einleitung</a>
+        <a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>
 
-          <a href="#" class="module-navigation__anchor"
-             v-scroll-to="chapterId(index)"
-             v-for="(chapter, index) in module.chapters"
-             :key="chapter.id">{{chapter.title}}</a>
-          <a href="#" v-scroll-to="'#objectives-confirm'" class="module-navigation__anchor">Lernzielkontrolle</a>
-        </div>
+        <a href="#" class="module-navigation__anchor"
+           v-scroll-to="chapterId(index)"
+           v-for="(chapter, index) in module.chapters"
+           :key="chapter.id">{{chapter.title}}</a>
+        <a href="#" v-scroll-to="'#objectives-confirm'" class="module-navigation__anchor">Lernzielkontrolle</a>
       </div>
+    </div>
 
-      <div class="module-navigation__module-submissions" v-if="showResults">
-        <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse:
-          {{module.metaTitle}}
-        </router-link>
-        <div class="module-navigation__anchors">
-          <router-link
-            :to="submissionsLink(assignment)"
-            v-for="assignment in assignments"
-            :key="assignment.id"
-            class="module-navigation__anchor"
-            exact-active-class="module-navigation__anchor--active"
-          >{{assignmentTitle(assignment)}}
-          </router-link>
-        </div>
-      </div>
-    </nav>
-  </div>
+      <toggle-solutions-for-module
+        v-if="onModulePage && module.id"
+        :module="module.id"
+        :enabled="module.solutionsEnabled"
+        class="module-navigation__solution-toggle"
+        data-cy="toggle-enable-solutions"></toggle-solutions-for-module>
+  </nav>
 
 </template>
 
 <script>
   import {moduleQuery} from '@/graphql/queries';
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
-  // import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';
+
+  import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
+  import ToggleSolutionsForModule from '@/components/ToggleSolutionsForModule';
 
   export default {
     apollo: {
@@ -53,6 +57,11 @@
       }
     },
 
+    components: {
+      SubNavigationItem,
+      ToggleSolutionsForModule
+    },
+
     computed: {
       onModulePage() {
         return this.$route.name === 'module';
@@ -110,9 +119,11 @@
     position: sticky;
     top: 75px;
     display: none;
+    width: 100%;
+    box-sizing: border-box;
 
     @include desktop {
-      display: block;
+      display: flex;
     }
 
     &__module-content {
@@ -140,5 +151,9 @@
         color: $color-brand;
       }
     }
+
+    &__solution-toggle {
+      margin-left: auto;
+    }
   }
 </style>
diff --git a/client/src/graphql/gql/allTopicsQuery.gql b/client/src/graphql/gql/allTopicsQuery.gql
new file mode 100644
index 00000000..0fa05575
--- /dev/null
+++ b/client/src/graphql/gql/allTopicsQuery.gql
@@ -0,0 +1,12 @@
+query TopicsQuery {
+	topics {
+	  edges {
+	    node {
+	      id
+	      order
+        title
+        slug
+	    }
+	  }
+	}
+}
diff --git a/client/src/pages/book.vue b/client/src/pages/book.vue
index e39f2db5..b1bf6d59 100644
--- a/client/src/pages/book.vue
+++ b/client/src/pages/book.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="book">
     <main class="book__content">
-      <router-view></router-view>
+      <router-view :key="$route.fullPath"></router-view>
     </main>
 
   </div>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 652f6780..1d5e545b 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -74,7 +74,7 @@ const routes = [
       subnavigation: true
     },
     children: [
-      {path: 'topic/:topicSlug', component: topic, meta: {subnavigation: true}}
+      {path: 'topic/:topicSlug', name: 'topic', component: topic, meta: {subnavigation: true}}
     ]
   },
   {
diff --git a/client/src/styles/_navigation.scss b/client/src/styles/_navigation.scss
index 7f4f07fa..4dd1b178 100644
--- a/client/src/styles/_navigation.scss
+++ b/client/src/styles/_navigation.scss
@@ -13,3 +13,67 @@
     }
   }
 }
+
+.sub-navigation {
+  display: none;
+
+  @include desktop {
+    display: flex;
+  }
+
+  padding: $medium-spacing;
+}
+
+.sub-navigation-item {
+  z-index: 10;
+
+  margin-right: $large-spacing;
+
+  &__title {
+    @include small-text;
+
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-column-gap: $small-spacing;
+    align-items: center;
+
+    cursor: pointer;
+  }
+
+  &__icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  &__chevron-up {
+    display: none;
+  }
+
+  &__nav-items {
+    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.12);
+    position: absolute;
+    left: 0;
+    background-color: $color-white;
+    padding: $large-spacing;
+    width: 100%;
+    box-sizing: border-box;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &--active &__title {
+    color: $color-brand;
+  }
+  &--active &__icon {
+    fill: $color-brand;
+  }
+
+  &--active &__chevron-up {
+    display: block;
+  }
+  &--active &__chevron-down {
+    display: none;
+  }
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 7315029b..92f46300 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -13,5 +13,5 @@
 @import "objective-group";
 @import "article";
 @import "actions";
-@import "top-navigation";
+@import "navigation";
 @import "survey";
diff --git a/server/books/schema/queries.py b/server/books/schema/queries.py
index 50471eb9..478dc614 100644
--- a/server/books/schema/queries.py
+++ b/server/books/schema/queries.py
@@ -123,7 +123,7 @@ class TopicNode(DjangoObjectType):
     class Meta:
         model = Topic
         only_fields = [
-            'slug', 'title', 'meta_title', 'teaser', 'description',  'vimeo_id'
+            'slug', 'title', 'meta_title', 'teaser', 'description',  'vimeo_id', 'order'
         ]
         filter_fields = {
             'slug': ['exact', 'icontains', 'in'],
diff --git a/server/core/management/commands/dummy_data.py b/server/core/management/commands/dummy_data.py
index cfd04d1f..daa01adf 100644
--- a/server/core/management/commands/dummy_data.py
+++ b/server/core/management/commands/dummy_data.py
@@ -677,6 +677,12 @@ data = [
                 'title': 'Geld und Kauf',
                 'teaser': 'Die berufliche Grundbildung lehrt Sie, den Arbeitsalltag erfolgreich zu bewältigen, Ihre Fähigkeiten zu entwickeln und beruflich flexibel zu sein. Ebenso wichtig ist der Umgang mit verschiedensten Mitmenschen. Eine angemessene mündliche Kommunikation erleichtert das Zusammenleben und Zusammenarbeiten.',
                 'modules': modules
+            },
+            {
+                'order': 2,
+                'title': 'Berufliche Grundbildung',
+                'teaser': 'Yada yada bla bla',
+                'modules': ''
             }
         ]
     }]