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 @@
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 />
......
......@@ -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() {
......
......@@ -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;
......
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