aboutsummaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorSebastien Douheret <sebastien.douheret@iot.bzh>2017-12-18 16:20:36 +0100
committerSebastien Douheret <sebastien.douheret@iot.bzh>2017-12-18 16:20:36 +0100
commit265469335019c494c1d61da9a0acea3ab7504ae8 (patch)
treea00a00d1ef93cba712571ab4142019c2f9fff021 /webapp
parent89563054ea6305c7270dcc6ab6fa5b286eb5f742 (diff)
Add confirmation modal when deleting a project.
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts94
-rw-r--r--webapp/src/app/pages/confirm/confirm.module.ts35
-rw-r--r--webapp/src/app/pages/pages.module.ts2
-rw-r--r--webapp/src/app/pages/projects/project-card/project-card.component.ts31
4 files changed, 157 insertions, 5 deletions
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
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
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
--- 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
--- 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) {