Add confirmation modal when deleting a project.

diff --git a/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts b/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts
new file mode 100644 (file)
index 0000000..3282d6b
--- /dev/null
+++ b/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts
@@ -0,0 +1,94 @@
+/**
+* @license
+* Copyright (C) 2017 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import { Component, OnInit, Input } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+export enum EType {
+  YesNo = 1,
+  OKCancel,
+  OK,
+}
+
+@Component({
+  selector: 'xds-confirm-modal',
+  template: `
+  <div tabindex="-1">
+    <div class="modal-header">
+      {{ title }}
+    </div>
+
+    <div class="modal-body row">
+      <div class="col-12 text-center">
+        <div [innerHtml]="question"></div>
+      </div>
+      <div class="col-12 text-center" style="margin-top: 2em;">
+        <button *ngIf="textBtn[0] != ''" type="button" class="btn btn-primary" tabindex="2"
+          (click)="onClick(textBtn[0])">{{textBtn[0]}}</button>
+        <button *ngIf="textBtn[1] != ''" type="button" class="btn btn-default" tabindex="1"
+          (click)="onClick(textBtn[1])">{{textBtn[1]}}</button>
+        <button *ngIf="textBtn[2] != ''" type="button" class="btn btn-default" tabindex="3"
+          (click)="onClick(textBtn[2])">{{textBtn[2]}}</button>
+      </div>
+    </div>
+
+    <div *ngIf="footer!=''" class="modal-footer">
+      <div class="col-12 text-center">
+        <div [innerHtml]="footer"></div>
+      </div>
+    </div>
+  </div>
+  `,
+})
+
+export class ConfirmModalComponent implements OnInit {
+  @Input() title;
+  @Input() footer = '';
+  @Input() type;
+  @Input() question;
+
+  bodyQuestion = '';
+  textBtn: Array<string> = ['', '', ''];
+
+  constructor(
+    private modalRef: NgbActiveModal,
+    private sanitizer: DomSanitizer,
+  ) { }
+
+  ngOnInit() {
+    switch (this.type) {
+      case EType.OK:
+        this.textBtn = [ 'OK', '', '' ];
+        break;
+
+      case EType.OKCancel:
+        this.textBtn = [ 'OK', 'Cancel', '' ];
+      break;
+
+      default:
+      case EType.YesNo:
+        this.textBtn = [ 'Yes', 'No', '' ];
+        break;
+    }
+  }
+
+  onClick(txt: string): void {
+    this.modalRef.close(txt.toLowerCase());
+  }
+}

diff --git a/webapp/src/app/pages/confirm/confirm.module.ts b/webapp/src/app/pages/confirm/confirm.module.ts
new file mode 100644 (file)
index 0000000..f1d06d1
--- /dev/null
+++ b/webapp/src/app/pages/confirm/confirm.module.ts
@@ -0,0 +1,35 @@
+/**
+* @license
+* Copyright (C) 2017 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import { NgModule } from '@angular/core';
+import { ThemeModule } from '../../@theme/theme.module';
+
+import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component';
+
+@NgModule({
+  imports: [
+    ThemeModule,
+  ],
+  declarations: [
+    ConfirmModalComponent,
+  ],
+  entryComponents: [
+    ConfirmModalComponent,
+  ],
+})
+export class ConfirmModule { }

diff --git a/webapp/src/app/pages/pages.module.ts b/webapp/src/app/pages/pages.module.ts
index edd7485..d00630d 100644 (file)
--- a/webapp/src/app/pages/pages.module.ts
+++ b/webapp/src/app/pages/pages.module.ts
@@ -21,6 +21,7 @@ import { ToasterModule } from 'angular2-toaster';
 
 import { PagesComponent } from './pages.component';
 import { AboutModule } from './about/about.module';
+import { ConfirmModule } from './confirm/confirm.module';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { BuildModule } from './build/build.module';
 import { ProjectsModule } from './projects/projects.module';
@@ -39,6 +40,7 @@ const PAGES_COMPONENTS = [
     PagesRoutingModule,
     ThemeModule,
     AboutModule,
+    ConfirmModule,
     BuildModule,
     DashboardModule,
     ProjectsModule,

diff --git a/webapp/src/app/pages/projects/project-card/project-card.component.ts b/webapp/src/app/pages/projects/project-card/project-card.component.ts
index 0b69db7..eebab98 100644 (file)
--- a/webapp/src/app/pages/projects/project-card/project-card.component.ts
+++ b/webapp/src/app/pages/projects/project-card/project-card.component.ts
@@ -19,7 +19,8 @@
 import { Component, Input, Pipe, PipeTransform } from '@angular/core';
 import { ProjectService, IProject, ProjectType, ProjectTypeEnum } from '../../../@core-xds/services/project.service';
 import { AlertService } from '../../../@core-xds/services/alert.service';
-
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ConfirmModalComponent, EType } from '../../confirm/confirm-modal/confirm-modal.component';
 
 @Component({
   selector: 'xds-project-card',
@@ -36,14 +37,34 @@ export class ProjectCardComponent {
   constructor(
     private alert: AlertService,
     private projectSvr: ProjectService,
+    private modalService: NgbModal,
   ) {
   }
 
   delete(prj: IProject) {
-    this.projectSvr.delete(prj).subscribe(
-      res => { },
-      err => this.alert.error('ERROR delete: ' + err),
-    );
+
+    const modal = this.modalService.open(ConfirmModalComponent, {
+      size: 'lg',
+      backdrop: 'static',
+      container: 'nb-layout',
+    });
+    modal.componentInstance.title = 'Confirm SDK deletion';
+    modal.componentInstance.type = EType.YesNo;
+    modal.componentInstance.question = `
+      Do you <b>permanently delete '` + prj.label + `'</b> project ?
+      <br><br>
+      <i><small>(Project ID: ` + prj.id + ` )</small></i>`;
+
+    modal.result
+      .then(res => {
+        if (res === 'yes') {
+          this.projectSvr.delete(prj).subscribe(
+            r => { },
+            err => this.alert.error('ERROR delete: ' + err),
+          );
+        }
+      });
+
   }
 
   sync(prj: IProject) {