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

164 lines
6.5 KiB
Vue
Raw Normal View History

<template>
<div class="protocol-section protocol-information mb-4">
2023-01-05 18:42:59 +08:00
<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">
2023-06-15 21:12:51 +08:00
<i class="sn-icon sn-icon-right"></i>
2023-01-05 18:42:59 +08:00
<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">
2023-06-08 14:33:37 +08:00
<span class="sn-icon sn-icon-printer" aria-hidden="true"></span>
2023-01-05 18:42:59 +08:00
</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>
2023-01-05 18:42:59 +08:00
</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>
2023-01-05 18:42:59 +08:00
</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>
2023-01-05 18:42:59 +08:00
<p class="data-block">
<span>{{ i18n.t("protocols.header.updated_at") }}</span>
2023-01-05 18:42:59 +08:00
<b>{{ protocol.attributes.updated_at_formatted }}</b>
</p>
<p class="data-block">
<span>{{ i18n.t("protocols.header.created_at") }}</span>
2023-01-05 18:42:59 +08:00
<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"/>
2023-01-05 18:42:59 +08:00
{{ 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"
2023-01-05 18:42:59 +08:00
@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">
2023-01-05 18:42:59 +08:00
<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: {
2023-02-22 21:59:48 +08:00
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>