skillbox/client/src/pages/topic-page.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 {{ $flavor.textTopic }} anzeigen</span>
        </a>
      </div>
      <div class="topic__modules">
        <module-teaser
          v-for="module in modules"
          :key="module.slug"
          v-bind="module"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
  import TOPIC_QUERY from '@/graphql/gql/queries/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/queries/meQuery.gql';

  const PlayIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/Play');
  const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');

  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) {
        if (!topicId) {
          return;
        }
        this.$apollo.mutate({
          mutation: UPDATE_LAST_TOPIC_MUTATION,
          variables: {
            input: {
              id: topicId,
            },
          },
          update(store, {data: {updateLastTopic: {topic}}}) {
            if (topic) {
              const query = ME_QUERY;
              const {me} = store.readQuery({query});
              if (me) {
                const data = {
                  me: {
                    ...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>