paper-people-list.html

<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../paper-chip/paper-chip.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../iron-dropdown/iron-dropdown.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-item/paper-item-body.html">
<link rel="import" href="../paper-item/paper-icon-item.html">
<link rel="import" href="../paper-material/paper-material.html">

<dom-module id="paper-people-list">
	<style>
		paper-chip {
			display: inline-block;
			margin: 10px 10px 0px 0;
		}
		paper-chip[opened] { 
			z-index: 999;
		}
		iron-dropdown {
			position: relative;
			top: 0 !important;
			left: 0 !important;
		}
		iron-dropdown /deep/ .dropdown-content {
			position: absolute;
			margin-top: 20px;
			padding: 2px;
			background: white;
			z-index: 999;
		}
		iron-icon {
			border-radius: 50%;
			height: 40px;
			width: 40px;
		}
		iron-icon /deep/ img {
			border-radius: 50%;
		}
	</style>
	<template>
		<template is="dom-repeat" items="{{people}}">
			<paper-chip removable on-remove="_handleChipRemoval">
				<iron-icon class='icon' src="{{item.avatar}}"></iron-icon>
				<h1>{{item.name}}</h1>
				<h2>{{item.identifier}}</h2>
			</paper-chip>
		</template>
		<paper-input-container class="dropdown-trigger">
			<input id="searchbar" is="iron-input" on-keyup="_searchChanged">
		</paper-input-container>
		<iron-dropdown id="dropdown">
			<div class="dropdown-content">
				<paper-material elevation="1">
					<template is="dom-repeat" items="{{data}}">
						<paper-icon-item on-tap="_addItemToList">
							<div class="avatar" item-icon>
								<iron-icon src="{{item.avatar}}"></iron-icon>
							</div>
							<paper-item-body two-line>
								<div>{{item.name}}</div>
								<div secondary>{{item.identifier}}</div>
							</paper-item-body>
						</paper-icon-item>
					</template>
				</paper-material>
			</div>
		</iron-dropdown>
	</template>
</dom-module>
<script>
	( function () {
		Polymer({
			is: 'paper-people-list',
			properties: {
				/*
				 * 	{
				 			avatar: 'someurl.png'
				 			name: 'Prateek',
							identifier: 'abc@abc.com'
				 		}
				*/
				
				/*
				 *	Total number of people selected
				*/
				people: {
					type: Array,
					value: [],
					notify: true
				},

				/*
				 *	data obtained from the server
				 */
				data: {
					type: Object,
					value: [],
					notify: true,
					observer: '_handleDataChange'
				},

				/*
				 * the search parameter of the input field
				 */
				search: {
					type: String,
					value: "",
					notify: true
				}
			},
			_searchChanged: function (e, detail) {
				if(e.target.value) {
					this.fire('search-changed', {
						search: e.target.value
					});
				}
			},
			_handleDataChange: function () {
				this.$.dropdown.open();
			},
			_addItemToList: function (e, detail) {
				this.push('people',e.model.item);
				this.$.searchbar.value = "";
				this.$.dropdown.close();
			},
			_handleChipRemoval: function (e, detail) {
				var current = e.model.item.identifier,
					index = null;
				this.people.forEach( function (val, i) {
					if(val.identifier === current) {
						index = i;
					}
				});
				this.splice('people', index, 1);
			}
		});
	})();
</script>