scinote-web/app/javascript/vue/protocol/protocolMetadata.vue

<template>
  <div class="protocol-section protocol-information mb-4">
    <div id="protocol-details" class="protocol-section-header">
      <div class="protocol-details-container">
        <a class="protocol-section-caret" role="button" data-toggle="collapse" href="#details-container" aria-expanded="false" aria-controls="details-container">
          <i class="sn-icon sn-icon-right"></i>
          <span id="protocolDetailsLabel" class="protocol-section-title">
            <h2>
              {{ i18n.t("protocols.header.details") }}
            </h2>
            <span class="protocol-code" >{{ protocol.attributes.code }}</span>
          </span>
        </a>
      </div>
      <div class="actions-block">
        <a class="btn btn-light icon-btn pull-right" :href="protocol.attributes.urls.print_protocol_url" target="_blank">
          <span class="sn-icon sn-icon-printer" aria-hidden="true"></span>
        </a>
        <button class="btn btn-light" @click="openVersionsModal">{{ i18n.t("protocols.header.versions") }}</button>
        <button v-if="protocol.attributes.urls.publish_url" @click="$emit('publish')" class="btn btn-primary">{{ i18n.t("protocols.header.publish") }}</button>
        <button v-if="protocol.attributes.urls.save_as_draft_url" v-bind:disabled="protocol.attributes.has_draft" @click="saveAsdraft" class="btn btn-secondary">{{ i18n.t("protocols.header.save_as_draft") }}</button>
      </div>
    </div>
    <div id="details-container" class="protocol-details collapse in">
      <div class="protocol-metadata">
        <p class="data-block">
          <span>{{ i18n.t("protocols.header.version") }}</span>
          <b>{{ titleVersion }}</b>
        </p>
        <p class="data-block" v-if="protocol.attributes.published">
          <span>{{ i18n.t("protocols.header.published_on") }}</span>
          <b>{{ protocol.attributes.published_on_formatted }}</b>
        </p>
        <p class="data-block" v-if="protocol.attributes.published">
          <span>{{ i18n.t("protocols.header.published_by") }}</span>
          <img :src="protocol.attributes.published_by.avatar" class="rounded-full"/>
          {{ protocol.attributes.published_by.name }}
        </p>
        <p class="data-block">
          <span>{{ i18n.t("protocols.header.updated_at") }}</span>
          <b>{{ protocol.attributes.updated_at_formatted }}</b>
        </p>
        <p class="data-block">
          <span>{{ i18n.t("protocols.header.created_at") }}</span>
          <b>{{ protocol.attributes.created_at_formatted }}</b>
        </p>
        <p class="data-block">
          <span>{{ i18n.t("protocols.header.added_by") }}</span>
          <img :src="protocol.attributes.added_by.avatar" class="rounded-full"/>
          {{ protocol.attributes.added_by.name }}
        </p>
        <p class="data-block authors-data">
          <span>{{ i18n.t("protocols.header.authors") }}</span>
          <span class="authors-list" v-if="protocol.attributes.urls.update_protocol_authors_url">
            <InlineEdit
              :value="protocol.attributes.authors"
              :placeholder="i18n.t('protocols.header.add_authors')"
              :allowBlank="true"
              :attributeName="`${i18n.t('Protocol')} ${i18n.t('protocols.header.authors_list')}`"
              :characterLimit="10000"
              @update="updateAuthors"
            />
          </span>
          <span class="authors-list" v-else>
            {{ protocol.attributes.authors }}
          </span>
        </p>
        <p class="data-block keywords-data">
          <span>{{ i18n.t("protocols.header.keywords") }}</span>
          <span
            class="keywords-list"
            v-if="protocol.attributes.urls.update_protocol_authors_url || protocol.attributes.keywords.length">
            <DropdownSelector
              :inputTagMode="true"
              :options="this.protocol.attributes.keywords"
              :placeholder="i18n.t('protocols.header.add_keywords')"
              :selectorId="'keywordsSelector'"
              :singleSelect="false"
              :closeOnSelect="false"
              :noEmptyOption="false"
              :selectAppearance="'tag'"
              :viewMode="protocol.attributes.urls.update_protocol_keywords_url == null"
              @dropdown:changed="updateKeywords"
            />
          </span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>

  import InlineEdit from '../shared/inline_edit.vue'
  import DropdownSelector from '../shared/dropdown_selector.vue'

  export default {
    name: 'ProtocolMetadata',
    components: { InlineEdit, DropdownSelector },
    props: {
      protocol: {
        type: Object,
        required: true
      },
    },
    computed: {
      titleVersion() {
        const createdFromVersion = this.protocol.attributes.created_from_version;

        if (this.protocol.attributes.published) {
          return this.protocol.attributes.version;
        }

        if (!createdFromVersion) {
          return this.i18n.t('protocols.draft');
        }

        return this.i18n.t('protocols.header.draft_with_from_version', {nr: createdFromVersion});
      }
    },
    methods: {
      saveAsdraft() {
        $.post(this.protocol.attributes.urls.save_as_draft_url)
      },
      updateAuthors(authors) {
        $.ajax({
          type: 'PATCH',
          url: this.protocol.attributes.urls.update_protocol_authors_url,
          data: { protocol: { authors: authors } },
          success: (result) => {
            this.$emit('update', result.data.attributes)
          },
          error: (data) => {
            HelperModule.flashAlertMsg(data.responseJSON ? Object.values(data.responseJSON).join(', ') : I18n.t('errors.general'), 'danger');
          }
        });
      },
      updateKeywords(keywords) {
        $.ajax({
          type: 'PATCH',
          url: this.protocol.attributes.urls.update_protocol_keywords_url,
          data: { keywords: keywords },
          success: (result) => {
            this.$emit('update', result.data.attributes)
          }
        });
      },
      openVersionsModal() {
        $.get(this.protocol.attributes.urls.versions_modal_url, (data) => {
          let versionsModal = '#protocol-versions-modal'
          $('.protocols-show').append($.parseHTML(data.html));
          $(versionsModal).modal('show');
          inlineEditing.init();
          $(versionsModal).find('[data-toggle="tooltip"]').tooltip();

          // Remove modal when it gets closed
          $(versionsModal).on('hidden.bs.modal', () => {
            $(versionsModal).remove();
          });
        });
      }
    }
  }
</script>