<template>
  <div class="submissions-page">
    <h2 class="submissions-page__heading">Aufgabe</h2>
    <assignment-with-submissions
      :assignment="assignment"
      v-if="!$apollo.queries.assignment.loading"
      @back="back"/>
  </div>

</template>

<script>
  import AssignmentWithSubmissions from '@/components/AssignmentWithSubmissions';
  import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/queries/assignmentWithSubmissionsQuery.gql';

  export default {
    components: {
      AssignmentWithSubmissions,
    },

    apollo: {
      assignment() {
        return {
          query: ASSIGNMENT_WITH_SUBMISSIONS_QUERY,
          variables() {
            return {
              id: this.$route.params.id,
            };
          },
          fetchPolicy: 'no-cache',
          pollInterval: 30000,
        };
      },
    },

    data() {
      return {
        assignment: {
          submissions: [],
        },
      };
    },

    methods: {
      back() {
        this.$router.go(-1);
      },
    },
  };
</script>

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

  .submissions-page {
    display: grid;
    width: 100%;
    max-width: $screen-width;

    grid-template-rows: auto 1fr;

    margin-top: 2rem;
    margin-left: $large-spacing;
    margin-right: $large-spacing;

    @include desktop {
      margin-left: $medium-spacing;
      margin-right: $medium-spacing;
    }

  }
</style>
