feat(NcSelect): Allow to filter users by email notation

Allows to filter by the email notation like `Jane <[email protected]>`

Signed-off-by: Ferdinand Thiessen <[email protected]>

cypress/component/NcSelect.cy.ts

@@ -0,0 +1,74 @@
+import { mount } from 'cypress/vue2'
+import NcSelect from '../../src/components/NcSelect/NcSelect.vue'
+
+describe('NcSelect', () => {
+	const mountSelect = () => mount(NcSelect, {
+		propsData: {
+			userSelect: true,
+			inputClass: 'cypress-search-input',
+			options: [
+				{
+					id: '0-john',
+					displayName: 'John',
+					isNoUser: false,
+					subname: '[email protected]',
+					icon: '',
+				},
+				{
+					id: '0-emma',
+					displayName: 'Emma',
+					isNoUser: false,
+					subname: '[email protected]',
+					icon: '',
+				},
+				{
+					id: '0-olivia',
+					displayName: 'Olivia',
+					isNoUser: false,
+					subname: '[email protected]',
+					icon: '',
+				},
+			],
+		},
+	})
+
+	it('has options', () => {
+		mountSelect()
+
+		cy.get('.select').click()
+		cy.contains('.option', 'Olivia').should('exist')
+		cy.contains('.option', 'John').should('exist')
+		cy.contains('.option', 'Emma').should('exist')
+	})
+
+	it('can filter by name', () => {
+		mountSelect()
+
+		cy.get('.cypress-search-input').scrollIntoView().type('Em')
+		cy.contains('.option', 'Emma').should('exist')
+		cy.document().find('.option').should('have.length', 1)
+	})
+
+	it('can filter by mail', () => {
+		mountSelect()
+
+		cy.get('.cypress-search-input').scrollIntoView().type('olivia@example')
+		cy.contains('.option', 'Olivia').should('exist')
+		cy.document().find('.option').should('have.length', 1)
+	})
+
+	it('can filter by mail in ticks', () => {
+		mountSelect()
+
+		// Until this it should not be visible
+		cy.get('.cypress-search-input').clear().type('O. <')
+		cy.contains('.option', 'Olivia').should('not.exist')
+		// now it should match
+		cy.get('.cypress-search-input').type('olivia')
+		cy.contains('.option', 'Olivia').should('exist')
+		// and with full search query it should also exist
+		cy.get('.cypress-search-input').type('@example.org>')
+		cy.contains('.option', 'Olivia').should('exist')
+		cy.document().find('.option').should('have.length', 1)
+	})
+})

src/components/NcSelect/NcSelect.vue

@@ -951,14 +951,19 @@ export default {
 		},
 
 		localFilterBy() {
+			// Match the email notation like "Jane <[email protected]>" with the email address as matching group
+			const EMAIL_NOTATION = /[^<]*<([^>]+)/
+
 			if (this.filterBy !== null) {
 				return this.filterBy
 			}
 			if (this.userSelect) {
 				return (option, label, search) => {
-					return (`${label} ${option.subname}` || '')
-						.toLocaleLowerCase()
-						.indexOf(search.toLocaleLowerCase()) > -1
+					const match = search.match(EMAIL_NOTATION)
+					return (match && option.subname && option.subname.toLocaleLowerCase().indexOf(match[1].toLocaleLowerCase()) > -1)
+						|| (`${label} ${option.subname}` || '')
+							.toLocaleLowerCase()
+							.indexOf(search.toLocaleLowerCase()) > -1
 				}
 			}
 			return VueSelect.props.filterBy.default