139 lines
3.0 KiB
Vue
139 lines
3.0 KiB
Vue
<template>
|
|
<DefaultField
|
|
:field="currentField"
|
|
:errors="errors"
|
|
:full-width-content="fullWidthContent"
|
|
:show-help-text="showHelpText"
|
|
>
|
|
<template #field>
|
|
<MarkdownEditor
|
|
ref="theMarkdownEditor"
|
|
v-show="currentlyIsVisible"
|
|
:class="{ 'form-control-bordered-error': hasError }"
|
|
:id="field.attribute"
|
|
:previewer="previewer"
|
|
:uploader="uploader"
|
|
:readonly="currentlyIsReadonly"
|
|
@file-removed="handleFileRemoved"
|
|
@file-added="handleFileAdded"
|
|
@initialize="initialize"
|
|
@change="handleChange"
|
|
/>
|
|
</template>
|
|
</DefaultField>
|
|
</template>
|
|
|
|
<script>
|
|
import isNil from 'lodash/isNil'
|
|
import {
|
|
DependentFormField,
|
|
HandlesFieldAttachments,
|
|
HandlesValidationErrors,
|
|
mapProps,
|
|
} from '@/mixins'
|
|
|
|
export default {
|
|
mixins: [
|
|
HandlesValidationErrors,
|
|
HandlesFieldAttachments,
|
|
DependentFormField,
|
|
],
|
|
|
|
props: mapProps(['resourceName', 'resourceId', 'mode']),
|
|
|
|
beforeUnmount() {
|
|
Nova.$off(this.fieldAttributeValueEventName, this.listenToValueChanges)
|
|
|
|
this.clearAttachments()
|
|
this.clearFilesMarkedForRemoval()
|
|
},
|
|
|
|
methods: {
|
|
initialize() {
|
|
this.$refs.theMarkdownEditor.setValue(
|
|
this.value ?? this.currentField.value
|
|
)
|
|
|
|
Nova.$on(this.fieldAttributeValueEventName, this.listenToValueChanges)
|
|
},
|
|
|
|
fill(formData) {
|
|
this.fillIfVisible(formData, this.fieldAttribute, this.value || '')
|
|
|
|
this.fillAttachmentDraftId(formData)
|
|
},
|
|
|
|
handleFileRemoved(url) {
|
|
this.flagFileForRemoval(url)
|
|
},
|
|
|
|
handleFileAdded(url) {
|
|
this.unflagFileForRemoval(url)
|
|
},
|
|
|
|
handleChange(value) {
|
|
this.value = value
|
|
|
|
if (this.field) {
|
|
this.emitFieldValueChange(this.fieldAttribute, this.value)
|
|
}
|
|
},
|
|
|
|
onSyncedField() {
|
|
if (this.currentlyIsVisible && this.$refs.theMarkdownEditor) {
|
|
this.$refs.theMarkdownEditor.setValue(
|
|
this.currentField.value ?? this.value
|
|
)
|
|
this.$refs.theMarkdownEditor.setOption(
|
|
'readOnly',
|
|
this.currentlyIsReadonly
|
|
)
|
|
}
|
|
},
|
|
|
|
listenToValueChanges(value) {
|
|
if (this.currentlyIsVisible) {
|
|
this.$refs.theMarkdownEditor.setValue(value)
|
|
}
|
|
|
|
this.handleChange(value)
|
|
},
|
|
|
|
async fetchPreviewContent(value) {
|
|
Nova.$progress.start()
|
|
|
|
const {
|
|
data: { preview },
|
|
} = await Nova.request().post(
|
|
`/nova-api/${this.resourceName}/field/${this.fieldAttribute}/preview`,
|
|
{ value },
|
|
{
|
|
params: {
|
|
editing: true,
|
|
editMode: isNil(this.resourceId) ? 'create' : 'update',
|
|
},
|
|
}
|
|
)
|
|
|
|
Nova.$progress.done()
|
|
|
|
return preview
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
previewer() {
|
|
if (!this.isActionRequest) {
|
|
return this.fetchPreviewContent
|
|
}
|
|
},
|
|
|
|
uploader() {
|
|
if (!this.isActionRequest && this.field.withFiles) {
|
|
return this.uploadAttachment
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|