diff options
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) { |