Merge branch 'master' of bitbucket.org:iterativ/skillbox

client/src/components/AssignmentWithSubmissions.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="assignment-with-submissions">
+    <h1 class="assignment-with-submissions__title">{{assignment.title}}</h1>
+
+    <student-submission class="assignment-with-submissions__submission"
+                        v-for="(submission, index) in assignment.submissions"
+                        :key="index"
+                        :submission="submission"
+    >
+    </student-submission>
+  </div>
+</template>
+
+<script>
+  import StudentSubmission from '@/components/StudentSubmission';
+
+  export default {
+    props: ['assignment'],
+
+    components: {
+      StudentSubmission
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .assignment-with-submissions {
+    &__title {
+      font-size: toRem(35px);
+    }
+
+    &__submission:first-of-type {
+      border-top: 1px solid $color-grey;
+    }
+  }
+</style>

client/src/components/StudentSubmission.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="student-submission">
     <div class="student-submission__student-name">
-      {{submission.name}}
+      {{name}}
     </div>
     <div class="student-submission__entry">
       {{submission.text}}
@@ -11,7 +11,14 @@
 
 <script>
   export default {
-    props: ['submission']
+    props: ['submission'],
+
+    computed: {
+      name() {
+        return this.submission && this.submission.student
+          ? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
+      }
+    }
   }
 </script>
 

client/src/components/UserWidget.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="user-widget">
-    <img class="user-widget__avatar" :src="avatar">
+    <user-icon class="user-widget__avatar" :src="avatar"></user-icon>
     <span class="user-widget__name">{{firstName}} {{lastName}}</span>
     <span class="user-widget__date" v-if="date">{{date}}</span>
   </div>
 </template>
 
 <script>
+  import UserIcon from '@/components/icons/UserIcon';
+
   export default {
-    props: ['firstName', 'lastName', 'avatar', 'date']
+    props: ['firstName', 'lastName', 'avatar', 'date'],
+
+    components: {
+      UserIcon
+    }
   }
 </script>
 

client/src/components/icons/UserIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path
+      d="M50,0A50.12,50.12,0,0,0,.07,46.65S0,48.23,0,50s.07,3.25.07,3.36A50,50,0,1,0,50,0ZM24.14,86V79.84A15.18,15.18,0,0,1,39.31,64.67H60.69A15.18,15.18,0,0,1,75.86,79.84V86a44.27,44.27,0,0,1-51.72,0Zm57.47-5V79.84A20.94,20.94,0,0,0,60.69,58.93H39.31A20.94,20.94,0,0,0,18.39,79.84v1.31a44.4,44.4,0,1,1,63.22-.06Z"/>
+    <path
+      d="M50,20.26A17.54,17.54,0,1,0,67.55,37.81,17.57,17.57,0,0,0,50,20.26ZM50,49.6a11.8,11.8,0,1,1,11.81-11.8A11.82,11.82,0,0,1,50,49.6Z"/>
+  </svg>
+</template>

client/src/components/modules/ModuleNavigation.vue

@@ -1,8 +1,14 @@
 <template>
   <div>
     <nav class="module-navigation">
-      <h3 class="module-navigation__heading">Inhalte: {{module.metaTitle}}</h3>
+      <div class="module-navigation__module-content">
-      <div class="module-navigation__anchors">
+        <router-link
+          tag="h3"
+          :to="moduleContentLink"
+          class="module-navigation__heading"
+        >Inhalte: {{module.metaTitle}}
+        </router-link>
+        <div class="module-navigation__anchors" v-if="onModulePage">
           <a href="#" class="module-navigation__anchor module-navigation__anchor--active">Einleitung</a>
           <a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>
 
@@ -12,17 +18,23 @@
              :key="chapter.id">{{chapter.title}}</a>
           <a href="#" class="module-navigation__anchor">Lernzielkontrolle</a>
         </div>
-      <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse: {{module.metaTitle}}
+      </div>
+
+      <div class="module-navigation__module-submissions">
+        <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse:
+          {{module.metaTitle}}
         </router-link>
         <div class="module-navigation__anchors">
           <router-link
-          to="/module/geld/submissions"
+            :to="submissionsLink(assignment)"
             v-for="assignment in module.assignments"
             :key="assignment.id"
             class="module-navigation__anchor"
+            exact-active-class="module-navigation__anchor--active"
           >{{assignment.title}}
           </router-link>
         </div>
+      </div>
     </nav>
   </div>
 
@@ -37,6 +49,15 @@
       module: moduleQuery
     },
 
+    computed: {
+      onModulePage() {
+        return this.$route.name === 'module';
+      },
+      moduleContentLink() {
+        return `/module/${this.module.slug}`;
+      }
+    },
+
     data() {
       return {
         module: {}
@@ -46,6 +67,9 @@
     methods: {
       chapterId(index) {
         return `#chapter-${index}`
+      },
+      submissionsLink(assignment) {
+        return `/module/${this.module.slug}/submissions/${assignment.id}`;
       }
     }
   }
@@ -65,15 +89,20 @@
     position: sticky;
     top: 32px;
 
+    &__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;
+      padding: 16px 24px 0;
     }
     &__anchor {
       @include module-navigation-typography;

client/src/components/rooms/NewRoom.vue

@@ -41,8 +41,8 @@
           update: (store, {data: {addRoom: {room}}}) => {
             try {
               const data = store.readQuery({query: ROOMS_QUERY});
-              if (data.allRooms) {
+              if (data.rooms) {
-                data.allRooms.edges.push({
+                data.rooms.edges.push({
                   node: room,
                   __typename: 'RoomNode'
                 });

client/src/components/rooms/RoomWidget.vue

@@ -60,7 +60,7 @@
             try {
               if (success) {
                 const data = store.readQuery({query: ROOMS_QUERY});
-                data.allRooms.edges.splice(data.allRooms.edges.findIndex(edge => edge.node.id === id), 1);
+                data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === id), 1);
                 store.writeQuery({query: ROOMS_QUERY, data});
               }
             } catch (e) {

client/src/graphql/gql/assignmentWithSubmissionsQuery.gql

@@ -0,0 +1,14 @@
+query AssignmentWithSubmissions($id: ID!) {
+  assignment(id: $id) {
+    title
+    submissions {
+      id
+      text
+      document
+      student {
+        firstName
+        lastName
+      }
+    }
+  }
+}

client/src/graphql/gql/roomsQuery.gql

@@ -1,6 +1,6 @@
 #import "./fragments/roomParts.gql"
 query RoomsQuery {
-  allRooms {
+  rooms {
     edges {
       node {
         ...RoomParts

client/src/pages/rooms.vue

@@ -33,13 +33,10 @@
     },
 
     apollo: {
-      roomQuery: {
+      rooms: {
         query: ROOMS_QUERY,
-        manual: true,
+        update(data) {
-        result({data, loading, networkStatus}) {
+            return this.$getRidOfEdges(data).rooms
-          if (!loading) {
-            this.rooms = this.$getRidOfEdges(data).allRooms
-          }
         }
       }
     },

client/src/pages/submissions.vue

@@ -1,61 +1,49 @@
 <template>
   <div class="submissions-page">
-    <h1 class="submissions-page__title">Auftrag 2 - Aufgabe Interview</h1>
+    <assignment-with-submissions v-if="!$apollo.queries.assignment.loading"
-
+      :assignment="assignment"></assignment-with-submissions>
-    <student-submission class="submissions-page__submission"
-                        v-for="(submission, index) in submissions"
-                        :key="index"
-                        :submission="submission"
-    >
-    </student-submission>
   </div>
 
 </template>
 
 <script>
-  import StudentSubmission from '@/components/StudentSubmission';
+  import AssignmentWithSubmissions from '@/components/AssignmentWithSubmissions';
+
+  import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/assignmentWithSubmissionsQuery.gql';
 
   export default {
     components: {
-      StudentSubmission
+      AssignmentWithSubmissions
+    },
+
+    apollo: {
+      assignment() {
+        return {
+          query: ASSIGNMENT_WITH_SUBMISSIONS_QUERY,
+          variables() {
+            return {
+              id: this.$route.params.id
+            }
+          },
+          update(result) {
+            return result.assignment;
+          }
+        }
+      },
     },
 
     data() {
       return {
-        submissions: [
+        assignment: {
-          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
+          submissions: []
-          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
+        }
-          {name: 'Corinne Stalder', text: 'interview-LG.pdf'},
-          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
-          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
-          {name: 'Corinne Stalder', text: 'interview-LG.pdf'},
-          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
-          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
-          {name: 'Corinne Stalder', text: 'interview-LG.pdf'},
-          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
-          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
-          {name: 'Corinne Stalder', text: 'interview-LG.pdf'}
-        ]
       }
     }
   }
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
-
   .submissions-page {
-    /*grid-column: span 2;*/
     width: 800px;
-    /*padding-left: 150px;*/
-
-    &__title {
-      font-size: toRem(35px);
-    }
-
-    &__submission:first-of-type {
-      border-top: 1px solid $color-grey;
-    }
   }
 </style>

client/src/router/index.js

@@ -28,7 +28,7 @@ const routes = [
         meta: {filter: true}
       },
       {
-        path: 'submissions',
+        path: 'submissions/:id',
         name: 'submissions',
         component: submissions,
         meta: {filter: true}

server/assignments/schema/queries.py

@@ -1,5 +1,4 @@
 from graphene import relay
-import graphene
 from graphene_django.filter import DjangoFilterConnectionField
 
 from assignments.schema.types import AssignmentNode

server/assignments/schema/types.py

@@ -23,5 +23,6 @@ class AssignmentNode(DjangoObjectType):
     def resolve_submission(self, info, **kwargs):
         return self.submissions.filter(student=info.context.user).first()  #  returns None if it doesn't exist yet
 
+    #todo: restrict for students
     def resolve_submissions(self, info, **kwargs):
         return self.submissions.all()

server/rooms/schema.py

@@ -44,7 +44,7 @@ class RoomsQuery(object):
     room_entry = relay.Node.Field(RoomEntryNode)
     room = graphene.Field(RoomNode, slug=graphene.String(), id=graphene.ID(), appearance=graphene.String())
 
-    all_rooms = DjangoFilterConnectionField(RoomNode)
+    rooms = DjangoFilterConnectionField(RoomNode)
     all_room_entries = DjangoFilterConnectionField(RoomEntryNode)
 
     def resolve_room(self, info, **kwargs):

server/user/schema.py

@@ -29,7 +29,8 @@ class UserNode(DjangoObjectType):
 
     # todo: wayyyy to complicated, do we need such a sophisticated role system?
     def resolve_role(self, info, **kwargs):
-        return self.userschoolrole_set.first().school_role.key
+        role = self.userschoolrole_set.first()
+        return role.school_role.key if role is not None else 'student'
 
 
 class SchoolClassNode(DjangoObjectType):