feat: add manual signing order input with auto-save

Add NcActionInput for manual signing order entry with dual-mode
behavior: updateSigningOrder for visual reordering during typing,
confirmSigningOrder for normalization and persistence on submit/blur.
Implement debounced auto-save (1000ms) after drag-and-drop or manual
order changes. Listen to signing-order-changed event from Signers
component using Vue $emit pattern.

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

Author: vitormattos

src/Components/RightSidebar/RequestSignatureTab.vue

@@ -9,8 +9,20 @@
 			@click="addSigner">
 			{{ t('libresign', 'Add signer') }}
 		</NcButton>
-		<Signers event="libresign:edit-signer">
-			<template #actions="{signer}">
+		<Signers event="libresign:edit-signer"
+			@signing-order-changed="debouncedSave">
+			<template #actions="{signer, closeActions}">
+				<NcActionInput v-if="isOrderedNumeric && totalSigners > 1 && filesStore.canSave() && !signer.signed"
+					:label="t('libresign', 'Signing order')"
+					type="number"
+					:value="signer.signingOrder || 1"
+					@update:value="updateSigningOrder(signer, $event)"
+					@submit="confirmSigningOrder(signer); closeActions()"
+					@blur="confirmSigningOrder(signer)">
+					<template #icon>
+						<OrderNumericAscending :size="20" />
+					</template>
+				</NcActionInput>
 				<NcActionButton v-if="filesStore.canSave() && !signer.signed"
 					aria-label="Delete"
 					:close-after-click="true"
@@ -104,6 +116,8 @@
 </template>
 <script>
 
+import debounce from 'debounce'
+
 import svgAccount from '@mdi/svg/svg/account.svg?raw'
 import svgEmail from '@mdi/svg/svg/email.svg?raw'
 import svgSms from '@mdi/svg/svg/message-processing.svg?raw'
@@ -113,6 +127,7 @@ import svgXmpp from '@mdi/svg/svg/xmpp.svg?raw'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import Draw from 'vue-material-design-icons/Draw.vue'
 import FileDocument from 'vue-material-design-icons/FileDocument.vue'
+import OrderNumericAscending from 'vue-material-design-icons/OrderNumericAscending.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
@@ -124,6 +139,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcAppSidebar from '@nextcloud/vue/components/NcAppSidebar'
 import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
 import NcButton from '@nextcloud/vue/components/NcButton'
@@ -154,10 +170,14 @@ const iconMap = {
 	svgXmpp,
 }
 
+import signingOrderMixin from '../../mixins/signingOrderMixin.js'
+
 export default {
 	name: 'RequestSignatureTab',
+	mixins: [signingOrderMixin],
 	components: {
 		NcActionButton,
+		NcActionInput,
 		NcAppSidebar,
 		NcAppSidebarTab,
 		NcButton,
@@ -168,6 +188,7 @@ export default {
 		Delete,
 		Draw,
 		FileDocument,
+		OrderNumericAscending,
 		Pencil,
 		Send,
 		Signers,
@@ -194,9 +215,13 @@ export default {
 			document: {},
 			hasInfo: false,
 			methods: [],
+			signatureFlow: loadState('libresign', 'signature_flow', 'parallel'),
 		}
 	},
 	computed: {
+		isOrderedNumeric() {
+			return this.signatureFlow === 'ordered_numeric'
+		},
 		showSaveButton() {
 			if (!this.filesStore.canSave()) {
 				return false
@@ -223,6 +248,9 @@ export default {
 		hasSigners() {
 			return this.filesStore.hasSigners(this.filesStore.getFile())
 		},
+		totalSigners() {
+			return this.filesStore.getFile()?.signers?.length || 0
+		},
 		fileName() {
 			return this.filesStore.getFile()?.name ?? ''
 		},
@@ -245,6 +273,18 @@ export default {
 	created() {
 		this.$set(this, 'methods', loadState('libresign', 'identify_methods'))
 		this.$set(this, 'document', loadState('libresign', 'file_info', {}))
+
+		this.debouncedSave = debounce(async () => {
+			try {
+				await this.filesStore.saveWithVisibleElements({ visibleElements: [] })
+			} catch (error) {
+				if (error.response?.data?.ocs?.data?.message) {
+					showError(error.response.data.ocs.data.message)
+				} else if (error.response?.data?.ocs?.data?.errors) {
+					error.response.data.ocs.data.errors.forEach(error => showError(error.message))
+				}
+			}
+		}, 1000)
 	},
 	methods: {
 		getSvgIcon(name) {
@@ -277,6 +317,71 @@ export default {
 			this.signerToEdit = signer
 			this.filesStore.enableIdentifySigner()
 		},
+		updateSigningOrder(signer, value) {
+			const order = parseInt(value, 10)
+			const file = this.filesStore.getFile()
+
+			if (isNaN(order)) {
+				return
+			}
+
+			const currentIndex = file.signers.findIndex(s => s.identify === signer.identify)
+			if (currentIndex === -1) {
+				return
+			}
+
+			this.$set(file.signers[currentIndex], 'signingOrder', order)
+
+			const sortedSigners = [...file.signers].sort((a, b) => {
+				const orderA = a.signingOrder || 999
+				const orderB = b.signingOrder || 999
+				if (orderA === orderB) {
+					return 0
+				}
+				return orderA - orderB
+			})
+
+			this.$set(file, 'signers', sortedSigners)
+		},
+		confirmSigningOrder(signer) {
+			const file = this.filesStore.getFile()
+
+			const currentIndex = file.signers.findIndex(s => s.identify === signer.identify)
+			if (currentIndex === -1) {
+				return
+			}
+
+			const order = file.signers[currentIndex].signingOrder
+			const oldOrder = signer.signingOrder
+
+			for (let i = 0; i < file.signers.length; i++) {
+				if (i === currentIndex) continue
+
+				const currentItemOrder = file.signers[i].signingOrder
+
+				if (order < oldOrder) {
+					if (currentItemOrder >= order && currentItemOrder < oldOrder) {
+						this.$set(file.signers[i], 'signingOrder', currentItemOrder + 1)
+					}
+				} else if (order > oldOrder) {
+					if (currentItemOrder > oldOrder && currentItemOrder <= order) {
+						this.$set(file.signers[i], 'signingOrder', currentItemOrder - 1)
+					}
+				}
+			}
+
+			const sortedSigners = [...file.signers].sort((a, b) => {
+				const orderA = a.signingOrder || 999
+				const orderB = b.signingOrder || 999
+				return orderA - orderB
+			})
+
+			this.normalizeSigningOrders(sortedSigners)
+
+			this.$set(file, 'signers', sortedSigners)
+
+			this.debouncedSave()
+		},
 		async sendNotify(signer) {
 			const body = {
 				fileId: this.filesStore.selectedNodeId,