skillbox/client/src/pages/topic-page.vue

<template>
  <div class="topic">
    <div class="topic__navigation">
      <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__modulefilter">
        <module-filter></module-filter>
      </div>
      <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"
          v-bind="module"
          :key="module.slug"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
import ModuleFilter from '@/components/modules/ModuleFilter.vue';
import { defineAsyncComponent } from 'vue';
import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
import me from '@/mixins/me';
import TopicNavigation from '@/components/book-navigation/TopicNavigation.vue';

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

const PlayIcon = defineAsyncComponent(() => import('@/components/icons/Play.vue'));
const BulbIcon = defineAsyncComponent(() => import('@/components/icons/BulbIcon.vue'));

export default {
  mixins: [me],
  components: {
    TopicNavigation,
    ModuleTeaser,
    PlayIcon,
    BulbIcon,
    ModuleFilter,
  },

  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 $small-spacing;
  @include desktop {
    padding: $large-spacing 0;
  }
  grid-template-columns: 1fr;
  @include desktop {
    grid-template-columns: 300px 1fr;
  }

  &__modulefilter {
    width: 90%;
    height: 40px;
  }

  &__navigation {
    padding: 0 $medium-spacing;
    display: none;
    @include desktop {
      display: block;
    }
  }

  &__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>