skillbox/client/src/pages/topic.vue

<template>
  <div class="topic">
    <div class="topic__navigation">
      <book-topic-navigation />
    </div>

    <div class="topic__content">
      <h1
        data-cy="topic-title"
        class="topic__title">{{ topic.title }}</h1>
      <p class="topic__teaser">
        {{ topic.teaser }}
      </p>
      <div class="topic__links">
        <div
          class="topic__video-link topic__link"
          v-if="topic.vimeoId"
          @click="openVideo">
          <play-icon class="topic__video-link-icon topic__link-icon"/>
          <span class="topic__link-description">Video schauen</span>
        </div>
        <a
          :href="topic.instructions"
          target="_blank"
          class="topic__instruction-link topic__link"
          v-if="me.isTeacher && topic.instructions">
          <bulb-icon class="topic__instruction-icon topic__link-icon"/>
          <span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
        </a>

      </div>
      <div class="topic__modules">
        <module-teaser
          :key="module.id"
          v-bind="module"
          v-for="module in modules"/>
      </div>
    </div>
  </div>
</template>

<script>
  import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
  import PlayIcon from '@/components/icons/Play';
  import BulbIcon from '@/components/icons/BulbIcon';
  import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
  import me from '@/mixins/me';
  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';

  import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
  import ME_QUERY from '@/graphql/gql/meQuery.gql';

  export default {

    mixins: [me],
    components: {
      BookTopicNavigation,
      ModuleTeaser,
      PlayIcon,
      BulbIcon
    },

    apollo: {
      topic() {
        return {
          query: TOPIC_QUERY,
          variables: {
            slug: this.$route.params.topicSlug
          },
          update(data) {
            return this.$getRidOfEdges(data).topic || {};
          },
          result() {
            if (this.saveMe) {
              this.saveMe = false;
              this.updateLastVisitedTopic(this.topic.id);
            }
          }
        };
      }
    },

    data() {
      return {
        topic: {
          modules: {
            edges: []
          }
        },
        saveMe: false
      };
    },

    computed: {
      modules() {
        return this.topic.modules;
      }
    },

    mounted() {
      if (!this.topic.id) { // component was loaded before topic, apollo not ready yet
        this.saveMe = true; // needs saving, apollo will do this
      } else {
        this.updateLastVisitedTopic(this.topic.id);
      }
    },

    methods: {
      openVideo() {
        this.$store.dispatch('showFullscreenVideo', this.topic.vimeoId);
      },
      updateLastVisitedTopic(topicId) {
        this.$apollo.mutate({
          mutation: UPDATE_LAST_TOPIC_MUTATION,
          variables: {
            input: {
              id: topicId
            }
          },
          update(store, {data: {updateLastTopic: {topic}}}) {
            if (topic) {
              const query = ME_QUERY;
              const data = store.readQuery({query});
              if (data) {
                data.me.lastTopic = topic;
                store.writeQuery({query, data});
              }
            }
          }
        });
      }
    },
  };
</script>

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

  .topic {
    display: grid;
    padding: $large-spacing 0;
    grid-template-columns: 300px 1fr;

    &__navigation {
      padding: 0 $medium-spacing;
    }

    &__teaser {
      color: $color-charcoal-dark;
      width: 90%;
      @include lead-paragraph;
      margin-bottom: $large-spacing;
    }

    &__links {
      margin-bottom: $large-spacing;
      display: flex;
    }

    &__link {
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    &__video-link {
      margin-right: $large-spacing;
    }

    &__link-icon {
      width: 40px;
      height: 40px;
      margin-right: $medium-spacing;
    }

    &__link-description {
      @include heading-3;
    }

    &__modules {
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      @supports (display: grid) {
        display: grid;
      }
      grid-column-gap: $large-spacing;
      grid-row-gap: $large-spacing;

      @include desktop {
        grid-template-columns: repeat(3, minmax(auto, 380px));
      }
    }
  }
</style>