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

Add a button allowing the user to delete a keyboard

parent 322aae03
No related branches found
No related tags found
1 merge request!17Add a button allowing the user to delete a keyboard
Pipeline #5651 passed with warnings
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
v-on:input="addChar" v-on:input="addChar"
/> />
</div> </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"> <Modal v-if="optionsModal" v-model="optionsModal">
<KeyboardManager /> <KeyboardManager />
......
...@@ -22,7 +22,10 @@ ...@@ -22,7 +22,10 @@
<div v-else> <div v-else>
<strong>Keyboards manager</strong> <strong>Keyboards manager</strong>
<hr /> <hr />
<table class="keyboards"> <div v-if="!keyboards || !keyboards.length">
No keyboard to display, please add one.
</div>
<table class="keyboards" v-else>
<thead> <thead>
<tr> <tr>
<th>Keyboard</th> <th>Keyboard</th>
...@@ -40,11 +43,37 @@ ...@@ -40,11 +43,37 @@
<button type="button" v-on:click="editedKeyboard = index"> <button type="button" v-on:click="editedKeyboard = index">
Edit Edit
</button> </button>
<button
type="button"
v-on:click="
deleteModal = true;
keyboardToDelete = index;
"
>
Delete
</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </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> </div>
</template> </template>
...@@ -53,28 +82,37 @@ import { mapMutations } from "vuex"; ...@@ -53,28 +82,37 @@ import { mapMutations } from "vuex";
import { mapState } from "vuex"; import { mapState } from "vuex";
import KeyboardConfiguration from "./KeyboardConfiguration.vue"; import KeyboardConfiguration from "./KeyboardConfiguration.vue";
import KeyboardDisplay from "./KeyboardDisplay.vue"; import KeyboardDisplay from "./KeyboardDisplay.vue";
import Modal from "./Modal.vue";
export default { export default {
components: { components: {
KeyboardConfiguration, KeyboardConfiguration,
KeyboardDisplay, KeyboardDisplay,
Modal,
}, },
data: () => ({ data: () => ({
selectedKeyboard: null, selectedKeyboard: null,
editedKeyboard: null, editedKeyboard: null,
keyboardName: null, keyboardName: null,
deleteModal: false,
keyboardToDelete: null,
}), }),
computed: { computed: {
...mapState(["keyboards"]), ...mapState(["keyboards"]),
}, },
methods: { methods: {
...mapMutations(["updateName"]), ...mapMutations(["delete", "updateName"]),
updateKeyboardName() { updateKeyboardName() {
this.updateName({ this.updateName({
index: this.editedKeyboard, index: this.editedKeyboard,
name: this.keyboardName, name: this.keyboardName,
}); });
}, },
deleteKeyboard() {
this.delete(this.keyboardToDelete);
this.keyboardToDelete = null;
this.deleteModal = false;
},
}, },
watch: { watch: {
editedKeyboard() { editedKeyboard() {
......
...@@ -43,6 +43,9 @@ export default new Vuex.Store({ ...@@ -43,6 +43,9 @@ export default new Vuex.Store({
setSelectedScript(state, { name, page }) { setSelectedScript(state, { name, page }) {
state.selectedScript = { name, page }; state.selectedScript = { name, page };
}, },
delete(state, index) {
state.keyboards.splice(index, 1);
},
updateName(state, { index, name }) { updateName(state, { index, name }) {
if (!state.keyboards[index]) return; if (!state.keyboards[index]) return;
state.keyboards[index].name = name; state.keyboards[index].name = name;
......
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