Merge pull request #364 from SamGraber/multiple_requests

Managing the subscriber

Author: Sam Graber

bootstrapper/app.ts

@@ -71,7 +71,8 @@ angular.module(moduleName, [
 	miscModuleName,
 	textModuleName,
 ])
-	.directive('tsApp', <any>upgradeAdapter.downgradeNg2Component(App));
+	.directive('tsApp', <any>upgradeAdapter.downgradeNg2Component(App))
+	.directive('tsMiscNgContext', <any>upgradeAdapter.downgradeNg2Component(MiscNgContextBootstrapper));
 
 @NgModule({
 	imports: [

bootstrapper/forms/formsNg2.html

@@ -27,8 +27,9 @@ <h5>Form with names</h5>
 	<rlButtonSubmit rightAligned="true">Submit right</rlButtonSubmit>
 </rlForm>
 <h5>Autosave form</h5>
+<rlBusy #testBusy></rlBusy>
 <rlBusy [loading]="(autosaveAction.saving$ | async) || (autosaveAction.complete$ | async)"></rlBusy>
-<rlForm #autosaveForm [save]="waitCallback" rlAutosave [saveWhenInvalid]="true">
+<rlForm #autosaveForm [save]="saveRequest" rlAutosave [saveWhenInvalid]="true">
 	<rlTextbox name="textbox1" label="Autosave textbox" rlRequired="Required textbox"></rlTextbox>
 </rlForm>
 {{autosaveForm.form.pristine ? 'Pristine' : 'Dirty'}}

bootstrapper/forms/formsNg2Bootstrapper.ts

@@ -1,6 +1,8 @@
 import { Component, ViewChild } from '@angular/core';
 import { Observable, BehaviorSubject } from 'rxjs';
+import { HttpUtility } from 'rl-http';
 
+import { BusyComponent } from '../../source/components/busy/busy';
 import { FormComponent } from '../../source/components/form/form';
 import { AutosaveActionService } from '../../source/services/autosaveAction/autosaveAction.service';
 
@@ -16,11 +18,15 @@ export class FormsBootstrapper {
 	rating$: BehaviorSubject<any>;
 
 	@ViewChild('testForm') testForm: FormComponent;
+	@ViewChild('testBusy') testBusy: BusyComponent;
 
 	autosaveAction: AutosaveActionService;
+	http: HttpUtility;
 
-	constructor(autosaveAction: AutosaveActionService) {
+	constructor(autosaveAction: AutosaveActionService
+			, http: HttpUtility) {
 		this.autosaveAction = autosaveAction;
+		this.http = http;
 
 		this.rating$ = new BehaviorSubject(null);
 
@@ -46,6 +52,11 @@ export class FormsBootstrapper {
 		});
 	}
 
+	saveRequest = data => {
+		const request = this.http.post('http://localhost:8000/test', data).delay(1000);
+		this.testBusy.waitOn(request).subscribe(response => console.log(response));
+	};
+
 	saveTestForm = (data): any => {
 		if (this.testForm.form.dirty) {
 			return this.waitCallback(data);

bootstrapper/misc/miscNg2Context.ts

@@ -17,6 +17,6 @@ export class MiscNgContextBootstrapper {
 	}
 
 	toggle(): void {
-		this.busy2.trigger(!this.busy2.loading);
+		this.busy2.waitOn(!this.busy2.loading);
 	}
-}
+}

source/behaviors/autosave/autosave.tests.ts

@@ -1,4 +1,4 @@
-import { Subject } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { rlFakeAsync, mock, rlTick, flushMicrotasks } from 'rl-async-testing';
 
 import { AutosaveDirective, DEFAULT_AUTOSAVE_DEBOUNCE } from './autosave';
@@ -12,7 +12,7 @@ interface IFormMock {
 }
 
 interface IAutosaveActionMock {
-	trigger: Sinon.SinonSpy;
+	waitOn: Sinon.SinonSpy;
 }
 
 describe('AutosaveDirective', () => {
@@ -31,7 +31,7 @@ describe('AutosaveDirective', () => {
 			saveForm: sinon.spy(),
 		};
 
-		autosaveAction = { trigger: sinon.spy() };
+		autosaveAction = { waitOn: sinon.spy(() => Observable.empty()) };
 
 		autosave = new AutosaveDirective(<any>form, <any>autosaveAction);
 	});
@@ -177,8 +177,8 @@ describe('AutosaveDirective', () => {
 
 			autosave.autosave();
 
-			sinon.assert.calledOnce(autosaveAction.trigger);
-			sinon.assert.calledWith(autosaveAction.trigger, waitValue);
+			sinon.assert.calledOnce(autosaveAction.waitOn);
+			sinon.assert.calledWith(autosaveAction.waitOn, waitValue);
 		});
 
 		it('should save the form directly if saveWhenInvalid is true', () => {
@@ -188,8 +188,8 @@ describe('AutosaveDirective', () => {
 
 			autosave.autosave();
 
-			sinon.assert.calledOnce(autosaveAction.trigger);
-			sinon.assert.calledWith(autosaveAction.trigger, waitValue);
+			sinon.assert.calledOnce(autosaveAction.waitOn);
+			sinon.assert.calledWith(autosaveAction.waitOn, waitValue);
 		});
 
 		it('should not save if the form becomes pristine immediately before saving', () => {

source/behaviors/autosave/autosave.ts

@@ -57,7 +57,8 @@ export class AutosaveDirective implements AfterViewInit {
 
 		const waitOn = this.submitAndWait();
 		if (waitOn) {
-			this.autosaveAction.trigger(waitOn);
+			// subscribes to kick off the stream
+			this.autosaveAction.waitOn(waitOn).subscribe();
 		}
 	}
 

source/components/busy/busy.tests.ts

@@ -11,18 +11,18 @@ describe('busy', () => {
 	});
 
 	it('should not show the spinner after triggering if null', (): void => {
-		busy.trigger(null);
+		busy.waitOn(null);
 		expect(busy.loading).to.not.exist;
 	});
 
 	it('should show the spinner after triggering if true', (): void => {
-		busy.trigger(true);
+		busy.waitOn(true);
 		expect(busy.loading).to.be.true;
 	});
 
 	it('should hide the spinner after triggering if false', (): void => {
 		busy.loading = true;
-		busy.trigger(false);
+		busy.waitOn(false);
 		expect(busy.loading).to.be.false;
 	});
 
@@ -32,7 +32,7 @@ describe('busy', () => {
 		beforeEach((): void => {
 			stream = new Subject<void>();
 
-			busy.trigger(stream);
+			busy.waitOn(stream).subscribe({ error: () => null });
 
 			expect(busy.loading).to.be.true;
 		});

source/components/busy/busy.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { isBoolean } from 'lodash';
+import { Observable } from 'rxjs';
 
 import { DefaultTheme } from '../componentsDefaultTheme';
 import { AsyncHelper, IWaitValue } from '../../services/async/async.service';
@@ -26,18 +27,18 @@ export class BusyComponent {
 	/*
 	 * Public API for triggering the rlBusy to wait on a promise
 	 */
-	trigger(waitOn: IWaitValue<any>): void {
+	waitOn(waitOn: IWaitValue<any>): Observable<any> {
 		if (waitOn == null) {
-			return;
+			return Observable.empty();
 		}
 
 		if (isBoolean(waitOn)) {
 			this.loading = waitOn;
-			return;
+			return Observable.of(waitOn);
 		}
 
 		this.loading = true;
-		this.asyncHelper.waitAsObservable(waitOn)
-			.subscribe(null, () => this.loading = false, () => this.loading = false);
+		return this.asyncHelper.waitAsObservable(waitOn)
+			.do(null, () => this.loading = false, () => this.loading = false);
 	}
-}
+}

source/components/buttons/buttonAsync/buttonAsync.tests.ts

@@ -1,7 +1,9 @@
-import { ButtonAsyncComponent } from './buttonAsync';
+import { Observable } from 'rxjs';
+
+import { ButtonAsyncComponent } from './buttonAsync';
 
 interface IMockBusy {
-	trigger: Sinon.SinonSpy;
+	waitOn: Sinon.SinonSpy;
 }
 
 describe('ButtonAsyncComponent', () => {
@@ -13,7 +15,7 @@ describe('ButtonAsyncComponent', () => {
 		button = new ButtonAsyncComponent();
 
 		busy = {
-			trigger: sinon.spy(),
+			waitOn: sinon.spy(() => Observable.empty()),
 		};
 		button.busySpinner = <any>busy;
 	});
@@ -27,7 +29,7 @@ describe('ButtonAsyncComponent', () => {
 
 		sinon.assert.calledOnce(action);
 		sinon.assert.calledWith(action, event);
-		sinon.assert.calledOnce(busy.trigger);
-		sinon.assert.calledWith(busy.trigger, 5);
+		sinon.assert.calledOnce(busy.waitOn);
+		sinon.assert.calledWith(busy.waitOn, 5);
 	});
 });

source/components/buttons/buttonAsync/buttonAsync.ts

@@ -23,12 +23,13 @@ export class ButtonAsyncComponent extends BaseButtonComponent {
 	constructor() {
 		super();
 		if (!this.action) {
-			this.action = <IAsyncAction>() => Promise.resolve();
+			this.action = () => Observable.empty();
 		}
 	}
 
 	triggerAction($event: any): void {
+		// subscribes to kick off the action
 		const waitValue: IWaitValue<any> = this.action($event);
-		this.busySpinner.trigger(waitValue);
+		this.busySpinner.waitOn(waitValue).subscribe();
 	}
 }

source/components/buttons/buttonLongClick/buttonLongClick.tests.ts

@@ -1,3 +1,4 @@
+import { Observable } from 'rxjs';
 import { rlFakeAsync, rlTick, flushMicrotasks } from 'rl-async-testing';
 
 import { services } from 'typescript-angular-utilities';
@@ -6,7 +7,7 @@ import __timeout = services.timeout;
 import { ButtonLongClickComponent } from './buttonLongClick';
 
 interface IMockBusy {
-	trigger: Sinon.SinonSpy;
+	waitOn: Sinon.SinonSpy;
 }
 
 interface IMockNotification {
@@ -27,7 +28,7 @@ describe('ButtonLongClickComponent', () => {
 		button = new ButtonLongClickComponent(<any>notification, new __timeout.TimeoutService());
 
 		busy = {
-			trigger: sinon.spy(),
+			waitOn: sinon.spy(() => Observable.empty()),
 		};
 		button.busySpinner = <any>busy;
 	});
@@ -46,8 +47,8 @@ describe('ButtonLongClickComponent', () => {
 
 		sinon.assert.calledOnce(action);
 		sinon.assert.calledWith(action, event);
-		sinon.assert.calledOnce(busy.trigger);
-		sinon.assert.calledWith(busy.trigger, 5);
+		sinon.assert.calledOnce(busy.waitOn);
+		sinon.assert.calledWith(busy.waitOn, 5);
 	}));
 
 	it('should cancel and show a warning if the user stops the action before the time is up', rlFakeAsync((): void => {

source/components/buttons/buttonSubmit/buttonSubmit.tests.ts

@@ -1,18 +1,19 @@
+import { Observable } from 'rxjs';
 import { ButtonSubmitComponent } from './buttonSubmit';
 
 interface IMockForm {
 	submitAndWait: Sinon.SinonSpy;
 }
 
 interface IMockBusy {
-	trigger: Sinon.SinonSpy;
+	waitOn: Sinon.SinonSpy;
 }
 
 interface IMockExceptionHandler {
 	call: Sinon.SinonSpy;
 }
 
-describe('button submit', (): void => {
+describe('ButtonSubmitComponent', (): void => {
 	let buttonSubmit: ButtonSubmitComponent;
 	let form: IMockForm;
 	let busy: IMockBusy;
@@ -24,7 +25,7 @@ describe('button submit', (): void => {
 		buttonSubmit = new ButtonSubmitComponent(<any>form);
 
 		busy = {
-			trigger: sinon.spy(),
+			waitOn: sinon.spy(() => Observable.empty()),
 		};
 		buttonSubmit.busySpinner = <any>busy;
 	});
@@ -33,7 +34,7 @@ describe('button submit', (): void => {
 		buttonSubmit.submit();
 
 		sinon.assert.calledOnce(form.submitAndWait);
-		sinon.assert.calledOnce(busy.trigger);
-		sinon.assert.calledWith(busy.trigger, 5);
+		sinon.assert.calledOnce(busy.waitOn);
+		sinon.assert.calledWith(busy.waitOn, 5);
 	});
-});
+});

source/components/buttons/buttonSubmit/buttonSubmit.ts

@@ -21,7 +21,8 @@ export class ButtonSubmitComponent extends BaseButtonComponent {
 	}
 
 	submit(): void {
-		const waitValue: IWaitValue<any> = this.form.submitAndWait();
-		this.busySpinner.trigger(waitValue);
+		// subscribes to kick off the action
+		const request = this.form.submitAndWait();
+		this.busySpinner.waitOn(request).subscribe();
 	}
 }

source/components/cardContainer/card/card.tests.ts

@@ -1,3 +1,4 @@
+import { Observable } from 'rxjs';
 import { filter } from 'lodash';
 
 import { services } from 'typescript-angular-utilities';
@@ -62,6 +63,7 @@ describe('CardComponent', () => {
 
 	describe('toggle', (): void => {
 		it('should toggle the card content', (): void => {
+			card.saveForm = sinon.spy(() => Observable.empty());
 			expect(card.showContent$.getValue()).to.be.false;
 
 			card.toggleContent();

source/components/dialog/dialog.tests.ts

@@ -72,7 +72,7 @@ describe('DialogComponent', (): void => {
 		});
 
 		it('should close the dialog when the submit completes', (): void => {
-			dialog.submitAndClose();
+			dialog.submitAndClose().subscribe();
 
 			sinon.assert.calledOnce(submitAndWaitSpy);
 			sinon.assert.notCalled(closeSpy);
@@ -83,7 +83,7 @@ describe('DialogComponent', (): void => {
 		});
 
 		it('should not close the dialog if the submit returns false', (): void => {
-			dialog.submitAndClose();
+			dialog.submitAndClose().subscribe();
 
 			sinon.assert.calledOnce(submitAndWaitSpy);
 			sinon.assert.notCalled(closeSpy);

source/components/dialog/dialog.ts

@@ -1,3 +1,4 @@
+import { Observable } from 'rxjs';
 import { Component, Input, ContentChild, forwardRef } from '@angular/core';
 
 import { services } from 'typescript-angular-utilities';
@@ -6,7 +7,7 @@ import __notification = services.notification;
 import { DialogRootService, IDialogClosingHandler } from './dialogRoot.service';
 import { DialogHeaderTemplate, DialogContentTemplate, DialogFooterTemplate } from './templates/index';
 import { FormComponent, baseInputs } from '../form/form';
-import { AsyncHelper, IWaitValue } from '../../services/async/async.service';
+import { AsyncHelper } from '../../services/async/async.service';
 import { FormService } from '../../services/form/form.service';
 
 @Component({
@@ -60,14 +61,13 @@ export class DialogComponent extends FormComponent {
 		this.dialogRoot.closeDialog.next(null);
 	}
 
-	submitAndClose(): IWaitValue<any> {
+	submitAndClose(): Observable<any> {
 		const waitOn = this.submitAndWait();
-		this.asyncHelper.waitAsObservable(waitOn).subscribe((result) => {
+		return this.asyncHelper.waitAsObservable(waitOn).do((result) => {
 			if (result !== false) {
 				this.close();
 			}
 		});
-		return waitOn;
 	}
 
 	wrapOnClosing: IDialogClosingHandler = () => {