KeyboardManager.vue

<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>