Add component to edit a room

client/src/components/rooms/AddRoom.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-link to="/room/new" tag="div" class="add-room">
+  <router-link to="/new-room" tag="div" class="add-room">
     <add-icon class="add-room__add"></add-icon>
   </router-link>
 </template>
@@ -22,10 +22,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid #D2D2D2;
-    border-radius: 12px;
     @include widget-shadow;
-    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
     cursor: pointer;
 
     &__add {

client/src/components/rooms/EditRoom.vue

@@ -0,0 +1,41 @@
+<template>
+  <room-form
+    :room="room"
+    @save="updateRoom"
+  ></room-form>
+</template>
+
+<script>
+  import RoomForm from '@/components/rooms/RoomForm';
+
+  import UPDATE_ROOM_MUTATION from '@/graphql/gql/mutations/updateRoom.gql';
+
+  export default {
+    props: ['room'],
+
+    components: {
+      RoomForm
+    },
+
+    methods: {
+      updateRoom(room) {
+        this.$apollo.mutate({
+          mutation: UPDATE_ROOM_MUTATION,
+          variables: {
+            input: {
+              room: {
+                id: room.id,
+                title: room.title,
+                appearance: room.appearance,
+                description: room.description,
+                userGroup: room.userGroup.id
+              }
+            }
+          }
+        }).then(() => {
+          this.$router.push('/rooms');
+        });
+      }
+    },
+  }
+</script>

client/src/components/rooms/NewRoom.vue

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

client/src/components/rooms/RoomForm.vue

@@ -16,7 +16,7 @@
     <div class="room-form__footer">
       <button
         class="button button--primary room-form__save-button"
-        @click="$emit('save', room)"
+        @click="$emit('save', localRoom)"
       >Speichern
       </button>
       <button class="button">Abbrechen</button>

client/src/components/rooms/RoomPopover.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="room-popover">
     <a class="room-popover__link">Raum löschen</a>
-    <a class="room-popover__link">Raum bearbeiten</a>
+    <router-link :to="{name: 'edit-room', params: {id: id}}" class="room-popover__link">Raum bearbeiten</router-link>
   </div>
 </template>
 
 <script>
   export default {
-    props: ['room']
+    props: ['id']
   }
 </script>
 
@@ -33,6 +33,7 @@
       font-size: toRem(14px);
       line-height: 1.5;
       padding: 5px 0;
+      cursor: pointer;
     }
   }
 </style>

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

@@ -4,6 +4,7 @@ fragment RoomParts on RoomNode {
   title
   entryCount
   appearance
+  description
   userGroup {
     id
     name

client/src/graphql/gql/mutations/updateRoom.gql

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

client/src/graphql/gql/roomEntriesQuery.gql

@@ -1,15 +1,7 @@
+#import "./fragments/roomParts.gql"
 query RoomEntriesQuery($slug: String!) {
   room(slug: $slug) {
-    id
+    ...RoomParts
-    title
-    slug
-    appearance
-    pk
-    userGroup {
-      id
-      name
-      year
-    }
     roomEntries {
       edges {
         node {

client/src/graphql/gql/roomQuery.gql

@@ -0,0 +1,6 @@
+#import "./fragments/roomParts.gql"
+query RoomQuery($id: ID!) {
+  room(id: $id) {
+    ...RoomParts
+  }
+}

client/src/pages/editRoom.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="edit-room-page">
+    <edit-room :room="room" v-if="this.room.id"></edit-room>
+  </div>
+</template>
+
+<script>
+  import EditRoom from '@/components/rooms/EditRoom';
+
+  import ROOM_QUERY from '@/graphql/gql/roomQuery.gql';
+
+  export default {
+    props: ['id'],
+
+    components: {
+      EditRoom
+    },
+
+    data() {
+      return {
+        room: {}
+      }
+    },
+
+    apollo: {
+      room: {
+        query: ROOM_QUERY,
+        variables() {
+          return {
+            id: this.id
+          }
+        },
+        // manual: true,
+        // result({data, loading, networkStatus}) {
+        //   if (!loading) {
+        //     this.room = Object.assign({}, this.$getRidOfEdges(data).room);
+        //     this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
+        //   }
+        // }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .edit-room-page {
+    display: grid;
+    justify-items: center;
+    align-items: center;
+  }
+</style>

client/src/router/index.js

@@ -7,6 +7,7 @@ import module from '@/pages/module'
 import rooms from '@/pages/rooms'
 import room from '@/pages/room'
 import newRoom from '@/pages/newRoom'
+import editRoom from '@/pages/editRoom'
 import article from '@/pages/article'
 import basicknowledge from '@/pages/basicknowledge'
 import p404 from '@/pages/p404'
@@ -15,7 +16,8 @@ const routes = [
   {path: '/', name: 'module', component: module, meta: {filter: true}},
   {path: '/module', name: 'module', component: module, meta: {filter: true}},
   {path: '/rooms', name: 'rooms', component: rooms, meta: {filter: true}},
-  {path: '/room/new', name: 'new-room', component: newRoom},
+  {path: '/new-room/', name: 'new-room', component: newRoom},
+  {path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},
   {path: '/room/:slug', name: 'room', component: room, props: true},
   {path: '/article', name: 'article', component: article, meta: {layout: 'simple'}},
   {path: '/basic-knowledge', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},