scinote-web/app/javascript/vue/protocol/step_elements/text.vue

98 lines
3.5 KiB
Vue
Raw Normal View History

<template>
<div class="step-text-container" :class="{ 'edit': inEditMode, 'step-element--locked': !element.attributes.orderable.urls.update_url }" @keyup.enter="enableEditMode($event)" tabindex="0">
<div v-if="reorderElementUrl" class="step-element-grip" @click="$emit('reorder')">
<i class="fas fas-rotated-90 fa-exchange-alt"></i>
</div>
<div v-else class="step-element-grip-placeholder"></div>
<div class="buttons-container">
<button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" tabindex="0" @click="enableEditMode($event)">
<i class="fas fa-pen"></i>
</button>
<button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light" tabindex="0" @click="duplicateElement">
<i class="fas fa-clone"></i>
</button>
<button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0">
<i class="fas fa-trash"></i>
</button>
2022-05-10 19:28:09 +08:00
</div>
<Tinymce
v-if="element.attributes.orderable.urls.update_url"
2022-05-10 19:28:09 +08:00
:value="element.attributes.orderable.text"
:value_html="element.attributes.orderable.text_view"
2022-07-13 21:15:01 +08:00
:placeholder="element.attributes.orderable.placeholder"
:inEditMode="inEditMode || isNew"
2022-05-10 19:28:09 +08:00
:updateUrl="element.attributes.orderable.urls.update_url"
:objectType="'StepText'"
:objectId="element.attributes.orderable.id"
:fieldName="'step_text[text]'"
:lastUpdated="element.attributes.orderable.updated_at"
2022-12-22 17:37:47 +08:00
:characterLimit="100000"
2022-05-10 19:28:09 +08:00
@update="update"
@editingDisabled="disableEditMode"
@editingEnabled="enableEditMode"
2022-05-10 19:28:09 +08:00
/>
<div class="view-text-element" v-else-if="element.attributes.orderable.text_view" v-html="element.attributes.orderable.text_view"></div>
2022-07-15 20:58:06 +08:00
<div v-else class="empty-text-element">
{{ i18n.t("protocols.steps.text.empty_text") }}
</div>
<deleteElementModal v-if="confirmingDelete" @confirm="deleteElement($event)" @cancel="closeDeleteModal"/>
</div>
</template>
<script>
import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
import DuplicateMixin from 'vue/protocol/mixins/components/duplicate.js'
import deleteElementModal from 'vue/protocol/modals/delete_element.vue'
2022-05-10 19:28:09 +08:00
import Tinymce from 'vue/shared/tinymce.vue'
2022-05-04 16:25:53 +08:00
export default {
name: 'StepText',
components: { deleteElementModal, Tinymce },
mixins: [DeleteMixin, DuplicateMixin],
props: {
element: {
type: Object,
required: true
},
inRepository: {
type: Boolean,
required: true
},
reorderElementUrl: {
type: String
},
isNew: {
type: Boolean,
default: false
}
2022-05-10 19:28:09 +08:00
},
data() {
return {
inEditMode: false,
}
},
mounted() {
if (this.isNew) {
2022-12-14 21:32:23 +08:00
this.enableEditMode();
}
},
2022-05-10 19:28:09 +08:00
methods: {
enableEditMode() {
if (!this.element.attributes.orderable.urls.update_url) return
if (this.inEditMode) return
2022-05-10 19:28:09 +08:00
this.inEditMode = true
},
disableEditMode() {
this.inEditMode = false
},
update(data) {
this.element.attributes.orderable.text_view = data.attributes.text_view
this.element.attributes.orderable.text = data.attributes.text
this.element.attributes.orderable.name = data.attributes.name
this.element.attributes.orderable.updated_at = data.attributes.updated_at
2022-05-10 19:28:09 +08:00
this.$emit('update', this.element, true)
}
}
}
2022-05-03 19:42:43 +08:00
</script>