Skip to content
Snippets Groups Projects
Commit 0d86ebca authored by Eva Bardou's avatar Eva Bardou Committed by Valentin Rigal
Browse files

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

parent 3a4f080f
No related branches found
No related tags found
1 merge request!18Add a button to allow the user to create a new keyboard
Pipeline #5654 passed with warnings
<template> <template>
<div> <div v-if="characters && characters.length">
<div v-if="!charTable">An error occured loading the keyboard</div> <div v-if="!charTable">An error occured loading the keyboard</div>
<div v-else v-for="(row, i) in charTable" :key="i"> <div v-else v-for="(row, i) in charTable" :key="i">
<span v-for="(char, j) in row" :key="j"> <span v-for="(char, j) in row" :key="j">
......
...@@ -21,6 +21,9 @@ ...@@ -21,6 +21,9 @@
</div> </div>
<div v-else> <div v-else>
<strong>Keyboards manager</strong> <strong>Keyboards manager</strong>
<button class="right" type="button" v-on:click="createKeyboard">
Create a new keyboard
</button>
<hr /> <hr />
<div v-if="!keyboards || !keyboards.length"> <div v-if="!keyboards || !keyboards.length">
No keyboard to display, please add one. No keyboard to display, please add one.
...@@ -101,13 +104,16 @@ export default { ...@@ -101,13 +104,16 @@ export default {
...mapState(["keyboards"]), ...mapState(["keyboards"]),
}, },
methods: { methods: {
...mapMutations(["delete", "updateName"]), ...mapMutations(["add", "delete", "updateName"]),
updateKeyboardName() { updateKeyboardName() {
this.updateName({ this.updateName({
index: this.editedKeyboard, index: this.editedKeyboard,
name: this.keyboardName, name: this.keyboardName,
}); });
}, },
createKeyboard() {
this.add();
},
deleteKeyboard() { deleteKeyboard() {
this.delete(this.keyboardToDelete); this.delete(this.keyboardToDelete);
this.keyboardToDelete = null; this.keyboardToDelete = null;
...@@ -131,4 +137,7 @@ table.keyboards td { ...@@ -131,4 +137,7 @@ table.keyboards td {
border: 1px solid black; border: 1px solid black;
border-collapse: collapse; border-collapse: collapse;
} }
.right {
float: right;
}
</style> </style>
...@@ -42,3 +42,10 @@ export const DEFAULT_KEYBOARDS = [ ...@@ -42,3 +42,10 @@ export const DEFAULT_KEYBOARDS = [
], ],
}, },
]; ];
export const NEW_KEYBOARD = {
version: "0.1",
name: "New keyboard",
author: "",
characters: [],
};
...@@ -4,6 +4,7 @@ import axios from "axios"; ...@@ -4,6 +4,7 @@ import axios from "axios";
import { import {
KEYBOARDS_LOCALSTORAGE_KEY, KEYBOARDS_LOCALSTORAGE_KEY,
DEFAULT_KEYBOARDS, DEFAULT_KEYBOARDS,
NEW_KEYBOARD,
UTF8_ASSETS_URL, UTF8_ASSETS_URL,
} from "../config"; } from "../config";
...@@ -43,6 +44,9 @@ export default new Vuex.Store({ ...@@ -43,6 +44,9 @@ export default new Vuex.Store({
setSelectedScript(state, { name, page }) { setSelectedScript(state, { name, page }) {
state.selectedScript = { name, page }; state.selectedScript = { name, page };
}, },
add(state) {
state.keyboards = [...state.keyboards, { ...NEW_KEYBOARD }];
},
delete(state, index) { delete(state, index) {
state.keyboards.splice(index, 1); state.keyboards.splice(index, 1);
}, },
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment