refactor: Move modal into EventEditor

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
@@ -33,14 +33,14 @@ div
   hr
 
   div.float-left
-    b-button.mx-1(@click="delete_(); $emit('close');" variant="danger")
+    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>
@@ -94,8 +94,12 @@ export default {
     },
     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);
+      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);
     },
   },
 };

src/components/StopwatchEntry.vue

@@ -20,8 +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-modal(:id="'edit-modal-' + event.id", ref="eventEditModal", title="Edit event", centered, hide-footer)
-    event-editor(:event="event", :bucket_id="bucket_id", @save="save", @delete="delete_", @close="$refs.eventEditModal.hide()")
+  event-editor(:event="event", :bucket_id="bucket_id", @save="save", @delete="delete_")
 </template>
 
 <style scoped lang="scss">

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)", @delete="removeEvent" @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">