@tririga/tri-template/lib/templates/ic-people/ic-people-search.html

A simple tool for generating IBM TRIRIGA UX view skeletons from available templates.

<!-- IBM Confidential‌ - OCO Source Materials‌ - (C) COPYRIGHT IBM CORP. 2017 - The source code for this program is not published or otherwise‌ divested of its trade secrets, irrespective of what has been‌ deposited with the U.S. Copyright Office. -->

<link rel="import" href="../triplat-search-input/triplat-search-input.html">
<link rel="import" href="../triblock-table/triblock-table.html">
<link rel="import" href="../triplat-ds/triplat-ds.html">
<link rel="import" href="../triplat-query/triplat-query.html">

<dom-module is="ic-people-search">
<template>
	<triplat-ds id="peopleDs" name="people" data="{{people}}" filtered-data="{{filteredPeople}}"> 
			<triplat-query>
				<triplat-query-filter name="firstName" operator="contains" value="{{searchValue}}" ignore-if-blank></triplat-query-filter>
				<triplat-query-or></triplat-query-or>
				<triplat-query-filter name="lastName" operator="contains" value="{{searchValue}}" ignore-if-blank></triplat-query-filter>
				<triplat-query-sort name="firstName"></triplat-query-sort>
			</triplat-query>
	</triplat-ds>
	
	<triplat-search-input placeholder="Search Employee" data="{{people}}" value="{{searchValue}}"></triplat-search-input>

	<triblock-table id="resultsTable" data="{{filteredPeople}}" select-on-row-tap>
		<triblock-table-column title="Name">
		    <template>
		      <div>{{item.firstName}} {{item.lastName}}</div>
		    </template>
		 </triblock-table-column>
	</triblock-table>
	
</template>
</dom-module>
<script>
	Polymer({
		is: "ic-people-search",
        
        listeners: {
			'resultsTable.row-tap': '_selectItem',
		},

		_selectItem: function(e){
			this.fire("person-selected", e.detail.item);
		},

	});
</script>