##// END OF EJS Templates
implab » implabjs-djx
RSS
Added tag v1.5.0 for changeset e9a9ed6d7647
Added tag v1.5.0 for changeset e9a9ed6d7647
cin - - Load All Authors

File last commit:

r110:1a190b3a757d v1.4.0 default
r115:b4bb7c903a74 default
Show More
MainWidget.tsx
72 lines | 2.3 KiB | text/x-typescript | TypeScriptLexer
/ playground / src / main / ts / view / MainWidget.tsx
History | Source | Raw |Copy content |Copy permalink
cin
Working on WatchForRendition
 r107 import { djbase, djclass } from "@implab/djx/declare";
import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 import { bind, createElement, prop, watch, watchFor } from "@implab/djx/tsx";
import MainModel from "../model/MainModel";
import { OrderUpdate, Observable } from "@implab/djx/observable";
import { Appointment } from "../model/Appointment";
import { LocalDate } from "@js-joda/core";
cin
Working on WatchForRendition
 r107 import Button = require("dijit/form/Button");
cin
linting
 r109
cin
Working on WatchForRendition
 r107 @djclass
export default class MainWidget extends djbase(DjxWidgetBase) {
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 appointments?: Observable<OrderUpdate<Appointment>>;
model: MainModel;
cin
Working on WatchForRendition
 r107
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 dateTo?: LocalDate;
cin
Working on WatchForRendition
 r107
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 dateFrom?: LocalDate;
cin
Working on WatchForRendition
 r107
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 constructor(opts?: Partial<MainWidget> & ThisType<MainWidget>, srcNode?: string | Node) {
super(opts, srcNode);
cin
Working on WatchForRendition
 r107
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 const model = this.model = new MainModel();
this.own(model);
model.subscribe({ next: x => this.set(x) });
}
cin
Working on WatchForRendition
 r107
render() {
return <div className="tundra">
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 <h2 ref={bind("innerHTML", prop(this, "title"))} />
{watch(prop(this, "appointments"), items => items &&
<ul>
{watchFor(items, ({ id, title, getMembers }) =>
<li>{title}
<ul>
{watchFor(getMembers(), ({ role, name, position }) =>
<li className={role}>{name}({position})</li>
)}
</ul>
<div>
<Button onClick={() => this._onAddMemberClick(id)}>Add member</Button>
</div>
</li>
)}
</ul>
)}
<div>
<Button onClick={this._onAddAppointmentClick}>Add new appointment</Button>
</div>
cin
Working on WatchForRendition
 r107 </div>;
}
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 load() {
this.model.load();
cin
Working on WatchForRendition
 r107 }
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 private readonly _onAddMemberClick = (appointmentId: string) => {
this.model.addMember(appointmentId, {
email: "some-mail",
name: "Member Name",
position: "Member position",
role: "participant"
});
cin
linting
 r109 };
cin
Working on WatchForRendition
 r107
cin
corrected tear down logic handling in observables. Added support for observable query results
 r110 private readonly _onAddAppointmentClick = () => {
this.model.addAppointment("Appointment", new Date, 30);
cin
linting
 r109 };
cin
Working on WatchForRendition
 r107 }