KeyboardManager.vue 3.54 KiB
<template>
<div>
<div v-if="editedKeyboard !== null">
<a title="Back to keyboards" href="#" v-on:click="editedKeyboard = null">
⏴
</a>
<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 !== null">
<a
title="Back to keyboards"
href="#"
v-on:click="selectedKeyboard = null"
>
⏴
</a>
<span>{{ keyboards[selectedKeyboard].name }}</span>
<KeyboardDisplay :keyboard-index="selectedKeyboard" />
</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.
</div>
<table class="keyboards" v-else>
<thead>
<tr>
<th>Keyboard</th>
<th>No. of keys</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(k, index) in keyboards" :key="index">
<td>
<a href="#" v-on:click="selectedKeyboard = index">{{ k.name }}</a>
</td>
<td>{{ k.characters.length }}</td>
<td>
<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>
<script>
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(["add", "delete", "updateName"]),
updateKeyboardName() {
this.updateName({
index: this.editedKeyboard,
name: this.keyboardName,
});
},
createKeyboard() {
this.add();
},
deleteKeyboard() {
this.delete(this.keyboardToDelete);
this.keyboardToDelete = null;
this.deleteModal = false;
},
},
watch: {
editedKeyboard() {
if (this.editedKeyboard !== null)
this.keyboardName = this.keyboards[this.editedKeyboard].name;
},
},
};
</script>
<style scoped>
table.keyboards,
table.keyboards th,
table.keyboards td {
padding: 5px;
border: 1px solid black;
border-collapse: collapse;
}
.right {
float: right;
}
</style>