Work on `reservation.vue` component.

- Move Lodash cloneDeep to Vuex store.

2 files changed, 25 insertions, 7 deletions

diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index 5389e1a..ec430ab 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -25,21 +25,21 @@ export default {
   props: [ 'reservationIndex' ],
   data() {
     return {
-      reservation: {}
+      reservation: this.$store.getters.getDataRow(this.reservationIndex)
     }
   },
-  mounted() {
-    this.reservation = _.cloneDeep(this.$store.getters.getData[this.reservationIndex]);
-  },
   methods: {
     updateRow() {
-
+      this.$store.dispatch('pushReservation', {
+        index: this.reservationIndex,
+        reservation: this.reservation
+      });
     },
     restoreRow() {
-      this.reservation = _.cloneDeep(this.$store.getters.getData[this.reservationIndex]);
+      this.reservation = this.$store.getters.getDataRow(this.reservationIndex);
     },
     deleteRow() {
-
+      this.$store.dispatch('removeReservation', this.reservationIndex);
     }
   }
 }
diff --git a/resources/js/store.js b/resources/js/store.js
index 345b866..e0c4383 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -17,6 +17,9 @@ export default new Vuex.Store({
     },
     getData(state) {
       return state.data;
+    },
+    getDataRow(state) {
+      return (index) => _.cloneDeep(state.data[index]);
     }
   },
   mutations: {
@@ -28,6 +31,12 @@ export default new Vuex.Store({
     },
     setData(state, data) {
       state.data = data;
+    },
+    setDataRow(state, row) {
+      state.data[row.index] = _.cloneDeep(row.data);
+    },
+    removeDataRow(state, index) {
+      state.data.splice(index, 1);
     }
   },
   actions: {
@@ -54,6 +63,15 @@ export default new Vuex.Store({
       }).catch(error => {
         console.log(error);
       });
+    },
+    async pushReservation(context, data) {
+      context.commit('setDataRow', {
+        index: data.index,
+        data: data.reservation
+      });
+    },
+    async removeReservation(context, index) {
+      context.commit('removeDataRow', index);
     }
   }
 });