Refactor keyboards storage + Add an input to edit a keyboard name

src/components/Keyboard.vue

@@ -8,9 +8,13 @@
         </a>
       </div>
 
-      <div class="content">
-        <KeyboardDisplay :keyboard="keyboard" v-on:input="addChar" />
+      <div class="content" v-if="keyboard">
+        <KeyboardDisplay
+          :keyboard-index="selectedKeyboard"
+          v-on:input="addChar"
+        />
       </div>
+      <div v-else>No keyboard to display, please add one.</div>
 
       <Modal v-if="optionsModal" v-model="optionsModal">
         <KeyboardManager />
@@ -24,6 +28,7 @@ import { mapState } from "vuex";
 import KeyboardDisplay from "./KeyboardDisplay.vue";
 import KeyboardManager from "./KeyboardManager.vue";
 import Modal from "./Modal.vue";
+
 export default {
   components: {
     KeyboardDisplay,
@@ -46,7 +51,8 @@ export default {
       A: "Ǡ",
     },
     optionsModal: false,
-    selectedKeyboard: null,
+    // Select the keyboard at index 0 in the keyboard list by default
+    selectedKeyboard: 0,
   }),
   created() {
     this.inputField.addEventListener("blur", this.looseFocus);
@@ -59,18 +65,10 @@ export default {
   computed: {
     ...mapState(["keyboards"]),
     keyboard() {
-      if (!this.selectedKeyboard) return;
       return this.keyboards[this.selectedKeyboard];
     },
   },
   methods: {
-    selectDefaultKeyboard() {
-      const keyboard = Object.values(this.keyboards).find(
-        (k) => (k.default = true)
-      );
-      if (keyboard) this.selectedKeyboard = keyboard.name;
-      else if (this.keyboards.length) this.keyboards[0].name;
-    },
     addChar(key) {
       if (!key.character) return;
       // Add a character to the input depending on the cursor selection
@@ -109,14 +107,6 @@ export default {
       // Focus the input when closing the modal
       if (!value) this.inputField.focus();
     },
-    keyboards: {
-      immediate: true,
-      handler() {
-        if (!this.selectedKeyboard || !this.keyboards[this.selectedKeyboard]) {
-          this.selectDefaultKeyboard();
-        }
-      },
-    },
   },
 };
 </script>

src/components/KeyboardConfiguration.vue

@@ -4,7 +4,7 @@
       <UTF8Picker v-if="picker" :selectedChar.sync="selectedChar" />
       <KeyboardDisplay
         v-else
-        :keyboard="keyboard"
+        :keyboard-index="keyboardIndex"
         :selectedKey="selectedKey"
         v-on:input="(i) => (selectedKey = i)"
       />
@@ -44,14 +44,15 @@ import { mapMutations } from "vuex";
 import KeyboardDisplay from "./KeyboardDisplay.vue";
 import UTF8Picker from "./UTF8Picker.vue";
 import { displayUTF8 } from "../helpers.js";
+
 export default {
   components: {
     KeyboardDisplay,
     UTF8Picker,
   },
   props: {
-    keyboard: {
-      type: Object,
+    keyboardIndex: {
+      type: Number,
       required: true,
     },
   },
@@ -70,7 +71,7 @@ export default {
       // Update the keyboard
       this.selectedKey = this.updateKey({
         ...this.selectedKey,
-        keyboardName: this.keyboard.name,
+        index: this.keyboardIndex,
         code: this.selectedChar.code,
       });
       this.selectedChar = null;

src/components/KeyboardDisplay.vue

@@ -23,10 +23,12 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   props: {
-    keyboard: {
-      type: Object,
+    keyboardIndex: {
+      type: Number,
       required: true,
     },
     // Row and column value of the selected keyboard key
@@ -36,8 +38,9 @@ export default {
     },
   },
   computed: {
+    ...mapState(["keyboards"]),
     characters() {
-      return this.keyboard.characters;
+      return this.keyboards[this.keyboardIndex].characters;
     },
     rowsCount() {
       return (

src/components/KeyboardManager.vue

 <template>
   <div>
-    <div v-if="editedKeyboard">
+    <div v-if="editedKeyboard !== null">
       <a title="Back to keyboards" href="#" v-on:click="editedKeyboard = null">
         ⏴
       </a>
-      <span>{{ editedKeyboard.name }}</span>
-      <KeyboardConfiguration :keyboard="editedKeyboard" />
+      <input type="text" v-model="keyboardName" />
+      <button type="button" v-on:click="updateKeyboardName">Save</button>
+      <KeyboardConfiguration :keyboard-index="editedKeyboard" />
     </div>
-    <div v-else-if="selectedKeyboard">
+    <div v-else-if="selectedKeyboard !== null">
       <a
         title="Back to keyboards"
         href="#"
@@ -15,8 +16,8 @@
       >
         ⏴
       </a>
-      <span>{{ selectedKeyboard.name }}</span>
-      <KeyboardDisplay :keyboard="selectedKeyboard" />
+      <span>{{ keyboards[selectedKeyboard].name }}</span>
+      <KeyboardDisplay :keyboard-index="selectedKeyboard" />
     </div>
     <div v-else>
       <strong>Keyboards manager</strong>
@@ -30,13 +31,13 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="k in keyboards" :key="k.name">
+          <tr v-for="(k, index) in keyboards" :key="index">
             <td>
-              <a href="#" v-on:click="selectedKeyboard = k">{{ k.name }}</a>
+              <a href="#" v-on:click="selectedKeyboard = index">{{ k.name }}</a>
             </td>
             <td>{{ k.characters.length }}</td>
             <td>
-              <button type="button" v-on:click="editedKeyboard = k">
+              <button type="button" v-on:click="editedKeyboard = index">
                 Edit
               </button>
             </td>
@@ -48,6 +49,7 @@
 </template>
 
 <script>
+import { mapMutations } from "vuex";
 import { mapState } from "vuex";
 import KeyboardConfiguration from "./KeyboardConfiguration.vue";
 import KeyboardDisplay from "./KeyboardDisplay.vue";
@@ -60,10 +62,26 @@ export default {
   data: () => ({
     selectedKeyboard: null,
     editedKeyboard: null,
+    keyboardName: null,
   }),
   computed: {
     ...mapState(["keyboards"]),
   },
+  methods: {
+    ...mapMutations(["updateName"]),
+    updateKeyboardName() {
+      this.updateName({
+        index: this.editedKeyboard,
+        name: this.keyboardName,
+      });
+    },
+  },
+  watch: {
+    editedKeyboard() {
+      if (this.editedKeyboard !== null)
+        this.keyboardName = this.keyboards[this.editedKeyboard].name;
+    },
+  },
 };
 </script>
 

src/config.js

@@ -9,12 +9,11 @@ export const KEYBOARDS_LOCALSTORAGE_KEY = "virtual_keyboards";
 export const UTF8_ASSETS_URL =
   "https://assets.teklia.com/virtual-keyboard/scripts";
 
-export const DEFAULT_KEYBOARDS = {
-  demo: {
+export const DEFAULT_KEYBOARDS = [
+  {
     version: "0.1",
     name: "demo",
     author: "Teklia <team@teklia.com>",
-    default: true,
     characters: [
       {
         row: 0,
@@ -42,4 +41,4 @@ export const DEFAULT_KEYBOARDS = {
       },
     ],
   },
-};
+];

src/store/index.js

@@ -44,9 +44,13 @@ export default new Vuex.Store({
     setSelectedScript(state, { name, page }) {
       state.selectedScript = { name, page };
     },
-    updateKey(state, { keyboardName, row, column, code }) {
-      // Updates a key on a specific keyboard and return this key
-      const keyboard = state.keyboards[keyboardName];
+    updateName(state, { index, name }) {
+      if (!state.keyboards[index]) return;
+      state.keyboards[index].name = name;
+    },
+    updateKey(state, { index, row, column, code }) {
+      // Copy the keyboard if the index is correct to avoid modifying it directly in the state 
+      const keyboard = state.keyboards[index] && { ...state.keyboards[index] };
       if (!keyboard) return;
       // Find the key and replace it
       const newKey = {
@@ -60,10 +64,9 @@ export default new Vuex.Store({
       );
       if (keyPos > 0) keyboard.characters[keyPos] = newKey;
       else keyboard.characters.push(newKey);
-      state.keyboards = {
-        ...state.keyboards,
-        [keyboardName]: { ...keyboard },
-      };
+      state.keyboards[index] = keyboard;
+      // Update list reference to propagate changes across components
+      state.keyboards = [...state.keyboards];
     },
   },
   actions: {