@tririga/tri-template/lib/templates/ic-people/ic-people-form.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-image/triplat-image.html">
<link rel="import" href="../triblock-responsive-layout/triblock-view-responsive-behavior.html">
<link rel="import" href="../triblock-popup/triblock-popup.html">
<link rel="import" href="../triplat-graphic/triplat-graphic.html">
<link rel="import" href="../triplat-graphic/triplat-graphic-highlight.html">

<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-icons/communication-icons.html">

<link rel="import" href="ic-people-shared-styles.html">

<dom-module is="ic-person-form">
<template>
	<style include="ic-person-profile-styles">	
	</style>

		<div class="editable-container">
			<div class="image-container">
				<triplat-image src="{{person.picture}}" placeholder-icon="icons:assignment-ind" height="100px" width="100px" sizing="cover"></triplat-image>
				<div class="primary-location" on-tap="_showPrimaryLocation" hidden$="[[!editable]]"> 
					<span class="tri-link">Show primary location</span>
					<paper-icon-button class="location-icon" icon="communication:location-on"></paper-icon-button>
				</div>
			</div>
			<div class="editable-fields">
				<span class="tri-h2">[[person.firstName]] [[person.lastName]]</span>
				<paper-input label="Title:" value="{{person.title}}" readonly="[[!editable]]"></paper-input>
				<paper-input label="Work phone:" value="{{person.workPhone}}" readonly="[[!editable]]"></paper-input>
				<paper-input label="Nick name:" value="{{person.nickName}}" readonly="[[!editable]]"></paper-input>
			</div>
		</div>

		<!-- with-backdrop: triblock-popup defect work-around for small screen -->
		<triblock-popup id="graphicDialog" with-backdrop="[[!smallScreen]]">
			<triplat-graphic id="graphic" record-id="{{space.floorId.id}}">
				<triplat-graphic-highlight highlighted="[[space]]" class-number="2"></triplat-graphic-highlight>				
			</triplat-graphic>
		</triblock-popup>

</template>
</dom-module>
<script>
	Polymer({
		is: "ic-person-form",
        
        behaviors: [
			TriBlockViewResponsiveBehavior,
		],
		
        properties:{
			person: Object,
			editable: {
				type: Boolean,
				value: false
			}, 
			space: {
				type: Object
			}
        },

        _showPrimaryLocation: function(){
        	this.$.graphicDialog.openPopup();
        	this.async(function(){
        		this.$.graphic.refreshViewBox();
        	},100);
        },

	});
</script>