import { djbase, djclass } from "@implab/djx/declare"; import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase"; 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"; import Button = require("dijit/form/Button"); @djclass export default class MainWidget extends djbase(DjxWidgetBase) { appointments?: Observable>; model: MainModel; dateTo?: LocalDate; dateFrom?: LocalDate; constructor(opts?: Partial & ThisType, srcNode?: string | Node) { super(opts, srcNode); const model = this.model = new MainModel(); this.own(model); model.subscribe({ next: x => this.set(x) }); } render() { return

{watch(prop(this, "appointments"), items => items &&
    {watchFor(items, ({ id, title, getMembers }) =>
  • {title}
      {watchFor(getMembers(), ({ role, name, position }) =>
    • {name}({position})
    • )}
  • )}
)}

; } load() { this.model.load(); } private readonly _onAddMemberClick = (appointmentId: string) => { this.model.addMember(appointmentId, { email: "some-mail", name: "Member Name", position: "Member position", role: "participant" }); }; private readonly _onAddAppointmentClick = () => { this.model.addAppointment("Appointment", new Date, 30); }; }