jsobell/agregarCobranza.html

## agregarCobranza.html
<template>
  <section>
    <h2>${heading}</h2>

            Caja
            <select value.bind="cobranza.CajaId">
              <option value="0">Seleccionar Caja</option>
              <option repeat.for="caja of cajas" model.bind="caja.CajaId">${caja.Nombre}</option>
            </select>

            Cliente
            <select class="F24" value.bind="cobranza.ClienteId">
              <option value="0">Seleccionar cliente</option>
              <option repeat.for="cliente of clientes" model.bind="cliente.ClienteId">${cliente.Nombre}&nbsp;${cliente.Apellido}</option>
            </select>

            Monto
              <input type="number" value.bind="cobranza.Monto"></input>


            <button click.delegate="cobrar()" disabled.bind="cobrando">Cobrar</button>

  </section>
</template>

## agregarCobranza.js
import {DialogController} from 'aurelia-dialog';
import {
  inject,
  computedFrom,
  bindable,
  customElement,
  bindingMode } from 'aurelia-framework';

@customElement('agregar-cobranza')
export class AgregarCobranza {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) cobranza;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) dialogController;
  cobrando = false;

  constructor() {
    this.heading = 'Cobrar';
    console.log(this.dialogController);
    console.log(this.cobranza);
  }


  cobrar() {
    this.dialogController.ok();
  }
}

## app.html
<template>
  <h1>Dialog Repro</h1>
  <button click.delegate="submit()">Open Dialog</button>
</template>

## app.js
import {DialogService} from 'aurelia-dialog';
import {Prompt} from './prompt';

export class App {
  person = { name: 'Test' };
  static inject = [DialogService];
  constructor(dialogService) {
    this.dialogService = dialogService;
  }
  submit(){
    this.dialogService.open({ viewModel: Prompt, model: this.person}).then(response => {
      if (!response.wasCancelled) {
        console.log('good');
      } else {
        console.log('bad');
      }
      console.log(response.output);
    });
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-dialog');

  aurelia.start().then(a => a.setRoot());
}

## prompt.html
<template>
  <require from="./agregarCobranza"></require>
  <ai-dialog>
    <ai-dialog-body>
      <h2>Agregar cobranza</h2>
      <agregar-cobranza cobranza.one-way="cobranza" dialog-controller.one-way="controller"></agregar-cobranza>
    </ai-dialog-body>
  </ai-dialog>
</template>

## prompt.js
import {bindable} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';

export class Prompt {
  @bindable cobrado;
  @bindable cobranza;
  static inject = [DialogController];
  constructor(controller){
    this.controller = controller;
    this.cobranza = {};
  }
  activate(model){
    this.cobranza.CajaId = model;
  }
  canDeactivate(){
    if(!this.cobrado){
      var resp = confirm('¿Desea salir sin guardar la cobranza?');
      if(resp === true)
        return resp;
      else
        return false;
    }
  }
}
	<template>
	<section>
	<h2>${heading}</h2>

	Caja
	<select value.bind="cobranza.CajaId">
	<option value="0">Seleccionar Caja</option>
	<option repeat.for="caja of cajas" model.bind="caja.CajaId">${caja.Nombre}</option>
	</select>

	Cliente
	<select class="F24" value.bind="cobranza.ClienteId">
	<option value="0">Seleccionar cliente</option>
	<option repeat.for="cliente of clientes" model.bind="cliente.ClienteId">${cliente.Nombre} ${cliente.Apellido}</option>
	</select>

	Monto
	<input type="number" value.bind="cobranza.Monto"></input>



	<button click.delegate="cobrar()" disabled.bind="cobrando">Cobrar</button>

	</section>
	</template>
	import {DialogController} from 'aurelia-dialog';
	import {
	inject,
	computedFrom,
	bindable,
	customElement,
	bindingMode } from 'aurelia-framework';

	@customElement('agregar-cobranza')
	export class AgregarCobranza {
	@bindable({ defaultBindingMode: bindingMode.twoWay }) cobranza;
	@bindable({ defaultBindingMode: bindingMode.twoWay }) dialogController;
	cobrando = false;

	constructor() {
	this.heading = 'Cobrar';
	console.log(this.dialogController);
	console.log(this.cobranza);
	}


	cobrar() {
	this.dialogController.ok();
	}
	}
	<template>
	<h1>Dialog Repro</h1>
	<button click.delegate="submit()">Open Dialog</button>
	</template>
	import {DialogService} from 'aurelia-dialog';
	import {Prompt} from './prompt';

	export class App {
	person = { name: 'Test' };
	static inject = [DialogService];
	constructor(dialogService) {
	this.dialogService = dialogService;
	}
	submit(){
	this.dialogService.open({ viewModel: Prompt, model: this.person}).then(response => {
	if (!response.wasCancelled) {
	console.log('good');
	} else {
	console.log('bad');
	}
	console.log(response.output);
	});
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-dialog');

	aurelia.start().then(a => a.setRoot());
	}
	<template>
	<require from="./agregarCobranza"></require>
	<ai-dialog>
	<ai-dialog-body>
	<h2>Agregar cobranza</h2>
	<agregar-cobranza cobranza.one-way="cobranza" dialog-controller.one-way="controller"></agregar-cobranza>
	</ai-dialog-body>
	</ai-dialog>
	</template>
	import {bindable} from 'aurelia-framework';
	import {DialogController} from 'aurelia-dialog';

	export class Prompt {
	@bindable cobrado;
	@bindable cobranza;
	static inject = [DialogController];
	constructor(controller){
	this.controller = controller;
	this.cobranza = {};
	}
	activate(model){
	this.cobranza.CajaId = model;
	}
	canDeactivate(){
	if(!this.cobrado){
	var resp = confirm('¿Desea salir sin guardar la cobranza?');
	if(resp === true)
	return resp;
	else
	return false;
	}
	}
	}