feature(ui): Post and event comments

Support commenting on posts or events as well as adding media to them

.env.development

@@ -0,0 +1,6 @@
+MINIO_URL=http://localhost:9000
+MINIO_HOST=localhost
+MINIO_CLIENT=~/local/bin/mc
+MINIO_ACCESS_KEY=minioadmin
+MINIO_SECRET_KEY=minioadmin
+MINIO_POLICY=../public-bucket-policy.json

Gemfile

@@ -55,4 +55,5 @@ end
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
 # S3
-gem 'aws-sdk-s3', '~> 1'
+gem 'aws-sdk-s3', '~> 1'
+gem 'dotenv-rails'

Gemfile.lock

@@ -90,6 +90,10 @@ GEM
     childprocess (3.0.0)
     concurrent-ruby (1.1.6)
     crass (1.0.6)
+    dotenv (2.7.5)
+    dotenv-rails (2.7.5)
+      dotenv (= 2.7.5)
+      railties (>= 3.2, < 6.1)
     erubi (1.9.0)
     ffi (1.12.2)
     foreman (0.87.0)
@@ -222,6 +226,7 @@ DEPENDENCIES
   bootsnap (>= 1.4.2)
   byebug
   capybara (>= 2.15)
+  dotenv-rails
   foreman
   jbuilder (~> 2.7)
   listen (>= 3.0.5, < 3.2)

TODO.md

@@ -1,24 +1,26 @@
 # Models
 
 ```
-rails g model Business name:string address:text phone:string email:string website:text type:string employee_business:boolean handle:string --force
-rails g model Employee name:string business:references role:integer handle:string --force
-rails g model Social name:string url:text handle:string business:references --force
-rails g model Event name:string theme:text description:text start_time:timestamp end_time:timestamp parent_id:bigint business:references --force
-rails g model Post topic:text text:text private:boolean employee:references --force
-rails g model Comment text:text post:references comment_id:bigint employee:references --force
-rails g model EventComment text:text event:references event_comment_id:bigint employee:references --force
-rails g model BusinessGroup name:string description:text private:boolean --force
-rails g model BusinessGroupMember business_group:references business:references --force
-rails g model PostMember post:references employee:references role:integer --force
+rails g migration CreateBusinesses name:string address:text phone:string email:string website:text type:string employee_business:boolean handle:string --force
+rails g migration CreateEmployees name:string business:references role:integer handle:string --force
+rails g migration CreateSocials name:string url:text handle:string business:references --force
+rails g migration CreateEvents name:string theme:text description:text all_day:boolean start_time:timestamp end_time:timestamp parent_id:bigint business:references --force
+rails g migration CreateEventTimes name:string description:text all_day:boolean start_date:timestamp start_time:timestamp end_date:timestamp end_time:timestamp business:references --force
+rails g migration CreatePosts topic:text text:text private:boolean employee:references --force
+rails g migration CreateBusinessGroups name:string description:text private:boolean --force
+rails g migration CreateBusinessGroupMembers business_group:references business:references --force
+rails g migration CreatePostMembers post:references employee:references role:integer --force
 
 # Polymorphic types
-rails g model Location name:text address:text city:text country:string province:string state:string postal:string locatable_id:bigint locatable_type:string --force
-rails g model Tag name:string value:string url:text taggable_id:bigint taggable_type:string --force
-rails g model Medium name:text url:text mediumable_id:bigint mediumable_type:string content_type:string --force
+rails g migration CreateLocations name:text address:text city:text country:string province:string state:string postal:string locatable_id:bigint locatable_type:string --force
+rails g migration CreateTags name:string value:string url:text taggable_id:bigint taggable_type:string --force
+rails g migration CreateMedia name:text url:text description:text mediumable_id:bigint mediumable_type:string content_type:string --force
+rails g migration CreateComments text:text comment_id:bigint employee:references commentable_type:string commentable_id:bigint --force
 
 # Defaults and settings
 sed -i  -e 's/t\.integer :role$/t.integer :role, default: 0/' db/migrate/*_create_employees.rb
+sed -i  -e 's/t\.boolean :private$/t.boolean :all_day, default: false/' db/migrate/*_create_events.rb
+sed -i  -e 's/t\.boolean :private$/t.boolean :all_day, default: false/' db/migrate/*_create_event_times.rb
 sed -i  -e 's/t\.boolean :private$/t.boolean :private, default: false/' db/migrate/*_create_posts.rb
 sed -i  -e 's/t\.boolean :private$/t.boolean :private, default: false/' db/migrate/*_create_business_groups.rb
 sed -i  -e 's/t\.integer :role$/t.integer :role, default: 0/' db/migrate/*_create_post_members.rb
@@ -162,18 +164,25 @@ business.tags.create! name: 'BusinessRegion', value: 'Main'
 business.locations.create! address: '1 Downtown St.', city: 'Town', state: 'CA', postal: '90120'
 
 employee = Employee.create! name: 'Employee A', business:business
+employee_b = Employee.create! name: 'Employee B', business:business
 
-event = Event.create! name: 'Event', theme: 'Event Theme', description: 'Description', business: business
-event.media.create! name: 'MainFlyer', value: 'HappyFlyer'
+event = Event.create! name: 'Event', theme: 'Event Theme', description: 'Description', business: business, start_time: DateTime.now, end_time: DateTime.now
+[1,2,3].each do |n|
+  event.comments.create! text: "Event comment #{n}", employee: employee
+end
+event.comments.create! text: "Event comment from employee B", employee: employee_b
+
+event.media.create! name:'MainFlyer', url: 'MainFlyerURL'
 
 post = Post.create! topic: 'Topic', text: 'Text', employee: employee
 post_member = PostMember.create! post: post, employee: employee, role: 0
-comment_1 = Comment.create! text: 'Comment 1', post: post, employee: employee
-comment_2 = Comment.create! text: 'Comment 2', post: post, employee: employee
-comment_3 = Comment.create! text: 'Comment 3', post: post, comment: comment_2, employee: employee
+[1,2,3].each do |n|
+  post.comments.create! text: "Post comment #{n}", employee: employee
+end
+post.comments.create! text: "Post comment from employee B", employee: employee_b
 
 group = BusinessGroup.create! name: 'Group', description: 'Description'
-group_member = BusinessGroupMember.create! business_group: group, business:business
+group_member = BusinessGroupMember.create! business_group: group, business: business
 ```
 
 

app/controllers/api/v1/event_comments_controller.rb

@@ -8,4 +8,39 @@ def index
             format.json { render json: @event.comments }
         end
     end
+
+    def create
+        @event = Event.find_by_id params[:event_id]
+        if !@event
+            return 404
+        end
+        @comment = @event.comments.create valid_params
+        if @comment.invalid?
+            render json: @comment.errors, status: 400
+        else
+            render json: @comment
+        end
+    end
+
+    def update
+        begin
+          @comment = Comment.update params[:id], valid_params
+          respond_to do |format|
+            format.json { render json: @comment }
+          end
+        rescue ActiveModel::ForbiddenAttributesError => e          
+          render json: {'notFound': params[:id], status: 404 }
+        end
+    end
+
+    private
+        def valid_params
+            params.require(:comment).permit(
+                :employee_id,
+                :commentable_id,
+                :commentable_type,
+                :comment_id,
+                :text
+            )
+        end
 end

app/controllers/api/v1/post_comments_controller.rb

@@ -8,4 +8,39 @@ def index
             format.json { render json: @post.comments }
         end
     end
+
+    def create
+        @post = Post.find_by_id params[:post_id]
+        if !@post
+            return 404
+        end
+        @comment = @post.comments.create valid_params
+        if @comment.invalid?
+            render json: @comment.errors, status: 400
+        else
+            render json: @comment
+        end
+    end
+
+    def update
+        begin
+            @comment = Comment.update params[:id], valid_params
+            respond_to do |format|
+            format.json { render json: @comment }
+            end
+        rescue ActiveModel::ForbiddenAttributesError => e          
+            render json: {'notFound': params[:id], status: 404 }
+        end
+    end
+
+    private
+        def valid_params
+            params.require(:comment).permit(
+                :employee_id,
+                :commentable_id,
+                :commentable_type,
+                :comment_id,
+                :text
+            )
+        end
 end

app/javascript/components/AddComment.vue

@@ -8,13 +8,11 @@
   </div>
 </template>
 <script>
-import {createComment} from '../services/comments'
 import Errors from './Errors.vue'
 export default {
     name: 'AddComment',
     components: {Errors},
     props: {
-        post: Number,
         comment: {type: String, required: false},
     },
     data: function() {
@@ -26,17 +24,11 @@ export default {
     methods: {
         createComment: function() {
             const comment = {
-                post_id: this.post,
                 comment_id: this.comment,
                 text: this.text,
                 employee_id: this.$currentUser.employee_id, // Is there a vue-ier way to do this?
             }
-            createComment(comment)
-            .then(comment => {
-                this.text = ''
-                this.$emit('commented')
-            })
-            .catch(error => this.errors = error.error)
+            this.$emit('addComment', comment)
         }
     }
 }

app/javascript/components/Comment.vue

@@ -24,13 +24,13 @@
   </div>
 </template>
 <script>
-import {deleteComment, allMedia, addMedia, updateComment} from '../services/comments'
+import {allMedia, addMedia, updateComment, deleteComment} from '../services/comments'
 import EditableMedia from './EditableMedia.vue'
 export default {
     name: 'Comment',
     components: {EditableMedia},
     props: {
-        comment: Object, // id, text, post_id, comment_id, employee_id, created/updated_at
+        comment: Object,
     },
     data: function() {
         return {

app/javascript/components/CommentList.vue

@@ -6,8 +6,11 @@
       v-for='comment in comments'
       :key='comment.id'
       :comment='comment'
-      :post='post' />
-    <AddComment v-on:commented='commentAdded' :post='post' :comment='null' />
+      />
+    <AddComment
+      v-on:commented='commentAdded'
+      v-on:addComment='addComment'
+      :comment='null' />
   </div>
 </template>
 <script>
@@ -18,7 +21,6 @@ export default {
     components: {Comment, AddComment},
     props: {
         comments: Array,
-        post: Number,
     },
     methods: {
         commentAdded: function() {
@@ -33,6 +35,9 @@ export default {
               comment.text = update.text
             }
           })
+        },
+        addComment: function(comment) {
+          this.$emit('addComment', comment)
         }
     }
 }

app/javascript/components/PostComment.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="post-comment">
+  </div>
+</template>
+<script>
+import Comment from './Comment.vue'
+import {deleteComment, allMedia, addMedia, updateComment} from '../services/comments'
+export default {
+    name: 'PostComment',
+    props: {
+        id: {type: Number, required: true},
+    },
+    data: function() {
+        return {
+            media: [],
+            comment: {}
+        }
+    },
+    created: function() {
+
+    }
+}
+</script>

app/javascript/components/ShowEvent.vue

@@ -12,15 +12,23 @@
         v-on:changeMode='changeMode'
         v-on:addedMedia='addedMedia'
         v-on:updateEvent='updateEvent' />
+      <CommentList
+        v-on:reloadComments='reloadComments'
+        v-on:addComment='addComment'
+        v-if='isCommentsLoaded'
+        :comments='comments' />
   </div>
 </template>
 <script>
 import Event from './Event'
 import EditableEvent from './EditableEvent.vue'
+import CommentList from './CommentList.vue'
 import {getOneEvent, updateEvent, allMedia} from '../services/events'
+import {allComments, createComment} from '../services/event_comments'
+
 export default {
     name: 'ShowEvent',
-    components: {EditableEvent, Event},
+    components: {CommentList, EditableEvent, Event},
     data: function() {
         return {
             id: parseInt(this.$route.params.id),
@@ -35,12 +43,15 @@ export default {
             updated_at: new Date(),
             inViewMode: true,
             media: [],
+            comments: [],
+            isCommentsLoaded: false,
         }
     },
     created: function() {
         Promise.all([
             this.getMedia(),
             this.getEvent(),
+            this.getComments(),
         ])
     },
     methods: {
@@ -61,6 +72,12 @@ export default {
                 this.updated_at = event.updated_at
             })
         },
+        getComments: function() {
+            return allComments(this.id).then(r => {
+                this.comments = r.data
+                this.isCommentsLoaded = true
+            })
+        },
         addedMedia: function(media) {
             this.media.push(media)
         },
@@ -81,12 +98,19 @@ export default {
                 updated_at: this.updated_at,
             }
         },
+        reloadComments: function() {
+            this.getComments()
+        },
         updateEvent: function(event) {
             updateEvent(event.id, event).then(r => {
                 this.$emit('eventUpdated')
                 this.changeMode()
                 this.$router.go() // Optional update the event from client data
             })
+        },
+        addComment: function(comment) {
+            createComment(this.id, comment)
+            .then(r => this.comments.push(r.data))
         }
     }
 }