Merge pull request #6134 from LibreSign/refactor/replace-bullet-with-ncchip

refactor: Replace Bullet component with NcChip and fix signer reactivity

src/Components/Bullet/Bullet.vue

@@ -1,40 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<div class="bullet__wrapper">
-		<span class="bullet__name">
-			{{ name }}
-		</span>
-	</div>
-</template>
-<script>
-export default {
-	name: 'Bullet',
-	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-	},
-}
-</script>
-<style lang="scss" scoped>
-.bullet {
-	&__wrapper {
-		display: inline-block;
-		vertical-align: middle;
-		min-width: 0;
-		max-width: 100%;
-	}
-	&__name {
-		border-radius: 10px;
-		display: inline-flex;
-		max-width: 100%;
-		background-color: var(--color-background-dark);
-		padding-right: 8px;
-		padding-left: 8px;
-	}
-}
-</style>

src/Components/Signers/Signer.vue

@@ -15,7 +15,10 @@
 		</template>
 		<template #subname>
 			<div class="signer-subname">
-				<Bullet v-for="method in identifyMethodsNames" :key="method" :name="method" />
+				<NcChip v-for="method in identifyMethodsNames"
+					:key="method"
+					:text="method"
+					:no-close="true" />
 				<NcChip :text="signer.statusText"
 					:type="chipType"
 					:icon-path="statusIconPath"
@@ -48,8 +51,6 @@ import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcChip from '@nextcloud/vue/components/NcChip'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 
-import Bullet from '../Bullet/Bullet.vue'
-
 import { useFilesStore } from '../../store/files.js'
 
 export default {
@@ -59,10 +60,9 @@ export default {
 		NcAvatar,
 		NcChip,
 		DragVertical,
-		Bullet,
 	},
 	props: {
-		currentSigner: {
+		signerIndex: {
 			type: Number,
 			required: true,
 		},
@@ -94,7 +94,8 @@ export default {
 	},
 	computed: {
 		signer() {
-			return this.filesStore.getFile().signers[this.currentSigner]
+			const file = this.filesStore.getFile()
+			return file?.signers?.[this.signerIndex]
 		},
 		signerName() {
 			return this.signer.displayName

src/Components/Signers/Signers.vue

@@ -15,7 +15,7 @@
 		<transition-group name="signer-list" tag="div">
 			<Signer v-for="(signer, index) in sortableSigners"
 				:key="signer.identify || index"
-				:current-signer="index"
+				:signer-index="index"
 				:event="event"
 				:draggable="!signer.signed">
 				<template #actions="{closeActions}">
@@ -27,7 +27,7 @@
 	<ul v-else>
 		<Signer v-for="(signer, index) in signers"
 			:key="signer.identify || index"
-			:current-signer="index"
+			:signer-index="index"
 			:event="event">
 			<template #actions="{closeActions}">
 				<slot name="actions" :signer="signer" :closeActions="closeActions" />