Add a button to allow the user to create a new keyboard

src/components/KeyboardDisplay.vue

 <template>
-  <div>
+  <div v-if="characters && characters.length">
     <div v-if="!charTable">An error occured loading the keyboard</div>
     <div v-else v-for="(row, i) in charTable" :key="i">
       <span v-for="(char, j) in row" :key="j">

src/components/KeyboardManager.vue

@@ -21,6 +21,9 @@
     </div>
     <div v-else>
       <strong>Keyboards manager</strong>
+      <button class="right" type="button" v-on:click="createKeyboard">
+        Create a new keyboard
+      </button>
       <hr />
       <div v-if="!keyboards || !keyboards.length">
         No keyboard to display, please add one.
@@ -101,13 +104,16 @@ export default {
     ...mapState(["keyboards"]),
   },
   methods: {
-    ...mapMutations(["delete", "updateName"]),
+    ...mapMutations(["add", "delete", "updateName"]),
     updateKeyboardName() {
       this.updateName({
         index: this.editedKeyboard,
         name: this.keyboardName,
       });
     },
+    createKeyboard() {
+      this.add();
+    },
     deleteKeyboard() {
       this.delete(this.keyboardToDelete);
       this.keyboardToDelete = null;
@@ -131,4 +137,7 @@ table.keyboards td {
   border: 1px solid black;
   border-collapse: collapse;
 }
+.right {
+  float: right;
+}
 </style>

src/config.js

@@ -42,3 +42,10 @@ export const DEFAULT_KEYBOARDS = [
     ],
   },
 ];
+
+export const NEW_KEYBOARD = {
+  version: "0.1",
+  name: "New keyboard",
+  author: "",
+  characters: [],
+};

src/store/index.js

@@ -4,6 +4,7 @@ import axios from "axios";
 import {
   KEYBOARDS_LOCALSTORAGE_KEY,
   DEFAULT_KEYBOARDS,
+  NEW_KEYBOARD,
   UTF8_ASSETS_URL,
 } from "../config";
 
@@ -43,6 +44,9 @@ export default new Vuex.Store({
     setSelectedScript(state, { name, page }) {
       state.selectedScript = { name, page };
     },
+    add(state) {
+      state.keyboards = [...state.keyboards, { ...NEW_KEYBOARD }];
+    },
     delete(state, index) {
       state.keyboards.splice(index, 1);
     },