From e60d88dcf0af12fcc8288c9a3ea7cea4ef34a644 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 6 May 2020 16:52:22 +0200
Subject: [PATCH 1/3] Replace old instrument overview with new one

---
 client/src/components/InstrumentTeaser.vue    |  41 -------
 .../book-navigation/BookNavigation.vue        |  17 ++-
 .../book-navigation/ContentNavigation.vue     | 103 ++++++++++++++++++
 .../book-navigation/InstrumentNavigation.vue  |  31 ------
 .../book-navigation/MobileSubnavigation.vue   |  11 +-
 client/src/components/inputs/BaseInput.vue    |   6 +-
 .../instruments/InstrumentFilter.vue          |  94 ++++++++++++++++
 .../ObjectiveGroupControl.vue                 |  73 -------------
 client/src/graphql/gql/instrumentsQuery.gql   |  13 +++
 client/src/pages/instrumentOverview.vue       |  88 +++++++++------
 client/src/router/index.js                    |   2 +-
 11 files changed, 281 insertions(+), 198 deletions(-)
 delete mode 100644 client/src/components/InstrumentTeaser.vue
 create mode 100644 client/src/components/book-navigation/ContentNavigation.vue
 delete mode 100644 client/src/components/book-navigation/InstrumentNavigation.vue
 create mode 100644 client/src/components/instruments/InstrumentFilter.vue
 delete mode 100644 client/src/components/objective-groups/ObjectiveGroupControl.vue
 create mode 100644 client/src/graphql/gql/instrumentsQuery.gql

diff --git a/client/src/components/InstrumentTeaser.vue b/client/src/components/InstrumentTeaser.vue
deleted file mode 100644
index b63a1a6f..00000000
--- a/client/src/components/InstrumentTeaser.vue
+++ /dev/null
@@ -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>
diff --git a/client/src/components/book-navigation/BookNavigation.vue b/client/src/components/book-navigation/BookNavigation.vue
index 01ecfb0f..3d054695 100644
--- a/client/src/components/book-navigation/BookNavigation.vue
+++ b/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">
-      <instrument-navigation></instrument-navigation>
-    </sub-navigation-item>
+    <router-link :to="{name: 'instrument-overview'}" activeClass="sub-navigation-item--active" class="sub-navigation-item">
+      <span  class="sub-navigation-item__title">Instrumente</span>
+    </router-link>
+
     <!--<sub-navigation-item title="News">-->
-      <!--<template slot="title">-->
-        <!--<h2 class="sub-navigation__title" slot="title">ABU News</h2>-->
-      <!--</template>-->
+    <!--<template slot="title">-->
+    <!--<h2 class="sub-navigation__title" slot="title">ABU News</h2>-->
+    <!--</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,
-      InstrumentNavigation
+      BookTopicNavigation
     }
   }
 </script>
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
new file mode 100644
index 00000000..28ccf46e
--- /dev/null
+++ b/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>
diff --git a/client/src/components/book-navigation/InstrumentNavigation.vue b/client/src/components/book-navigation/InstrumentNavigation.vue
deleted file mode 100644
index e46e2bb0..00000000
--- a/client/src/components/book-navigation/InstrumentNavigation.vue
+++ /dev/null
@@ -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>
diff --git a/client/src/components/book-navigation/MobileSubnavigation.vue b/client/src/components/book-navigation/MobileSubnavigation.vue
index 4ae72695..b865c392 100644
--- a/client/src/components/book-navigation/MobileSubnavigation.vue
+++ b/client/src/components/book-navigation/MobileSubnavigation.vue
@@ -6,8 +6,11 @@
     </div>
 
     <div class="mobile-subnavigation__section">
-      <h3 class="mobile-subnavigation__title">Instrumente</h3>
-      <instrument-navigation :mobile="true"></instrument-navigation>
+      <router-link :to="{name: 'instrument-overview'}" class="sub-navigation-item book-subnavigation">
+        <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,
-      InstrumentNavigation
+      BookTopicNavigation
     },
   }
 </script>
diff --git a/client/src/components/inputs/BaseInput.vue b/client/src/components/inputs/BaseInput.vue
index 6a5b8c7e..1c231125 100644
--- a/client/src/components/inputs/BaseInput.vue
+++ b/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)"
-           v-on:input.prevent="$emit('input', $event.target.checked, item)">
-    <span class="base-input-container__icon"
+           @input.prevent="$emit('input', $event.target.checked, item)"
+           >
+    <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>
diff --git a/client/src/components/instruments/InstrumentFilter.vue b/client/src/components/instruments/InstrumentFilter.vue
new file mode 100644
index 00000000..acbf18bb
--- /dev/null
+++ b/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>
diff --git a/client/src/components/objective-groups/ObjectiveGroupControl.vue b/client/src/components/objective-groups/ObjectiveGroupControl.vue
deleted file mode 100644
index 50fa615f..00000000
--- a/client/src/components/objective-groups/ObjectiveGroupControl.vue
+++ /dev/null
@@ -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>
diff --git a/client/src/graphql/gql/instrumentsQuery.gql b/client/src/graphql/gql/instrumentsQuery.gql
new file mode 100644
index 00000000..bed2a520
--- /dev/null
+++ b/client/src/graphql/gql/instrumentsQuery.gql
@@ -0,0 +1,13 @@
+query InstrumentQuery {
+  instruments {
+    edges {
+      node {
+        id
+        title
+        contents
+        slug
+        type
+      }
+    }
+  }
+}
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index c5df2c5f..4957052c 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/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
-        v-bind="instrument"
-        v-for="instrument in instruments"
-        :key="instrument.id"
-      ></instrument-teaser>
+      <router-link
+        class="instrument-overview__list-item"
+        tag="div"
+        :to="{name: 'instrument', params: {slug: instrument.slug}}"
+        v-for="instrument in filteredInstruments"
+        :key="instrument.id">
+        {{instrument.title}}
+      </router-link>
     </div>
   </div>
 </template>
 
 <script>
-  import InstrumentTeaser from '@/components/InstrumentTeaser';
-  import INSTRUMENTS_QUERY from '@/graphql/gql/instrumentsByTypeQuery.gql';
+  import InstrumentFilter from '@/components/instruments/InstrumentFilter';
+  import INSTRUMENTS_QUERY from '@/graphql/gql/instrumentsQuery.gql';
 
   export default {
     components: {
-      InstrumentTeaser
-    },
-
-    computed: {
-      instrumentType () {
-        return this.$route.params.slug === 'gesellschaft' ? 'Gesellschaft' : 'Sprache und Kommunikation';
-      }
+      InstrumentFilter
     },
 
     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;
-          }
+        update(data) {
+          return 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;
-      grid-template-columns: repeat(3, 1fr);
-      grid-auto-rows: auto;
-      grid-column-gap: $large-spacing;
-      grid-row-gap: $large-spacing;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__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>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index af6290ff..64c777d4 100644
--- a/client/src/router/index.js
+++ b/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}

From 2ab1073826d5ff30d8e6138a14e0f0a5c4723e82 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 6 May 2020 18:03:09 +0200
Subject: [PATCH 2/3] Remove unused component

---
 client/src/components/modules/Module.vue         |  2 --
 .../objective-groups/ObjectiveGroups.vue         | 16 ++--------------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 997f8c08..8c3f5eb2 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -30,7 +30,6 @@
 
 <script>
   import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
-  import ObjectiveGroupControl from '@/components/objective-groups/ObjectiveGroupControl.vue';
   import Chapter from '@/components/Chapter.vue';
 
   import UPDATE_OBJECTIVE_PROGRESS_MUTATION from '@/graphql/gql/mutations/updateObjectiveProgress.gql';
@@ -47,7 +46,6 @@
     components: {
       BookmarkActions,
       ObjectiveGroups,
-      ObjectiveGroupControl,
       Chapter
     },
 
diff --git a/client/src/components/objective-groups/ObjectiveGroups.vue b/client/src/components/objective-groups/ObjectiveGroups.vue
index 98c53d37..fd7b4593 100644
--- a/client/src/components/objective-groups/ObjectiveGroups.vue
+++ b/client/src/components/objective-groups/ObjectiveGroups.vue
@@ -1,22 +1,11 @@
 <template>
   <div>
-    <template v-if="control">
-      <objective-group-control
-        v-for="(group, index) in objectiveGroups"
-        :key="`${group.id}${index}`"
-        :group="group"
-        @updateObjectiveProgress="updateObjectiveProgress"></objective-group-control>
-    </template>
-    <template v-if="!control">
-      <objective-group v-for="group in objectiveGroups" :key="group.id" :group="group"></objective-group>
-    </template>
-
+    <objective-group v-for="group in objectiveGroups" :key="group.id" :group="group"></objective-group>
   </div>
 </template>
 
 <script>
   import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup';
-  import ObjectiveGroupControl from '@/components/objective-groups/ObjectiveGroupControl';
   import {meQuery} from '@/graphql/queries';
   import {withoutOwnerFirst} from '@/helpers/sorting';
 
@@ -30,8 +19,7 @@
     },
 
     components: {
-      ObjectiveGroup,
-      ObjectiveGroupControl
+      ObjectiveGroup
     },
 
     apollo: {

From a883a4f2216ed41213e547a11ffc6f4f02ff520c Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 7 May 2020 11:42:44 +0200
Subject: [PATCH 3/3] Clean up code

---
 .../src/components/instruments/InstrumentFilter.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/src/components/instruments/InstrumentFilter.vue b/client/src/components/instruments/InstrumentFilter.vue
index acbf18bb..03916d2b 100644
--- a/client/src/components/instruments/InstrumentFilter.vue
+++ b/client/src/components/instruments/InstrumentFilter.vue
@@ -45,11 +45,14 @@
     methods: {
       change(enabled, index) {
         let type = this.types[index];
-        this.types.splice(index, 1, {
-          ...type,
-          enabled
-        })
-        console.log();
+        this.types = [
+          ...this.types.slice(0, index),
+          {
+            ...type,
+            enabled
+          },
+          ...this.types.slice(index + 1),
+        ];
         this.$emit('filter',
           this.types
             .filter(t => t.enabled)