Add room mutation to frontend

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');
+        });
       }
     },
 

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

client/src/graphql/gql/userGroupsQuery.gql

@@ -3,6 +3,7 @@ query UserGroupsQuery {
     edges {
       node {
         id
+        pk
         name
         year
         isDeleted

server/core/management/commands/dummy_rooms.py

@@ -177,7 +177,7 @@ data = [
     },
     {
         'title': 'Interview «Mein neues Umfeld»',
-        'appearance': 'brown'
+        'appearance': 'blue'
     }
 ]