From bc715a937fa880ea5331ed9e8b3fba07f52abc2d Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Fri, 8 Sep 2023 10:00:17 +0200
Subject: [PATCH] Add loading message to activities and refactor the module and
 intrument activities

---
 .../components/profile/ContentBookmark.vue    |  4 +-
 .../components/profile/InstrumentActivity.vue | 15 ++--
 .../src/components/profile/ModuleActivity.vue | 17 ++--
 client/src/components/ui/InfoMessage.vue      | 33 ++++++++
 client/src/components/ui/loadingMessage.vue   |  7 +-
 client/src/components/ui/loadingSpinner.vue   | 84 ++++++++++++-------
 client/src/graphql/gql/queries/myActivity.gql |  2 +
 client/src/styles/_variables.scss             |  1 +
 8 files changed, 110 insertions(+), 53 deletions(-)
 create mode 100644 client/src/components/ui/InfoMessage.vue

diff --git a/client/src/components/profile/ContentBookmark.vue b/client/src/components/profile/ContentBookmark.vue
index 8a6017e3..e1ef8b2d 100644
--- a/client/src/components/profile/ContentBookmark.vue
+++ b/client/src/components/profile/ContentBookmark.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content-bookmark module-activity-entry">
+  <div class="content-bookmark module-activity-entry" v-if="content">
     <!-- eslint-disable vue/no-v-html -->
     <div
       v-if="content.type === 'text_block'"
@@ -30,7 +30,7 @@ export default {
     content() {
       return this.bookmark.contentBlock
         ? this.bookmark.contentBlock.contents.find((e) => e.id === this.bookmark.uuid)
-        : this.bookmark.instrument.contents.find((e) => e.id === this.bookmark.uuid);
+        : this.bookmark.instrument?.find((e) => e.id === this.bookmark.uuid);
     },
     text() {
       return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';
diff --git a/client/src/components/profile/InstrumentActivity.vue b/client/src/components/profile/InstrumentActivity.vue
index 22e14386..a9a98f92 100644
--- a/client/src/components/profile/InstrumentActivity.vue
+++ b/client/src/components/profile/InstrumentActivity.vue
@@ -7,7 +7,7 @@
       {{ type }}
     </h3>
     <h2 class="instrument-activity__title">
-      {{ instrument.title }}
+       {{ instrument.title }}
     </h2>
     <div class="instrument-activity__tasks activity-tasks">
       <activity-entry
@@ -22,11 +22,11 @@
       <activity-entry
         title="Notiz"
         class="instrument-activity__entry"
-        v-for="note in notes"
-        :key="note.id"
-        @link="goTo(note.id)"
+        v-for="noteBookmark in notes"
+        :key="noteBookmark.id"
+        @link="goTo(noteBookmark.note.id)"
       >
-        {{ note.text }}
+        {{ noteBookmark.note.text }}
       </activity-entry>
     </div>
   </div>
@@ -48,10 +48,10 @@ export default {
   },
   computed: {
     empty() {
-      return !this.instrument.bookmarks.length;
+      return !(this.bookmarks.length || this.notes.length);
     },
     notes() {
-      return this.applyFilter('notes') ? this.instrument.bookmarks.filter((b) => b.note).map((b) => b.note) : [];
+      return this.applyFilter('notes') ? this.instrument.bookmarks.filter((b) => b.note) : [];
     },
     bookmarks() {
       return this.applyFilter('bookmarks') ? this.instrument.bookmarks : [];
@@ -63,6 +63,7 @@ export default {
   methods: {
     ...mapActions(['scrollToAssignmentId']),
     goTo(scrollTo) {
+      // TODO: fix this part, with instruments it does not navigate to the bookmark itself. (added in support case 6.9.2023)
       const url = `/instrument/${this.instrument.slug}/`;
       this.$apollo.mutate({
         mutation: SCROLL_TO_MUTATION,
diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 58d38c44..4c0bf600 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -23,17 +23,17 @@
         class="module-activity__entry"
         v-for="answer in answers"
         :key="answer.id"
-        @link="goTo(answer.survey.id)"
+        @link="goTo('module', this.module.slug)"
       >
         {{ answer.survey.title }}
       </activity-entry>
       <activity-entry
-        title="Lesezeichen ContentBlock"
+        title="Lesezeichen"
         class="module-activity__entry"
         :bookmark="bookmark"
         v-for="bookmark in contentBookmarks"
         :key="bookmark.id"
-        @link="goTo(bookmark.contentBlock.id)"
+        @link="goTo('content', bookmark.contentBlock.id)"
       >
         <content-bookmark :bookmark="bookmark" />
       </activity-entry>
@@ -42,7 +42,7 @@
         class="module-activity__entry"
         v-for="bookmark in chapterBookmarks"
         :key="bookmark.id"
-        @link="goTo(bookmark.chapter.id)"
+        @link="goTo('content', bookmark.chapter.id)"
       >
         {{ bookmark.chapter.description }}
       </activity-entry>
@@ -52,7 +52,7 @@
         :bookmark="noteBookmark"
         v-for="noteBookmark in notes"
         :key="noteBookmark.note.id"
-        @link="goTo(noteBookmark.contentBlock.id)"
+        @link="goTo('content', noteBookmark.contentBlock ? noteBookmark.contentBlock.id : noteBookmark.chapter.id)"
       >
         {{ noteBookmark.note.text }}
       </activity-entry>
@@ -101,13 +101,13 @@ export default {
       return this.applyFilter('bookmarks') ? this.module.myContentBookmarks : [];
     },
     chapterBookmarks() {
-      return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : [];
+      return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : []
     },
   },
   methods: {
     ...mapActions(['scrollToAssignmentId']),
-    goTo(scrollTo) {
-      const url = `/module/${this.module.slug}/`;
+    goTo(contentType, scrollTo) {
+      const url = `/${contentType}/${scrollTo}/`;
       this.$apollo.mutate({
         mutation: SCROLL_TO_MUTATION,
         variables: {
@@ -116,6 +116,7 @@ export default {
       });
       this.$router.push(url);
     },
+
     applyFilter(filterCriteria) {
       return !this.filter || this.filter === filterCriteria;
     },
diff --git a/client/src/components/ui/InfoMessage.vue b/client/src/components/ui/InfoMessage.vue
new file mode 100644
index 00000000..5a352163
--- /dev/null
+++ b/client/src/components/ui/InfoMessage.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="info-message">
+    <info-icon class="info-message__icon" />
+    <span class="info-message__text"><slot></slot> </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InfoIcon from '@/components/icons/InfoIcon.vue';
+</script>
+
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+.info-message {
+  display: flex;
+  align-items: center;
+
+  &__icon {
+    width: $large-icon-dimension;
+    height: $large-icon-dimension;
+    fill: $color-brand;
+    margin-right: $small-spacing;
+  }
+
+  &__text {
+    @include regular-text;
+    color: $color-brand;
+    margin-right: $medium-spacing;
+  }
+}
+</style>
diff --git a/client/src/components/ui/loadingMessage.vue b/client/src/components/ui/loadingMessage.vue
index 120d037a..b00d984a 100644
--- a/client/src/components/ui/loadingMessage.vue
+++ b/client/src/components/ui/loadingMessage.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="loading-message">
-    <loading-spinner class="loading-message__spinner" />
+    <loading-spinner class="loading-message__spinner" style="
+        --spinner-size: 40px; "/>
     <span class="loading-message__text"><slot></slot> </span>
   </div>
 </template>
@@ -18,15 +19,13 @@ import LoadingSpinner from "@/components/ui/loadingSpinner.vue";
   align-items: center;
 
   &__icon {
-    width: $large-icon-dimension;
-    height: $large-icon-dimension;
-    fill: $color-brand;
     margin-right: $large-spacing;
   }
 
   &__text {
     @include regular-text;
     color: $color-brand;
+    margin-left: $medium-spacing;
     margin-right: $medium-spacing;
   }
 }
diff --git a/client/src/components/ui/loadingSpinner.vue b/client/src/components/ui/loadingSpinner.vue
index fc85b9d3..321bf583 100644
--- a/client/src/components/ui/loadingSpinner.vue
+++ b/client/src/components/ui/loadingSpinner.vue
@@ -6,26 +6,29 @@
 <style scoped lang="scss">
 @import 'styles/helpers';
 
+// copied from https://loading.io/css/ updated for scalability
+
 .loading-spinner {
   display: inline-block;
   position: relative;
-  width: 80px;
-  height: 80px;
+  width: var(--spinner-size, 80px);
+  height: var(--spinner-size, 80px);
+  --calculated-dot-size: calc(var(--spinner-size, 80px) * 0.0875); // 7px is 8.75% of 80px
 
-   div {
+  div {
     animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    transform-origin: 40px 40px;
+    transform-origin: calc(var(--spinner-size, 80px) / 2) calc(var(--spinner-size, 80px) / 2);
   }
 
-   div:after {
+  div:after {
     content: " ";
     display: block;
     position: absolute;
-    width: 7px;
-    height: 7px;
+    width: var(--calculated-dot-size);
+    height: var(--calculated-dot-size);
     border-radius: 50%;
-    background: $color-brand;
-    margin: -4px 0 0 -4px;
+    background: var(--spinner-color, $color-brand);
+    margin: calc(var(--calculated-dot-size) / -2) 0 0 calc(var(--calculated-dot-size) / -2);
   }
 
    div:nth-child(1) {
@@ -50,54 +53,71 @@
     animation-delay: -0.108s;
   }
 
-   div:nth-child(3):after {
-    top: 71px;
-    left: 48px;
-  }
 
    div:nth-child(4) {
     animation-delay: -0.144s;
   }
 
-   div:nth-child(4):after {
-    top: 72px;
-    left: 40px;
-  }
 
    div:nth-child(5) {
     animation-delay: -0.18s;
   }
 
-   div:nth-child(5):after {
-    top: 71px;
-    left: 32px;
-  }
 
    div:nth-child(6) {
     animation-delay: -0.216s;
   }
 
-   div:nth-child(6):after {
-    top: 68px;
-    left: 24px;
-  }
+
 
    div:nth-child(7) {
     animation-delay: -0.252s;
   }
 
-   div:nth-child(7):after {
-    top: 63px;
-    left: 17px;
-  }
 
    div:nth-child(8) {
     animation-delay: -0.288s;
   }
 
-   div:nth-child(8):after {
-    top: 56px;
-    left: 12px;
+
+  div:nth-child(1):after {
+    top: calc(var(--spinner-size, 80px) * 0.7875);
+    left: calc(var(--spinner-size, 80px) * 0.7875);
+  }
+
+  div:nth-child(2):after {
+    top: calc(var(--spinner-size, 80px) * 0.85);
+    left: calc(var(--spinner-size, 80px) * 0.7);
+  }
+
+  div:nth-child(3):after {
+    top: calc(var(--spinner-size, 80px) * 0.8875);
+    left: calc(var(--spinner-size, 80px) * 0.6);
+  }
+
+  div:nth-child(4):after {
+    top: calc(var(--spinner-size, 80px) * 0.9);
+    left: calc(var(--spinner-size, 80px) * 0.5);
+  }
+
+  div:nth-child(5):after {
+    top: calc(var(--spinner-size, 80px) * 0.8875);
+    left: calc(var(--spinner-size, 80px) * 0.4);
+  }
+
+  div:nth-child(6):after {
+    top: calc(var(--spinner-size, 80px) * 0.85);
+    left: calc(var(--spinner-size, 80px) * 0.3);
+  }
+
+  div:nth-child(7):after {
+    top: calc(var(--spinner-size, 80px) * 0.7875);
+    left: calc(var(--spinner-size, 80px) * 0.2125);
+  }
+
+  div:nth-child(8):after {
+    top: calc(var(--spinner-size, 80px) * 0.7);
+    left: calc(var(--spinner-size, 80px) * 0.15);
   }
 }
 @keyframes loading-spinner {
diff --git a/client/src/graphql/gql/queries/myActivity.gql b/client/src/graphql/gql/queries/myActivity.gql
index 17b8584d..b73d8214 100644
--- a/client/src/graphql/gql/queries/myActivity.gql
+++ b/client/src/graphql/gql/queries/myActivity.gql
@@ -35,7 +35,9 @@ query MyActivityQuery {
         slug
         metaTitle
         topic {
+          id
           title
+          slug
         }
         mySubmissions {
           edges {
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index fe1456de..669333c1 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -87,3 +87,4 @@ $screen-width: 1200px;
 
 $default-icon-dimension: 25px;
 $small-icon-dimension: 14px;
+$large-icon-dimension: 40px;