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

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

import { PolymerElement, html } from '../@polymer/polymer/polymer-element.js';

import "../triplat-routing/triplat-routing.js";
import "../triplat-icon/triplat-icon.js";
import "../triblock-table/triblock-table.js";
import { afterNextRender } from "../@polymer/polymer/lib/utils/render-status.js";
import "../@polymer/paper-button/paper-button.js";
import "../@polymer/paper-icon-button/paper-icon-button.js";
import "./@element-styles.js";

class @ElementCamelCaseInbox extends PolymerElement {
	static get template() {
		return html `
			<style include="shared-app-layout-styles tristyles-theme">

				: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>	
		`
	}

	static get properties() {
		return {
			_records: {
				type: Array
			}
		}
	}

	connectedCallback() {
		super.connectedCallback();
		afterNextRender(this, this._loadRecords);
	}

    _onActionButtonTap() {
		this.dispatchEvent(new CustomEvent('inbox-action', {bubbles: true, composed: true}));
	}

    _handleRowTap(e) {
		this.dispatchEvent(new CustomEvent('open-detail', {bubbles: true, composed: true, detail: {"record": e.detail.item}}));
	}

    _onDeleteRow(e) {
		e.stopPropagation();
		this.dispatchEvent(new CustomEvent('delete-record', {bubbles: true, composed: true, detail: {"record": e.detail.item}}));
	}

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

window.customElements.define("@element-inbox", @ElementCamelCaseInbox);