Update and delete functionalities done!

src/components/AddOccurrence.vue

@@ -161,7 +161,3 @@
 //    }
   }
 </script>
-
-<style scoped>
-@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
-</style>

src/components/EditOccurrence.vue

@@ -0,0 +1,142 @@
+<template>
+  <div style="padding-top: 72px">
+    <section class="hero is-bold">
+      <div class="hero-body">
+        <div class="container">
+          <div class="columns is-vcentered">
+            <div class="column is-4 is-offset-4">
+              <h1 class="title">
+                Edit an Occurrence
+              </h1>
+
+              <div class="box">
+                <img v-if="getEditEventData" :src="getEditEventData.imgUrl" alt="">
+                <div class="field">
+                  <p class="control has-icons-left">
+                    <input class="input" type="text" placeholder="Description" v-model="eventDescription = getEditEventData.description">
+                    <span class="icon is-small is-left">
+                      <i class="fa fa-info"></i>
+                    </span>
+                  </p>
+                </div>
+
+                <div class="field has-addons">
+                  <p class="control has-icons-left">
+                    <input class="input" type="text" placeholder="Location" disabled>
+                    <span class="icon is-small is-left">
+                      <i class="fa fa-map-marker"></i>
+                    </span>
+                  </p>
+                  <p class="control">
+                    <button class="button is-primary is-inverted">
+                      <span class="icon is-left">
+                        <i class="fa fa-globe"></i>
+                      </span>
+                    </button>
+                  </p>
+                </div>
+
+                <div class="field">
+                  <div class="select">
+                    <select v-model="selectedEventType = getEditEventData.eventType">
+                      <option v-for="option in eventTypeOptions" :value="option.text">
+                        {{option.text}}
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                <hr>
+                <div class="level">
+                  <div class="level-left"></div>
+                  <div class="level-right">
+                    <p class="level-item">
+                      <a class="button is-primary" @click="updateEvent">
+                        <span>Update</span>
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--Google maps-->
+      <!--<div class="modal" :class="{'is-active': toggleMaps}">-->
+      <!--<div class="modal-background"></div>-->
+      <!--<div class="modal-content">-->
+      <!--<gmap-autocomplete class="input" @place_changed="setPlace"></gmap-autocomplete>-->
+      <!--<Gmap-map-->
+      <!--:center="center"-->
+      <!--:zoom="10"-->
+      <!--map-type-id="terrain"-->
+      <!--style="width: 100%; height: 500px;"-->
+      <!--&gt;-->
+      <!--<gmap-marker-->
+      <!--:position="center"-->
+      <!--:clickable="true"-->
+      <!--&gt;-->
+      <!--&lt;!&ndash;Will change later, draggable with coords&ndash;&gt;-->
+      <!--</gmap-marker>-->
+      <!--</Gmap-map>-->
+      <!--</div>-->
+      <!--<button class="modal-close is-large" aria-label="close" @click="toggleMaps = false"></button>-->
+      <!--</div>-->
+    </section>
+  </div>
+</template>
+
+<script>
+  export default {
+    data(){
+      return {
+        eventDescription: '',
+        selectedEventType: 'Convention',
+        eventTypeOptions: [
+          {text: 'Convention'},
+          {text: 'Party'},
+          {text: 'Seminar'},
+          {text: 'Earthquake'},
+          {text: 'Fire'},
+          {text: 'Tsunami'},
+          {text: 'Typhoon'}
+        ]
+      }
+    },
+    methods: {
+      getFileName(){
+        let file = document.getElementById('file')
+        console.log(file.files[0])
+        //To display the file name
+        this.fileName = file.files[0].name
+      },
+      updateEvent(){
+        let description = this.eventDescription
+        let eventType = this.selectedEventType
+        if(description && eventType){
+          this.$store.dispatch('UPDATE_POST', {
+            eventKey: this.$route.params.id,
+            description,
+            eventType
+          })
+        }
+      }
+    },
+    computed: {
+      getEditEventData(){
+        //Getting the event data
+        return this.$store.getters.getEditEventData
+      }
+    },
+    created(){
+      //Get the current event to edit
+      this.$store.dispatch('GET_EDIT_POST_DATA', {
+        eventKey: this.$route.params.id
+      })
+    },
+    beforeDestroy(){
+      //When leaving this page delete the current event data
+      this.$store.commit('DELETE_CURRENT_EDIT_EVENT_DATA')
+    }
+  }
+</script>

src/components/UserProfile.vue

@@ -11,12 +11,12 @@
           </div>
           <div class="column is-5">
             <p>
-              <span class="title is-bold">Joshua Angelo Bienes</span>
+              <span class="title is-bold">{{ `${this.$store.getters.getUserData.firstName} ${this.$store.getters.getUserData.lastName}` }}</span>
               <span class="button is-primary is-inverted is-small" @click="editProfileModal = true">
                 <span class="icon is-small"><i class="icons8-create-new"></i></span>
               </span>
             </p>
-            <p class="">[email protected]</p>
+            <p class="">{{ this.$store.getters.getUserData.email }}</p>
           </div>
           <div class="column is-6">
             <div class="level is-mobile">
@@ -63,15 +63,17 @@
       </div>
 
       <br />
+
       <!--My Posts-->
       <div class="wrapper" v-if="myPost">
         <div class="post-box" v-for="event in loadUserPosts" :key="event.key">
-          <div class="post-head">
+          <div class="post-head upper-box">
             <img src="https://trackback.net/wp-content/uploads/2015/02/Dummy-profile-picture.png" alt="">
             <div class="post-user">
-              <p class="is-size-4 has-text-primary">{{ event.createdByName }}</p>
+              <p class="is-size-4 has-text-primary is-size-6-mobile">{{ event.createdByName }}</p>
               <p class="is-size-7">{{ event.createdOn | date }}</p>
             </div>
+            <a class="delete" @click="deletePostModal=true"></a>
           </div>
           <div class="post-body">
             <img :src="event.imgUrl" alt="">
@@ -98,6 +100,26 @@
                   <span>{{ event.eventType }}</span>
                 </div>
               </div>
+              <hr>
+              <div class="control">
+                <a class="button is-primary is-outlined" @click="editPost(event.key)"><i class="icons8-pencil"></i><span>Edit</span></a>
+              </div>
+            </div>
+          </div>
+
+          <div class="modal" :class="{'is-active': deletePostModal}">
+            <div class="modal-background"></div>
+            <div class="modal-card card-wrapper">
+              <header class="modal-card-head">
+                <p class="modal-card-title">Deleting Post...</p>
+              </header>
+              <section class="modal-card-body">
+                <p class="is-size-6">Are you sure? You won't find it anywhere anymore.</p>
+              </section>
+              <footer class="modal-card-foot" style="justify-content:flex-end;">
+                <a class="button" @click="deletePostModal=false">Cancel</a>
+                <a class="button is-danger" @click="deletePost(event.key)">Delete</a>
+              </footer>
             </div>
           </div>
         </div>
@@ -202,6 +224,7 @@
     data(){
       return {
         editProfileModal: false,
+        deletePostModal: false,
         myPost: true,
         attending: false
       }
@@ -215,6 +238,12 @@
       attendingIsActive(){
         this.myPost = false
         this.attending = true
+      },
+      editPost(eventKey){
+        this.$router.push(`/edit/${eventKey}`)
+      },
+      deletePost(eventKey){
+        this.$store.dispatch('DELETE_POST', {eventKey})
       }
     },
     computed: {
@@ -247,4 +276,18 @@
 <style scoped>
   @import "../assets/css/timeline.css";
   @import "../assets/css/profile.css";
+
+  .wrapper .post-box .post-head.upper-box{
+    display: flex;
+  }
+  .wrapper .post-box .post-head.upper-box .post-user{
+    flex: 1;
+  }
+  .wrapper .post-box .post-head.upper-box a.delete{
+    flex: 4;
+  }
+
+  .control a.button:hover i{
+    color: white;
+  }
 </style>

src/router/index.js

@@ -5,6 +5,7 @@ import LandingPage from '../components/LandingPage.vue'
 import Home from '../components/Home.vue'
 import AddOccurrence from '../components/AddOccurrence.vue'
 import UserProfile from '../components/UserProfile.vue'
+import EditOccurrence from '../components/EditOccurrence.vue'
 
 //Import vuex store
 import { store } from '../store'
@@ -27,6 +28,11 @@ const routes = [
   { path: '/home',  component: Home, beforeEnter: AuthGuard },
   { path: '/home/add',  component: AddOccurrence, beforeEnter: AuthGuard },
   { path: '/profile',  component: UserProfile, beforeEnter: AuthGuard },
+  {
+    path: '/edit/:id',
+    component: EditOccurrence,
+    beforeEnter: AuthGuard
+  },
 ]
 
 export const router = new VueRouter({

src/store/actions.js

@@ -91,13 +91,14 @@ export default {
   LOAD_USER_POST: ({getters, commit}) => {
     firebase.database().ref('events').on('value', snap => {
       let events = []
-      snap.forEach(childSnap => {
-        var item = childSnap.val()
-        //If the post is created by user, push to the array
-        if(item.createdById === getters.getUserData.id){
+      let snapshot = snap.val()
+      for(let key in snapshot){
+        let item = snapshot[key]
+        if(snapshot[key].createdById === getters.getUserData.id){
+          item.key = key
           events.push(item)
         }
-      })
+      }
       commit('SET_USER_POST', events)
     })
   },
@@ -188,5 +189,35 @@ export default {
         toastr.success('You are now attending!', {timeout: 1000})
       }
     })
+  },
+  UPDATE_POST: ({getters}, {eventKey, description, eventType}) => {
+    //Update an event
+    firebase.database().ref(`events/${eventKey}`).update({
+      description: description,
+      eventType: eventType
+    }).then(() => {
+      toastr.success('Successfully updated!')
+      router.push('/profile')
+    }).catch(err => {
+      toastr.error('Seems like there\'s an error')
+    })
+  },
+  DELETE_POST: ({getters}, {eventKey}) => {
+    //Delete a post to both database and storage
+    firebase.database().ref(`events/${eventKey}`).remove().then(() => {
+      firebase.database().ref(`users/${getters.getUserData.id}/posts`).child(eventKey).remove().then(() => {
+        firebase.storage().ref(`images/${eventKey}`).delete().then(() => {
+          toastr.success('Post deleted successfully!')
+        })
+      })
+    }).catch(err => {
+      toastr.error('Seems like there\'s an error.')
+    })
+  },
+  //Current edit post data
+  GET_EDIT_POST_DATA: ({commit}, {eventKey}) => {
+    firebase.database().ref(`events/${eventKey}`).once('value').then(snap => {
+      commit('SET_CURRENT_EDIT_EVENT_DATA', snap.val())
+    })
   }
 }

src/store/getters.js

@@ -17,5 +17,8 @@ export default {
   },
   getAttendEvents: (state) => {
     return state.attendEvents
+  },
+  getEditEventData: (state) => {
+    return state.editEventData
   }
 }

src/store/index.js

@@ -16,6 +16,7 @@ export const store = new Vuex.Store({
     events: [],
     userPosts: [],
     attendEvents: [],
+    editEventData: null,
     isSignedIn: false
   },
   actions,

src/store/mutations.js

@@ -13,5 +13,13 @@ export default {
   },
   SET_ATTENDED_EVENTS: (state, payload) => {
     state.attendEvents = payload
+  },
+  //Set editEventData when entering the edit page
+  SET_CURRENT_EDIT_EVENT_DATA: (state, payload) => {
+    state.editEventData = payload
+  },
+  //Delete editEventData when you leave the edit page
+  DELETE_CURRENT_EDIT_EVENT_DATA: (state) => {
+    state.editEventData = null
   }
 }