feat(winbox): improved handling of onClose method

Author: Giuseppe Pennisi

apps/winbox-example-app/src/app/app.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { WinboxService } from '@rbtech/angular-winbox';
 import { SimpleComponentComponent } from './simple-component/simple-component.component';
 import { SidebarMenuModel } from '@rbtechdev/angular-sidebar';
+import { ModalYesNoComponent } from './modal-yes-no/modal-yes-no.component';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { faQuestion } from '@fortawesome/free-solid-svg-icons/faQuestion';
 
 @Component({
@@ -90,23 +92,37 @@ export class AppComponent implements OnInit {
     ],
   };
 
-  constructor(private winboxService: WinboxService) {}
+  constructor(
+    private winboxService: WinboxService,
+    private modalService: NgbModal
+  ) {}
 
   ngOnInit(): void {
-    this.winboxService.openWinBox<SimpleComponentComponent>(
-      {
-        title: 'Test',
-        height: '90%',
-        width: '40%',
-        x: 'center',
-        y: 'center',
-        index: 1057,
-        onclose: (): boolean => {
-          return true;
+    const winboxInstance =
+      this.winboxService.openWinBox<SimpleComponentComponent>(
+        {
+          title: 'Test',
+          height: '90%',
+          width: '40%',
+          x: 'center',
+          y: 'center',
+          index: 1057,
+          onclose: (): boolean => {
+            const modal = this.modalService.open(ModalYesNoComponent);
+            modal.componentInstance.title = 'Titolo';
+            modal.componentInstance.message = 'Vuoi chiudere winbox?';
+            winboxInstance.winBox.minimize(true);
+
+            modal.result
+              .then(() => {
+                winboxInstance.winBox.close(true);
+              })
+              .catch(() => winboxInstance.winBox.maximize(false));
+            return false;
+          },
         },
-      },
-      SimpleComponentComponent
-    );
+        SimpleComponentComponent
+      );
     this.winboxService.showLastWinbox();
   }
 }

apps/winbox-example-app/src/app/app.module.ts

@@ -5,13 +5,16 @@ import { AppComponent } from './app.component';
 import { RouterModule } from '@angular/router';
 import { SimpleComponentComponent } from './simple-component/simple-component.component';
 import { AngularSidebarModule } from '@rbtechdev/angular-sidebar';
+import { ModalYesNoComponent } from './modal-yes-no/modal-yes-no.component';
+import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
-  declarations: [AppComponent, SimpleComponentComponent],
+  declarations: [AppComponent, SimpleComponentComponent, ModalYesNoComponent],
   imports: [
     BrowserModule,
     RouterModule.forRoot([], { initialNavigation: 'enabledBlocking' }),
     AngularSidebarModule,
+    NgbModalModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

apps/winbox-example-app/src/app/modal-yes-no/modal-yes-no.component.html

@@ -0,0 +1,35 @@
+<div class="modal-header">
+  <h4 [innerHTML]="title" class="modal-title" id="modal-title"></h4>
+  <button
+    (click)="cancel()"
+    aria-describedby="modal-title"
+    aria-label="Close button"
+    class="btn-close"
+    type="button"
+  >
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div class="modal-body">
+  <p [innerHTML]="message"></p>
+</div>
+
+<div class="modal-footer">
+  <button
+    (click)="cancel()"
+    [class]="ccsCancelClass"
+    class="btn cursor-pointer text-uppercase"
+    type="button"
+  >
+    {{ noLabel }}
+  </button>
+  <button
+    (click)="confirm()"
+    [class]="ccsConfirmClass"
+    class="btn cursor-pointer text-uppercase"
+    type="button"
+  >
+    {{ yesLabel }}
+  </button>
+</div>

apps/winbox-example-app/src/app/modal-yes-no/modal-yes-no.component.scss

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'pmed-modal-yes-no',
+  templateUrl: './modal-yes-no.component.html',
+  styleUrls: ['./modal-yes-no.component.scss'],
+})
+export class ModalYesNoComponent {
+  @Input() title!: string;
+  @Input() message!: string;
+  @Input() yesLabel = 'Sì';
+  @Input() noLabel = 'No';
+  @Input() ccsCancelClass = 'btn-secondary';
+  @Input() ccsConfirmClass = 'btn-primary';
+
+  constructor(public modal: NgbActiveModal) {}
+
+  cancel() {
+    this.modal.dismiss();
+  }
+
+  confirm() {
+    this.modal.close();
+  }
+}