feature(posts): Reuse add/edit component

app/controllers/api/v1/events_controller.rb

@@ -37,6 +37,7 @@ def update
       end
     rescue ActiveModel::ForbiddenAttributesError => e
       puts "Error: #{e} #{params}"
+
       render json: {'notFound': params[:id], status: 404 }
     end
   end
@@ -57,6 +58,7 @@ def destroy
   private
     def valid_params
       params.require(:event).permit(
+        :id,
         :name,
         :theme,
         :description,

app/controllers/api/v1/posts_controller.rb

@@ -32,6 +32,15 @@ def destroy
   end
 
   def update
+    begin
+      @post = Post.update params[:id], valid_params
+      respond_to do |format|
+        format.json { render json: @post }
+      end
+    rescue ActiveModel::ForbiddenAttributesError => e
+      puts "Error: #{e} #{params}"
+      render json: {'notFound': params[:id], status: 404 }
+    end
   end
 
   private

app/javascript/components/AddPost.vue

@@ -1,25 +1,15 @@
 <template>
   <div id="add-post">
       <span class="md-display-1" @click='toggleShowAddPost'>Create a new post</span>
-      <div v-if='showAddPost'>
-        <Errors :errors='errors' />
-        <md-field>
-            <md-input placeholder='What is this post about?' v-model='topic'></md-input>
-        </md-field>
-        <md-field>
-            <md-input placeholder='Describe what you are talking about' v-model='text'></md-input>
-        </md-field>
-        <md-switch v-model='private'>Private?</md-switch>
-        <md-button @click='createPost'>Save</md-button>
-      </div>
+      <EditablePost v-if='showAddPost' v-on:createPost='createPost' :post='post' />
   </div>
 </template>
 <script>
 import {createPost} from '../services/posts'
-import Errors from './Errors.vue'
+import EditablePost from './EditablePost.vue'
 export default {
     name: 'AddPost',
-    components: {Errors},
+    components: {EditablePost},
     props: {
         post: {type: Object, required: false},
     },
@@ -42,15 +32,10 @@ export default {
         }
     },
     methods: {
-        createPost: function() {
-            const post = {
-                employee_id: this.employee_id,
-                private: this.private,
-                text: this.text,
-                topic: this.topic,
-            }
+        createPost: function(post) {
             createPost(post).then(r => {
                 this.$emit('addedPost')
+                this.toggleShowAddPost()
                 this.initializeData()
             })
             .catch(error => this.errors = error.error)

app/javascript/components/EditablePost.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="editable-post">
+    <Errors :errors='errors' />
+    <md-field>
+        <md-input placeholder='What is this post about?' v-model='topic'></md-input>
+    </md-field>
+    <md-field>
+        <md-input placeholder='Describe what you are talking about' v-model='text'></md-input>
+    </md-field>
+    <md-switch v-model='private'>Private?</md-switch>
+    <md-button class="md-raised md-primary" @click='savePost'>Save</md-button>
+    <md-button class="md-accent" @click='cancel'>
+      Cancel
+    </md-button>
+  </div>
+</template>
+<script>
+import Errors from './Errors.vue'
+export default {
+  name: 'EditablePost',
+  components: {Errors},
+  props: {
+    post: {type: Object, required: false},
+  },
+  data: function() {
+    if (this.post) {
+      return {
+        id: this.post.id,
+        topic: this.post.topic,
+        text: this.post.text,
+        employee_id: this.post.employee_id,
+        private: this.post.private,
+        errors: null,
+      }
+    }
+    return {
+        employee_id: this.$currentUser.employee_id,
+        private: false,
+        text: '',
+        topic: '',
+        showAddPost: false,
+        errors: null,
+    }
+  },
+  methods: {
+    savePost: function() {
+      const post = {
+        id: this.id,
+        topic: this.topic,
+        text: this.text,
+        employee_id: this.employee_id,
+        private: this.private,
+      }
+      if (this.post) {
+        this.$emit('updatePost', post)
+      } else {
+        this.$emit('createPost', post)
+      }
+    },
+    cancel: function() {
+      this.$emit('changeMode')
+    }
+  }
+}
+</script>

app/javascript/components/Post.vue

@@ -12,21 +12,29 @@
                 {{ post.text }}
             </md-card-content>
             <md-card-actions>
-                <md-button :to='showPost'>
+
+                <md-button :to='showPost' v-if='!isEditable'>
                     Comment <i class="material-icons">chat_bubble_outline</i>{{commentCount}}
                 </md-button>
+                <md-button class='md-primary' @click='changeMode' v-if='isEditable && isEditor'>
+                    Edit
+                </md-button>
+                <md-button class='md-accent' @click='deletePost' v-if='isEditable && isEditor'>
+                    Delete
+                </md-button>
             </md-card-actions>
         </md-card>
     </div>
 </template>
 <script>
-import {getPostComments} from '../services/posts'
+import {getPostComments, deletePost} from '../services/posts'
 
 export default {
     name: 'Post',
     components: {},
     props: {
         post: Object, // id, topic, text, private, employee_id, created_at, updated_at
+        isEditable: {default: true, type: Boolean},
     },
     data: () => {
         return {
@@ -47,10 +55,20 @@ export default {
         },
         showPost: function() {
             return {name: 'ShowPost', params: {id: this.post.id}}
+        },
+        isEditor: function() {
+            return this.$currentUser.employee_id === this.post.employee_id
         }
     },
     methods: {
-        viewPost: function() {
+        changeMode: function() {
+            this.$emit('changeMode')
+        },
+        deletePost: function() {
+            deletePost(this.post.id).then(() => {
+                this.$emit('postDeleted')
+                this.$router.replace('/posts')
+            })
         }
     }
 }

app/javascript/components/PostList.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="post-list">
         <AddPost v-on:addedPost='$emit("reloadPosts")' />
-        <Post :post='post' v-for='post in posts' :key='post.id' />
+        <Post :post='post' v-for='post in posts' :key='post.id' :isEditable='false' />
     </div>
 </template>
 <script>

app/javascript/components/ShowEvent.vue

@@ -58,12 +58,13 @@ export default {
     },
     methods: {
         changeMode: function() {
-            console.log("toggling")
             this.inViewMode = !this.inViewMode
         },
         updateEvent: function(event) {
             updateEvent(event.id, event).then(r => {
                 this.$emit('eventUpdated')
+                this.changeMode()
+                this.$router.go() // Optional update the event from client data
             })
         }
     }

app/javascript/components/ShowPost.vue

@@ -1,18 +1,11 @@
 <template>
   <div id="post">
-    <md-card v-if='!isPostLoaded'>
-        <md-card-header>blurry title</md-card-header>
-        <md-card-content>blurry content</md-card-content>
-    </md-card>
-    <md-card v-if='isPostLoaded'>
-        <md-card-header>
-            <div class="md-title">{{ topic }}</div>
-        </md-card-header>
-        <md-card-content>{{text}}</md-card-content>
-        <md-card-actions v-if='isEditor'>
-            <md-button @click='deletePost'>Delete</md-button>
-        </md-card-actions>
-    </md-card>
+    <Post :post='post' v-if='inViewMode' v-on:changeMode='changeMode' />
+    <EditablePost
+        :post='post' v-if='!inViewMode'
+        v-on:changeMode='changeMode'
+        v-on:updatePost='updatePost' />
+
     <CommentList
       v-on:reloadComments='reloadComments'
       v-if='isCommentsLoaded'
@@ -21,11 +14,13 @@
   </div>
 </template>
 <script>
-import {getOnePost, getPostComments, deletePost} from '../services/posts'
+import {getOnePost, getPostComments, updatePost} from '../services/posts'
+import Post from './Post.vue'
+import EditablePost from './EditablePost.vue'
 import CommentList from './CommentList'
 export default {
     name: 'ShowPost',
-    components: {CommentList},
+    components: {CommentList, EditablePost, Post},
 
     // id, topic, text, private, employee_id, created_at, updated_a
     data: function() {
@@ -34,22 +29,23 @@ export default {
             topic: '',
             text: '',
             private: true,
-            employee: 0,
-            created: new Date(),
-            updated: new Date(),
+            employee_id: 0,
+            created_at: new Date(),
+            updated_at: new Date(),
             comments: [],
             isPostLoaded: false,
             isCommentsLoaded: false,
+            inViewMode: true
         }
     },
     created: function() {
         getOnePost(this.id).then(r => {
             this.topic = r.data.topic
             this.text = r.data.text
             this.private = r.data.private
-            this.employee = r.data.employee_id
-            this.created = r.data.created_at
-            this.updated = r.data.updated_at
+            this.employee_id = r.data.employee_id
+            this.created_at= r.data.created_at
+            this.updated_at = r.data.updated_at
             this.isPostLoaded = true
         })
         getPostComments(this.id).then(r => {
@@ -58,19 +54,30 @@ export default {
         })
     },
     computed: {
-        isEditor: function() {
-            return this.employee === this.$currentUser.employee_id
+        post: function() {
+            return {
+                id: this.id,
+                topic: this.topic,
+                text: this.text,
+                private: this.private,
+                employee_id: this.employee_id,
+                created_at: this.created_at,
+                updated_at: this.updated_at,
+            }
         }
     },
     methods: {
         reloadComments: function() {
             getPostComments(this.id).then(r => this.comments = r.data)
         },
-        deletePost: function() {
-            deletePost(this.id)
-              .then(() => {
-                  this.$router.replace('/posts')
-              })
+        updatePost: function(post) {
+            updatePost(post.id, post).then(() => {
+                this.changeMode()
+                this.$router.go() // reload the data
+            })
+        },
+        changeMode: function() {
+            this.inViewMode = !this.inViewMode
         }
     }
 }

app/javascript/services/posts.js

@@ -48,4 +48,16 @@ export const deletePost = (postId) => axios.delete(
     data: data,
     error: null
   }))
+  .catch(railsErrorHandler)
+
+export const updatePost = (id, post) => axios.put(
+    onePostURL(id),
+    {post},
+    authorizedJSONHeaders
+  )
+  .then(r => r.data)
+  .then(data => ({
+    data: data,
+    error: null
+  }))
   .catch(railsErrorHandler)