From b60f3f1c0622a2d0327b3f71b2b9ce2f8cfd22e7 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Fri, 21 Sep 2018 13:53:18 +0200
Subject: [PATCH] Add component to edit a room

---
 client/src/components/rooms/AddRoom.vue       |  5 +-
 client/src/components/rooms/EditRoom.vue      | 41 +++++++++++++++
 client/src/components/rooms/NewRoom.vue       |  2 +-
 client/src/components/rooms/RoomForm.vue      |  2 +-
 client/src/components/rooms/RoomPopover.vue   |  5 +-
 .../src/graphql/gql/fragments/roomParts.gql   |  1 +
 .../src/graphql/gql/mutations/updateRoom.gql  | 22 ++++++++
 client/src/graphql/gql/roomEntriesQuery.gql   | 12 +----
 client/src/graphql/gql/roomQuery.gql          |  6 +++
 client/src/pages/editRoom.vue                 | 51 +++++++++++++++++++
 client/src/router/index.js                    |  4 +-
 11 files changed, 132 insertions(+), 19 deletions(-)
 create mode 100644 client/src/components/rooms/EditRoom.vue
 create mode 100644 client/src/graphql/gql/mutations/updateRoom.gql
 create mode 100644 client/src/graphql/gql/roomQuery.gql
 create mode 100644 client/src/pages/editRoom.vue

diff --git a/client/src/components/rooms/AddRoom.vue b/client/src/components/rooms/AddRoom.vue
index 532b4ec8..63a9ccb1 100644
--- a/client/src/components/rooms/AddRoom.vue
+++ b/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 {
diff --git a/client/src/components/rooms/EditRoom.vue b/client/src/components/rooms/EditRoom.vue
new file mode 100644
index 00000000..a03e6869
--- /dev/null
+++ b/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>
diff --git a/client/src/components/rooms/NewRoom.vue b/client/src/components/rooms/NewRoom.vue
index d77b6919..8eebcab5 100644
--- a/client/src/components/rooms/NewRoom.vue
+++ b/client/src/components/rooms/NewRoom.vue
@@ -24,7 +24,7 @@
           appearance: defaultColor,
           title: '',
           description: '',
-          userGroup: 'VXNlckdyb3VwTm9kZToy'
+          userGroup: 'VXNlckdyb3VwTm9kZToxMw=='
         }
       }
     },
diff --git a/client/src/components/rooms/RoomForm.vue b/client/src/components/rooms/RoomForm.vue
index 5f792ef1..69a99a4b 100644
--- a/client/src/components/rooms/RoomForm.vue
+++ b/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>
diff --git a/client/src/components/rooms/RoomPopover.vue b/client/src/components/rooms/RoomPopover.vue
index cd086ccb..71ca896f 100644
--- a/client/src/components/rooms/RoomPopover.vue
+++ b/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>
diff --git a/client/src/graphql/gql/fragments/roomParts.gql b/client/src/graphql/gql/fragments/roomParts.gql
index 8208368d..fd58b993 100644
--- a/client/src/graphql/gql/fragments/roomParts.gql
+++ b/client/src/graphql/gql/fragments/roomParts.gql
@@ -4,6 +4,7 @@ fragment RoomParts on RoomNode {
   title
   entryCount
   appearance
+  description
   userGroup {
     id
     name
diff --git a/client/src/graphql/gql/mutations/updateRoom.gql b/client/src/graphql/gql/mutations/updateRoom.gql
new file mode 100644
index 00000000..a1d0195b
--- /dev/null
+++ b/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="
+#    }
+#  }
+#}
diff --git a/client/src/graphql/gql/roomEntriesQuery.gql b/client/src/graphql/gql/roomEntriesQuery.gql
index 874389a9..207b8fed 100644
--- a/client/src/graphql/gql/roomEntriesQuery.gql
+++ b/client/src/graphql/gql/roomEntriesQuery.gql
@@ -1,15 +1,7 @@
+#import "./fragments/roomParts.gql"
 query RoomEntriesQuery($slug: String!) {
   room(slug: $slug) {
-    id
-    title
-    slug
-    appearance
-    pk
-    userGroup {
-      id
-      name
-      year
-    }
+    ...RoomParts
     roomEntries {
       edges {
         node {
diff --git a/client/src/graphql/gql/roomQuery.gql b/client/src/graphql/gql/roomQuery.gql
new file mode 100644
index 00000000..b4092eed
--- /dev/null
+++ b/client/src/graphql/gql/roomQuery.gql
@@ -0,0 +1,6 @@
+#import "./fragments/roomParts.gql"
+query RoomQuery($id: ID!) {
+  room(id: $id) {
+    ...RoomParts
+  }
+}
diff --git a/client/src/pages/editRoom.vue b/client/src/pages/editRoom.vue
new file mode 100644
index 00000000..5cff5f90
--- /dev/null
+++ b/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>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 76f2f256..9bf0a510 100644
--- a/client/src/router/index.js
+++ b/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'}},