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] 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}