one single field in docusign request modal to select users and email addresses

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

Author: Julien Veyssier

src/components/DocuSignModal.vue

@@ -9,22 +9,16 @@
 				</h2>
 				<span class="field-label">
 					<span class="icon icon-user" />
-					{{ t('approval', 'Users') }}
+					{{ t('approval', 'Users or email addresses') }}
 				</span>
 				<MultiselectWho
 					class="userInput"
-					:value="selectedUsers"
+					:value="selectedItems"
 					:max-height="200"
 					:types="[0]"
+					:enable-emails="true"
 					:placeholder="t('approval', 'Choose Nextcloud users')"
-					@update:value="updateSelectedUsers($event)" />
-				<span class="field-label">
-					<span class="icon icon-mail" />
-					{{ t('approval', 'Email addresses (coma separated)') }}
-				</span>
-				<input v-model="emails"
-					:placeholder="t('approval', 'Coma separated email addresses')"
-					type="text">
+					@update:value="updateSelectedItems($event)" />
 				<p class="settings-hint">
 					{{ t('approval', 'Recipients will receive an email from DocuSign with a link to sign the document. You will be informed by email when the document has been signed by all recipients.') }}
 				</p>
@@ -69,18 +63,13 @@ export default {
 			show: false,
 			loading: false,
 			fileId: 0,
-			emails: '',
-			selectedUsers: [],
+			selectedItems: [],
 		}
 	},
 
 	computed: {
-		emailIsValid() {
-			return /^\w+([.+-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,})+(?:,\w+([.+-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,})+)*$/
-				.test(this.emails.replace(/\s*,\s*/g, ','))
-		},
 		canValidate() {
-			return this.selectedUsers.length > 0 || this.emailIsValid
+			return this.selectedItems.length > 0
 		},
 	},
 
@@ -95,22 +84,24 @@ export default {
 			this.show = true
 		},
 		closeRequestModal() {
-			this.selectedUsers = []
-			this.emails = ''
+			this.selectedItems = []
 			this.show = false
 		},
 		setFileId(fileId) {
 			this.fileId = fileId
 		},
-		updateSelectedUsers(newValue) {
-			this.selectedUsers = newValue
-			console.debug(this.selectedUsers)
+		updateSelectedItems(newValue) {
+			this.selectedItems = newValue
+			console.debug(this.selectedItems)
 		},
 		onSignClick() {
 			this.loading = true
+
+			const targetUserIds = this.selectedItems.filter((i) => { return i.type === 'user' }).map((i) => { return i.entityId })
+			const targetEmails = this.selectedItems.filter((i) => { return i.type === 'email' }).map((i) => { return i.email })
 			const req = {
-				targetUserIds: this.selectedUsers.map((u) => { return u.entityId }),
-				targetEmails: this.emails ? this.emails.replace(/\s*,\s*/g, ',').split(',') : undefined,
+				targetUserIds,
+				targetEmails,
 			}
 			const url = generateUrl('/apps/approval/' + this.fileId + '/standalone-sign')
 			axios.put(url, req).then((response) => {

src/components/MultiselectWho.vue

@@ -24,10 +24,11 @@
 				class="approval-avatar-option"
 				:user="option.entityId"
 				:show-user-status="false" />
-			<Avatar v-else-if="['group', 'circle'].includes(option.type)"
+			<Avatar v-else-if="['group', 'circle', 'email'].includes(option.type)"
 				class="approval-avatar-option"
 				:display-name="option.displayName"
 				:is-no-user="true"
+				:disable-tooltip="true"
 				:show-user-status="false" />
 			<span class="multiselect-name">
 				{{ option.displayName }}
@@ -73,6 +74,10 @@ export default {
 			type: String,
 			default: t('approval', 'Who?'),
 		},
+		enableEmails: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -99,6 +104,21 @@ export default {
 				}
 			})
 
+			// email suggestion
+			const cleanQuery = this.query.replace(/\s+/g, '')
+			if (this.enableEmails
+				&& /^\w+([.+-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,})+$/.test(cleanQuery)
+				&& !this.value.find(i => i.type === 'email' && i.email === cleanQuery)
+			) {
+				result.push({
+					type: 'email',
+					displayName: cleanQuery,
+					email: cleanQuery,
+					icon: 'icon-mail',
+					trackKey: 'email-' + cleanQuery,
+				})
+			}
+
 			// add current user (who is absent from autocomplete suggestions)
 			// if it matches the query
 			if (this.currentUser && this.query) {
@@ -144,7 +164,7 @@ export default {
 			})
 			result.push(...circles)
 
-			// always add selected users/groups/circles at the end
+			// always add selected users/groups/circles/emails at the end
 			result.push(...this.value.map((w) => {
 				return w.type === 'user'
 					? {
@@ -162,13 +182,21 @@ export default {
 							icon: 'icon-group',
 							trackKey: 'group-' + w.entityId,
 						}
-						: {
-							entityId: w.entityId,
-							type: 'circle',
-							displayName: w.displayName,
-							icon: 'icon-circle',
-							trackKey: 'circle-' + w.entityId,
-						}
+						: w.type === 'circle'
+							? {
+								entityId: w.entityId,
+								type: 'circle',
+								displayName: w.displayName,
+								icon: 'icon-circle',
+								trackKey: 'circle-' + w.entityId,
+							}
+							: {
+								type: 'email',
+								displayName: w.displayName,
+								email: w.email,
+								icon: 'icon-mail',
+								trackKey: 'email-' + w.email,
+							}
 			}))
 
 			return result