skillbox/client/src/components/modules/ModuleNavigation.vue

<template>
  <nav
    data-cy="module-navigation"
    class="module-navigation sub-navigation"
  >
    <back-link
      :title="module.topic.title"
      :slug="module.topic.slug"
      class="module-navigation__topic-link"
      type="topic"
      v-if="module.topic"
    />
    <div
      class="module-navigation__toggle-menu"
      data-cy="module-teacher-menu"
      v-if="canManageContent && !me.readOnly && !me.selectedClass.readOnly"
    >
      <snapshot-menu class="module-navigation__actions" />
      <router-link
        :to="{ name: 'module-settings' }"
        class="module-navigation__actions"
        data-cy="module-settings-button"
      >
        Einstellungen
      </router-link>
      <toggle-editing v-if="onModulePage" />
    </div>
  </nav>
</template>

<script>
import BackLink from '@/components/BackLink.vue';
import { moduleQuery } from '@/graphql/queries';

import ToggleEditing from '@/components/toggle-menu/ToggleEditing.vue';
import me from '@/mixins/me';
import SnapshotMenu from '@/components/modules/SnapshotMenu.vue';

export default {
  apollo: {
    module: moduleQuery,
  },

  mixins: [me],

  components: {
    SnapshotMenu,
    BackLink,
    ToggleEditing,
  },

  data() {
    return {
      module: {
        assignments: [],
        topic: {},
      },
    };
  },

  computed: {
    onModulePage() {
      return this.$route.name === 'module';
    },
    moduleContentLink() {
      return `/module/${this.module.slug}`;
    },
    showResults() {
      return this.me.permissions.includes('users.can_manage_school_class_content');
    },
    assignments() {
      if (!this.module.chapters) {
        return [];
      }
      return this.extractAssignmentsFromChapters(this.module.chapters, []);
    },
  },

  methods: {
    chapterId(index) {
      return `#chapter-${index}`;
    },
    submissionsLink(assignment) {
      return `/module/${this.module.slug}/submissions/${assignment.value.id}`;
    },
    extractAssignmentsFromChapters(chapters, assignments) {
      chapters.forEach((node) => {
        if (node.contentBlocks) {
          // in chapter node
          // if chapter information is required then do it here like so:
          // assignments.push({
          //   chapterTitle: node.title
          // });
          // return this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
          assignments = this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
        } else if (node.contents) {
          let foundAssignments = [];
          node.contents.forEach((contentNode) => {
            foundAssignments = this.concatAssignments(foundAssignments, contentNode);
          });
          assignments = [...assignments, ...foundAssignments];
        }
      });
      return assignments;
    },
    concatAssignments(foundAssignments, node) {
      let foundAssignment = this.findAssignment(node);
      return foundAssignment ? [...foundAssignments, ...foundAssignment] : foundAssignments;
    },
    findAssignment(node) {
      if (node.type && node.type === 'assignment') {
        return [node];
      } else if (node.type && node.type === 'content_list_item') {
        let foundAssignments = [];
        node.value.forEach((contentNode) => {
          foundAssignments = this.concatAssignments(foundAssignments, contentNode);
        });
        return this.flattenArray(foundAssignments);
      } else {
        return null;
      }
    },
    flattenArray(arrayToFlatten) {
      // https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays
      return [].concat.apply([], arrayToFlatten);
    },
  },
};
</script>

<style scoped lang="scss">
@import 'styles/helpers';

@mixin module-navigation-typography {
  font-family: $sans-serif-font-family;
  color: $color-silver-dark;
  font-weight: $font-weight-regular;
}

.module-navigation {
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 11;
  background-color: $color-white;
  border-top: 1px solid $color-silver;

  &__topic-link {
    @include regular-text;
  }

  @include desktop {
    display: flex;
  }

  &__module-content {
    margin-bottom: 18px;
  }

  &__heading {
    @include module-navigation-typography;
    margin: 0;
    font-size: 1.0625rem;
    cursor: pointer;
  }

  &__anchors {
    display: flex;
    flex-direction: column;
    padding: 16px 24px 0;
  }

  &__anchor {
    @include module-navigation-typography;
    font-size: 0.875rem;
    line-height: 1.2rem;
    margin-bottom: 0.6875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    &--active {
      color: $color-brand;
    }
  }

  &__toggle-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  &__actions {
    @include regular-text;
    margin-right: $medium-spacing;
  }
}
</style>