feat: implement sign tab

Signed-off-by: Vitor Mattos <vitor@php.rio>

src/Components/RightSidebar/RightSidebar.vue

@@ -4,7 +4,12 @@
 		:subtitle="subTitle"
 		:active="fileName"
 		@close="closeSidebar">
-		<NcAppSidebarTab v-if="showListSigners"
+		<NcAppSidebarTab v-if="showSign()"
+			id="sign-tab"
+			name="">
+			<SignTab />
+		</NcAppSidebarTab>
+		<NcAppSidebarTab v-if="showListSigners()"
 			id="request-signature-list-signers"
 			:name="fileName">
 			<RequestSignatureTab />
@@ -16,6 +21,7 @@
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import RequestSignatureTab from '../RightSidebar/RequestSignatureTab.vue'
+import SignTab from '../RightSidebar/SignTab.vue'
 import { useFilesStore } from '../../store/files.js'
 import { useSignStore } from '../../store/sign.js'
 
@@ -25,6 +31,7 @@ export default {
 		NcAppSidebar,
 		NcAppSidebarTab,
 		RequestSignatureTab,
+		SignTab,
 	},
 	setup() {
 		const filesStore = useFilesStore()
@@ -48,9 +55,17 @@ export default {
 	methods: {
 		showListSigners() {
 			return !!this.filesStore.getFile()?.name
+				&& !this.showSign()
+		},
+		showSign() {
+			return this.signStore.document.uuid.length > 0
+		},
+		handleUpdateActive() {
+			console.log('handleUpdateActive')
 		},
 		closeSidebar() {
 			this.filesStore.selectFile()
+			this.signStore.reset()
 			this.$emit('close')
 		},
 	},

src/Components/RightSidebar/SignTab.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="sign-pdf-sidebar">
+		<header>
+			<img class="pdf-icon" :src="PDFIcon">
+			<h1>
+				{{ signStore.document.name }}
+				<br>
+				<Chip>
+					{{ signStore.document.statusText }}
+				</Chip>
+			</h1>
+		</header>
+
+		<main>
+			<div v-if="loading" class="sidebar-loading">
+				<p>
+					{{ t('libresign', 'Loading …') }}
+				</p>
+			</div>
+			<div v-if="!signEnabled">
+				{{ t('libresign', 'Document not available for signature.') }}
+			</div>
+			<Sign v-else-if="!loading"
+				v-bind="{ docType }"
+				@signed="onSigned" />
+		</main>
+	</div>
+</template>
+
+<script>
+import PDFIcon from '../../../img/application-pdf.png'
+import { SIGN_STATUS } from '../../domains/sign/enum.js'
+import Chip from '../../Components/Chip.vue'
+import Sign from '../../views/SignPDF/_partials/Sign.vue'
+import { useSignStore } from '../../store/sign.js'
+
+export default {
+	name: 'SignTab',
+	components: {
+		Chip,
+		Sign,
+	},
+	setup() {
+		const signStore = useSignStore()
+		return { signStore }
+	},
+	data() {
+		return {
+			loading: true,
+			PDFIcon,
+		}
+	},
+	computed: {
+		docType() {
+			return this.$route.name === 'AccountFileApprove'
+				? 'document-validate'
+				: 'default'
+		},
+	},
+	methods: {
+		signEnabled() {
+			return SIGN_STATUS.ABLE_TO_SIGN === this.signStore.document.status
+				|| SIGN_STATUS.PARTIAL_SIGNED === this.signStore.document.status
+		},
+		updateSigners(data) {
+			this.signStore.document.signers.forEach(signer => {
+				if (this.signStore.document.visibleElements) {
+					this.signStore.document.visibleElements.forEach(element => {
+						if (element.signRequestId === signer.signRequestId) {
+							const object = structuredClone(signer)
+							object.readOnly = true
+							element.coordinates.ury = Math.round(data.measurement[element.coordinates.page].height)
+								- element.coordinates.ury
+							object.element = element
+							this.$refs.pdfEditor.addSigner(object)
+						}
+					})
+				}
+			})
+			this.loading = false
+		},
+		onSigned(data) {
+			this.$router.push({
+				name: 'DefaultPageSuccess',
+				params: {
+					uuid: data.file.uuid,
+				},
+			})
+		},
+	},
+}
+</script>

src/store/files.js

@@ -24,6 +24,7 @@ import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { set } from 'vue'
 import Moment from '@nextcloud/moment'
+import { useSignStore } from './sign.js'
 
 export const useFilesStore = defineStore('files', {
 	state: () => {
@@ -42,6 +43,10 @@ export const useFilesStore = defineStore('files', {
 		},
 		selectFile(nodeId) {
 			this.selectedNodeId = nodeId ?? 0
+			if (this.selectedNodeId === 0) {
+				const signStore = useSignStore()
+				signStore.reset()
+			}
 		},
 		getFile() {
 			return this.files[this.selectedNodeId] ?? {}

src/store/sign.js

@@ -22,20 +22,22 @@
 import { defineStore } from 'pinia'
 import { loadState } from '@nextcloud/initial-state'
 
+const defaultState = {
+	errors: [],
+	document: {
+		name: '',
+		description: '',
+		status: '',
+		statusText: '',
+		url: '',
+		uuid: '',
+		signers: [],
+		visibleElements: [],
+	},
+}
+
 export const useSignStore = defineStore('sign', {
-	state: () => ({
-		errors: [],
-		document: {
-			name: '',
-			description: '',
-			status: '',
-			statusText: '',
-			url: '',
-			uuid: '',
-			signers: [],
-			visibleElements: [],
-		},
-	}),
+	state: () => ({ ...defaultState }),
 
 	actions: {
 		initFromState() {
@@ -52,5 +54,8 @@ export const useSignStore = defineStore('sign', {
 				visibleElements: loadState('libresign', 'visibleElements', []),
 			}
 		},
+		reset() {
+			Object.assign(this, defaultState);
+		}
 	},
 })