Add oo-molecules-project-users element

src/elements/_molecules/oo-molecules-project-users/index.test.ts

@@ -0,0 +1,46 @@
+import el from './index'
+import define from '../../../lib/define'
+import insertElement from '../../../lib/test/insert-element'
+import getElement from '../../../lib/test/get-element'
+import removeElement from '../../../lib/test/remove-element'
+
+const ELEMENT = 'oo-molecules-project-users'
+
+describe(`<${ELEMENT}></${ELEMENT}>`, () => {
+	before(() => {
+		define(ELEMENT, el)
+	})
+
+	it('Mount on document', () => {
+		insertElement(ELEMENT)
+		expect(getElement(ELEMENT)[0]).to.be.ok()
+	})
+
+	describe('Display project author and assignee', () => {
+		it('Display author when exists "data-author" attribute', () => {
+			const element = insertElement(ELEMENT, new Map([['data-author', 'xxx']]))
+			const items = Array.from(element.shadowRoot.querySelectorAll('oo-atoms-user-name'))
+			expect(items).to.have.length(1)
+			expect(items[0].getAttribute('data-iam')).to.be('xxx')
+		})
+
+		it('Display assignee when exists "data-assignee" attribute', () => {
+			const element = insertElement(ELEMENT, new Map([['data-assignee', 'yyy']]))
+			const items = Array.from(element.shadowRoot.querySelectorAll('oo-atoms-user-name'))
+			expect(items).to.have.length(1)
+			expect(items[0].getAttribute('data-iam')).to.be('yyy')
+		})
+
+		it('Display author and assignee when exists "data-author" attribute and "data-assignee" attribute', () => {
+			const element = insertElement(ELEMENT, new Map([['data-author', 'xxx'], ['data-assignee', 'yyy']]))
+			const items = Array.from(element.shadowRoot.querySelectorAll('oo-atoms-user-name'))
+			expect(items).to.have.length(2)
+			expect(items[0].getAttribute('data-iam')).to.be('xxx')
+			expect(items[1].getAttribute('data-iam')).to.be('yyy')
+		})
+	})
+
+	after(() => {
+		removeElement(ELEMENT)
+	})
+})

src/elements/_molecules/oo-molecules-project-users/index.ts

@@ -0,0 +1,71 @@
+import {OOElement} from '../../oo-element'
+import {html} from '../../../lib/html'
+import weakMap from '../../../lib/weak-map'
+import userName from '../../_atoms/oo-atoms-user-name'
+import define from '../../../lib/define'
+
+define('oo-atoms-user-name', userName)
+
+const ATTR = {
+	DATA_AUTHOR: 'data-author',
+	DATA_ASSIGNEE: 'data-assignee'
+}
+
+const stateAuthor = weakMap<string>()
+const stateAssignee = weakMap<string>()
+
+const content = (uid?: string) => uid ? html`<oo-atoms-user-name data-iam$='${uid}' data-size=small></oo-atoms-user-name>` : html``
+
+export default class extends OOElement {
+	static get observedAttributes() {
+		return [ATTR.DATA_AUTHOR, ATTR.DATA_ASSIGNEE]
+	}
+
+	attributeChangedCallback(attr, prev, next: string) {
+		if (prev === next && !next) {
+			return
+		}
+		switch (attr) {
+			case ATTR.DATA_AUTHOR:
+				stateAuthor.set(this, next)
+				break
+			case ATTR.DATA_ASSIGNEE:
+				stateAssignee.set(this, next)
+				break
+			default:
+				break
+		}
+		if (this.connected) {
+			this.update()
+		}
+	}
+
+	render() {
+		const author = stateAuthor.get(this)
+		const assignee = stateAssignee.get(this)
+
+		return html`
+		<style>
+			div {
+				display: flex;
+			}
+			oo-atoms-user-name {
+				&:not(:first-child) {
+					margin-left: 1rem;
+				}
+				&:first-child:not(:only-child) {
+					&::after {
+						content: 'to';
+						align-self: center;
+						margin-left: 1rem;
+					}
+				}
+			}
+		</style>
+		<div>
+			${content(author)}
+			${content(assignee)}
+		</div>
+		`
+	}
+}