From 66949f25741573dbb15f8f32be73f857421e7873 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 6 May 2021 23:18:41 +0200
Subject: [PATCH] Add snapshot list menu

---
 .../components/modules/SnapshotTeamMenu.vue   | 50 +++++++++++++++++++
 client/src/pages/snapshot/snapshots.vue       | 23 ++++++---
 2 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/modules/SnapshotTeamMenu.vue

diff --git a/client/src/components/modules/SnapshotTeamMenu.vue b/client/src/components/modules/SnapshotTeamMenu.vue
new file mode 100644
index 00000000..c0d176bc
--- /dev/null
+++ b/client/src/components/modules/SnapshotTeamMenu.vue
@@ -0,0 +1,50 @@
+<template>
+  <ul class="snapshot-team-menu">
+    <li class="snapshot-team-menu__item">
+      <a
+        :class="{'snapshot-team-menu__link--active': selected === 'mine'}"
+        class="snapshot-team-menu__link"
+        @click="$emit('select', 'mine')">Meine Snapshots</a></li>
+    <li
+      class="snapshot-team-menu__item"
+    >
+      <a
+        :class="{'snapshot-team-menu__link--active': selected === 'team'}"
+        class="snapshot-team-menu__link"
+        @click="$emit('select', 'team')">Team Snapshots</a></li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    props: {
+      selected: {
+        type: String,
+        default: 'mine',
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .snapshot-team-menu {
+    display: flex;
+
+    &__item {
+      margin-right: $large-spacing;
+      padding: $medium-spacing 0;
+    }
+
+    &__link {
+      @include default-link;
+      color: $color-silver-dark;
+      cursor: pointer;
+
+      &--active {
+        color: $color-brand;
+      }
+    }
+  }
+</style>
diff --git a/client/src/pages/snapshot/snapshots.vue b/client/src/pages/snapshot/snapshots.vue
index c03c8adc..2a857238 100644
--- a/client/src/pages/snapshot/snapshots.vue
+++ b/client/src/pages/snapshot/snapshots.vue
@@ -2,12 +2,19 @@
   <div class="snapshots">
     <h1>Snapshots</h1>
     <p class="snapshots__details">Thema: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}</p>
-    <div class="snapshots__list">
+    <snapshot-team-menu
+      :selected="selectedLink"
+      @select="selectedLink=$event"
+    />
+    <div
+      class="snapshots__list"
+      v-if="selectedLink === 'mine'">
       <snapshot-list-item
         :key="snapshot.id"
         :snapshot="snapshot"
         class="snapshots__snapshot"
-        v-for="snapshot in module.snapshots"/>
+        v-for="snapshot in module.snapshots"
+      />
     </div>
   </div>
 </template>
@@ -16,16 +23,19 @@
   import SnapshotListItem from '@/components/modules/SnapshotListItem';
 
   import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
+  import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu';
 
   const defaultModule = {topic: {}, snapshots: []};
 
   export default {
     components: {
-      SnapshotListItem
+      SnapshotTeamMenu,
+      SnapshotListItem,
     },
     data() {
       return {
-        module: defaultModule
+        module: defaultModule,
+        selectedLink: 'mine',
       };
     },
 
@@ -34,7 +44,7 @@
         query: MODULE_SNAPSHOTS_QUERY,
         variables() {
           return {
-            slug: this.$route.params.slug
+            slug: this.$route.params.slug,
           };
         },
         error(error, vm, key, type, options) {
@@ -42,7 +52,7 @@
         },
         update(data) {
           return data.module || defaultModule;
-        }
+        },
       },
     },
   };
@@ -60,6 +70,7 @@
 
     &__details {
       @include regular-text;
+      margin-bottom: $large-spacing;
     }
 
     &__list {