Add "add room entry" mutation to frontend

client/src/components/rooms/AddRoomEntryButton.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="add-room-entry">
-    <add-icon class="add-room-entry__icon"></add-icon>
+  <div class="add-room-entry-button" @click="addRoomEntry">
+    <add-icon class="add-room-entry-button__icon"></add-icon>
   </div>
 </template>
 
@@ -8,8 +8,16 @@
   import AddIcon from '@/components/icons/AddIcon';
 
   export default {
+    props: ['parent'],
+
     components: {
       AddIcon
+    },
+
+    methods: {
+      addRoomEntry() {
+        this.$store.dispatch('addRoomEntry', this.parent);
+      }
     }
   }
 </script>
@@ -17,7 +25,7 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
-  .add-room-entry {
+  .add-room-entry-button {
     border: 2px solid $color-white;
     border-radius: 12px;
     height: 150px;
@@ -27,6 +35,7 @@
     justify-content: center;
     align-items: center;
     break-inside: avoid;
+    cursor: pointer;
 
     &__icon {
       width: 80px;

client/src/components/rooms/room-entries/NewRoomEntryWizard.vue

@@ -8,6 +8,11 @@
 </template>
 
 <script>
+  import NEW_ROOM_ENTRY_MUTATION from '@/graphql/gql/mutations/addRoomEntry.gql';
+  import ROOM_ENTRIES_QUERY from '@/graphql/gql/roomEntriesQuery.gql';
+
+  import store from '@/store/index';
+
   import ContentsForm from '@/components/content-block-form/ContentsForm';
 
   export default {
@@ -27,7 +32,35 @@
 
     methods: {
       saveEntry(entry) {
-        console.log(entry);
+        this.$apollo.mutate({
+          mutation: NEW_ROOM_ENTRY_MUTATION,
+          variables: {
+            input: {
+              roomEntry: Object.assign({}, entry, {
+                room: store.state.parentRoom.id
+              })
+            }
+          },
+          update: (store, {data: {addRoomEntry: {roomEntry}}}) => {
+            try {
+              const query = ROOM_ENTRIES_QUERY;
+              const variables = {slug: this.$store.state.parentRoom.slug};
+              const data = store.readQuery({query, variables});
+              if (data.room && data.room.roomEntries) {
+                data.room.roomEntries.edges.push({
+                  node: roomEntry,
+                  __typename: 'RoomEntryNode'
+                });
+                store.writeQuery({query, variables, data});
+              }
+            } catch (e) {
+              console.error(e);
+              // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
+            }
+          }
+        }).then(() => {
+          this.hideModal();
+        });
       },
       hideModal() {
         this.$store.dispatch('hideModal');

client/src/graphql/gql/fragments/roomEntryParts.gql

@@ -0,0 +1,12 @@
+fragment RoomEntryParts on RoomEntryNode {
+  id
+  slug
+  title
+  subtitle
+  contents
+  author {
+    id
+    firstName
+    lastName
+  }
+}

client/src/graphql/gql/mutations/addRoomEntry.gql

@@ -0,0 +1,24 @@
+#import "../fragments/roomEntryParts.gql"
+mutation AddRoomEntry($input: AddRoomEntryInput!){
+  addRoomEntry(input: $input) {
+    roomEntry {
+      ...RoomEntryParts
+    }
+    errors
+
+  }
+}
+
+
+#{"input": {
+#  "roomEntry": {
+#    "title": "Hi",
+#    "subtitle": "Marc",
+#    "contents": [{
+#      "type": "text_block",
+#      "value": {"text": "Something more\r\n what what"}
+#    }],
+#    "room": "Um9vbU5vZGU6MjM="
+#
+#  }}
+#}

client/src/graphql/gql/roomEntriesQuery.gql

@@ -1,20 +1,12 @@
 #import "./fragments/roomParts.gql"
+#import "./fragments/roomEntryParts.gql"
 query RoomEntriesQuery($slug: String!) {
   room(slug: $slug) {
     ...RoomParts
     roomEntries {
       edges {
         node {
-          id
-          slug
-          title
-          subtitle
-          contents
-          author {
-            id
-            firstName
-            lastName
-          }
+          ...RoomEntryParts
         }
       }
     }

client/src/pages/room.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="room__content">
-      <add-room-entry></add-room-entry>
+      <add-room-entry-button :parent="room"></add-room-entry-button>
       <room-entry v-for="entry in room.roomEntries" v-bind="entry" :key="entry.id"></room-entry>
     </div>
   </div>
@@ -20,7 +20,7 @@
 <script>
   import ROOM_ENTRIES_QUERY from '@/graphql/gql/roomEntriesQuery.gql';
 
-  import AddRoomEntry from '@/components/rooms/AddRoomEntry.vue';
+  import AddRoomEntryButton from '@/components/rooms/AddRoomEntryButton.vue';
   import RoomEntry from '@/components/rooms/RoomEntry.vue';
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
   import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
@@ -31,7 +31,7 @@
     components: {
       RoomEntryCountWidget,
       RoomGroupWidget,
-      AddRoomEntry,
+      AddRoomEntryButton,
       RoomEntry
     },
 

client/src/store/index.js

@@ -8,12 +8,13 @@ export default new Vuex.Store({
 
   state: {
     specialContainerClass: '',
-    showModal: false,
+    showModal: '',
     contentBlockPosition: {},
     scrollPosition: 0,
     moduleSlug: 'mein-neues-umfeld',
     filterForGroup: false,
-    currentContentBlock: ''
+    currentContentBlock: '',
+    parentRoom: null
   },
 
   getters: {},
@@ -40,6 +41,10 @@ export default new Vuex.Store({
       commit('setContentBlockPosition', payload);
       dispatch('showModal', 'new-content-block-wizard');
     },
+    addRoomEntry({commit, dispatch}, payload) {
+      commit('setParentRoom', payload);
+      dispatch('showModal', 'new-room-entry-wizard');
+    },
     showModal({commit}, payload) {
       document.body.classList.add('no-scroll'); // won't get at the body any other way
       commit('setModal', payload);
@@ -70,6 +75,9 @@ export default new Vuex.Store({
     },
     setFilterForGroup(state, payload) {
       state.filterForGroup = payload;
+    },
+    setParentRoom(state, payload) {
+      state.parentRoom = payload;
     }
   }
 })