skillbox/client/src/components/profile/ModuleActivity.vue

<template>
  <div
    class="module-activity"
    v-if="!empty"
  >
    <h3 class="module-activity__topic-name">
      {{ module.topic.title }}
    </h3>
    <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"
        class="module-activity__entry"
        v-for="submission in submissions"
        :key="submission.id"
        @link="goTo('module', module.slug)"
      >
        {{ submission.text }}
      </activity-entry>
      <activity-entry
        title="Übung"
        class="module-activity__entry"
        v-for="answer in answers"
        :key="answer.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('content', bookmark.contentBlock.id)"
      >
        <content-bookmark :bookmark="bookmark" />
      </activity-entry>
      <activity-entry
        title="Lesezeichen"
        class="module-activity__entry"
        v-for="bookmark in chapterBookmarks"
        :key="bookmark.id"
        @link="goTo('content', bookmark.chapter.id)"
      >
        {{ bookmark.chapter.description }}
      </activity-entry>
      <activity-entry
        title="Lesezeichen"
        class="module-activity__entry"
        :bookmark="moduleBookmark"
        v-if="moduleBookmark"
        @link="goTo('module', module.slug)"
      >
        <!-- eslint-disable vue/no-v-html -->
        <div v-html="moduleBookmark.module.intro"></div>
      </activity-entry>
      <activity-entry
        title="Notiz"
        class="module-activity__entry"
        :bookmark="noteBookmark"
        v-for="noteBookmark in notes"
        :key="noteBookmark.note.id"
        @link="goToNote(noteBookmark)"
      >
        {{ noteBookmark.note.text }}
      </activity-entry>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import ContentBookmark from '@/components/profile/ContentBookmark.vue';
import ActivityEntry from '@/components/profile/ActivityEntry.vue';

import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';

export default {
  props: ['module', 'filter'],
  components: {
    ContentBookmark,
    ActivityEntry,
  },
  computed: {
    empty() {
      return !(
        this.notes.length ||
        this.answers.length ||
        this.submissions.length ||
        this.contentBookmarks.length ||
        this.chapterBookmarks.length ||
        this.moduleBookmark
      );
    },
    notes() {
      return this.applyFilter('notes')
        ? this.module.myChapterBookmarks
            .concat(this.module.myContentBookmarks)
            .concat([this.module.bookmark ? this.module.bookmark : {}])
            .filter((b) => b.note)
        : [];
    },
    submissions() {
      return this.applyFilter('assignments') ? this.module.mySubmissions : [];
    },
    answers() {
      return this.applyFilter('surveys') ? this.module.myAnswers : [];
    },
    contentBookmarks() {
      return this.applyFilter('bookmarks') ? this.module.myContentBookmarks : [];
    },
    chapterBookmarks() {
      return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : [];
    },
    moduleBookmark() {
      return this.applyFilter('bookmarks') ? this.module.bookmark : undefined;
    },
  },
  methods: {
    goTo(contentType, scrollTo) {
      const url = `/${contentType}/${scrollTo}/`;
      this.$apollo.mutate({
        mutation: SCROLL_TO_MUTATION,
        variables: {
          scrollTo,
        },
      });
      this.$router.push(url);
    },
    goToNote(bookmark) {
      if (bookmark.module) {
        this.goTo('module', bookmark.module.slug);
      } else if (bookmark.chapter) {
        this.goTo('content', bookmark.chapter.id);
      } else {
        this.goTo('content', bookmark.contentBlock.id);
      }
    },

    applyFilter(filterCriteria) {
      return !this.filter || this.filter === filterCriteria;
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';

.module-activity {
  max-width: 640px;

  @include desktop {
    max-width: 1020px;
  }

  @media (max-width: 639px) {
    max-width: 400px;
  }

  @media (max-width: 401px) {
    max-width: 320px;
  }

  &__topic-name {
    @include regular-text;
    margin-bottom: $small-spacing;
  }

  &__title {
    @include heading-2;
  }
  &__meta-title {
    @include regular-text;
    margin-bottom: $small-spacing;
  }
  &__entry {
    &:first-of-type {
      border-top: 1px solid $color-silver;
    }
  }
}
</style>