scinote-web/app/javascript/vue/shared/content/modal/table_name.vue

<template>
  <div ref="modal" class="modal" :id="`tableNameModal${element.attributes.orderable.id}`" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" @click="cancel" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
          <h4 class="modal-title" id="modal-destroy-team-label">
            {{ i18n.t('protocols.steps.table.name_modal.title')}}
          </h4>
        </div>
        <div class="modal-body">
          <p>{{ i18n.t('protocols.steps.table.name_modal.description')}}</p>
          <div class="sci-input-container" :class="{ 'error': error }">
            <input ref="input" v-model="name" type="text" class="sci-input-field" @keyup.enter="!error && update(name)" required="true" />
            <div v-if="error" class="table-name-error">
              {{ i18n.t('protocols.steps.table.name_modal.error') }}
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button>
          <button class="btn btn-primary" @click="update(name)">{{ i18n.t('protocols.steps.table.name_modal.save')}}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TableNameModal',
    props: {
      element: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        name: null
      }
    },
    computed: {
      defaultName() {
        return this.i18n.t('protocols.steps.table.default_name', { position: this.element.attributes.position + 1 });
      },
      error() {
        return !this.name;
      }
    },
    mounted() {
      this.initModal();
      $(this.$refs.modal).modal('show');
    },
    methods: {
      initModal() {
        this.name = this.defaultName;
        $(this.$refs.modal).on('shown.bs.modal', () => {
          $(this.$refs.input).focus();
        });
      },
      cancel() {
        this.hide(() => {
          this.$emit('cancel');
        });
      },
      update() {
       this.hide(() => {
          this.$emit('update', this.name);
       })
      },
      hide(callback) {
        $(this.$refs.modal).on('hidden.bs.modal', () => {
          callback();
        });
        $(this.$refs.modal).modal('hide');
      }
    }
  }
</script>