@tririga/tri-template/lib/templates/ic-people/ic-people.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-view-behavior/triplat-view-behavior.html">
<link rel="import" href="../triblock-app-layout/triblock-app-layout.html">
<link rel="import" href="../triplat-routing/triplat-routing.html">

<link rel="import" href="../paper-toast/paper-toast.html">
<link rel="import" href="../iron-pages/iron-pages.html">

<link rel="import" href="ic-people-styles.html">
<link rel="import" href="ic-people-search.html">
<link rel="import" href="ic-person-profile.html">

<dom-module id="ic-people">
	<template>
		<style include="ic-people-styles">			
		</style>

		<triplat-route id="peopleSearchRoute" name="peopleSearch" path="/" active="{{_searchActive}}"></triplat-route>
		<triplat-route id="personProfileRoute" name="personProfile" path="/person/:personId"></triplat-route>

		<triblock-app-layout 
			app-label="ic-people"
			mobile-page-label="ic-people"
			show-mobile-back-button="{{!_searchActive}}">

			<!-- Enable to customize app-title -->
			<!--<div app-title>			
				<span><b>App ic-people</b></span>
			</div>-->

			<triblock-banner-button tap-handler="_navigateToPeopleSearch" home></triblock-banner-button>
			<triblock-banner-button tap-handler="_navigateBack" back></triblock-banner-button>
			
			<triplat-route-selector content>
	            <iron-pages>
	            	<ic-people-search id="search-result"  route="peopleSearch" default-route></ic-people-search>
					<ic-person-profile id="person-detail" route="personProfile"></ic-person-profile>
	           </iron-pages>
	        </triplat-route-selector>

	        <paper-toast id="toast" text="Person updated"></paper-toast>

		</triblock-app-layout>
	</template>

</dom-module>
<script>
	Polymer({

		is: "ic-people",

		behaviors: [TriPlatViewBehavior], 

		listeners: {
			'person-selected': '_handlePersonSelected',
			'popup-opened': '_setOpenedPopupElement',
			'record-is-updated': '_recordIsUpdated'
		},

        _setOpenedPopupElement: function(e) {
            this.set('_openedPopupElement', e.detail.element);
        },

		_handlePersonSelected: function(e){
			this.$.personProfileRoute.navigate({ personId: e.detail._id});
		},

		_recordIsUpdated: function(){
			this.$.toast.show();
			this._navigateToPeopleSearch();
		},

		_navigateToPeopleSearch: function(){
			this.$.peopleSearchRoute.navigate();
		},

		_navigateBack: function(e) {
            if (this._openedPopupElement) {
                this._openedPopupElement.closePopup();
            } else {
            	window.history.back();
            }
		},
	});

</script>