Replace old instrument overview with new one

client/src/components/InstrumentTeaser.vue

@@ -1,41 +0,0 @@
-<template>
-  <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>
-  </router-link>
-</template>
-
-<script>
-  import teaser from '@/helpers/teaser';
-
-  export default {
-    props: ['title', 'contents', 'slug'],
-
-    computed: {
-      teaser() {
-        return teaser(this.contents);
-      }
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .instrument-teaser {
-    height: 250px;
-    box-sizing: border-box;
-    padding: $medium-spacing;
-    @include widget-shadow;
-    width: 100%;
-    cursor: pointer;
-
-    &__title {
-      @include heading-3;
-      margin-bottom: $small-spacing;
-      line-height: 1.2;
-    }
-  }
-</style>

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

@@ -3,13 +3,14 @@
     <sub-navigation-item title="Themen">
       <book-topic-navigation></book-topic-navigation>
     </sub-navigation-item>
-    <sub-navigation-item title="Instrument">
+    <router-link :to="{name: 'instrument-overview'}" activeClass="sub-navigation-item--active" class="sub-navigation-item">
-      <instrument-navigation></instrument-navigation>
+      <span  class="sub-navigation-item__title">Instrumente</span>
-    </sub-navigation-item>
+    </router-link>
+
     <!--<sub-navigation-item title="News">-->
-      <!--<template slot="title">-->
+    <!--<template slot="title">-->
-        <!--<h2 class="sub-navigation__title" slot="title">ABU News</h2>-->
+    <!--<h2 class="sub-navigation__title" slot="title">ABU News</h2>-->
-      <!--</template>-->
+    <!--</template>-->
     <!--</sub-navigation-item>-->
   </aside>
 </template>
@@ -17,13 +18,11 @@
 <script>
   import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
-  import InstrumentNavigation from '@/components/book-navigation/InstrumentNavigation';
 
   export default {
     components: {
       SubNavigationItem,
-      BookTopicNavigation,
+      BookTopicNavigation
-      InstrumentNavigation
     }
   }
 </script>

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

@@ -0,0 +1,103 @@
+<template>
+  <nav class="top-navigation" :class="{'top-navigation--mobile': mobile}">
+    <div class="top-navigation__item">
+      <router-link to="/book/topic/berufliche-grundbildung" active-class="top-navigation__link--active"
+                   :class="{'top-navigation__link--active': isActive('book')}"
+                   @click.native="hideMobileNavigation"
+                   class="top-navigation__link">Inhalte
+      </router-link>
+
+      <mobile-subnavigation v-if="mobile"></mobile-subnavigation>
+
+    </div>
+
+    <div class="top-navigation__item">
+      <router-link to="/rooms" active-class="top-navigation__link--active" @click.native="hideMobileNavigation"
+                   class="top-navigation__link">Räume
+      </router-link>
+    </div>
+
+    <div class="top-navigation__item">
+      <router-link to="/portfolio" active-class="top-navigation__link--active" @click.native="hideMobileNavigation"
+                   class="top-navigation__link">Portfolio
+      </router-link>
+    </div>
+
+  </nav>
+</template>
+
+<script>
+  import MobileSubnavigation from '@/components/book-navigation/MobileSubnavigation';
+
+  export default {
+    props: {
+      mobile: {
+        default: false
+      }
+    },
+
+    components: {
+      MobileSubnavigation
+    },
+
+    methods: {
+      isActive(linkName) {
+        return linkName === 'book' && this.$route.path.indexOf('module') > -1;
+      },
+      hideMobileNavigation() {
+        this.$store.dispatch('showMobileNavigation', false);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .top-navigation {
+    display: flex;
+
+    &__link {
+      padding: 0 24px;
+      @include default-link;
+    }
+
+    $parent: &;
+
+    &--mobile {
+      flex-direction: column;
+
+      #{$parent}__link {
+        color: $color-white;
+        @include heading-4;
+        line-height: 2.5em;
+        padding: 0;
+        display: block;
+        margin-bottom: 0.5*$small-spacing;
+
+        &:only-child {
+          margin-bottom: 0;
+        }
+
+      }
+
+      #{$parent}__item {
+        border-bottom: 1px solid $color-white;
+
+        &:nth-child(1) {
+          order: 3;
+          border-bottom: 0;
+        }
+
+        &:nth-child(2) {
+          order: 1;
+        }
+
+        &:nth-child(3) {
+          order: 2;
+        }
+      }
+    }
+  }
+</style>

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

@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <router-link tag="div" class="book-subnavigation__item"
-                 :class="{'book-subnavigation__item--mobile': mobile}"
-                 @click.native="hideMobileNavigation"
-                 to="/instruments/sprache-kommunikation">Sprache und
-      Kommunikation
-    </router-link>
-    <router-link tag="div" class="book-subnavigation__item"
-                 :class="{'book-subnavigation__item--mobile': mobile}"
-                 @click.native="hideMobileNavigation"
-                 to="/instruments/gesellschaft">Gesellschaft
-    </router-link>
-  </div>
-</template>
-
-<script>
-  export default {
-    props: {
-      mobile: {
-        default: false
-      }
-    },
-
-    methods: {
-      hideMobileNavigation() {
-        this.$store.dispatch('showMobileNavigation', false);
-      }
-    }
-  }
-</script>

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

@@ -6,8 +6,11 @@
     </div>
 
     <div class="mobile-subnavigation__section">
-      <h3 class="mobile-subnavigation__title">Instrumente</h3>
+      <router-link :to="{name: 'instrument-overview'}" class="sub-navigation-item book-subnavigation">
-      <instrument-navigation :mobile="true"></instrument-navigation>
+        <span class="sub-navigation-item__title book-subnavigation__item--mobile book-subnavigation__item">
+          Instrumente
+        </span>
+      </router-link>
     </div>
 
   </div>
@@ -15,12 +18,10 @@
 
 <script>
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
-  import InstrumentNavigation from '@/components/book-navigation/InstrumentNavigation';
 
   export default {
     components: {
-      BookTopicNavigation,
+      BookTopicNavigation
-      InstrumentNavigation
     },
   }
 </script>

client/src/components/inputs/BaseInput.vue

@@ -3,9 +3,9 @@
     <input type="checkbox"
            class="base-input-container__input"
            :checked="checked"
-           @click.prevent="$emit('input', $event.target.checked, item)"
+           @input.prevent="$emit('input', $event.target.checked, item)"
-           v-on:input.prevent="$emit('input', $event.target.checked, item)">
+           >
-    <span class="base-input-container__icon"
+    <span class="base-input-container__icon checkbox"
           :class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}">
         <tick v-if="type === 'checkbox'"></tick>
         <circle-icon v-if="type === 'radiobutton'"></circle-icon>

client/src/components/instruments/InstrumentFilter.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="instrument-filter">
+    <checkbox
+      class="instrument-filter__checkbox"
+      v-for="(type, i) in types"
+      :checked="type.enabled"
+      :class="`instrument-filter__checkbox--${type.cls}`"
+      :label="type.label"
+      :key="i"
+      @input="change($event, i)"
+    />
+  </div>
+</template>
+
+<script>
+  import Checkbox from '@/components/Checkbox';
+
+  export default {
+    data() {
+      return {
+        filter: [],
+        types: [
+          {
+            label: 'Sprache und Kommunikation',
+            enabled: true,
+            prop: 'LANGUAGE_COMMUNICATION',
+            cls: 'language'
+          },
+          {
+            label: 'Gesellschaft',
+            enabled: true,
+            prop: 'SOCIETY',
+            cls: 'society'
+          },
+          {
+            label: 'Überfachliches Instrument',
+            enabled: true,
+            prop: 'INTERDISCIPLINARY',
+            cls: 'interdisciplinary'
+          },
+        ]
+      }
+    },
+
+    methods: {
+      change(enabled, index) {
+        let type = this.types[index];
+        this.types.splice(index, 1, {
+          ...type,
+          enabled
+        })
+        console.log();
+        this.$emit('filter',
+          this.types
+            .filter(t => t.enabled)
+            .map(t => t.prop)
+        )
+      }
+    },
+
+    components: {
+      Checkbox
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .instrument-filter {
+    display: flex;
+    align-content: center;
+
+    &__checkbox {
+      &--language {
+        /deep/ input:checked + .checkbox {
+          background-color: $color-accent-1-dark;
+        }
+      }
+
+      &--society {
+        /deep/ input:checked + .checkbox {
+          background-color: $color-accent-2-dark;
+        }
+      }
+
+      &--interdisciplinary {
+        /deep/ input:checked + .checkbox {
+          background-color: $color-accent-4-dark;
+        }
+      }
+    }
+  }
+</style>

client/src/components/objective-groups/ObjectiveGroupControl.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="objective-group objective-group-control">
-    <h4>{{group.displayTitle}}</h4>
-
-    <ul class="objective-group__objective-list objective-group__objective-list--no-list">
-      <li v-if="objectives" class="objective-group__objective" v-for="objective in objectives" :key="objective.id">
-          <checkbox :checked="objective.done"
-                :item="objective"
-                :label="objective.text"
-                @input="updateObjectiveProgress"
-      ></checkbox>
-      </li>
-    </ul>
-  </div>
-
-</template>
-
-<script>
-
-  import Checkbox from '@/components/Checkbox';
-
-  export default {
-    name: 'objective-group-control',
-    components: {Checkbox},
-
-    props: {
-      group: {
-        required: true,
-        type: Object
-      }
-    },
-
-    methods: {
-      updateObjectiveProgress(checked, objective) {
-        this.$emit('updateObjectiveProgress', checked, objective.id);
-      },
-      objectiveIsDone(objective) {
-        return objective.objectiveProgress.length > 0 && objective.objectiveProgress[0].done
-      }
-    },
-
-    computed: {
-      objectives() {
-        return this.group.objectives.map(objective => {
-          return Object.assign({}, objective, { done: this.objectiveIsDone(objective) })
-        });
-      }
-    }
-  }
-</script>
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
-
-  .objective-group__objective-list /deep/ {
-    .base-input-container {
-
-      position: relative;
-
-      &__checkbox {
-        background-color: white;
-        position: absolute;
-        top: 5px;
-      }
-
-      &__label {
-        font-family: $serif-font-family;
-        margin-left: 30px;
-      }
-    }
-  }
-
-</style>

client/src/graphql/gql/instrumentsQuery.gql

@@ -0,0 +1,13 @@
+query InstrumentQuery {
+  instruments {
+    edges {
+      node {
+        id
+        title
+        contents
+        slug
+        type
+      }
+    }
+  }
+}

client/src/pages/instrumentOverview.vue

@@ -2,54 +2,59 @@
   <div class="instrument-overview">
     <div class="instrument-overview__heading">
       <h1 class="instrument-overview__title">
-        Instrument:<br> {{instrumentType}}
+        Instrumente
       </h1>
     </div>
+    <instrument-filter @filter="updateFilter" class="instrument-overview__filter">
+
+    </instrument-filter>
     <div class="instrument-overview__list">
-      <instrument-teaser
+      <router-link
-        v-bind="instrument"
+        class="instrument-overview__list-item"
-        v-for="instrument in instruments"
+        tag="div"
-        :key="instrument.id"
+        :to="{name: 'instrument', params: {slug: instrument.slug}}"
-      ></instrument-teaser>
+        v-for="instrument in filteredInstruments"
+        :key="instrument.id">
+        {{instrument.title}}
+      </router-link>
     </div>
   </div>
 </template>
 
 <script>
-  import InstrumentTeaser from '@/components/InstrumentTeaser';
+  import InstrumentFilter from '@/components/instruments/InstrumentFilter';
-  import INSTRUMENTS_QUERY from '@/graphql/gql/instrumentsByTypeQuery.gql';
+  import INSTRUMENTS_QUERY from '@/graphql/gql/instrumentsQuery.gql';
 
   export default {
     components: {
-      InstrumentTeaser
+      InstrumentFilter
-    },
-
-    computed: {
-      instrumentType () {
-        return this.$route.params.slug === 'gesellschaft' ? 'Gesellschaft' : 'Sprache und Kommunikation';
-      }
     },
 
     apollo: {
       instruments: {
         query: INSTRUMENTS_QUERY,
-        variables() {
+        update(data) {
-          return {
+          return this.$getRidOfEdges(data).instruments;
-            type: this.$route.params.slug === 'gesellschaft' ? 'society' : 'language_communication'
-          }
-        },
-        manual: true,
-        result({data, loading, networkStatus}) {
-          if (!loading) {
-            this.instruments = this.$getRidOfEdges(data).instruments;
-          }
         }
       }
     },
 
+    computed: {
+      filteredInstruments() {
+        return this.instruments.filter(instrument => this.filter.includes(instrument.type) || !this.filter.length);
+      }
+    },
+
+    methods: {
+      updateFilter(filter) {
+        this.filter = filter
+      }
+    },
+
     data() {
       return {
-        instruments: []
+        instruments: [],
+        filter: []
       }
     }
   }
@@ -57,19 +62,21 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .instrument-overview {
     display: grid;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto 1fr;
     justify-items: center;
-    width: 100%;
+    justify-self: center;
+    width: 800px;
+    max-width: 100%;
 
     &__heading {
       padding: 2*$large-spacing 0;
-      background-color: $color-accent-2;
       width: 100%;
       display: flex;
-      justify-content: center;
+      justify-content: flex-start;
     }
 
     &__title {
@@ -78,15 +85,26 @@
       margin-bottom: 0;
     }
 
+    &__filter {
+      justify-self: start;
+    }
+
     &__list {
       padding: $large-spacing 0;
       max-width: 1200px;
       width: 100%;
-      display: grid;
+      display: flex;
-      grid-template-columns: repeat(3, 1fr);
+      flex-direction: column;
-      grid-auto-rows: auto;
+    }
-      grid-column-gap: $large-spacing;
+
-      grid-row-gap: $large-spacing;
+    &__list-item {
+      padding: $medium-spacing 0;
+      border-top: 1px solid $color-silver;
+      @include regular-text;
+
+      &:last-of-type {
+        border-bottom: 1px solid $color-silver;
+      }
     }
   }
 </style>

client/src/router/index.js

@@ -84,7 +84,7 @@ const routes = [
   },
   {path: '/article/:slug', name: 'article', component: article, meta: {layout: 'simple'}},
   {
-    path: '/instruments/:slug',
+    path: '/instruments/',
     name: 'instrument-overview',
     component: instrumentOverview,
     meta: {subnavigation: true}