Merge pull request #214 from ActivityWatch/dev/move-delete-button

feat: Add delete button to EventEditor modal

Author: johan-bjareholt

src/components/EventEditor.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-div
+b-modal(:id="'edit-modal-' + event.id", ref="eventEditModal", title="Edit event", centered, hide-footer)
   table(style="width: 100%")
     tr
       th Bucket
@@ -32,10 +32,16 @@ div
 
   hr
 
+  div.float-left
+    b-button.mx-1(@click="delete_(); close();" variant="danger")
+      icon.mx-1(name="trash")
+      | Delete
   div.float-right
-    b-button.mx-1(@click="$emit('close');")
+    b-button.mx-1(@click="close")
+      icon.mx-1(name="times")
       | Cancel
-    b-button.mx-1(@click="save(); $emit('close');", variant="primary")
+    b-button.mx-1(@click="save(); 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,15 @@ 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.event);
+      await this.$aw.deleteEvent(this.bucket_id, this.event.id);
+    },
+    close() {
+      this.$refs.eventEditModal.hide();
+      this.$emit('close', this.event);
+    },
   },
 };
 </script>

src/components/StopwatchEntry.vue

@@ -20,11 +20,7 @@ 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_")
 </template>
 
 <style scoped lang="scss">
@@ -38,7 +34,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 +61,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

@@ -29,9 +29,10 @@ div
               b-btn(v-b-modal="'edit-modal-' + event.id", variant="outline-dark" size="sm")
                 | Edit
 
-          // 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"
+          )
 </template>
 
 <style scoped lang="scss">
@@ -137,6 +138,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>