feat: add support to multiple documents when add visible elements

Signed-off-by: Vitor Mattos <[email protected]>

Author: vitormattos

src/Components/PdfEditor/PdfEditor.vue

@@ -83,9 +83,15 @@ export default {
 				x: signer.element.coordinates.llx,
 				y: signer.element.coordinates.ury,
 			}
+
+			const docIndex = signer.element.documentIndex !== undefined
+				? signer.element.documentIndex
+				: this.$refs.vuePdfEditor.selectedDocIndex
+
 			this.$refs.vuePdfEditor.addObjectToPage(
 				object,
 				signer.element.coordinates.page - 1,
+				docIndex,
 			)
 		},
 	},

src/Components/Request/VisibleElements.vue

@@ -54,11 +54,12 @@
 			</NcButton>
 		</div>
 		<div class="image-page">
-			<PdfEditor ref="pdfEditor"
+			<PdfEditor v-if="!isEnvelope || envelopeFilesReady"
+				ref="pdfEditor"
 				width="100%"
 				height="100%"
-				:files="[document.file]"
-				:file-names="[documentNameWithExtension]"
+				:files="pdfFiles"
+				:file-names="pdfFileNames"
 				@pdf-editor:end-init="updateSigners"
 				@pdf-editor:on-delete-signer="onDeleteSigner" />
 		</div>
@@ -108,6 +109,11 @@ export default {
 			signerSelected: null,
 			width: getCapabilities().libresign.config['sign-elements']['full-signature-width'],
 			height: getCapabilities().libresign.config['sign-elements']['full-signature-height'],
+			envelopeFiles: [],
+			filePagesMap: {},
+			envelopeFilesReady: false,
+			elementsLoaded: false,
+			loadedPdfsCount: 0,
 		}
 	},
 	computed: {
@@ -126,8 +132,31 @@ export default {
 		document() {
 			return this.filesStore.getFile()
 		},
+		isEnvelope() {
+			return this.document?.nodeType === 'envelope'
+		},
+		pdfFiles() {
+			if (this.isEnvelope) {
+				if (!this.envelopeFilesReady) return []
+				return this.envelopeFiles.map(f => f.file)
+			}
+			return [this.document.file]
+		},
+		pdfFileNames() {
+			if (this.isEnvelope) {
+				if (!this.envelopeFilesReady) return []
+				return this.envelopeFiles.map(f => {
+					const metadata = typeof f.metadata === 'string' ? JSON.parse(f.metadata) : f.metadata
+					return `${f.name}.${metadata?.extension || 'pdf'}`
+				})
+			}
+			return [this.documentNameWithExtension]
+		},
 		documentNameWithExtension() {
 			const doc = this.document
+			if (!doc.metadata?.extension) {
+				return doc.name
+			}
 			return `${doc.name}.${doc.metadata.extension}`
 		},
 		canSign() {
@@ -168,7 +197,7 @@ export default {
 		unsubscribe('libresign:visible-elements-select-signer')
 	},
 	methods: {
-		showModal() {
+		async showModal() {
 			if (!this.canRequestSign) {
 				return
 			}
@@ -177,17 +206,103 @@ export default {
 			}
 			this.modal = true
 			this.filesStore.loading = true
+
+			if (this.isEnvelope) {
+				await this.loadEnvelopeFiles()
+			}
+
+			this.filesStore.loading = false
+		},
+		buildFilePagesMap() {
+			if (!this.isEnvelope || this.envelopeFiles.length === 0) {
+				return
+			}
+
+			let currentPage = 1
+			this.envelopeFiles.forEach((file, index) => {
+				const metadata = typeof file.metadata === 'string' ? JSON.parse(file.metadata) : file.metadata
+				const pageCount = metadata?.p || 0
+
+				for (let i = 0; i < pageCount; i++) {
+					this.filePagesMap[currentPage + i] = {
+						uuid: file.uuid,
+						fileIndex: index,
+						startPage: currentPage,
+						fileName: file.name,
+					}
+				}
+				currentPage += pageCount
+			})
 		},
 		closeModal() {
 			this.modal = false
 			this.filesStore.loading = false
+			this.envelopeFilesReady = false
+			this.elementsLoaded = false
+			this.loadedPdfsCount = 0
+		},
+		async loadEnvelopeFiles() {
+			if (!this.document?.nodeId) {
+				this.filesStore.loading = false
+				return
+			}
+
+			try {
+				const url = generateOcsUrl('/apps/libresign/api/v1/file/list')
+				const params = new URLSearchParams({
+					page: '1',
+					length: '100',
+					parentNodeId: this.document.nodeId.toString(),
+				})
+
+				const { data } = await axios.get(`${url}?${params.toString()}`)
+				if (data.ocs?.data?.data) {
+					this.envelopeFiles = data.ocs.data.data
+					this.envelopeFilesReady = true
+
+					this.buildFilePagesMap()
+				}
+			} catch (error) {
+				showError(this.$t('libresign', 'Failed to load envelope files'))
+				this.filesStore.loading = false
+			}
 		},
 		updateSigners(data) {
+			this.loadedPdfsCount++
+
+			if (this.isEnvelope) {
+				const expectedPdfsCount = this.envelopeFiles.length
+
+				if (this.elementsLoaded || this.loadedPdfsCount < expectedPdfsCount) {
+					return
+				}
+			}
+
 			this.document.signers.forEach(signer => {
 				if (this.document.visibleElements) {
 					Object.values(this.document.visibleElements).forEach(element => {
 						if (element.signRequestId === signer.signRequestId) {
 							const object = structuredClone(signer)
+
+							if (this.isEnvelope && element.uuid) {
+								const fileInfo = this.envelopeFiles.find(f => f.uuid === element.uuid)
+
+								if (fileInfo) {
+									for (const [page, info] of Object.entries(this.filePagesMap)) {
+										if (info.uuid === element.uuid) {
+											object.element = {
+												...element,
+												documentIndex: info.fileIndex,
+											}
+											object.element.coordinates.ury = Math.round(data.measurement[element.coordinates.page].height)
+												- element.coordinates.ury
+											this.$refs.pdfEditor.addSigner(object)
+											return
+										}
+									}
+								}
+							}
+
 							element.coordinates.ury = Math.round(data.measurement[element.coordinates.page].height)
 								- element.coordinates.ury
 							object.element = element
@@ -196,6 +311,11 @@ export default {
 					})
 				}
 			})
+
+			if (this.isEnvelope) {
+				this.elementsLoaded = true
+			}
+
 			this.filesStore.loading = false
 		},
 		onSelectSigner(signer) {
@@ -210,11 +330,25 @@ export default {
 		},
 		doSelectSigner(event) {
 			const canvasList = this.$refs.pdfEditor.$refs.vuePdfEditor.$refs.pdfBody.querySelectorAll('canvas')
-			const page = Array.from(canvasList).indexOf(event.target)
-			this.addSignerToPosition(event, page)
+			const canvasIndex = Array.from(canvasList).indexOf(event.target)
+			const globalPageNumber = canvasIndex + 1 // 1-based
+
+			let documentIndex = 0
+			let pageInDocument = globalPageNumber
+
+			if (this.isEnvelope && this.filePagesMap[globalPageNumber]) {
+				const pageInfo = this.filePagesMap[globalPageNumber]
+				documentIndex = pageInfo.fileIndex
+				pageInDocument = globalPageNumber - pageInfo.startPage + 1
+				console.log(`Canvas ${canvasIndex} (global page ${globalPageNumber}) → documentIndex: ${documentIndex}, page: ${pageInDocument}`)
+			} else {
+				console.log(`Canvas ${canvasIndex} → page: ${pageInDocument}`)
+			}
+
+			this.addSignerToPosition(event, pageInDocument, documentIndex)
 			this.stopAddSigner()
 		},
-		addSignerToPosition(event, page) {
+		addSignerToPosition(event, pageInDocument, documentIndex) {
 			const canvas = event.target
 			const rect = canvas.getBoundingClientRect()
 			const scale = this.$refs.pdfEditor.$refs.vuePdfEditor.scale || 1
@@ -232,13 +366,18 @@ export default {
 
 			this.signerSelected.element = {
 				coordinates: {
-					page: page + 1,
+					page: pageInDocument,
 					llx: normalizedX - this.width / 2,
 					ury: normalizedY - this.height / 2,
 					width: this.width,
 					height: this.height,
 				},
 			}
+
+			if (this.isEnvelope && documentIndex > 0) {
+				this.signerSelected.element.documentIndex = documentIndex
+			}
+
 			this.$refs.pdfEditor.addSigner(this.signerSelected)
 		},
 		stopAddSigner() {
@@ -282,26 +421,49 @@ export default {
 		},
 		buildVisibleElements() {
 			const visibleElements = []
-			const objects = this.$refs.pdfEditor.$refs.vuePdfEditor.getAllObjects()
-
-			objects.forEach(object => {
-				if (!object.signer) return
-
-				visibleElements.push({
-					type: 'signature',
-					signRequestId: object.signer.signRequestId,
-					elementId: object.signer.element.elementId,
-					coordinates: {
-						page: object.pageNumber,
-						width: object.normalizedCoordinates.width,
-						height: object.normalizedCoordinates.height,
-						llx: object.normalizedCoordinates.llx,
-						lly: object.normalizedCoordinates.lly,
-						ury: object.normalizedCoordinates.ury,
-						urx: object.normalizedCoordinates.urx,
-					},
+
+			const numDocuments = this.isEnvelope ? this.envelopeFiles.length : 1
+
+			for (let docIndex = 0; docIndex < numDocuments; docIndex++) {
+				const objects = this.$refs.pdfEditor.$refs.vuePdfEditor.getAllObjects(docIndex)
+
+				objects.forEach(object => {
+					if (!object.signer) return
+
+					let globalPageNumber = object.pageNumber
+					if (this.isEnvelope && docIndex > 0) {
+						for (const [page, info] of Object.entries(this.filePagesMap)) {
+							if (info.fileIndex === docIndex) {
+								globalPageNumber = info.startPage + object.pageNumber - 1
+								break
+							}
+						}
+					}
+
+					const element = {
+						type: 'signature',
+						signRequestId: object.signer.signRequestId,
+						elementId: object.signer.element.elementId,
+						coordinates: {
+							page: globalPageNumber,
+							width: object.normalizedCoordinates.width,
+							height: object.normalizedCoordinates.height,
+							llx: object.normalizedCoordinates.llx,
+							lly: object.normalizedCoordinates.lly,
+							ury: object.normalizedCoordinates.ury,
+							urx: object.normalizedCoordinates.urx,
+						},
+					}
+
+					if (this.isEnvelope && this.filePagesMap[globalPageNumber]) {
+						element.uuid = this.filePagesMap[globalPageNumber].uuid
+						element.coordinates.page = globalPageNumber - this.filePagesMap[globalPageNumber].startPage + 1
+					}
+
+					visibleElements.push(element)
 				})
-			})
+			}
+
 			return visibleElements
 		},
 	},