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

</template>

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

  import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/assignmentWithSubmissionsQuery.gql';

  export default {
    components: {
      AssignmentWithSubmissions
    },

    apollo: {
      assignment() {
        return {
          query: ASSIGNMENT_WITH_SUBMISSIONS_QUERY,
          variables() {
            return {
              id: this.$route.params.id
            }
          },
          update(result) {
            return result.assignment;
          }
        }
      },
    },

    data() {
      return {
        assignment: {
          submissions: []
        }
      }
    }
  }
</script>

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

  .submissions-page {
    @include desktop {
      width: 800px;
    }
  }
</style>
