Generalize room mutation using serializer

client/src/components/rooms/NewRoom.vue

@@ -16,7 +16,7 @@
     <div class="new-room__footer">
       <button
         class="button button--primary new-room__save-button"
-        @click="addRoom(room)"
+        @click="mutateRoom(room)"
       >Speichern
       </button>
       <button class="button">Abbrechen</button>
@@ -28,7 +28,7 @@
 <script>
   import RoomColors from '@/components/rooms/RoomColors';
 
-  import ADD_ROOM_MUTATION from '@/graphql/gql/mutations/addRoom.gql';
+  import ROOM_MUTATION from '@/graphql/gql/mutations/mutateRoom.gql';
   import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
 
   const defaultColor = 'blue';
@@ -44,7 +44,7 @@
           appearance: defaultColor,
           title: '',
           description: '',
-          userGroup: 1
+          userGroup: 'VXNlckdyb3VwTm9kZToy'
         }
       }
     },
@@ -54,21 +54,21 @@
         this.room.appearance = newColor;
         this.$store.dispatch('setSpecialContainerClass', newColor);
       },
-      addRoom(room) {
+      mutateRoom(room) {
         this.$apollo.mutate({
-          mutation: ADD_ROOM_MUTATION,
+          mutation: ROOM_MUTATION,
           variables: {
             input: {
-              title: room.title,
+              room: room
-              description: room.description,
-              userGroup: 1,
-              appearance: room.appearance
             }
           },
-          update: (store, {data: {addRoom}}) => {
+          update: (store, {data: {mutateRoom: {room}}}) => {
             const data = store.readQuery({query: ROOMS_QUERY});
             if (data.allRooms) {
-              data.allRooms.edges.push({node: addRoom});
+              data.allRooms.edges.push({
+                node: room,
+                __typename: 'RoomNode'
+              });
               store.writeQuery({query: ROOMS_QUERY, data});
             }
           }

client/src/graphql/gql/fragments/roomParts.gql

@@ -0,0 +1,12 @@
+fragment RoomParts on RoomNode {
+  id
+  slug
+  title
+  entryCount
+  appearance
+  userGroup {
+    id
+    name
+    year
+  }
+}

client/src/graphql/gql/mutations/addRoom.gql

@@ -1,27 +0,0 @@
-mutation AddRoomMutation($input: RoomMutationInput!) {
-  addRoom(input: $input) {
-    id
-    title
-    slug
-    title
-    description
-    appearance
-    userGroup
-    __typename
-    clientMutationId
-    errors {
-      field
-      messages
-    }
-  }
-}
-
-
-
-#{
-#  "input": {
-#  "title": "Neuer Raum",
-#  "description": "So eine Beschreibung",
-#  "userGroup": 4
-#}
-#}

client/src/graphql/gql/mutations/mutateRoom.gql

@@ -0,0 +1,22 @@
+#import "../fragments/roomParts.gql"
+mutation MutateRoom($input: MutateRoomInput!){
+  mutateRoom(input: $input) {
+    room {
+      ...RoomParts
+    },
+    errors
+  }
+}
+
+#{
+#"input": {
+#  "room":
+#    {
+#    "title": "Hallo",
+#    "appearance": "red",
+#    "description": "Velo",
+#    "userGroup": "VXNlckdyb3VwTm9kZToy",
+#    "id": "Um9vbU5vZGU6MTc="
+#    }
+#  }
+#}

client/src/graphql/gql/roomsQuery.gql

@@ -1,17 +1,9 @@
+#import "./fragments/roomParts.gql"
 query RoomsQuery {
   allRooms {
     edges {
       node {
-        id
+        ...RoomParts
-        slug
-        title
-        entryCount
-        appearance
-        userGroup {
-          id
-          name
-          year
-        }
       }
     }
   }

client/src/pages/rooms.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="rooms-page">
-    <room-widget v-for="room in rooms" v-bind="room" :key="room.title"></room-widget>
+    <room-widget v-for="room in rooms" v-bind="room" :key="room.id"></room-widget>
     <add-room></add-room>
   </div>
 </template>

server/api/schema.py

@@ -9,7 +9,8 @@ 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, RoomMutations
+from rooms.mutations import RoomMutations
+from rooms.schema import RoomsQuery
 from user.schema import UsersQuery
 
 

server/book/schema/mutations.py

@@ -100,24 +100,6 @@ class MutateContentBlock(relay.ClientIDMutation):
 
             content_block.save()
 
-            # content_block.add_sibling(instance=new_content_block, pos='right')
-
-            # ContentBlock.objects.get()
-            # cb.add_sibling()
-
-            # new_content_block.saveI()
-
-            # image_instance = get_object(Image, kwargs['id'])
-            # if image_instance:
-            #     image_data = kwargs.get('image')
-            #     updated_image = update_create_instance(image_instance, image_data, exception=['id', 'tags'])
-            #     tag_slugs = image_data.get('tag_slugs', '')
-            #     if tag_slugs is not None:
-            #         tag_slugs = [t.strip() for t in tag_slugs.split(',') if t.strip()]
-            #         tags = list(Tag.objects.filter(slug__in=tag_slugs))
-            #         tag_slugs = [t for t in tag_slugs if t not in [e.slug for e in tags]]
-            #         updated_image.tags.set(*(tags + tag_slugs))
-
             return cls(content_block=content_block)
 
         except ValidationError as e:
@@ -128,8 +110,6 @@ class MutateContentBlock(relay.ClientIDMutation):
         return cls(content_block=None, errors=errors)
 
 
-# todo: handle mutation for add and for edit (with the ID of the content block instead of a sibling)
-# todo: merge with above class, for error handling and sibling assignment
 class AddContentBlock(relay.ClientIDMutation):
     class Input:
         content_block = graphene.Argument(ContentBlockInput)

server/rooms/inputs.py

@@ -0,0 +1,10 @@
+import graphene
+from graphene import InputObjectType
+
+
+class RoomInput(InputObjectType):
+    id = graphene.ID()
+    title = graphene.String()
+    description = graphene.String()
+    user_group = graphene.ID()
+    appearance = graphene.String()

server/rooms/mutations.py

@@ -0,0 +1,33 @@
+import graphene
+from graphene import relay
+
+from api.utils import get_object
+from rooms.inputs import RoomInput
+from rooms.schema import RoomNode
+from rooms.serializers import RoomSerializer
+from user.models import UserGroup
+
+
+class AddRoom(relay.ClientIDMutation):
+    class Input:
+        room = graphene.Argument(RoomInput)
+
+    errors = graphene.List(graphene.String)
+    room = graphene.Field(RoomNode)
+
+    @classmethod
+    def mutate_and_get_payload(cls, *args, **kwargs):
+        room_data = kwargs.get('room')
+        user_group = get_object(UserGroup, room_data.get('user_group'))
+        room_data['user_group'] = user_group.id
+        serializer = RoomSerializer(data=room_data)
+        if serializer.is_valid():
+            serializer.save()
+            return cls(room=serializer.instance, errors=None)
+
+        return cls(room=None, errors=['{}: {}'.format(key, value) for key, value in serializer.errors.items()])
+
+
+class RoomMutations:
+    mutate_room = MutateRoom.Field()
+    add_room = AddRoom.Field()

server/rooms/schema.py

@@ -56,11 +56,3 @@ class RoomsQuery(object):
             return Room.objects.get(slug=slug)
         return None
 
-
-class RoomMutation(SerializerMutation):
-    class Meta:
-        serializer_class = RoomSerializer
-
-
-class RoomMutations:
-    add_room = RoomMutation.Field()