feat(window): window may return result (#2869)

Author: katebatura

src/app/playground-components.ts

@@ -1521,6 +1521,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'WindowTemplateTitleComponent',
         name: 'Window Template Title',
       },
+      {
+        path: 'window-result.component',
+        link: '/window/window-result.component',
+        component: 'WindowResultComponent',
+        name: 'Window Result',
+      },
     ],
   },
   {

src/framework/theme/components/window/window-ref.ts

@@ -9,7 +9,7 @@ import { NbWindowConfig, NbWindowState, NbWindowStateChange } from './window.opt
  * You can access rendered component as `componentRef` property of the windowRef.
  * Property `contentInstance` contains the instance of the component opened in the window.
  */
-export class NbWindowRef<T = any> {
+export class NbWindowRef<T = any, R = any> {
   componentRef: ComponentRef<NbWindowComponent>;
   componentInstance: T;
 
@@ -38,7 +38,7 @@ export class NbWindowRef<T = any> {
   }
 
   protected _closed = false;
-  protected closed$ = new Subject<void>();
+  protected closed$ = new Subject<R>();
   /**
    * Emits when window was closed.
    */
@@ -78,7 +78,7 @@ export class NbWindowRef<T = any> {
   /**
    * Closes window.
    * */
-  close() {
+  close(res?: R) {
     if (this._closed) {
       return;
     }
@@ -87,7 +87,7 @@ export class NbWindowRef<T = any> {
     this.componentRef.destroy();
     this.componentInstance = null;
     this.stateChange$.complete();
-    this.closed$.next();
+    this.closed$.next(res);
     this.closed$.complete();
   }
 }

src/framework/theme/components/window/window.service.ts

@@ -86,6 +86,11 @@ import { NB_DOCUMENT } from '../../theme.options';
  *
  * @stacked-example(Window content from TemplateRef, window/template-window.component)
  *
+ * You could pass the optional window return value to the `NbWindowRef.close` method.
+ * The passed value would be emitted to the `NbWindowRef.onClose` listeners.
+ *
+ * @stacked-example(Result, window/window-result.component)
+ *
  * ### Configuration
  *
  * As mentioned above, `open` method of the `NbWindowService` may receive optional configuration options.

src/playground/with-layout/window/components/visitors-form.component.ts

@@ -0,0 +1,37 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { NbWindowRef } from '@nebular/theme';
+
+@Component({
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form">
+      <label for="name">Enter your name:</label>
+      <input nbInput id="name" type="text" formControlName="name" />
+
+      <button nbButton type="submit" status="success">Submit</button>
+    </form>
+  `,
+})
+export class VisitorsFormComponent {
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder, public windowRef: NbWindowRef) {
+    this.form = fb.group({
+      name: null,
+    });
+  }
+
+  onSubmit() {
+    this.windowRef.close(this.form.value.name);
+  }
+
+  close() {
+    this.windowRef.close();
+  }
+}

src/playground/with-layout/window/window-result.component.ts

@@ -0,0 +1,32 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+import { NbWindowService } from '@nebular/theme';
+import { VisitorsFormComponent } from './components/visitors-form.component';
+
+@Component({
+  template: `
+    <button nbButton status="primary" (click)="openWindow()">Open window</button>
+    <br />
+    <h3 class="h5">Window visitors:</h3>
+    <ul>
+      <li *ngFor="let visitor of visitors">{{ visitor }}</li>
+    </ul>
+  `,
+  styleUrls: ['./window.scss'],
+})
+export class WindowResultComponent {
+  visitors: string[] = [];
+
+  constructor(private windowService: NbWindowService) {}
+
+  openWindow() {
+    const windowRef = this.windowService.open(VisitorsFormComponent, { title: `Window` });
+
+    windowRef.onClose.subscribe((visitor) => this.visitors.push(visitor));
+  }
+}

src/playground/with-layout/window/window-routing.module.ts

@@ -11,6 +11,7 @@ import { WindowShowcaseComponent } from './window-showcase.component';
 import { WindowsBackdropComponent } from './windows-backdrop.component';
 import { WindowControlsComponent } from './window-controls.component';
 import { WindowTemplateTitleComponent } from './window-template-title.component';
+import { WindowResultComponent } from './window-result.component';
 
 const routes: Route[] = [
   {
@@ -33,6 +34,10 @@ const routes: Route[] = [
     path: 'window-template-title.component',
     component: WindowTemplateTitleComponent,
   },
+  {
+    path: 'window-result.component',
+    component: WindowResultComponent,
+  },
 ];
 
 @NgModule({

src/playground/with-layout/window/window.module.ts

@@ -5,6 +5,8 @@
  */
 
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NbButtonModule, NbCardModule, NbCheckboxModule, NbInputModule, NbWindowModule } from '@nebular/theme';
 
 import { WindowRoutingModule } from './window-routing.module';
@@ -14,6 +16,8 @@ import { WindowsBackdropComponent } from './windows-backdrop.component';
 import { FormComponent } from './components/form.component';
 import { WindowControlsComponent } from './window-controls.component';
 import { WindowTemplateTitleComponent } from './window-template-title.component';
+import { WindowResultComponent } from './window-result.component';
+import { VisitorsFormComponent } from './components/visitors-form.component';
 
 @NgModule({
   declarations: [
@@ -23,8 +27,13 @@ import { WindowTemplateTitleComponent } from './window-template-title.component'
     FormComponent,
     WindowControlsComponent,
     WindowTemplateTitleComponent,
+    WindowResultComponent,
+    VisitorsFormComponent,
   ],
   imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
     NbWindowModule.forRoot(),
     NbButtonModule,
     NbInputModule,

src/playground/with-layout/window/window.scss

@@ -9,6 +9,10 @@
   .text-label {
     margin-top: 1.5rem;
   }
+
+  button {
+    margin-top: 1.5rem;
+  }
 }
 
 button + button {