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

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

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

import { TriLazyLoadingBehavior } from "../tricore-lazy-loading-behavior/tricore-lazy-loading-behavior.js";
import { TriBlockViewResponsiveBehavior } from "../triblock-responsive-layout/triblock-view-responsive-behavior.js";
import { assertParametersAreDefined, getModuleUrl } from "../tricore-util/tricore-util.js";
import "../triplat-routing/triplat-routing.js";
import "../triblock-responsive-layout/triblock-responsive-layout.js";
import "../triblock-popup/triblock-popup.js";
import "../triplat-icon/ibm-icons-glyphs.js";

import "../@polymer/iron-pages/iron-pages.js";
import "../@polymer/iron-image/iron-image.js";
import "../@polymer/paper-button/paper-button.js";
import "../@polymer/paper-input/paper-input.js";
import "../@polymer/paper-input/paper-textarea.js";

import "./@element-styles.js";
import "./@element-inbox.js";

class @ElementCamelCaseMain extends mixinBehaviors([TriLazyLoadingBehavior], PolymerElement) {
	static get template() {
		return html `
			<style include="shared-app-layout-styles tristyles-theme">

			</style>

			<triplat-route id="inboxRoute" name="inbox" path="/" on-route-active="_onInboxRouteActive">
			</triplat-route>
			<triplat-route id="detailRoute" name="detail" path="/detail/:id" on-route-active="_onDetailRouteActive">
			</triplat-route>

			<triplat-route-selector page="">
				<iron-pages>
					<@element-inbox route="inbox" on-inbox-action="_onInboxAction" default-route>
					</@element-inbox>
					<@element-details id="detailsPage" route="detail">
					</@element-details>
				</iron-pages>
			</triplat-route-selector>
		`
	}

	connectedCallback() {
		super.connectedCallback();
		this.addEventListener("open-detail", this._onOpenDetail.bind(this));
		this.addEventListener("submit-detail", this._onSubmitDetail.bind(this));
		this.addEventListener("delete-record", this._onDeleteRecord.bind(this));
	}

	openInbox() {
		this.$.inboxRoute.navigate();
	}

    _onOpenDetail (e) {
		this.$.detailRoute.navigate({ id: e.detail.record._id });
	}

    _onInboxAction (e) {
		alert("Implement inbox action button");
	}

    _onSubmitDetail (e) {
		alert("Implement submit detail.");
	}

    _onDeleteRecord (e) {
		alert("Implement delete record.");
	}

    _onInboxRouteActive (e) {
		this.dispatchEvent(new CustomEvent('inbox-route-active',
			{bubbles: true, composed: true,
				detail: { active: e.detail.active, pageLabel: null, hasBackButton: false }}));
	}

    _onDetailRouteActive(e) {
		if (e.detail.active) {
			this.loadResource(this.$.detailsPage, "@element-details.js");
		}
		this.dispatchEvent(new CustomEvent('detail-route-active',
		{bubbles: true, composed: true,
			detail: { active: e.detail.active, pageLabel: "Detail", hasBackButton: true }}));
	}

	static get importMeta() { 
		return getModuleUrl("@element/@element-main.js");
	}
}

window.customElements.define("@element-main", @ElementCamelCaseMain);