<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.vue';
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>
