<template>
  <div class="assignment-with-submissions">
    <h1 class="assignment-with-submissions__title">{{assignment.title}}</h1>
    <p v-if="!assignment.submissions.length">Zu diesem Auftrag sind noch keine Ergebnisse vorhanden</p>
    <router-link
      :to="submissionLink(submission)"
      v-for="(submission, index) in submissions"
      class="assignment-with-submissions__link"
      :key="index">
      <student-submission class="assignment-with-submissions__submission"
                          :submission="submission"
      >
      </student-submission>
    </router-link>
  </div>
</template>

<script>
  import StudentSubmission from '@/components/StudentSubmission';

  export default {
    props: ['assignment'],

    components: {
      StudentSubmission
    },

    methods: {
      submissionLink(submission) {
        return `/submission/${submission.id}`
      },
      belongsToSchool(submission) {
        if (this.currentFilter === '') {
          return true;
        }
        return submission.student.schoolClasses.edges.some(edge => edge.node.id === this.currentFilter)
      }
    },

    computed: {
      submissions() {
        return this.assignment.submissions.filter(submission => {
          return this.belongsToSchool(submission);
        });
      },
      currentFilter() {
        return this.$store.state.filterForSchoolClass;
      },
    },

  }
</script>

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

  .assignment-with-submissions {
    &__title {
      font-size: toRem(35px);
    }

    &__link {
      display: block;
      &:first-of-type {
        border-top: 1px solid $color-grey;
      }
    }

  }
</style>
