feat: add visual indicators for signing order in Signer component

Display counter-number badge with highlighted style when in
ordered_numeric mode. Show DragVertical icon handle when drag-and-drop
is enabled. Add closeActions method to programmatically close action
menu after input submission.

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

Author: vitormattos

src/Components/Signers/Signer.vue

@@ -3,16 +3,29 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcListItem :name="signer.displayName"
+	<NcListItem ref="listItem"
+		:name="signerName"
+		:counter-number="counterNumber"
+		:counter-type="counterType"
 		:force-display-actions="true"
+		:class="signerClass"
 		@click="signerClickAction">
 		<template #icon>
 			<NcAvatar :size="44" :display-name="signer.displayName" />
 		</template>
 		<template #subname>
 			<Bullet v-for="method in identifyMethodsNames" :key="method" :name="method" />
 		</template>
-		<slot slot="actions" name="actions" />
+		<template #extra>
+			<div v-if="showDragHandle" class="drag-handle-wrapper">
+				<DragVertical :size="20"
+					class="drag-handle"
+					:title="t('libresign', 'Drag to reorder')" />
+			</div>
+		</template>
+		<template #actions>
+			<slot name="actions" :closeActions="closeActions" />
+		</template>
 		<template #indicator>
 			<CheckboxBlankCircle :size="16"
 				:fill-color="statusColor"
@@ -22,6 +35,7 @@
 </template>
 <script>
 import CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle.vue'
+import DragVertical from 'vue-material-design-icons/DragVertical.vue'
 
 import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
@@ -40,6 +54,7 @@ export default {
 		NcListItem,
 		NcAvatar,
 		CheckboxBlankCircle,
+		DragVertical,
 		Bullet,
 	},
 	props: {
@@ -52,6 +67,11 @@ export default {
 			required: false,
 			default: '',
 		},
+		draggable: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 	},
 	setup() {
 		const filesStore = useFilesStore()
@@ -60,12 +80,46 @@ export default {
 	data() {
 		return {
 			canRequestSign: loadState('libresign', 'can_request_sign', false),
+			signatureFlow: loadState('libresign', 'signature_flow', 'parallel'),
 		}
 	},
 	computed: {
 		signer() {
 			return this.filesStore.getFile().signers[this.currentSigner]
 		},
+		signerName() {
+			return this.signer.displayName
+		},
+		counterNumber() {
+			const file = this.filesStore.getFile()
+			const totalSigners = file?.signers?.length || 0
+			if (this.signatureFlow === 'ordered_numeric' && totalSigners > 1 && this.signer.signingOrder) {
+				return this.signer.signingOrder
+			}
+			return null
+		},
+		counterType() {
+			return this.counterNumber !== null ? 'highlighted' : undefined
+		},
+		signerClass() {
+			return {
+				'signer-signed': this.signer.signed,
+			}
+		},
+		showDragHandle() {
+			if (!this.draggable) {
+				return false
+			}
+			const file = this.filesStore.getFile()
+			if (!file || !file.signers) {
+				return false
+			}
+			const totalSigners = file.signers.length
+			return this.signatureFlow === 'ordered_numeric' &&
+				totalSigners > 1 &&
+				!this.signer.signed &&
+				this.filesStore.canSave()
+		},
 		identifyMethodsNames() {
 			return this.signer.identifyMethods.map(method => method.method)
 		},
@@ -107,6 +161,34 @@ export default {
 			}
 			emit(this.event, this.signer)
 		},
+		closeActions() {
+			const actionsRef = this.$refs.listItem?.$refs.actions
+			if (actionsRef && typeof actionsRef.closeMenu === 'function') {
+				actionsRef.closeMenu()
+			}
+		},
 	},
 }
 </script>
+<style lang="scss" scoped>
+.drag-handle-wrapper {
+	display: flex;
+	align-items: center;
+	height: 100%;
+}
+
+.drag-handle {
+	cursor: grab;
+	color: var(--color-text-maxcontrast);
+	opacity: 0.7;
+
+	&:hover {
+		opacity: 1;
+	}
+}
+
+.signer-signed .drag-handle {
+	cursor: not-allowed;
+	opacity: 0.3;
+}
+</style>