Add a button allowing the user to delete a keyboard

src/components/Keyboard.vue

@@ -14,7 +14,7 @@
           v-on:input="addChar"
         />
       </div>
-      <div v-else>No keyboard to display, please add one.</div>
+      <div v-else>No keyboard is selected, please choose one.</div>
 
       <Modal v-if="optionsModal" v-model="optionsModal">
         <KeyboardManager />

src/components/KeyboardManager.vue

@@ -22,7 +22,10 @@
     <div v-else>
       <strong>Keyboards manager</strong>
       <hr />
-      <table class="keyboards">
+      <div v-if="!keyboards || !keyboards.length">
+        No keyboard to display, please add one.
+      </div>
+      <table class="keyboards" v-else>
         <thead>
           <tr>
             <th>Keyboard</th>
@@ -40,11 +43,37 @@
               <button type="button" v-on:click="editedKeyboard = index">
                 Edit
               </button>
+              <button
+                type="button"
+                v-on:click="
+                  deleteModal = true;
+                  keyboardToDelete = index;
+                "
+              >
+                Delete
+              </button>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
+
+    <Modal v-if="deleteModal" v-model="deleteModal">
+      Are you sure you want to delete keyboard
+      {{ keyboards[keyboardToDelete].name }}?
+      <div>
+        <button
+          type="button"
+          v-on:click="
+            deleteModal = false;
+            keyboardToDelete = null;
+          "
+        >
+          Cancel
+        </button>
+        <button type="button" v-on:click="deleteKeyboard()">Delete</button>
+      </div>
+    </Modal>
   </div>
 </template>
 
@@ -53,28 +82,37 @@ import { mapMutations } from "vuex";
 import { mapState } from "vuex";
 import KeyboardConfiguration from "./KeyboardConfiguration.vue";
 import KeyboardDisplay from "./KeyboardDisplay.vue";
+import Modal from "./Modal.vue";
 
 export default {
   components: {
     KeyboardConfiguration,
     KeyboardDisplay,
+    Modal,
   },
   data: () => ({
     selectedKeyboard: null,
     editedKeyboard: null,
     keyboardName: null,
+    deleteModal: false,
+    keyboardToDelete: null,
   }),
   computed: {
     ...mapState(["keyboards"]),
   },
   methods: {
-    ...mapMutations(["updateName"]),
+    ...mapMutations(["delete", "updateName"]),
     updateKeyboardName() {
       this.updateName({
         index: this.editedKeyboard,
         name: this.keyboardName,
       });
     },
+    deleteKeyboard() {
+      this.delete(this.keyboardToDelete);
+      this.keyboardToDelete = null;
+      this.deleteModal = false;
+    },
   },
   watch: {
     editedKeyboard() {

src/store/index.js

@@ -43,6 +43,9 @@ export default new Vuex.Store({
     setSelectedScript(state, { name, page }) {
       state.selectedScript = { name, page };
     },
+    delete(state, index) {
+      state.keyboards.splice(index, 1);
+    },
     updateName(state, { index, name }) {
       if (!state.keyboards[index]) return;
       state.keyboards[index].name = name;