RenameModal.vue

<!--
  This file is part of vospace-ui
  Copyright (C) 2021 Istituto Nazionale di Astrofisica
  SPDX-License-Identifier: GPL-3.0-or-later
-->
<template>
<b-modal id="rename-modal" :title="'Rename ' + nodeToRename" okTitle="Rename" @show="reset" @shown="afterShow" @ok.prevent="renameNode">
  <b-form inline>
    <label class="w-25" for="new-name-input">New name</label>
    <b-form-input v-model.trim="newName" id="new-name-input" ref="newNameInput" class="w-75" aria-describedby="new-name-input-feedback" :state="newNameState" v-on:input="resetError" @keydown.native.enter="renameNode">
    </b-form-input>
    <b-form-invalid-feedback id="new-folder-name-input-feedback" class="text-right">{{newNameError}}</b-form-invalid-feedback>
  </b-form>
</b-modal>
</template>

<script>
export default {
  name: 'RenameModal',
  computed: {
    nodeToRename() { return this.$store.state.nodeToRename },
    oldName() { return this.nodeToRename.substring(this.nodeToRename.lastIndexOf("/") + 1) },
    newNameState() {
      if (this.newNameError) {
        return false;
      }
      return null;
    }
  },
  data() {
    return {
      newName: this.oldName,
      newNameError: null
    }
  },
  methods: {
    afterShow: function() {
      this.$refs.newNameInput.focus();
    },
    reset() {
      this.newName = this.oldName;
      this.resetError();
    },
    resetError() {
      this.newNameError = null;
    },
    renameNode() {
      if (this.newName === this.oldName) {
        return;
      }
      if (!this.newName) {
        this.newNameError = "Name is required";
      } else if (/[<>?":\\/`|'*]/.test(this.newName)) {
        this.newNameError = "Name contains an illegal character. Following characters are not allowed: < > ? \" : \\ / | ' * `";
      } else {
        let parentPath = this.nodeToRename.substring(0, this.nodeToRename.lastIndexOf('/') + 1);
        this.$store.dispatch('moveNode', {
            target: parentPath + this.oldName,
            direction: parentPath + this.newName
          })
          .then(() => {
            this.$bvModal.hide('rename-modal');
          })
          .catch(res => {
            this.newFolderNameError = res.message;
          });
      }
    }
  }
}
</script>