@tririga/tri-template/lib/templates/responsive-app/@element-inbox.html

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

<link rel="import" href="../triplat-routing/triplat-routing.html">
<link rel="import" href="../triplat-icon/triplat-icon.html">
<link rel="import" href="../triblock-table/triblock-table.html">

<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<link rel="import" href="@element-styles.html">

<dom-module id="@element-inbox">
	<template>
		<style include="shared-app-layout-styles">
			:host {
				@apply(--layout-vertical);
				background-color: var(--tri-primary-content-background-color);
				padding: 0px 20px 10px 20px;
			}
			
			.inbox-header {
				@apply(--layout-horizontal);
				@apply(--layout-center);
			}
			
			.title {
				@apply(--layout-flex);
				padding: 20px;
				font-size: 18px;
			}

			#requestsTable {
				@apply(--layout-flex);
				width:100%;
			}

			triblock-table-column {
				@apply(--layout-flex-2);
			}
		</style>

		<div class="inbox-header">
			<div class="title">
				<triplat-icon icon="bulletlist"></triplat-icon>
				<span>List of records</span>
			</div>				
			<paper-button primary on-tap="_onActionButtonTap" noink>Action</paper-button>
		</div>
		<triblock-table id="requestsTable" 
				data="[[_records]]" fixed-header on-row-tap="_handleRowTap">
			<triblock-table-column title="Record ID" property="_id"></triblock-table-column>
				<triblock-table-column title="Name" property="name"></triblock-table-column>
				<triblock-table-column title="Status" property="status"></triblock-table-column>
				<triblock-table-column title="Action Button" property="status" remove-default-cell-padding>
				<template>
					<paper-icon-button icon="delete" on-tap="_onDeleteRow"></paper-icon-button>
				</template>
			</triblock-table-column>
		</triblock-table>	
	</template>
</dom-module>
<script>
	Polymer({

		is: "@element-inbox",

		properties: {
			_records: {
				type: Array
			}
		},

		attached: function() {
			Polymer.RenderStatus.afterNextRender(this, this._loadRecords);
		},

		_onActionButtonTap: function () {
			this.fire("inbox-action");
		},

		_handleRowTap: function(e) {
			this.fire("open-detail", {"record": e.detail.item});
		},

		_onDeleteRow: function(e) {
			e.stopPropagation();
			this.fire("delete-record", {"record": e.detail.item});
		},

		_loadRecords: function() {
			this._records = [
				{
					_id: 1,
					name: "Name 000001",
					status: "Active"
				},
				{
					_id: 2,
					name: "Name 000002",
					status: "Draft"
				},
				{
					_id: 3,
					name: "Name 000003",
					status: "Active"
				}
			];
		}
	});

</script>