feature(events): Reused add/edit component

mrmod · Mar 12, 2020 · 32d3a3b · 32d3a3b
1 parent 1bd37ee
commit 32d3a3b
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 61 deletions.
diff --git a/app/javascript/components/AddEvent.vue b/app/javascript/components/AddEvent.vue
@@ -1,56 +1,30 @@
 <template>
   <div id="add-event">
     <span class="md-display-1" @click='toggleShowAddEvent'>Create a new event</span>
-
-    <div v-if='showAddEvent'>
-      <Errors :errors='errors' />
-      <md-field>
-          <md-input v-model='name' placeholder='Event name'></md-input>
-      </md-field>
-      <md-field>
-          <md-input v-model='theme' placeholder='A casual themed event'></md-input>
-      </md-field>
-      <md-field>
-          <md-textarea v-model='description' placeholder='Describe the event'>
-          </md-textarea>
-      </md-field>
-      <DatetimePicker
-        :id='"start_time"'
-        :label='"Start time"'
-        :format='"YYYY-MM-DD h:mm a"'
-        v-model='start_time'
-      />
-      <DatetimePicker
-        :id='"end_time"'
-        :label='"End time"'
-        :format='"YYYY-MM-DD h:mm a"'
-        v-model='end_time'
-      />
-      <md-button class="md-raised md-primary" @click='createEvent'>
-          Save
-      </md-button>
-    </div>
+    <EditableEvent v-if='showAddEvent' :event='event' v-on:createEvent='createEvent'/>
   </div>
 </template>
 <script>
 import {createEvent} from '../services/events'
-import Errors from './Errors.vue'
+import EditableEvent from './EditableEvent.vue'
 export default {
     name: 'AddEvent',
-    components: {Errors},
+    components: {EditableEvent},
     props: {
         event: {type: Object, required: false}
     },
     data: function() {
         if (this.event) {
             return {
+                id: this.event.id,
                 name: this.event.name,
                 theme: this.event.theme,
                 description: this.event.description,
                 start_time: this.event.start_time,
                 end_time: this.event.end_time,
                 business_id: this.event.business_id,
                 parent_id: this.event.parent_id,
+                errors: null,
             }
         }
         return {
@@ -65,15 +39,7 @@ export default {
         }
     },
     methods: {
-        createEvent: function() {
-            const event = {
-                name: this.name,
-                theme: this.theme,
-                description: this.description,
-                start_time: this.start_time,
-                end_time: this.end_time,
-                business_id: this.business_id,
-            }
+        createEvent: function(event) {
             // TODO: Redirect to new event to allow further modification
             createEvent(event).then(() => {
                 this.$emit('eventAdded')

diff --git a/app/javascript/components/EditableEvent.vue b/app/javascript/components/EditableEvent.vue
@@ -0,0 +1,111 @@
+<template>
+  <div id="editable-event">
+    <Errors :errors='errors' />
+    <md-field>
+        <md-input v-model='name' placeholder='Event name'></md-input>
+    </md-field>
+    <md-field>
+        <md-input v-model='theme' placeholder='A casual themed event'></md-input>
+    </md-field>
+    <md-field>
+        <md-textarea v-model='description' placeholder='Describe the event'>
+        </md-textarea>
+    </md-field>
+    <DatetimePicker
+    :id='"start_time"'
+    :label='"Start time"'
+    :format='"YYYY-MM-DD h:mm a"'
+    v-model='start_time'
+    />
+    <DatetimePicker
+    :id='"end_time"'
+    :label='"End time"'
+    :format='"YYYY-MM-DD h:mm a"'
+    v-model='end_time'
+    />
+    <md-button class="md-raised md-primary" @click='createEvent'>
+        Save
+    </md-button>
+    <md-button class="md-accent" @click='cancelCreate'>
+        Cancel
+    </md-button>
+  </div>
+</template>
+<script>
+import {createEvent} from '../services/events'
+import Errors from './Errors.vue'
+export default {
+    name: 'AddEvent',
+    components: {Errors},
+    props: {
+        event: {type: Object, required: false}
+    },
+    data: function() {
+        if (this.event) {
+            return {
+                id: this.event.id,
+                isExisting: true,
+                name: this.event.name,
+                theme: this.event.theme,
+                description: this.event.description,
+                start_time: this.event.start_time,
+                end_time: this.event.end_time,
+                business_id: this.event.business_id,
+                parent_id: this.event.parent_id,
+                errors: null,
+            }
+        }
+        return {
+            name: '',
+            theme: '',
+            description: '',
+            start_time: '',
+            end_time: '',
+            business_id: this.$currentUser.business_id,
+            showAddEvent: false,
+            errors: null,
+        }
+    },
+    methods: {
+        createEvent: function() {
+  
+            const event = {
+                name: this.name,
+                theme: this.theme,
+                description: this.description,
+                start_time: this.start_time,
+                end_time: this.end_time,
+                business_id: this.business_id,
+            }
+            if (this.id) {
+                event.id = this.id
+            }
+            if (this.isExisting) {
+                this.$emit('updateEvent', event)
+                return
+            }
+            this.$emit('createEvent', event)
+        },
+        initializeData: function() {
+            this.name = ''
+            this.theme = ''
+            this.description = ''
+            this.start_time = ''
+            this.end_time = ''
+            this.showAddEvent = false
+            this.errors = null
+        },
+        toggleShowAddEvent: function() {
+            this.showAddEvent = !this.showAddEvent
+            // Clear the errors when it is hidden
+            if (!this.showAddEvent) {
+                this.errors = null
+            }
+        },
+        cancelCreate: function() {
+            this.toggleShowAddEvent()
+            this.$emit('changeMode')
+        }
+    }
+}
+</script>
diff --git a/app/javascript/components/Event.vue b/app/javascript/components/Event.vue
@@ -23,7 +23,8 @@
       </md-card-content>
 
       <md-card-actions>
-        <md-button class='md-raised md-primary' @click='updateEvent' v-if='isEditor'>Save</md-button>
+
+        <md-button class='md-primary' @click='changeMode' v-if='isEditable && isEditor'>Edit</md-button>
         <md-button class='md-accent' @click='deleteEvent' v-if='isEditor'>Delete</md-button>
       </md-card-actions>
     </md-card>
@@ -37,7 +38,7 @@ export default {
     name: 'Event',
     props: {
       event: Object,
-      isEditable: {default: false, type: Boolean},
+      isEditable: {default: true, type: Boolean},
     },
     data: function() {
       return {
@@ -66,19 +67,9 @@ export default {
           this.$router.replace('/events')
         })
       },
-      updateEvent: function() {
-        const event = {
-          id: this.event.id,
-          start_time: this.start_time,
-          end_time: this.end_time,
-          name: this.event.name,
-          theme: this.event.theme,
-          description: this.event.description,
-        }
-        updateEvent(this.event.id, event).then(r => {
-          this.$emit('eventUpdated')
-        })
-      }
+      changeMode: function() {
+        this.$emit('changeMode')
+      },
     }
 }
 </script>

diff --git a/app/javascript/components/EventList.vue b/app/javascript/components/EventList.vue
@@ -6,7 +6,8 @@
         v-for='event in events'
         :key='event.id'
         :event='event'
-        />
+        :isEditable='false'
+      />
   </div>
 </template>
 <script>

diff --git a/app/javascript/components/ShowEvent.vue b/app/javascript/components/ShowEvent.vue
@@ -1,26 +1,29 @@
 <template>
   <div id="show-event">
-      <Event :event='event' :isEditable='true' />
+      <Event :event='event' v-if='inViewMode' v-on:changeMode='changeMode' />
+      <EditableEvent :event='event' v-if='!inViewMode' v-on:changeMode='changeMode' v-on:updateEvent='updateEvent' />
   </div>
 </template>
 <script>
 import Event from './Event'
-import {getOneEvent} from '../services/events'
+import EditableEvent from './EditableEvent.vue'
+import {getOneEvent, updateEvent} from '../services/events'
 export default {
     name: 'ShowEvent',
-    components: {Event},
+    components: {EditableEvent, Event},
     data: function() {
         return {
             id: parseInt(this.$route.params.id),
             name: '',
             theme: '',
             description: '',
-            start_time: new Date(),
-            end_time: new Date(),
+            start_time: '',
+            end_time: '',
             parent_id: null,
             business_id: null,
             created_at: new Date(),
             updated_at: new Date(),
+            inViewMode: true,
         }
     },
     computed: {
@@ -52,6 +55,17 @@ export default {
             this.created_at = event.created_at
             this.updated_at = event.updated_at
         })
+    },
+    methods: {
+        changeMode: function() {
+            console.log("toggling")
+            this.inViewMode = !this.inViewMode
+        },
+        updateEvent: function(event) {
+            updateEvent(event.id, event).then(r => {
+                this.$emit('eventUpdated')
+            })
+        }
     }
 }
 </script>