Merged in feature/instrument-overview (pull request #25)

Feature/instrument overview

Approved-by: Christian Cueni <christian.cueni@iterativ.ch>

client/src/components/InstrumentTeaser.vue

@@ -1,14 +1,23 @@
 <template>
-  <div class="instrument-teaser">
+  <router-link tag="div" :to="{name: 'instrument', params: {slug: slug}}" class="instrument-teaser">
-    <h3 class="instrument-teaser__title">Instrument: Diskussionsregeln</h3>
+    <h3 class="instrument-teaser__title">{{title}}</h3>
-    <p class="instrument-teaser__text">
+    <p class="instrument-teaser__text" v-html="teaser">
-      Für eine konstruktive Diskussion braucht es gewisse Regeln.
     </p>
-  </div>
+  </router-link>
 </template>
 
 <script>
-  export default {}
+  import teaser from '@/helpers/teaser';
+
+  export default {
+    props: ['title', 'contents', 'slug'],
+
+    computed: {
+      teaser() {
+        return teaser(this.contents);
+      }
+    }
+  }
 </script>
 
 <style scoped lang="scss">
@@ -20,6 +29,8 @@
     box-sizing: border-box;
     padding: $medium-spacing;
     @include widget-shadow;
+    width: 100%;
+    cursor: pointer;
 
     &__title {
       @include heading-3;

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="/instruments/sprache-kommunikation">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/gesellschaft">Gesellschaft</router-link>
     </sub-navigation-item>
     <sub-navigation-item title="News">
       <template slot="title">

client/src/components/book-navigation/SubNavigationItem.vue

@@ -29,6 +29,12 @@
       }
     },
 
+    watch: {
+      $route(to, from) {
+        this.show = false;
+      }
+    },
+
     methods: {
       close() {
         this.show = false;

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) {
+        return teaser(this.contents);
-          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 '';
       },
       myEntry() {
         return this.author.id === this.me.id;

client/src/graphql/gql/basicKnowledgeQuery.gql

@@ -1,9 +0,0 @@
-query BasicKnowledgeQuery($slug: String!){
-  basicKnowledge(slug: $slug) {
-    id
-    title
-    slug
-    type
-    contents
-  }
-}

client/src/graphql/gql/instrumentQuery.gql

@@ -0,0 +1,9 @@
+query InstrumentQuery($slug: String!){
+  instrument(slug: $slug) {
+    id
+    title
+    slug
+    type
+    contents
+  }
+}

client/src/graphql/gql/instrumentsByTypeQuery.gql

@@ -0,0 +1,12 @@
+query InstrumentQuery($type: String!){
+  instruments(type: $type) {
+    edges {
+      node {
+        id
+        title
+        contents
+        slug
+      }
+    }
+  }
+}

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 '';
+}

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: {}
       }
     }
   }

client/src/pages/instrumentOverview.vue

@@ -2,23 +2,55 @@
   <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></instrument-teaser>
+      <instrument-teaser
-      <instrument-teaser></instrument-teaser>
+        v-bind="instrument"
-      <instrument-teaser></instrument-teaser>
+        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
+    },
+
+    computed: {
+      instrumentType () {
+        return this.$route.params.slug === 'gesellschaft' ? 'Gesellschaft' : 'Sprache und Kommunikation';
+      }
+    },
+
+    apollo: {
+      instruments: {
+        query: INSTRUMENTS_QUERY,
+        variables() {
+          return {
+            type: this.$route.params.slug === 'gesellschaft' ? 'society' : 'language_communication'
+          }
+        },
+        manual: true,
+        result({data, loading, networkStatus}) {
+          if (!loading) {
+            this.instruments = this.$getRidOfEdges(data).instruments;
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        instruments: []
+      }
     }
   }
 </script>
@@ -49,6 +81,7 @@
     &__list {
       padding: $large-spacing 0;
       max-width: 1200px;
+      width: 100%;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-auto-rows: auto;

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}

client/src/styles/_navigation.scss

@@ -57,6 +57,7 @@
     padding: $large-spacing;
     width: 100%;
     box-sizing: border-box;
+    margin-top: 17px;
 
     &:empty {
       display: none;

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())
+    instrument = graphene.Field(BasicKnowledgeNode, slug=graphene.String(), id=graphene.ID())
-    basic_knowledge_pages = DjangoFilterConnectionField(BasicKnowledgeNode)
+    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')