From 265469335019c494c1d61da9a0acea3ab7504ae8 Mon Sep 17 00:00:00 2001 From: Sebastien Douheret Date: Mon, 18 Dec 2017 16:20:36 +0100 Subject: [PATCH] Add confirmation modal when deleting a project. --- .../confirm-modal/confirm-modal.component.ts | 94 ++++++++++++++++++++++ webapp/src/app/pages/confirm/confirm.module.ts | 35 ++++++++ webapp/src/app/pages/pages.module.ts | 2 + .../project-card/project-card.component.ts | 31 +++++-- 4 files changed, 157 insertions(+), 5 deletions(-) create mode 100644 webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts create mode 100644 webapp/src/app/pages/confirm/confirm.module.ts 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 +* +* 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: ` +
+
+ {{ title }} +
+ +
+
+
+
+
+ + + +
+
+ +
+
+
+
+
+
+ `, +}) + +export class ConfirmModalComponent implements OnInit { + @Input() title; + @Input() footer = ''; + @Input() type; + @Input() question; + + bodyQuestion = ''; + textBtn: Array = ['', '', '']; + + 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 +* +* 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 permanently delete '` + prj.label + `' project ? +

+ (Project ID: ` + prj.id + ` )`; + + modal.result + .then(res => { + if (res === 'yes') { + this.projectSvr.delete(prj).subscribe( + r => { }, + err => this.alert.error('ERROR delete: ' + err), + ); + } + }); + } sync(prj: IProject) { -- 2.16.6