Skip to content

Commit

Permalink
feat: Add delete button to EventEditor modal
Browse files Browse the repository at this point in the history
Also removed it from Stopwatch view so you don't delete events by
mistake, you now have to click the "Edit" button first.
  • Loading branch information
johan-bjareholt committed Jul 1, 2020
1 parent 4429745 commit a4cd0b0
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 12 deletions.
15 changes: 15 additions & 0 deletions src/components/EventEditor.vue
Expand Up @@ -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>

Expand All @@ -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: {
Expand Down Expand Up @@ -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>
10 changes: 3 additions & 7 deletions src/components/StopwatchEntry.vue
Expand Up @@ -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">
Expand All @@ -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';
Expand Down Expand Up @@ -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);
},
},
};
Expand Down
7 changes: 3 additions & 4 deletions src/views/Stopwatch.vue
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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);
},
Expand Down
5 changes: 4 additions & 1 deletion src/visualizations/EventList.vue
Expand Up @@ -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">
Expand Down Expand Up @@ -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>

0 comments on commit a4cd0b0

Please sign in to comment.