From 2a4cf56825f647f24a4c12f32f051cd5c066a2a2 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 17 Jul 2019 09:07:18 +0200
Subject: [PATCH 1/5] Refactor some more occurences of basic knowledge to
 instrument

---
 client/src/graphql/gql/basicKnowledgeQuery.gql |  9 ---------
 client/src/graphql/gql/instrumentQuery.gql     |  9 +++++++++
 client/src/pages/instrument.vue                | 12 ++++++------
 server/basicknowledge/queries.py               |  8 ++++----
 4 files changed, 19 insertions(+), 19 deletions(-)
 delete mode 100644 client/src/graphql/gql/basicKnowledgeQuery.gql
 create mode 100644 client/src/graphql/gql/instrumentQuery.gql

diff --git a/client/src/graphql/gql/basicKnowledgeQuery.gql b/client/src/graphql/gql/basicKnowledgeQuery.gql
deleted file mode 100644
index cce9849e..00000000
--- a/client/src/graphql/gql/basicKnowledgeQuery.gql
+++ /dev/null
@@ -1,9 +0,0 @@
-query BasicKnowledgeQuery($slug: String!){
-  basicKnowledge(slug: $slug) {
-    id
-    title
-    slug
-    type
-    contents
-  }
-}
diff --git a/client/src/graphql/gql/instrumentQuery.gql b/client/src/graphql/gql/instrumentQuery.gql
new file mode 100644
index 00000000..2f7f0e07
--- /dev/null
+++ b/client/src/graphql/gql/instrumentQuery.gql
@@ -0,0 +1,9 @@
+query InstrumentQuery($slug: String!){
+  instrument(slug: $slug) {
+    id
+    title
+    slug
+    type
+    contents
+  }
+}
diff --git a/client/src/pages/instrument.vue b/client/src/pages/instrument.vue
index 46aaab7f..2ca8c82b 100644
--- a/client/src/pages/instrument.vue
+++ b/client/src/pages/instrument.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="instrument">
-    <h1 class="instrument__title">{{basicKnowledge.title}}</h1>
+    <h1 class="instrument__title">{{instrument.title}}</h1>
 
-    <component v-for="component in basicKnowledge.contents"
+    <component v-for="component in instrument.contents"
                :key="component.id"
                :is="component.type"
                v-bind="component">
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-  import BASIC_KNOWLEDGE_QUERY from '@/graphql/gql/basicKnowledgeQuery.gql';
+  import INSTRUMENT_QUERY from '@/graphql/gql/instrumentQuery.gql';
 
   import TextBlock from '@/components/content-blocks/TextBlock';
   import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
@@ -25,9 +25,9 @@
 
   export default {
     apollo: {
-      basicKnowledge() {
+      instrument() {
         return {
-          query: BASIC_KNOWLEDGE_QUERY,
+          query: INSTRUMENT_QUERY,
           variables: {
             slug: this.$route.params.slug
           }
@@ -49,7 +49,7 @@
 
     data() {
       return {
-        basicKnowledge: {}
+        instrument: {}
       }
     }
   }
diff --git a/server/basicknowledge/queries.py b/server/basicknowledge/queries.py
index aadb4eca..6b079d0d 100644
--- a/server/basicknowledge/queries.py
+++ b/server/basicknowledge/queries.py
@@ -10,7 +10,7 @@ from .models import BasicKnowledge
 class BasicKnowledgeNode(DjangoObjectType):
     class Meta:
         model = BasicKnowledge
-        filter_fields = ['slug']
+        filter_fields = ['slug', 'type']
         interfaces = (relay.Node,)
         only_fields = [
             'slug', 'title', 'type', 'contents',
@@ -18,10 +18,10 @@ class BasicKnowledgeNode(DjangoObjectType):
 
 
 class BasicKnowledgeQuery(object):
-    basic_knowledge = graphene.Field(BasicKnowledgeNode, slug=graphene.String(), id=graphene.ID())
-    basic_knowledge_pages = DjangoFilterConnectionField(BasicKnowledgeNode)
+    instrument = graphene.Field(BasicKnowledgeNode, slug=graphene.String(), id=graphene.ID())
+    instruments = DjangoFilterConnectionField(BasicKnowledgeNode)
 
-    def resolve_basic_knowledge(self, info, **kwargs):
+    def resolve_instrument(self, info, **kwargs):
         slug = kwargs.get('slug')
         room_id = kwargs.get('id')
 

From cd6ff31cef55fd12768c14e7de290ec67ee5efbf Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 17 Jul 2019 09:10:05 +0200
Subject: [PATCH 2/5] Add instrument query to instrument overview

---
 .../graphql/gql/instrumentsByTypeQuery.gql    | 12 +++++++
 client/src/pages/instrumentOverview.vue       | 32 +++++++++++++++++--
 client/src/router/index.js                    |  2 +-
 3 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 client/src/graphql/gql/instrumentsByTypeQuery.gql

diff --git a/client/src/graphql/gql/instrumentsByTypeQuery.gql b/client/src/graphql/gql/instrumentsByTypeQuery.gql
new file mode 100644
index 00000000..6024c799
--- /dev/null
+++ b/client/src/graphql/gql/instrumentsByTypeQuery.gql
@@ -0,0 +1,12 @@
+query InstrumentQuery($type: String!){
+  instruments(type: $type) {
+    edges {
+      node {
+        id
+        title
+        contents
+        slug
+      }
+    }
+  }
+}
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 36a0016c..8d8bcf81 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -6,19 +6,44 @@
       </h1>
     </div>
     <div class="instrument-overview__list">
-      <instrument-teaser></instrument-teaser>
-      <instrument-teaser></instrument-teaser>
-      <instrument-teaser></instrument-teaser>
+      <instrument-teaser
+        :title="instrument.title"
+        :contents="instrument.contents"
+        v-for="instrument in instruments"
+        :key="instrument.id"
+      ></instrument-teaser>
     </div>
   </div>
 </template>
 
 <script>
   import InstrumentTeaser from '@/components/InstrumentTeaser';
+  import INSTRUMENTS_QUERY from '@/graphql/gql/instrumentsByTypeQuery.gql';
 
   export default {
     components: {
       InstrumentTeaser
+    },
+
+    apollo: {
+      instruments: {
+        query: INSTRUMENTS_QUERY,
+        variables: {
+          type: 'society'
+        },
+        manual: true,
+        result({data, loading, networkStatus}) {
+          if (!loading) {
+            this.instruments = this.$getRidOfEdges(data).instruments;
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        instruments: []
+      }
     }
   }
 </script>
@@ -49,6 +74,7 @@
     &__list {
       padding: $large-spacing 0;
       max-width: 1200px;
+      width: 100%;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-auto-rows: auto;
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 1d5e545b..0d101a35 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -55,7 +55,7 @@ const routes = [
   {path: '/room/:slug', name: 'room', component: room, props: true},
   {path: '/article/:slug', name: 'article', component: article, meta: {layout: 'simple'}},
   {
-    path: '/instrument/',
+    path: '/instruments/:slug',
     name: 'instrument-overview',
     component: instrumentOverview,
     meta: {subnavigation: true}

From bd17543ec2995473775f67936c7c8d5deb4c646f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 17 Jul 2019 09:11:52 +0200
Subject: [PATCH 3/5] Add teaser helper function

---
 client/src/components/InstrumentTeaser.vue | 18 ++++++++++++++----
 client/src/components/rooms/RoomEntry.vue  | 20 ++------------------
 client/src/helpers/teaser.js               | 20 ++++++++++++++++++++
 3 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 client/src/helpers/teaser.js

diff --git a/client/src/components/InstrumentTeaser.vue b/client/src/components/InstrumentTeaser.vue
index 9e7b642e..bcf312c0 100644
--- a/client/src/components/InstrumentTeaser.vue
+++ b/client/src/components/InstrumentTeaser.vue
@@ -1,14 +1,23 @@
 <template>
   <div class="instrument-teaser">
-    <h3 class="instrument-teaser__title">Instrument: Diskussionsregeln</h3>
-    <p class="instrument-teaser__text">
-      Für eine konstruktive Diskussion braucht es gewisse Regeln.
+    <h3 class="instrument-teaser__title">{{title}}</h3>
+    <p class="instrument-teaser__text" v-html="teaser">
     </p>
   </div>
 </template>
 
 <script>
-  export default {}
+  import teaser from '@/helpers/teaser';
+
+  export default {
+    props: ['title', 'contents'],
+
+    computed: {
+      teaser() {
+        return teaser(this.contents);
+      }
+    }
+  }
 </script>
 
 <style scoped lang="scss">
@@ -20,6 +29,7 @@
     box-sizing: border-box;
     padding: $medium-spacing;
     @include widget-shadow;
+    width: 100%;
 
     &__title {
       @include heading-3;
diff --git a/client/src/components/rooms/RoomEntry.vue b/client/src/components/rooms/RoomEntry.vue
index 422b44e2..971dc462 100644
--- a/client/src/components/rooms/RoomEntry.vue
+++ b/client/src/components/rooms/RoomEntry.vue
@@ -27,6 +27,7 @@
 
   import UserWidget from '@/components/UserWidget';
   import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+  import teaser from '@/helpers/teaser';
 
   export default {
     props: ['title', 'author', 'contents', 'slug', 'id'],
@@ -72,24 +73,7 @@
         return '';
       },
       teaser() {
-        if (this.contents && this.contents.length) {
-          let first = this.contents.find(content => content.type !== 'image_url_block');
-          if (first && first.type) {
-            switch (first.type) {
-              case 'text_block':
-                return first.value.text.replace(/<p>/g, '').replace(/<\/p>/g, '<br>').slice(0, 75) + '...';
-              // return first.value.text;
-              case 'link_block':
-                return first.value.url;
-              case 'document_block':
-                const parts = first.value.url.split('/');
-                return parts[parts.length - 1];
-              default:
-                return ''
-            }
-          }
-        }
-        return '';
+        return teaser(this.contents);
       },
       myEntry() {
         return this.author.id === this.me.id;
diff --git a/client/src/helpers/teaser.js b/client/src/helpers/teaser.js
new file mode 100644
index 00000000..755e855d
--- /dev/null
+++ b/client/src/helpers/teaser.js
@@ -0,0 +1,20 @@
+export default (contents) => {
+  if (contents && contents.length) {
+    let first = contents.find(content => content.type !== 'image_url_block');
+    if (first && first.type) {
+      switch (first.type) {
+        case 'text_block':
+          return first.value.text.replace(/<p>/g, '').replace(/<\/p>/g, '<br>').slice(0, 75) + '...';
+        // return first.value.text;
+        case 'link_block':
+          return first.value.url;
+        case 'document_block':
+          const parts = first.value.url.split('/');
+          return parts[parts.length - 1];
+        default:
+          return ''
+      }
+    }
+  }
+  return '';
+}

From dae832b98d5601b475681645c7e10fdc50f686c9 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 17 Jul 2019 11:20:01 +0200
Subject: [PATCH 4/5] Add navigation to and from instrument overview

---
 client/src/components/InstrumentTeaser.vue      |  7 ++++---
 .../book-navigation/BookNavigation.vue          |  4 ++--
 client/src/pages/instrumentOverview.vue         | 17 ++++++++++++-----
 client/src/styles/_navigation.scss              |  1 +
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/client/src/components/InstrumentTeaser.vue b/client/src/components/InstrumentTeaser.vue
index bcf312c0..b63a1a6f 100644
--- a/client/src/components/InstrumentTeaser.vue
+++ b/client/src/components/InstrumentTeaser.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="instrument-teaser">
+  <router-link tag="div" :to="{name: 'instrument', params: {slug: slug}}" class="instrument-teaser">
     <h3 class="instrument-teaser__title">{{title}}</h3>
     <p class="instrument-teaser__text" v-html="teaser">
     </p>
-  </div>
+  </router-link>
 </template>
 
 <script>
   import teaser from '@/helpers/teaser';
 
   export default {
-    props: ['title', 'contents'],
+    props: ['title', 'contents', 'slug'],
 
     computed: {
       teaser() {
@@ -30,6 +30,7 @@
     padding: $medium-spacing;
     @include widget-shadow;
     width: 100%;
+    cursor: pointer;
 
     &__title {
       @include heading-3;
diff --git a/client/src/components/book-navigation/BookNavigation.vue b/client/src/components/book-navigation/BookNavigation.vue
index 33d8aaa2..debb476e 100644
--- a/client/src/components/book-navigation/BookNavigation.vue
+++ b/client/src/components/book-navigation/BookNavigation.vue
@@ -4,8 +4,8 @@
       <book-topic-navigation></book-topic-navigation>
     </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>
+        <router-link tag="div" class="book-subnavigation__item" to="/instruments/sprache-kommunikation">Sprache und Kommunikation</router-link>
+        <router-link tag="div" class="book-subnavigation__item" to="/instruments/gesellschaft">Gesellschaft</router-link>
     </sub-navigation-item>
     <sub-navigation-item title="News">
       <template slot="title">
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 8d8bcf81..c5df2c5f 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -2,13 +2,12 @@
   <div class="instrument-overview">
     <div class="instrument-overview__heading">
       <h1 class="instrument-overview__title">
-        Instrument:<br> Sprache und Kommunikation
+        Instrument:<br> {{instrumentType}}
       </h1>
     </div>
     <div class="instrument-overview__list">
       <instrument-teaser
-        :title="instrument.title"
-        :contents="instrument.contents"
+        v-bind="instrument"
         v-for="instrument in instruments"
         :key="instrument.id"
       ></instrument-teaser>
@@ -25,11 +24,19 @@
       InstrumentTeaser
     },
 
+    computed: {
+      instrumentType () {
+        return this.$route.params.slug === 'gesellschaft' ? 'Gesellschaft' : 'Sprache und Kommunikation';
+      }
+    },
+
     apollo: {
       instruments: {
         query: INSTRUMENTS_QUERY,
-        variables: {
-          type: 'society'
+        variables() {
+          return {
+            type: this.$route.params.slug === 'gesellschaft' ? 'society' : 'language_communication'
+          }
         },
         manual: true,
         result({data, loading, networkStatus}) {
diff --git a/client/src/styles/_navigation.scss b/client/src/styles/_navigation.scss
index 4dd1b178..e97971f3 100644
--- a/client/src/styles/_navigation.scss
+++ b/client/src/styles/_navigation.scss
@@ -57,6 +57,7 @@
     padding: $large-spacing;
     width: 100%;
     box-sizing: border-box;
+    margin-top: 17px;
 
     &:empty {
       display: none;

From 12b580a94a8d43b1b06090e8c9430b3fe48c885f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 17 Jul 2019 11:26:33 +0200
Subject: [PATCH 5/5] Hide subnavigation on navigation

---
 client/src/components/book-navigation/SubNavigationItem.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/src/components/book-navigation/SubNavigationItem.vue b/client/src/components/book-navigation/SubNavigationItem.vue
index e1bcd649..e6f4c35b 100644
--- a/client/src/components/book-navigation/SubNavigationItem.vue
+++ b/client/src/components/book-navigation/SubNavigationItem.vue
@@ -29,6 +29,12 @@
       }
     },
 
+    watch: {
+      $route(to, from) {
+        this.show = false;
+      }
+    },
+
     methods: {
       close() {
         this.show = false;