From e94c7c5e8a5114de95e497c13d0810939f9cb2cc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 17 Sep 2018 11:34:36 +0200
Subject: [PATCH 1/6] Update graphene django

---
 Pipfile      |  4 +--
 Pipfile.lock | 69 ++++++++++++++++++++++++++--------------------------
 2 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/Pipfile b/Pipfile
index 63c23cba..ed38fb71 100644
--- a/Pipfile
+++ b/Pipfile
@@ -21,8 +21,8 @@ python-dotenv = "==0.7.1"
 dj-database-url = "==0.4.1"
 raven = "==6.9.0"
 django-extensions = "==1.9.8"
-graphene-django = "==2.0.0"
-django-filter = "==2.0.0.dev1"
+graphene-django = "==2.2.0"
+django-filter = "==2.0.0"
 pillow = "==5.0.0"
 wagtail = "==2.2.2"
 django-cors-headers = "==2.2.0"
diff --git a/Pipfile.lock b/Pipfile.lock
index 0dea226a..c02d842d 100644
--- a/Pipfile.lock
+++ b/Pipfile.lock
@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "a9b9215ef6546bd1d78142e5a1918cb4ba623ff8dd878db3761baa0866c39527"
+            "sha256": "22744fc51ea36160ffcfa7253af7639a5290f7fd6f0a28a07752bd2904e8b39f"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -41,18 +41,18 @@
         },
         "boto3": {
             "hashes": [
-                "sha256:3937eaba7cc429d1593824397f1d7dda4c9565c1269e8d3f665cee3c1b1b955c",
-                "sha256:ae1bc72a3921807ef8c0daa6c4bd147e6caa630df263e5ea5e8c36535e17ee73"
+                "sha256:2152e0da8098665e6a03bbbde1de1b4fafdef7151010d1f0e53693a3f2a1deb0",
+                "sha256:323660fd1aa9c95fe90003f44c5fc37cbb891a8b506fa346967d14edcbcb90a4"
             ],
             "index": "pypi",
-            "version": "==1.8.9"
+            "version": "==1.9.4"
         },
         "botocore": {
             "hashes": [
-                "sha256:1294d1422b278dac28869d5b96156171dd8d5b609da28fec006add8a81a31dfa",
-                "sha256:91c32b97dd2f1046b1de3ce5c8bc19cf4993bc631864c9fcbf51f261bc3a7aab"
+                "sha256:3b2cab368572ee987a6236321ddea491e4253c819009c87ebc9e42e60371e3ae",
+                "sha256:7834eba53c6bedea21eb76f25a39e477dede3a24aeb51ff19c0248ea8348f007"
             ],
-            "version": "==1.11.9"
+            "version": "==1.12.4"
         },
         "certifi": {
             "hashes": [
@@ -123,11 +123,11 @@
         },
         "django-filter": {
             "hashes": [
-                "sha256:57c12c8ed40861e8ec7219ea65adcdd92ed0ea4c5b76a86f9ff9216a80dd5af7",
-                "sha256:57c5507b0011058a7f2d2227b7ef9fea27e69e53ef65da6d2fbd0b27cdaafed3"
+                "sha256:6f4e4bc1a11151178520567b50320e5c32f8edb552139d93ea3e30613b886f56",
+                "sha256:86c3925020c27d072cdae7b828aaa5d165c2032a629abbe3c3a1be1edae61c58"
             ],
             "index": "pypi",
-            "version": "==2.0.0.dev1"
+            "version": "==2.0.0"
         },
         "django-libsass": {
             "hashes": [
@@ -168,7 +168,7 @@
                 "sha256:b6714c3e4b0f8d524f193c91ecf5f5450092c2145439ac2769711f7eba89a9d9",
                 "sha256:c375e4f95a3a64fccac412e36fb42ba36881e52313ec021ef410b40f67cddca4"
             ],
-            "markers": "python_version != '3.3.*' and python_version >= '2.7' and python_version != '3.2.*' and python_version != '3.0.*' and python_version != '3.1.*'",
+            "markers": "python_version >= '2.7' and python_version != '3.3.*' and python_version != '3.2.*' and python_version != '3.1.*' and python_version != '3.0.*'",
             "version": "==3.8.2"
         },
         "docutils": {
@@ -195,10 +195,11 @@
         },
         "faker": {
             "hashes": [
-                "sha256:ea7cfd3aeb1544732d08bd9cfba40c5b78e3a91e17b1a0698ab81bfc5554c628",
-                "sha256:f6d67f04abfb2b4bea7afc7fa6c18cf4c523a67956e455668be9ae42bccc21ad"
+                "sha256:74b32991f8e08e4f2f84858b919eca253becfaec4b3fa5fcff7fdbd70d5d78b1",
+                "sha256:c2ce42dd8361e6d392276006d757532562463c8642b1086709584200b7fd7758"
             ],
-            "version": "==0.9.0"
+            "markers": "python_version >= '2.7' and python_version != '3.1.*' and python_version != '3.0.*' and python_version != '3.2.*'",
+            "version": "==0.9.1"
         },
         "graphene": {
             "hashes": [
@@ -209,11 +210,11 @@
         },
         "graphene-django": {
             "hashes": [
-                "sha256:5cabf46b59f242a533fe1df1912c87d5ad6606246937609be2e6c9086cfdf7a4",
-                "sha256:70d9358bc48c806b6a9458e8344f0a1211cd1f1ef923a092aa55e6bcacc2c3fc"
+                "sha256:3afd81d47c8b702650e05cc1179fac1cfceae991d241bb164d51f28bed9ec95c",
+                "sha256:760a18068feb5457e2ec00d2447c09b2fbac2a6b8c32cc8be2abce3752107ad3"
             ],
             "index": "pypi",
-            "version": "==2.0.0"
+            "version": "==2.2.0"
         },
         "graphql-core": {
             "hashes": [
@@ -250,14 +251,6 @@
             ],
             "version": "==2.7"
         },
-        "iso8601": {
-            "hashes": [
-                "sha256:210e0134677cc0d02f6028087fee1df1e1d76d372ee1db0bf30bf66c5c1c89a3",
-                "sha256:49c4b20e1f38aa5cf109ddcd39647ac419f928512c869dc01d5c7098eddede82",
-                "sha256:bbbae5fb4a7abfe71d4688fd64bff70b91bbd74ef6a99d964bab18f7fdf286dd"
-            ],
-            "version": "==0.1.12"
-        },
         "jmespath": {
             "hashes": [
                 "sha256:6a81d4c9aa62caf061cb517b4d9ad1dd300374cd4706997aff9cd6aedd61fc64",
@@ -403,7 +396,7 @@
                 "sha256:63b52e3c866428a224f97cab011de738c36aec0185aa91cfacd418b5d58911d1",
                 "sha256:ec22d826a36ed72a7358ff3fe56cbd4ba69dd7a6718ffd450ff0e9df7a47ce6a"
             ],
-            "markers": "python_version != '3.3.*' and python_version < '4' and python_version != '3.2.*' and python_version != '3.1.*' and python_version >= '2.6' and python_version != '3.0.*'",
+            "markers": "python_version != '3.3.*' and python_version != '3.2.*' and python_version < '4' and python_version != '3.1.*' and python_version >= '2.6' and python_version != '3.0.*'",
             "version": "==2.19.1"
         },
         "rjsmin": {
@@ -467,7 +460,7 @@
                 "sha256:a68ac5e15e76e7e5dd2b8f94007233e01effe3e50e8daddf69acfd81cb686baf",
                 "sha256:b5725a0bd4ba422ab0e66e89e030c806576753ea3ee08554382c14e685d117b5"
             ],
-            "markers": "python_version != '3.0.*' and python_version != '3.3.*' and python_version != '3.1.*' and python_version < '4' and python_version >= '2.6' and python_version != '3.2.*'",
+            "markers": "python_version != '3.1.*' and python_version != '3.0.*' and python_version < '4' and python_version >= '2.6' and python_version != '3.2.*' and python_version != '3.3.*'",
             "version": "==1.23"
         },
         "wagtail": {
@@ -506,13 +499,21 @@
         }
     },
     "develop": {
+        "appnope": {
+            "hashes": [
+                "sha256:5b26757dc6f79a3b7dc9fab95359328d5747fcb2409d331ea66d0272b90ab2a0",
+                "sha256:8b995ffe925347a2138d7ac0fe77155e4311a0ea6d6da4f5128fe4b3cbe5ed71"
+            ],
+            "markers": "sys_platform == 'darwin'",
+            "version": "==0.1.0"
+        },
         "awscli": {
             "hashes": [
-                "sha256:ef7145fe16d4995121868237dc30051dc9238af6211f9dc57cfb1937ea962990",
-                "sha256:f953de87b96fc9d237603146c34b0b979ebc31e0f2eb43ce77deb7ab563b47dd"
+                "sha256:27009baa405935d7229ca551d9433e029a05d68fbc99548e1cbe8fc759b5af43",
+                "sha256:6d1509d1b00618ad2bda119eb6e6f1a427b22eff006c0f705d3f8b5e3fea0932"
             ],
             "index": "pypi",
-            "version": "==1.16.9"
+            "version": "==1.16.14"
         },
         "backcall": {
             "hashes": [
@@ -523,10 +524,10 @@
         },
         "botocore": {
             "hashes": [
-                "sha256:1294d1422b278dac28869d5b96156171dd8d5b609da28fec006add8a81a31dfa",
-                "sha256:91c32b97dd2f1046b1de3ce5c8bc19cf4993bc631864c9fcbf51f261bc3a7aab"
+                "sha256:3b2cab368572ee987a6236321ddea491e4253c819009c87ebc9e42e60371e3ae",
+                "sha256:7834eba53c6bedea21eb76f25a39e477dede3a24aeb51ff19c0248ea8348f007"
             ],
-            "version": "==1.11.9"
+            "version": "==1.12.4"
         },
         "colorama": {
             "hashes": [
@@ -699,7 +700,7 @@
                 "sha256:a68ac5e15e76e7e5dd2b8f94007233e01effe3e50e8daddf69acfd81cb686baf",
                 "sha256:b5725a0bd4ba422ab0e66e89e030c806576753ea3ee08554382c14e685d117b5"
             ],
-            "markers": "python_version != '3.0.*' and python_version != '3.3.*' and python_version != '3.1.*' and python_version < '4' and python_version >= '2.6' and python_version != '3.2.*'",
+            "markers": "python_version != '3.1.*' and python_version != '3.0.*' and python_version < '4' and python_version >= '2.6' and python_version != '3.2.*' and python_version != '3.3.*'",
             "version": "==1.23"
         },
         "wcwidth": {

From fe59a65e877a94eb2edd5decfdd3c5d41d891f4c Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 17 Sep 2018 11:35:49 +0200
Subject: [PATCH 2/6] Add room mutation

---
 Pipfile                                      |  1 +
 Pipfile.lock                                 |  4 ++--
 client/src/graphql/gql/mutations/addRoom.gql | 25 ++++++++++++++++++++
 server/api/schema.py                         |  4 ++--
 server/rooms/schema.py                       | 19 ++++++++-------
 server/rooms/serializers.py                  | 10 ++++++++
 6 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100644 client/src/graphql/gql/mutations/addRoom.gql
 create mode 100644 server/rooms/serializers.py

diff --git a/Pipfile b/Pipfile
index ed38fb71..706d2719 100644
--- a/Pipfile
+++ b/Pipfile
@@ -23,6 +23,7 @@ raven = "==6.9.0"
 django-extensions = "==1.9.8"
 graphene-django = "==2.2.0"
 django-filter = "==2.0.0"
+djangorestframework = "==3.8.2"
 pillow = "==5.0.0"
 wagtail = "==2.2.2"
 django-cors-headers = "==2.2.0"
diff --git a/Pipfile.lock b/Pipfile.lock
index c02d842d..94b952f3 100644
--- a/Pipfile.lock
+++ b/Pipfile.lock
@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "22744fc51ea36160ffcfa7253af7639a5290f7fd6f0a28a07752bd2904e8b39f"
+            "sha256": "2341eacc0bfdcc8c231c5ebf696c89360052a264240118f3b509c927aeaf611b"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -168,7 +168,7 @@
                 "sha256:b6714c3e4b0f8d524f193c91ecf5f5450092c2145439ac2769711f7eba89a9d9",
                 "sha256:c375e4f95a3a64fccac412e36fb42ba36881e52313ec021ef410b40f67cddca4"
             ],
-            "markers": "python_version >= '2.7' and python_version != '3.3.*' and python_version != '3.2.*' and python_version != '3.1.*' and python_version != '3.0.*'",
+            "index": "pypi",
             "version": "==3.8.2"
         },
         "docutils": {
diff --git a/client/src/graphql/gql/mutations/addRoom.gql b/client/src/graphql/gql/mutations/addRoom.gql
new file mode 100644
index 00000000..e6711c67
--- /dev/null
+++ b/client/src/graphql/gql/mutations/addRoom.gql
@@ -0,0 +1,25 @@
+mutation AddRoomMutation($input: RoomMutationInput!) {
+  room(input: $input) {
+    id,
+    title,
+    slug,
+    title,
+    description,
+    appearance,
+    clientMutationId,
+    errors {
+      field
+      messages
+    }
+  }
+}
+
+
+
+#{
+#  "input": {
+#  "title": "Neuer Raum",
+#  "description": "So eine Beschreibung",
+#  "userGroup": 4
+#}
+#}
diff --git a/server/api/schema.py b/server/api/schema.py
index 0575a845..fa6fe9a5 100644
--- a/server/api/schema.py
+++ b/server/api/schema.py
@@ -9,7 +9,7 @@ from api import graphene_wagtail
 from book.schema.mutations import BookMutations
 from filteredbook.schema import BookQuery
 from objectives.schema import ObjectivesQuery
-from rooms.schema import RoomsQuery
+from rooms.schema import RoomsQuery, RoomMutations
 from user.schema import UsersQuery
 
 
@@ -20,7 +20,7 @@ class Query(UsersQuery, RoomsQuery, ObjectivesQuery, BookQuery, graphene.ObjectT
         debug = graphene.Field(DjangoDebug, name='__debug')
 
 
-class Mutation(graphene.ObjectType, BookMutations):
+class Mutation(BookMutations, RoomMutations, graphene.ObjectType):
 
     if settings.DEBUG:
         debug = graphene.Field(DjangoDebug, name='__debug')
diff --git a/server/rooms/schema.py b/server/rooms/schema.py
index 317d278e..dc4f37ba 100644
--- a/server/rooms/schema.py
+++ b/server/rooms/schema.py
@@ -2,8 +2,10 @@ import graphene
 from graphene import relay
 from graphene_django import DjangoObjectType
 from graphene_django.filter import DjangoFilterConnectionField
+from graphene_django.rest_framework.mutation import SerializerMutation
 
 from rooms.models import Room, RoomEntry
+from rooms.serializers import RoomSerializer
 from user.schema import UserNode
 
 
@@ -37,18 +39,17 @@ class RoomNode(DjangoObjectType):
 
 
 class RoomsQuery(object):
-    room = graphene.Field(RoomNode, slug=graphene.String(), id=graphene.Int(), appearance=graphene.String())
+    room = relay.Node.Field(RoomNode)
     room_entry = relay.Node.Field(RoomEntryNode)
 
     all_rooms = DjangoFilterConnectionField(RoomNode)
     all_room_entries = DjangoFilterConnectionField(RoomEntryNode)
 
-    def resolve_room(self, info, **kwargs):
-        slug = kwargs.get('slug')
-        room_id = kwargs.get('id')
 
-        if room_id is not None:
-            return Room.objects.get(pk=room_id)
-        if slug is not None:
-            return Room.objects.get(slug=slug)
-        return None
+class RoomMutation(SerializerMutation):
+    class Meta:
+        serializer_class = RoomSerializer
+
+
+class RoomMutations:
+    room = RoomMutation.Field()
diff --git a/server/rooms/serializers.py b/server/rooms/serializers.py
new file mode 100644
index 00000000..334e5ea0
--- /dev/null
+++ b/server/rooms/serializers.py
@@ -0,0 +1,10 @@
+from rest_framework import serializers
+
+from rooms.models import Room
+
+
+class RoomSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Room
+        fields = ('id', 'title', 'description', 'slug', 'user_group', 'appearance', )
+        read_only_fields = ('id', 'slug', )

From 5cb71cd877fb694a14cf50dc5d712e2fea887577 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 17 Sep 2018 17:52:43 +0200
Subject: [PATCH 3/6] Update room color handling

---
 client/src/components/rooms/NewRoom.vue    | 33 ++++++++++++++++++----
 client/src/components/rooms/RoomColors.vue | 14 +++++----
 client/src/layouts/DefaultLayout.vue       | 17 +++++------
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/client/src/components/rooms/NewRoom.vue b/client/src/components/rooms/NewRoom.vue
index 87c8563d..a2018233 100644
--- a/client/src/components/rooms/NewRoom.vue
+++ b/client/src/components/rooms/NewRoom.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="new-room">
     <div class="new-room__content">
-      <h1 class="new-room__heading">Neues Board</h1>
+      <h1 class="new-room__heading">Neues Board {{room.title}}</h1>
 
       <h2 class="new-room__property-heading">Titel</h2>
-      <input class="skillbox-input new-room__input">
+      <input class="skillbox-input new-room__input" v-model="room.title">
       <h2 class="new-room__property-heading">Beschreibung</h2>
-      <textarea class="skillbox-textarea new-room__textarea"></textarea>
+      <textarea class="skillbox-textarea new-room__textarea" v-model="room.description"></textarea>
       <h2 class="new-room__property-heading">Farbe</h2>
-      <room-colors></room-colors>
+      <room-colors
+        :selected-color="room.appearance"
+        v-on:input="updateColor"
+      ></room-colors>
     </div>
     <div class="new-room__footer">
       <button class="button button--primary new-room__save-button">Speichern</button>
@@ -21,13 +24,33 @@
 <script>
   import RoomColors from '@/components/rooms/RoomColors';
 
+  const defaultColor = 'blue';
+
   export default {
     components: {
       RoomColors
     },
 
+    data() {
+      return {
+        room: {
+          appearance: defaultColor,
+          title: '',
+          description: '',
+          userGroup: 1
+        }
+      }
+    },
+
+    methods: {
+      updateColor(newColor) {
+        this.room.appearance = newColor;
+        this.$store.dispatch('setSpecialContainerClass', newColor);
+      }
+    },
+
     created() {
-      this.$store.dispatch('setSpecialContainerClass', 'red');
+      this.$store.dispatch('setSpecialContainerClass', defaultColor);
     },
 
     beforeDestroy() {
diff --git a/client/src/components/rooms/RoomColors.vue b/client/src/components/rooms/RoomColors.vue
index aae1557e..af2006bc 100644
--- a/client/src/components/rooms/RoomColors.vue
+++ b/client/src/components/rooms/RoomColors.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="room-colors">
-    <div v-for="color in colors" class="room-colors__color-wrapper"
-         :class="{'room-colors__color-wrapper--selected': color.selected}">
+    <div v-for="(color, index) in colors"
+         :key="index"
+         class="room-colors__color-wrapper"
+         @click="$emit('input', color.name)"
+         :class="{'room-colors__color-wrapper--selected': selectedColor === color.name}">
       <div class="room-colors__color" :class="'room-colors__color--' + color.name">
-        <tick class="room-colors__selected-icon" v-if="color.selected"></tick>
+        <tick class="room-colors__selected-icon" v-if="selectedColor === color.name"></tick>
       </div>
     </div>
   </div>
@@ -13,12 +16,13 @@
   import Tick from '@/components/icons/Tick';
 
   export default {
+    props: ['selected-color'],
+
     data() {
       return {
         colors: [
           {
-            name: 'yellow',
-            selected: true
+            name: 'yellow'
           },
           {
             name: 'blue'
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 9ac57942..f05419ac 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -64,16 +64,17 @@
     -ms-grid-rows: auto 32px 1fr; // 1 extra row for gap
     -ms-grid-columns: 1fr;
 
-    &--red { // todo: define a better name when usage is clear
-      background-color: $red;
+    &--yellow {
+      background-color: $color-accent-1;
     }
-
-    &--green { // todo: define a better name when usage is clear
-      background-color: $green;
+    &--blue {
+      background-color: $color-accent-2;
     }
-
-    &--brown { // todo: define a better name when usage is clear
-      background-color: $brown;
+    &--red {
+      background-color: $color-accent-3;
+    }
+    &--green {
+      background-color: $color-accent-4;
     }
 
     &__header {

From 1927244f26479fe09204e79433d3a4e5e9590a22 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 17 Sep 2018 17:53:14 +0200
Subject: [PATCH 4/6] Fix room querying

---
 server/rooms/schema.py | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/server/rooms/schema.py b/server/rooms/schema.py
index dc4f37ba..85a96729 100644
--- a/server/rooms/schema.py
+++ b/server/rooms/schema.py
@@ -39,12 +39,23 @@ class RoomNode(DjangoObjectType):
 
 
 class RoomsQuery(object):
-    room = relay.Node.Field(RoomNode)
+    # room = relay.Node.Field(RoomNode)
     room_entry = relay.Node.Field(RoomEntryNode)
+    room = graphene.Field(RoomNode, slug=graphene.String(), id=graphene.Int(), appearance=graphene.String())
 
     all_rooms = DjangoFilterConnectionField(RoomNode)
     all_room_entries = DjangoFilterConnectionField(RoomEntryNode)
 
+    def resolve_room(self, info, **kwargs):
+        slug = kwargs.get('slug')
+        room_id = kwargs.get('id')
+
+        if room_id is not None:
+            return Room.objects.get(pk=room_id)
+        if slug is not None:
+            return Room.objects.get(slug=slug)
+        return None
+
 
 class RoomMutation(SerializerMutation):
     class Meta:
@@ -52,4 +63,4 @@ class RoomMutation(SerializerMutation):
 
 
 class RoomMutations:
-    room = RoomMutation.Field()
+    add_room = RoomMutation.Field()

From 345b2694359425666704da7bfec248aa2484ba3f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 17 Sep 2018 18:54:26 +0200
Subject: [PATCH 5/6] Move background colors to mixin

---
 client/src/components/rooms/RoomColors.vue | 14 ++------------
 client/src/components/rooms/RoomWidget.vue | 10 +---------
 client/src/layouts/DefaultLayout.vue       | 14 ++------------
 client/src/styles/_mixins.scss             | 16 ++++++++++++++++
 4 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/client/src/components/rooms/RoomColors.vue b/client/src/components/rooms/RoomColors.vue
index af2006bc..c787329c 100644
--- a/client/src/components/rooms/RoomColors.vue
+++ b/client/src/components/rooms/RoomColors.vue
@@ -45,6 +45,7 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .room-colors {
     display: flex;
@@ -72,18 +73,7 @@
       justify-items: center;
       align-items: center;
 
-      &--yellow {
-        background-color: $color-accent-1;
-      }
-      &--blue {
-        background-color: $color-accent-2;
-      }
-      &--red {
-        background-color: $color-accent-3;
-      }
-      &--green {
-        background-color: $color-accent-4;
-      }
+      @include skillbox-colors;
     }
   }
 </style>
diff --git a/client/src/components/rooms/RoomWidget.vue b/client/src/components/rooms/RoomWidget.vue
index e1e8e96b..45ce4e64 100644
--- a/client/src/components/rooms/RoomWidget.vue
+++ b/client/src/components/rooms/RoomWidget.vue
@@ -56,15 +56,7 @@
     -ms-grid-rows: 210px 1fr;
     -ms-grid-columns: 1fr;
 
-    &--red {
-      background-color: $red;
-    }
-    &--green {
-      background-color: $green;
-    }
-    &--brown {
-      background-color: $brown;
-    }
+    @include skillbox-colors;
 
     svg {
       width: 30px;
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index f05419ac..ac2eb8c1 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -46,6 +46,7 @@
 
 <style lang="scss" scoped>
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .skillbox {
     margin: 0 auto;
@@ -64,18 +65,7 @@
     -ms-grid-rows: auto 32px 1fr; // 1 extra row for gap
     -ms-grid-columns: 1fr;
 
-    &--yellow {
-      background-color: $color-accent-1;
-    }
-    &--blue {
-      background-color: $color-accent-2;
-    }
-    &--red {
-      background-color: $color-accent-3;
-    }
-    &--green {
-      background-color: $color-accent-4;
-    }
+    @include skillbox-colors;
 
     &__header {
       grid-area: h;
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index daf87480..35e91da5 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -11,3 +11,19 @@
   font-size: 1rem;
   fill: $color-darkgrey-1;
 }
+
+@mixin skillbox-colors {
+  &--yellow {
+    background-color: $color-accent-1;
+  }
+  &--blue {
+    background-color: $color-accent-2;
+  }
+  &--red {
+    background-color: $color-accent-3;
+  }
+  &--green {
+    background-color: $color-accent-4;
+  }
+
+}

From db61ca560a9953aea78150131d4bf215bdefbc90 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 17 Sep 2018 18:56:24 +0200
Subject: [PATCH 6/6] Add room mutation to frontend

---
 client/src/components/rooms/NewRoom.vue       | 31 ++++++++++++++++++-
 client/src/graphql/gql/mutations/addRoom.gql  | 18 ++++++-----
 client/src/graphql/gql/userGroupsQuery.gql    |  1 +
 .../core/management/commands/dummy_rooms.py   |  2 +-
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/client/src/components/rooms/NewRoom.vue b/client/src/components/rooms/NewRoom.vue
index a2018233..f94d8b13 100644
--- a/client/src/components/rooms/NewRoom.vue
+++ b/client/src/components/rooms/NewRoom.vue
@@ -14,7 +14,11 @@
       ></room-colors>
     </div>
     <div class="new-room__footer">
-      <button class="button button--primary new-room__save-button">Speichern</button>
+      <button
+        class="button button--primary new-room__save-button"
+        @click="addRoom(room)"
+      >Speichern
+      </button>
       <button class="button">Abbrechen</button>
     </div>
   </div>
@@ -24,6 +28,9 @@
 <script>
   import RoomColors from '@/components/rooms/RoomColors';
 
+  import ADD_ROOM_MUTATION from '@/graphql/gql/mutations/addRoom.gql';
+  import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
+
   const defaultColor = 'blue';
 
   export default {
@@ -46,6 +53,28 @@
       updateColor(newColor) {
         this.room.appearance = newColor;
         this.$store.dispatch('setSpecialContainerClass', newColor);
+      },
+      addRoom(room) {
+        this.$apollo.mutate({
+          mutation: ADD_ROOM_MUTATION,
+          variables: {
+            input: {
+              title: room.title,
+              description: room.description,
+              userGroup: 1,
+              appearance: room.appearance
+            }
+          },
+          update: (store, {data: {addRoom}}) => {
+            const data = store.readQuery({query: ROOMS_QUERY});
+            if (data.allRooms) {
+              data.allRooms.edges.push({node: addRoom});
+              store.writeQuery({query: ROOMS_QUERY, data});
+            }
+          }
+        }).then(() => {
+          this.$router.push('/rooms');
+        });
       }
     },
 
diff --git a/client/src/graphql/gql/mutations/addRoom.gql b/client/src/graphql/gql/mutations/addRoom.gql
index e6711c67..802f419e 100644
--- a/client/src/graphql/gql/mutations/addRoom.gql
+++ b/client/src/graphql/gql/mutations/addRoom.gql
@@ -1,12 +1,14 @@
 mutation AddRoomMutation($input: RoomMutationInput!) {
-  room(input: $input) {
-    id,
-    title,
-    slug,
-    title,
-    description,
-    appearance,
-    clientMutationId,
+  addRoom(input: $input) {
+    id
+    title
+    slug
+    title
+    description
+    appearance
+    userGroup
+    __typename
+    clientMutationId
     errors {
       field
       messages
diff --git a/client/src/graphql/gql/userGroupsQuery.gql b/client/src/graphql/gql/userGroupsQuery.gql
index 1e3356be..760865da 100644
--- a/client/src/graphql/gql/userGroupsQuery.gql
+++ b/client/src/graphql/gql/userGroupsQuery.gql
@@ -3,6 +3,7 @@ query UserGroupsQuery {
     edges {
       node {
         id
+        pk
         name
         year
         isDeleted
diff --git a/server/core/management/commands/dummy_rooms.py b/server/core/management/commands/dummy_rooms.py
index 2481fea9..460d43c9 100644
--- a/server/core/management/commands/dummy_rooms.py
+++ b/server/core/management/commands/dummy_rooms.py
@@ -177,7 +177,7 @@ data = [
     },
     {
         'title': 'Interview «Mein neues Umfeld»',
-        'appearance': 'brown'
+        'appearance': 'blue'
     }
 ]