mirror of https://github.com/docusealco/docuseal
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.6 KiB
78 lines
1.6 KiB
<template>
|
|
<div>
|
|
<Page
|
|
v-for="(image, index) in sortedPreviewImages"
|
|
:key="image.id"
|
|
:ref="setPageRefs"
|
|
:number="index"
|
|
:areas="areasIndex[index]"
|
|
:is-drag="isDrag"
|
|
:is-draw="isDraw"
|
|
:selected-submitter="selectedSubmitter"
|
|
:image="image"
|
|
@drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
|
|
@remove-area="$emit('remove-area', $event)"
|
|
@draw="$emit('draw', {...$event, attachment_uuid: document.uuid })"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Page from './page'
|
|
|
|
export default {
|
|
name: 'TemplateDocument',
|
|
components: {
|
|
Page
|
|
},
|
|
props: {
|
|
document: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
areasIndex: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({})
|
|
},
|
|
selectedSubmitter: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
isDraw: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
isDrag: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
emits: ['draw', 'drop-field', 'remove-area'],
|
|
data () {
|
|
return {
|
|
pageRefs: []
|
|
}
|
|
},
|
|
computed: {
|
|
sortedPreviewImages () {
|
|
return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))
|
|
}
|
|
},
|
|
beforeUpdate () {
|
|
this.pageRefs = []
|
|
},
|
|
methods: {
|
|
scrollToArea (area) {
|
|
this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
},
|
|
setPageRefs (el) {
|
|
if (el) {
|
|
this.pageRefs.push(el)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|