feat: Add delete button to EventEditor modal

Also removed it from Stopwatch view so you don't delete events by
mistake, you now have to click the "Edit" button first.

Author: johan-bjareholt

src/components/EventEditor.vue

@@ -32,10 +32,16 @@ div
 
   hr
 
+  div.float-left
+    b-button.mx-1(@click="delete_(); $emit('close');" variant="danger")
+      icon.mx-1(name="trash")
+      | Delete
   div.float-right
     b-button.mx-1(@click="$emit('close');")
+      icon.mx-1(name="times")
       | Cancel
     b-button.mx-1(@click="save(); $emit('close');", variant="primary")
+      icon.mx-1(name="save")
       | Save
 </template>
 
@@ -44,6 +50,10 @@ div
 <script>
 import moment from 'moment';
 
+import 'vue-awesome/icons/times';
+import 'vue-awesome/icons/save';
+import 'vue-awesome/icons/trash';
+
 export default {
   name: 'EventEditor',
   props: {
@@ -82,6 +92,11 @@ export default {
       this.$emit('save', this.editedEvent);
       await this.$aw.replaceEvent(this.bucket_id, this.editedEvent);
     },
+    async delete_() {
+      // This emit needs to be called first, otherwise it won't occur for some reason
+      this.$emit('delete', this.editedEvent);
+      await this.$aw.deleteEvent(this.bucket_id, this.editedEvent.id);
+    },
   },
 };
 </script>

src/components/StopwatchEntry.vue

@@ -20,11 +20,8 @@ div
       b-button.mx-1(v-b-modal="'edit-modal-' + event.id", variant="outline-dark", size="sm")
         icon.ml-0.mr-1(name="edit")
         | Edit
-      b-button.mx-1(@click="delete_", variant="outline-danger", size="sm")
-        icon.mx-0(name="trash")
-        //| Delete
   b-modal(:id="'edit-modal-' + event.id", ref="eventEditModal", title="Edit event", centered, hide-footer)
-    event-editor(:event="event", :bucket_id="bucket_id", @save="save", @close="$refs.eventEditModal.hide()")
+    event-editor(:event="event", :bucket_id="bucket_id", @save="save", @delete="delete_", @close="$refs.eventEditModal.hide()")
 </template>
 
 <style scoped lang="scss">
@@ -38,7 +35,6 @@ import moment from 'moment';
 import 'vue-awesome/icons/edit';
 import 'vue-awesome/icons/stop';
 import 'vue-awesome/icons/play';
-import 'vue-awesome/icons/trash';
 
 import EventEditor from './EventEditor.vue';
 
@@ -66,8 +62,8 @@ export default {
     save: async function(new_event) {
       this.$emit('update', new_event);
     },
-    delete_: async function() {
-      this.$emit('delete', this.event);
+    delete_: async function(new_event) {
+      this.$emit('delete', new_event);
     },
   },
 };

src/views/Stopwatch.vue

@@ -22,7 +22,7 @@ div
         h3 Running
         div(v-for="e in runningTimers")
           stopwatch-entry(:event="e", :bucket_id="bucket_id", :now="now",
-            @delete="deleteTimer", @update="updateTimer")
+            @delete="removeTimer", @update="updateTimer")
           hr(style="margin: 0")
       div(v-else)
         span(style="color: #555") No stopwatch running
@@ -34,7 +34,7 @@ div
           h5.mt-2.mb-1 {{ k }}
           div(v-for="e in timersByDate[k]")
             stopwatch-entry(:event="e", :bucket_id="bucket_id", :now="now",
-              @delete="deleteTimer", @update="updateTimer", @new="startTimer(e.data.label)")
+              @delete="removeTimer", @update="updateTimer", @new="startTimer(e.data.label)")
             hr(style="margin: 0")
       div(v-else)
         span(style="color: #555") No history to show
@@ -119,8 +119,7 @@ export default {
       }
     },
 
-    deleteTimer: async function(event) {
-      await this.$aw.deleteEvent(this.bucket_id, event.id);
+    removeTimer: function(event) {
       this.events = _.filter(this.events, e => e.id != event.id);
     },
 

src/visualizations/EventList.vue

@@ -31,7 +31,7 @@ div
 
           // TODO: Refactor modal into event-editor component?
           b-modal(:id="'edit-modal-' + event.id", ref="eventEditModal", title="Edit event", centered, hide-footer)
-            event-editor(:event="event", :bucket_id="bucket_id", @save="(e) => $emit('save', e)", @close="$bvModal.hide('edit-modal-' + event.id)")
+            event-editor(:event="event", :bucket_id="bucket_id", @save="(e) => $emit('save', e)", @delete="removeEvent" @close="$bvModal.hide('edit-modal-' + event.id)")
 </template>
 
 <style scoped lang="scss">
@@ -137,6 +137,9 @@ export default {
       this.isListExpanded = !this.isListExpanded;
       console.log('List should be expanding: ', this.isListExpanded);
     },
+    removeEvent: function(event) {
+      this.events = _.filter(this.events, e => e.id != event.id);
+    },
   },
 };
 </script>