From ddf3bde07685c65cdb4c1a55a1fd6e80db565ac5 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 19 Dec 2019 11:34:20 +0100
Subject: [PATCH] Add clickable link to my activities

---
 .../src/components/profile/ActivityEntry.vue  | 64 ++++++++++++++++
 .../components/profile/ContentBookmark.vue    | 11 ---
 .../src/components/profile/ModuleActivity.vue | 73 ++++++++-----------
 3 files changed, 95 insertions(+), 53 deletions(-)
 create mode 100644 client/src/components/profile/ActivityEntry.vue

diff --git a/client/src/components/profile/ActivityEntry.vue b/client/src/components/profile/ActivityEntry.vue
new file mode 100644
index 00000000..cbf27894
--- /dev/null
+++ b/client/src/components/profile/ActivityEntry.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="activity-entry">
+    <div class="activity-entry__content">
+      <h3 class="activity-entry__title">{{title}}</h3>
+      <slot></slot>
+    </div>
+
+    <div class="activity-entry__link" @click="$emit('link')">
+      <chevron-right class="activity-entry__icon"></chevron-right>
+    </div>
+  </div>
+</template>
+
+<script>
+  import ChevronRight from '@/components/icons/ChevronRight';
+
+  export default {
+    props: ['title'],
+
+    components: {
+      ChevronRight
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .activity-entry {
+    padding: $small-spacing 0;
+    border-bottom: 1px solid $color-silver;
+    display: flex;
+    justify-content: space-between;
+
+    &__title {
+      @include small-text;
+      // todo: make style definition for small text and silver color
+      color: $color-silver-dark;
+      margin-bottom: 0;
+    }
+
+    &__content {
+      flex-grow: 1;
+      @include regular-text;
+      line-height: $default-line-height;
+    }
+    &__link {
+      display: flex;
+      flex-grow: 0;
+      align-content: center;
+      cursor: pointer;
+    }
+
+    &__icon {
+      fill: $color-brand;
+      width: 30px;
+    }
+
+    /deep/ p {
+      @include regular-text;
+    }
+  }
+</style>
diff --git a/client/src/components/profile/ContentBookmark.vue b/client/src/components/profile/ContentBookmark.vue
index 701fa71e..bfefc191 100644
--- a/client/src/components/profile/ContentBookmark.vue
+++ b/client/src/components/profile/ContentBookmark.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="content-bookmark module-activity-entry">
-    <h3 class="module-activity-entry__title">Lesezeichen</h3>
     <div v-html="text" v-if="content.type === 'text_block'"></div>
     <div v-else-if="content.type === 'link_block'">
       <link-block :value="content.value"></link-block>
@@ -38,13 +37,3 @@
     }
   }
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
-
-  .content-bookmark {
-    /deep/ p {
-      @include regular-text;
-    }
-  }
-</style>
diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 4ac7bdd0..067c8fb3 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -3,48 +3,35 @@
     <h3 class="module-activity__module-name">{{module.topic.title}}</h3>
     <h2 class="module-activity__title">{{module.metaTitle}} - {{module.title}}</h2>
     <div class="module-activity__tasks activity-tasks">
-      <div class="module-activity__entry module-activity-entry"
-           v-for="submission in module.mySubmissions"
-           :key="submission.id"
-           @click="goTo(submission.assignment.id)">
-        <h3 class="module-activity-entry__title">Aufgabe & Ergebnis</h3>
-        <p class="module-activity-entry__text">
-          {{submission.text}}
-        </p>
-      </div>
-      <div class="module-activity__entry module-activity-entry"
-           v-for="answer in module.myAnswers"
-           :key="answer.id"
-           @click="goTo(answer.survey.id)">
-        <h3 class="module-activity-entry__title">Übung</h3>
-        <p class="module-activity-entry__text">
-          {{answer.survey.title}}
-        </p>
-
-      </div>
-      <div class="module-activity__entry"
-           v-for="bookmark in module.myContentBookmarks"
-           :key="bookmark.id"
-           @click="goTo(bookmark.uuid)">
+      <activity-entry title="Aufgabe & Ergebnis" class="module-activity__entry"
+                      v-for="submission in module.mySubmissions"
+                      :key="submission.id"
+                      @link="goTo(submission.assignment.id)">
+        {{submission.text}}
+      </activity-entry>
+      <activity-entry title="Übung" class="module-activity__entry"
+                      v-for="answer in module.myAnswers"
+                      :key="answer.id"
+                      @link="goTo(answer.survey.id)">
+        {{answer.survey.title}}
+      </activity-entry>
+      <activity-entry title="Lesezeichen" class="module-activity__entry"
+                      v-for="bookmark in module.myContentBookmarks"
+                      :key="bookmark.id"
+                      @link="goTo(bookmark.uuid)">
         <content-bookmark :bookmark="bookmark"></content-bookmark>
-      </div>
-      <div class="module-activity__entry"
-           v-for="bookmark in module.myChapterBookmarks"
-           :key="bookmark.id"
-           @click="goTo(bookmark.chapter.id)">
-        <h3 class="module-activity-entry__title">Lesezeichen</h3>
-        <p class="module-activity-entry__text">
-          {{bookmark.chapter.description}}
-        </p>
-      </div>
-      <div class="module-activity__entry"
-           v-for="note in notes" :key="note.id">
-        <h3 class="module-activity-entry__title">Notiz</h3>
-        <p class="module-activity-entry__text">
-          {{note.text}}
-        </p>
-
-      </div>
+      </activity-entry>
+      <activity-entry title="Lesezeichen" class="module-activity__entry"
+                      v-for="bookmark in module.myChapterBookmarks"
+                      :key="bookmark.id"
+                      @link="goTo(bookmark.chapter.id)">
+        {{bookmark.chapter.description}}
+      </activity-entry>
+      <activity-entry title="Notiz" class="module-activity__entry"
+                      v-for="note in notes" :key="note.id"
+                      @link="goTo(note.id)">
+        {{note.text}}
+      </activity-entry>
     </div>
   </div>
 </template>
@@ -53,13 +40,15 @@
 
   import {mapActions} from 'vuex'
   import ContentBookmark from '@/components/profile/ContentBookmark';
+  import ActivityEntry from '@/components/profile/ActivityEntry';
 
   import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
 
   export default {
     props: ['module'],
     components: {
-      ContentBookmark
+      ContentBookmark,
+      ActivityEntry
     },
     computed: {
       empty() {