Add user group to room form

client/src/components/rooms/EditRoom.vue

@@ -28,7 +28,7 @@
                 title: room.title,
                 appearance: room.appearance,
                 description: room.description,
-                userGroup: room.userGroup.id
+                userGroup: room.userGroup
               }
             }
           }

client/src/components/rooms/NewRoom.vue

@@ -24,7 +24,7 @@
           appearance: defaultColor,
           title: '',
           description: '',
-          userGroup: 'VXNlckdyb3VwTm9kZToxMw=='
+          userGroup: {}
         }
       }
     },

client/src/components/rooms/RoomForm.vue

@@ -3,10 +3,25 @@
     <div class="room-form__content">
       <h1 class="room-form__heading">Neues Board</h1>
 
-      <h2 class="room-form__property-heading">Titel</h2>
-      <input class="skillbox-input room-form__input" v-model="localRoom.title">
-      <h2 class="room-form__property-heading">Beschreibung</h2>
-      <textarea class="skillbox-textarea room-form__textarea" v-model="localRoom.description"></textarea>
+      <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>
+      <textarea class="skillbox-textarea room-form__textarea" v-model="localRoom.description"
+                id="room-description"></textarea>
+      <label class="room-form__property-heading" for="room-class">Klasse</label>
+      <select
+        class="skillbox-input room-form__input"
+        id="room-class"
+        v-model="localRoom.userGroup"
+      >
+        <option disabled value="">-</option>
+        <option
+          v-for="userGroup in userGroups"
+          :key="userGroup.id"
+          v-bind:value="userGroup"
+        >{{userGroup.name}}
+        </option>
+      </select>
       <h2 class="room-form__property-heading">Farbe</h2>
       <room-colors
         :selected-color="localRoom.appearance"
@@ -19,7 +34,7 @@
         @click="$emit('save', localRoom)"
       >Speichern
       </button>
-      <button class="button">Abbrechen</button>
+      <router-link to="/rooms" tag="button" class="button">Abbrechen</router-link>
     </div>
   </div>
 </template>
@@ -27,6 +42,8 @@
 <script>
   import RoomColors from '@/components/rooms/RoomColors';
 
+  import {userGroupsQuery} from '@/helpers/user-groups'
+
   export default {
     props: ['room'],
 
@@ -36,7 +53,8 @@
 
     data() {
       return {
-        localRoom: Object.assign({}, this.room)
+        localRoom: Object.assign({}, this.room),
+        userGroups: []
       }
     },
 
@@ -47,6 +65,10 @@
       }
     },
 
+    apollo: {
+      userGroupsQuery: userGroupsQuery
+    },
+
     created() {
       this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
     },
@@ -63,13 +85,13 @@
 
   .room-form {
     width: 710px;
-    height: 760px;
+    min-height: 760px;
     max-height: 100%;
     box-sizing: border-box;
     background-color: $color-white;
     border-radius: $default-border-radius;
     display: grid;
-    grid-template-rows: auto 65px;
+    grid-template-rows: 1fr 65px;
 
     &__heading {
       font-size: toRem(35px);
@@ -85,8 +107,11 @@
     }
 
     &__property-heading {
+      display: block;
       font-size: toRem(21px);
       font-weight: 800;
+      margin-bottom: 24px;
+      font-family: $sans-serif-font-family;
     }
 
     &__input,

client/src/graphql/client.js

@@ -11,7 +11,7 @@ const httpLink = new HttpLink({
   headers: {
     'X-CSRFToken': document.cookie.replace(/(?:(?:^|.*;\s*)csrftoken\s*=\s*([^;]*).*$)|^.*$/, '$1')
   }
-})
+});
 
 const consoleLink = new ApolloLink((operation, forward) => {
   // console.log(`starting request for ${operation.operationName}`);
@@ -21,9 +21,22 @@ const consoleLink = new ApolloLink((operation, forward) => {
 
     return data
   })
-})
+});
 
-const composedLink = ApolloLink.from([consoleLink, httpLink]);
+// from https://github.com/apollographql/apollo-client/issues/1564#issuecomment-357492659
+const omitTypename = (key, value) => {
+  return key === '__typename' ? undefined : value
+};
+
+const createOmitTypenameLink = new ApolloLink((operation, forward) => {
+  if (operation.variables) {
+    operation.variables = JSON.parse(JSON.stringify(operation.variables), omitTypename)
+  }
+
+  return forward(operation)
+});
+
+const composedLink = ApolloLink.from([createOmitTypenameLink, consoleLink, httpLink]);
 
 const cache = new InMemoryCache({
   cacheRedirects: {

client/src/styles/_forms.scss

@@ -6,6 +6,7 @@
   box-sizing: border-box;
   border: 1px solid $color-lightgrey;
   max-width: 100%;
+  background-color: $color-white;
 }
 
 .skillbox-input {

server/rooms/inputs.py

@@ -1,11 +1,13 @@
 import graphene
 from graphene import InputObjectType
 
+from user.inputs import UserGroupInput
+
 
 class RoomInput(InputObjectType):
     title = graphene.String()
     description = graphene.String()
-    user_group = graphene.ID()
+    user_group = UserGroupInput()
     appearance = graphene.String()
 
 

server/rooms/mutations.py

@@ -17,7 +17,7 @@ class MutateRoom(relay.ClientIDMutation):
     @classmethod
     def mutate_and_get_payload(cls, *args, **kwargs):
         room_data = kwargs.get('room')
-        user_group = get_object(UserGroup, room_data.get('user_group'))
+        user_group = get_object(UserGroup, room_data.get('user_group').get('id'))
         room_data['user_group'] = user_group.id
         if room_data.get('id') is not None:
             room = get_object(Room, room_data['id'])

server/user/inputs.py

@@ -0,0 +1,8 @@
+import graphene
+from graphene import InputObjectType
+
+
+class UserGroupInput(InputObjectType):
+    id = graphene.ID()
+    name = graphene.String()
+    year = graphene.Int()