Merge branch 'hotfix/MS-792-MeineAkivitäten' into develop

# Conflicts:
#	client/src/components/ui/InfoMessage.vue
#	client/src/styles/_variables.scss

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';

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"
+        v-for="noteBookmark in notes"
-        :key="note.id"
+        :key="noteBookmark.id"
-        @link="goTo(note.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,

client/src/components/profile/ModuleActivity.vue

@@ -3,10 +3,11 @@
     class="module-activity"
     v-if="!empty"
   >
-    <h3 class="module-activity__module-name">
+    <h3 class="module-activity__topic-name">
       {{ module.topic.title }}
     </h3>
-    <h2 class="module-activity__title">{{ module.metaTitle }} - {{ module.title }}</h2>
+    <h2 class="module-activity__title">{{ module.title }}</h2>
+    <h3 class="module-activity__meta-title">{{ module.metaTitle }}</h3>
     <div class="module-activity__tasks activity-tasks">
       <activity-entry
         title="Aufgabe & Ergebnis"
@@ -22,16 +23,17 @@
         class="module-activity__entry"
         v-for="answer in answers"
         :key="answer.id"
-        @link="goTo(answer.survey.id)"
+        @link="goTo('module', module.slug)"
       >
         {{ answer.survey.title }}
       </activity-entry>
       <activity-entry
         title="Lesezeichen"
         class="module-activity__entry"
+        :bookmark="bookmark"
         v-for="bookmark in contentBookmarks"
         :key="bookmark.id"
-        @link="goTo(bookmark.uuid)"
+        @link="goTo('content', bookmark.contentBlock.id)"
       >
         <content-bookmark :bookmark="bookmark" />
       </activity-entry>
@@ -40,18 +42,19 @@
         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>
       <activity-entry
         title="Notiz"
         class="module-activity__entry"
-        v-for="note in notes"
+        :bookmark="noteBookmark"
-        :key="note.id"
+        v-for="noteBookmark in notes"
-        @link="goTo(note.id)"
+        :key="noteBookmark.note.id"
+        @link="goTo('content', noteBookmark.contentBlock ? noteBookmark.contentBlock.id : noteBookmark.chapter.id)"
       >
-        {{ note.text }}
+        {{ noteBookmark.note.text }}
       </activity-entry>
     </div>
   </div>
@@ -73,11 +76,11 @@ export default {
   computed: {
     empty() {
       return !(
-        this.module.mySubmissions.length ||
+        this.notes.length ||
-        this.module.myAnswers.length ||
+        this.answers.length ||
-        this.module.myContentBookmarks.length ||
+        this.submissions.length ||
-        this.module.myChapterBookmarks.length ||
+        this.contentBookmarks.length ||
-        this.module.bookmark
+        this.chapterBookmarks.length
       );
     },
     notes() {
@@ -86,7 +89,6 @@ export default {
             .concat(this.module.myContentBookmarks)
             .concat([this.module.bookmark ? this.module.bookmark : {}])
             .filter((b) => b.note)
-            .map((b) => b.note)
         : [];
     },
     submissions() {
@@ -99,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) {
+    goTo(contentType, scrollTo) {
-      const url = `/module/${this.module.slug}/`;
+      const url = `/${contentType}/${scrollTo}/`;
       this.$apollo.mutate({
         mutation: SCROLL_TO_MUTATION,
         variables: {
@@ -114,6 +116,7 @@ export default {
       });
       this.$router.push(url);
     },
+
     applyFilter(filterCriteria) {
       return !this.filter || this.filter === filterCriteria;
     },
@@ -140,9 +143,7 @@ export default {
     max-width: 320px;
   }
 
-  margin-bottom: 2 * $large-spacing;
+  &__topic-name {
-
-  &__module-name {
     @include regular-text;
     margin-bottom: $small-spacing;
   }
@@ -150,7 +151,10 @@ export default {
   &__title {
     @include heading-2;
   }
-
+    &__meta-title {
+    @include regular-text;
+    margin-bottom: $small-spacing;
+  }
   &__entry {
     &:first-of-type {
       border-top: 1px solid $color-silver;

client/src/components/profile/ShowCode.vue

@@ -42,7 +42,7 @@ export default {
     font-size: toRem(60px);
     letter-spacing: toRem(10px);
     @include desktop {
-      font-size: toRem(120px);
+      font-size: toRem(100px);
       letter-spacing: toRem(20px);
     }
     font-weight: 600;

client/src/components/ui/InfoMessage.vue

@@ -9,7 +9,6 @@
 import InfoIcon from '@/components/icons/InfoIcon.vue';
 </script>
 
-
 <style scoped lang="scss">
 @import 'styles/helpers';
 

client/src/components/ui/loadingMessage.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="loading-message">
+    <loading-spinner
+      class="loading-message__spinner"
+      style="--spinner-size: 40px"
+    />
+    <span class="loading-message__text"><slot></slot> </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LoadingSpinner from '@/components/ui/loadingSpinner.vue';
+</script>
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+.loading-message {
+  display: flex;
+  align-items: center;
+
+  &__icon {
+    margin-right: $large-spacing;
+  }
+
+  &__text {
+    @include regular-text;
+    color: $color-brand;
+    margin-left: $medium-spacing;
+    margin-right: $medium-spacing;
+  }
+}
+</style>

client/src/components/ui/loadingSpinner.vue

@@ -0,0 +1,132 @@
+
+<template>
+<div class="loading-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+</template>
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+// copied from https://loading.io/css/ updated for scalability
+
+.loading-spinner {
+  display: inline-block;
+  position: relative;
+  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 {
+    animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: calc(var(--spinner-size, 80px) / 2) calc(var(--spinner-size, 80px) / 2);
+  }
+
+  div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    width: var(--calculated-dot-size);
+    height: var(--calculated-dot-size);
+    border-radius: 50%;
+    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) {
+    animation-delay: -0.036s;
+  }
+
+   div:nth-child(1):after {
+    top: 63px;
+    left: 63px;
+  }
+
+   div:nth-child(2) {
+    animation-delay: -0.072s;
+  }
+
+   div:nth-child(2):after {
+    top: 68px;
+    left: 56px;
+  }
+
+   div:nth-child(3) {
+    animation-delay: -0.108s;
+  }
+
+
+   div:nth-child(4) {
+    animation-delay: -0.144s;
+  }
+
+
+   div:nth-child(5) {
+    animation-delay: -0.18s;
+  }
+
+
+   div:nth-child(6) {
+    animation-delay: -0.216s;
+  }
+
+
+
+   div:nth-child(7) {
+    animation-delay: -0.252s;
+  }
+
+
+   div:nth-child(8) {
+    animation-delay: -0.288s;
+  }
+
+
+  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 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+</style>

client/src/graphql/gql/queries/myActivity.gql

@@ -35,7 +35,9 @@ query MyActivityQuery {
         slug
         metaTitle
         topic {
+          id
           title
+          slug
         }
         mySubmissions {
           edges {

client/src/pages/activity.vue

@@ -5,6 +5,7 @@
       :filter="filter"
       @change-filter="filter = $event"
     />
+    <loading-message v-if="loading">Aktiviäten werden geladen</loading-message>
     <div class="modules">
       <module-activity
         :filter="filter"
@@ -28,9 +29,11 @@ import ModuleActivity from '@/components/profile/ModuleActivity.vue';
 import InstrumentActivity from '@/components/profile/InstrumentActivity.vue';
 import ActivityFilter from '@/components/profile/ActivityFilter.vue';
 import MY_ACTIVITY_QUERY from '@/graphql/gql/queries/myActivity.gql';
+import LoadingMessage from '@/components/ui/loadingMessage.vue';
 
 export default {
   components: {
+    LoadingMessage,
     ModuleActivity,
     InstrumentActivity,
     ActivityFilter,
@@ -40,16 +43,18 @@ export default {
     modules: {
       query: MY_ACTIVITY_QUERY,
       update(data) {
+        this.loading = false;
         return this.$getRidOfEdges(data).myActivity;
       },
-      pollInterval: 5000,
+      pollInterval: 15000,
     },
     instruments: {
       query: MY_ACTIVITY_QUERY,
       update(data) {
+        this.loading = false;
         return this.$getRidOfEdges(data).myInstrumentActivity;
       },
-      pollInterval: 5000,
+      pollInterval: 15000,
     },
   },
 
@@ -58,6 +63,7 @@ export default {
       modules: [],
       instruments: [],
       filter: '',
+      loading: true,
     };
   },
 };

server/users/schema/queries.py

@@ -29,7 +29,7 @@ class UsersQuery(object):
         return Module.objects.all()
 
     def resolve_my_instrument_activity(self, info, **kwargs):
-        return BasicKnowledge.objects.all()
+        return BasicKnowledge.objects.filter(instrumentbookmark__user=info.context.user)
 
 
 class AllUsersQuery(object):