flesh out the delete handler

2 files changed, 16 insertions, 5 deletions

diff --git a/application/components/keymap.vue b/application/components/keymap.vue
index abda332..7bf7736 100644
--- a/application/components/keymap.vue
+++ b/application/components/keymap.vue
@@ -126,7 +126,16 @@ export default {
       ]
 
       this.$emit('update', { ...this.keymap, layers })
-    }
+    },
+    handleDeleteLayer(layerIndex) {
+      const layer_names = [...this.keymap.layer_names];
+      layer_names.splice(layerIndex, 1);
+
+      const layers = [...this.keymap.layers];
+      layers.splice(layerIndex, 1);
+
+      this.$emit("update", { ...this.keymap, layers, layer_names });
+    },
   }
 }
 </script>
@@ -138,6 +147,7 @@ export default {
     :activeLayer="activeLayer"
     @select="activeLayer = $event"
     @new-layer="handleCreateLayer"
+    @delete-layer="handleDeleteLayer($event)"
   />
   <div :style="getWrapperStyle()" v-bind="$attrs">
     <keyboard-layout
diff --git a/application/components/layer-selector.vue b/application/components/layer-selector.vue
index c21072c..86c8c9e 100644
--- a/application/components/layer-selector.vue
+++ b/application/components/layer-selector.vue
@@ -2,7 +2,7 @@
 <script>
 export default {
   props: ['layers', 'activeLayer', 'onSelect'],
-  emits: ['select', 'new-layer'],
+  emits: ['select', 'new-layer', 'delete-layer'],
   data() {
     return {
       renaming: false
@@ -27,8 +27,9 @@ export default {
     handleAdd() {
       this.$emit('new-layer')
     },
-    handleDelete() {
-      alert('really delete?')
+    handleDelete(layerIndex, layerName) {
+      const confirmation = confirm(`really delete layer: ${layerName}?`);
+      confirmation && this.$emit("delete-layer", layerIndex);
     },
     handleClickOutside({ target }) {
       const input = this.$el.querySelector('.active input.name')
@@ -62,7 +63,7 @@ export default {
           {{name}}
           <span
             class="delete fa fa-times-circle"
-            @click.stop="handleDelete"
+            @click.stop="handleDelete(i, name)"
           />
         </span>
       </li>