Prevent students from adding new rooms, Verify room form

client/src/components/rooms/RoomForm.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="room-form">
+  <form class="room-form" @submit.prevent="$emit('save', localRoom)">
     <div class="room-form__content">
       <h1 class="room-form__heading">Neues Board</h1>
-
       <label class="room-form__property-heading" for="room-title">Titel</label>
       <input class="skillbox-input room-form__input" v-model="localRoom.title" id="room-title">
       <label class="room-form__property-heading" for="room-description">Beschreibung</label>
@@ -13,6 +12,7 @@
         class="skillbox-input room-form__input"
         id="room-class"
         v-model="localRoom.schoolClass"
+        @change="classSelectionChanged"
       >
         <option disabled value="">-</option>
         <option
@@ -30,13 +30,15 @@
     </div>
     <div class="room-form__footer">
       <button
+        type="submit"
         class="button button--primary room-form__save-button"
-        @click="$emit('save', localRoom)"
+        :class="{'button--disabled': noClassSelected}"
+        :disabled="noClassSelected"
       >Speichern
       </button>
       <router-link to="/rooms" tag="button" class="button">Abbrechen</router-link>
     </div>
-  </div>
+  </form>
 </template>
 
 <script>
@@ -54,7 +56,8 @@
     data() {
       return {
         localRoom: Object.assign({}, this.room),
-        me: {}
+        me: {},
+        noClassSelected: true
       }
     },
 
@@ -68,6 +71,9 @@
       updateColor(newColor) {
         this.localRoom.appearance = newColor;
         this.$store.dispatch('setSpecialContainerClass', newColor);
+      },
+      classSelectionChanged() {
+        this.noClassSelected = this.localRoom.schoolClass.id === undefined;
       }
     },
 

client/src/pages/rooms.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="rooms-page">
     <room-widget v-for="room in filteredRooms" v-bind="room" :key="room.name"></room-widget>
-    <add-room></add-room>
+    <add-room v-if="me.role === 'teacher'"></add-room>
   </div>
 </template>
 
 <script>
   import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
+  import ME_QUERY from '@/graphql/gql/meQuery.gql'
 
   import RoomWidget from '@/components/rooms/RoomWidget.vue';
   import AddRoom from '@/components/rooms/AddRoom.vue';
@@ -38,12 +39,16 @@
         update(data) {
             return this.$getRidOfEdges(data).rooms
         }
-      }
+      },
+      me: {
+        query: ME_QUERY,
+      },
     },
 
     data() {
       return {
-        rooms: []
+        rooms: [],
+        me: {}
       }
     }
   }

client/src/styles/_buttons.scss

@@ -19,4 +19,8 @@
   &--white-bg {
     background-color: $color-white;
   }
+  &--disabled {
+    border: 2px solid $color-lightgrey-2;
+    background-color: $color-lightgrey;
+  }
 }

server/rooms/mutations.py

@@ -34,6 +34,21 @@ class AddRoom(MutateRoom):
     class Input:
         room = graphene.Argument(AddRoomArgument)  # NB: can't be named AddRoomInput, otherwise graphene complains
 
+    @classmethod
+    def mutate_and_get_payload(cls, root, info, **kwargs):
+
+        if info.context.user.user_roles.first().role.key != 'teacher':
+            return cls(room=None, errors=['not allowed'])
+
+        room_data = kwargs.get('room')
+        room_data['school_class'] = get_object(SchoolClass, room_data.get('school_class').id).id
+        serializer = RoomSerializer(data=room_data)
+        if serializer.is_valid():
+            serializer.save()
+            return cls(room=serializer.instance)
+
+        return cls(room=None, errors=['{}: {}'.format(key, value) for key, value in serializer.errors.items()])
+
 
 class UpdateRoom(MutateRoom):
     class Input:
@@ -65,7 +80,6 @@ class AddRoomEntry(relay.ClientIDMutation):
     @classmethod
     def mutate_and_get_payload(cls, *args, **kwargs):
         room_entry_data = kwargs.get('room_entry')
-
         room_entry_data['room'] = get_object(Room, room_entry_data.get('room')).id
 
         serializer = RoomEntrySerializer(data=room_entry_data)