aboutsummaryrefslogtreecommitdiffstats
path: root/src/app
diff options
context:
space:
mode:
authorArundathi Patil <arundpil@in.ibm.com>2018-07-18 15:41:05 +0530
committerTakamune Cho <tc012c@att.com>2018-07-24 14:43:16 +0000
commit465d29eba2c191e768963a1987819b8f72e9e7c8 (patch)
treeb438e3f54b156ce7f520f075e159daa523e8f379 /src/app
parent63db30487e65a978e745216e3d89e7f30385205e (diff)
Made use of ng2-bootstrap-modal.
This will remove all the duplicate code of ng-bootstrap popup. Made following changes to the below files, 1. app.module.ts: a. added the confirm modal component to declarations and entryComponents section because component will be created dynamically. b. imported BootstrapModalModule from ng2-bootstrap-modal 2. vnfs.module.ts: a. removed the confirm modal component from declarations and entryComponents section as it is already declared as part of app.module.ts. 3. confirm.component.ts: a. added two more varibles 'cancelButtonText' and 'confirmButtonText' to ConfirmModel interface. these values will be sent by the caller code and the button lables will be set dynamically. b. implemented cancel method that sets the modal result value to false, this is called on click of close button. 4. about.component.ts: a. Made use of confirm.component.ts. b. on click of 'view change log' buton we are calling open() method which inturn opens the confirm modal component. 5. about.component.html: a. Removed call to versionLogFile() method as this method is called from open() method. b. Removed the ng-template code of ng-bootstrap which is no more required. Issue-ID: APPC-1088 Change-Id: I9de545debed145ef35e31807acd1e9bd9cc2bad4 Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>
Diffstat (limited to 'src/app')
-rw-r--r--src/app/about-us/aboutus.component.html42
-rw-r--r--src/app/about-us/aboutus.component.ts44
-rw-r--r--src/app/app.module.ts43
-rw-r--r--src/app/shared/confirmModal/confirm.component.ts27
-rw-r--r--src/app/vnfs/vnfs.module.ts60
5 files changed, 116 insertions, 100 deletions
diff --git a/src/app/about-us/aboutus.component.html b/src/app/about-us/aboutus.component.html
index 3c2fb52..554fd4a 100644
--- a/src/app/about-us/aboutus.component.html
+++ b/src/app/about-us/aboutus.component.html
@@ -2,6 +2,8 @@
============LICENSE_START==========================================
===================================================================
Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
===================================================================
Unless otherwise specified, all software contained herein is licensed
@@ -19,7 +21,7 @@ limitations under the License.
============LICENSE_END============================================
-->
-
+<simple-notifications [options]="options"></simple-notifications>
<div class="text-center">
<div class="card">
<div class="mdl-dialog__content">
@@ -27,7 +29,8 @@ limitations under the License.
<div class="card-header" style="font-size: 20px">CONTACT DETAILS</div>
<div class="mdl-card__title">
<div class="text-center">
- Contact us @:<a href="mailto:{{contactUsMail.CONTACT_US_EMAIL}}?Subject={{contactUsMail.CONTACT_US_SUBJECT}}">APPC DEVELOPMENT TEAM</a>
+ Contact us @:
+ <a href="mailto:{{contactUsMail.CONTACT_US_EMAIL}}?Subject={{contactUsMail.CONTACT_US_SUBJECT}}">APPC DEVELOPMENT TEAM</a>
</div>
</div>
</div>&emsp;&emsp;&emsp;&emsp;
@@ -58,7 +61,7 @@ limitations under the License.
</div>
<div class="text-right">
<div class="mdl-dialog__content">
- <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="open(content)" (click)="versionLogFile()">VIEW CHANGE LOG</a>
+ <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="open(content)">VIEW CHANGE LOG</a>
</div>
</div>
@@ -66,35 +69,4 @@ limitations under the License.
</div>
</div>
-</div>
-
-<ng-template #content let-c="close" let-d="dismiss">
- <div class="modal-content" style="width:800px;vertical-align:auto;">
- <div class="modal-header">
- <h4 class="modal-title" style="text-align:center">VERSION CHANGE LOG</h4>
- <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
- <span aria-hidden="true">&times;</span>
- </button>
- </div>
- <div class="modal-body">
- <div class="form-group row">
- <html>
-
- <body>
- <textarea class="textarea">{{this.data}}</textarea>
- </body>
-
- </html>
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" (click)="downloadLogFile()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent
- " (click)="c('yes')">Download
- </button>
- <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary
-
- " (click)="c('yes')">Cancel
- </button>
- </div>
- </div>
-</ng-template> \ No newline at end of file
+</div> \ No newline at end of file
diff --git a/src/app/about-us/aboutus.component.ts b/src/app/about-us/aboutus.component.ts
index c983c7b..fe75e41 100644
--- a/src/app/about-us/aboutus.component.ts
+++ b/src/app/about-us/aboutus.component.ts
@@ -25,8 +25,13 @@ limitations under the License.
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Http } from '@angular/http';
import { Subscription } from 'rxjs/Subscription';
+import { Observable } from 'rxjs/Observable';
+import { NotificationsService } from 'angular2-notifications';
import { saveAs } from 'file-saver';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DialogService } from 'ng2-bootstrap-modal';
+import { ConfirmComponent } from '../shared/confirmModal/confirm.component';
+import { appConstants } from '../../constants/app-constants';
@Component({
selector: 'app-help',
@@ -41,8 +46,15 @@ export class AboutUsComponent implements OnInit, OnDestroy {
public data: any;
closeResult: string;
versionLogSubscription: Subscription;
-
- constructor(private http: Http, private modalService: NgbModal) {
+ options = {
+ timeOut: 1000,
+ showProgressBar: true,
+ pauseOnHover: true,
+ clickToClose: true,
+ maxLength: 200
+ };
+
+ constructor(private http: Http, private modalService: NgbModal, private dialogService: DialogService, private notificationsService: NotificationsService) {
}
ngOnInit() {
@@ -57,16 +69,30 @@ export class AboutUsComponent implements OnInit, OnDestroy {
}
}
- versionLogFile() {
- this.versionLogSubscription = this.http.get('app/about-us/versionLog.txt')
- .subscribe(res => this.data = res.text());
+ versionLogFile(): Observable<any> {
+ return this.http.get('app/about-us/versionLog.txt');
}
open(content) {
- this.modalService.open(content).result.then((result) => {
- this.closeResult = `Closed with: ${result}`;
- }, (reason) => {
- this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+ this.versionLogSubscription = this.versionLogFile()
+ .subscribe((res) => {
+ this.data = res.text();
+ this.dialogService.addDialog(ConfirmComponent, {
+ title: 'VERSION CHANGE LOG',
+ message: this.data,
+ cancelButtonText: 'CLOSE',
+ confirmButtonText: 'DOWNLOAD'
+ }).subscribe(isConfirmed => {
+ if (isConfirmed) {
+ this.downloadLogFile()
+ } else {
+ // do nothing
+ }
+ });
+
+ },
+ (error)=>{
+ this.notificationsService.error(appConstants.errors.error, 'unable to fetch change log details');
});
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index df9bf07..2be6544 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,6 +2,8 @@
============LICENSE_START==========================================
===================================================================
Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
===================================================================
Unless otherwise specified, all software contained herein is licensed
@@ -19,29 +21,32 @@ limitations under the License.
============LICENSE_END============================================
*/
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {SimpleNotificationsModule} from 'angular2-notifications';
-import {HomeModule} from './home/home.module';
-import {AppComponent} from './app.component';
-import {AppRoutingModule} from './app.routing';
-import {SharedModule} from './shared/shared.module';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
-import {HashLocationStrategy, LocationStrategy} from '@angular/common';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {RouterModule} from '@angular/router';
-import {TestComponent} from './test/test.component';
-import {AboutUsComponent} from './about-us/aboutus.component';
-import {NgProgressModule} from 'ngx-progressbar';
-import {LoginGuardService} from './vnfs/LoginGuardService/Login-guard-service';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { SimpleNotificationsModule } from 'angular2-notifications';
+import { BootstrapModalModule } from 'ng2-bootstrap-modal';
+import { HomeModule } from './home/home.module';
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app.routing';
+import { SharedModule } from './shared/shared.module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+import { TestComponent } from './test/test.component';
+import { AboutUsComponent } from './about-us/aboutus.component';
+import { NgProgressModule } from 'ngx-progressbar';
+import { LoginGuardService } from './vnfs/LoginGuardService/Login-guard-service';
+import { ConfirmComponent } from './shared/confirmModal/confirm.component';
@NgModule({
- declarations: [AppComponent, TestComponent, AboutUsComponent],
+ declarations: [AppComponent, TestComponent, AboutUsComponent, ConfirmComponent],
imports: [BrowserModule, FormsModule, HomeModule, SharedModule.forRoot(),
- NgbModule.forRoot(), NoopAnimationsModule, AppRoutingModule, SimpleNotificationsModule, NgProgressModule],
+ NgbModule.forRoot(), NoopAnimationsModule, AppRoutingModule, SimpleNotificationsModule, NgProgressModule, BootstrapModalModule],
exports: [RouterModule],
- providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, LoginGuardService],
+ providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }, LoginGuardService],
+ entryComponents: [ConfirmComponent],
bootstrap: [AppComponent]
})
diff --git a/src/app/shared/confirmModal/confirm.component.ts b/src/app/shared/confirmModal/confirm.component.ts
index 79678b3..5fbf4b3 100644
--- a/src/app/shared/confirmModal/confirm.component.ts
+++ b/src/app/shared/confirmModal/confirm.component.ts
@@ -2,6 +2,8 @@
============LICENSE_START==========================================
===================================================================
Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
===================================================================
Unless otherwise specified, all software contained herein is licensed
@@ -20,12 +22,14 @@ limitations under the License.
ECOMP is a trademark and service mark of AT&T Intellectual Property.
============LICENSE_END============================================ */
-import {Component} from '@angular/core';
-import {DialogComponent, DialogService} from 'ng2-bootstrap-modal';
+import { Component } from '@angular/core';
+import { DialogComponent, DialogService } from 'ng2-bootstrap-modal';
export interface ConfirmModel {
title: string;
message: string;
+ cancelButtonText: string;
+ confirmButtonText: string;
}
@Component({
@@ -34,15 +38,15 @@ export interface ConfirmModel {
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
- <button type="button" class="close" (click)="close()">&times;</button>
- <h4 class="modal-title">Confirm</h4>
+ <h4 class="modal-title">{{title}}</h4>
+ <button type="button" class="close" (click)="cancel()">&times;</button>
</div>
<div class="modal-body">
- <p>Change Actions Without Saving?</p>
+ <p>{{message}}</p>
</div>
<div class="modal-footer">
- <button type="button" class="btn btn-primary" (click)="confirm()">Yes</button>
- <button type="button" class="btn btn-default" (click)="close()">Cancel</button>
+ <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="confirm()">{{confirmButtonText}}</button>
+ <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="cancel()">{{cancelButtonText}}</button>
</div>
</div>
</div>`
@@ -50,6 +54,8 @@ export interface ConfirmModel {
export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
title: string;
message: string;
+ cancelButtonText: string;
+ confirmButtonText: string;
constructor(dialogService: DialogService) {
super(dialogService);
@@ -61,4 +67,11 @@ export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> imp
this.result = true;
this.close();
}
+
+ cancel() {
+ // we set dialog result as false on click on cancel/close button,
+ // then we can get dialog result from caller code
+ this.result = false;
+ this.close();
+ }
} \ No newline at end of file
diff --git a/src/app/vnfs/vnfs.module.ts b/src/app/vnfs/vnfs.module.ts
index c0f8158..5268033 100644
--- a/src/app/vnfs/vnfs.module.ts
+++ b/src/app/vnfs/vnfs.module.ts
@@ -2,6 +2,8 @@
============LICENSE_START==========================================
===================================================================
Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
===================================================================
Copyright (C) 2018 IBM.
===================================================================
@@ -23,36 +25,35 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
============LICENSE_END============================================
*/
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {CommonModule} from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
// modules
-import {VnfRoutingModule} from './vnf.routing';
-import {SharedModule} from '../shared/shared.module';
+import { VnfRoutingModule } from './vnf.routing';
+import { SharedModule } from '../shared/shared.module';
import { NgxSpinnerModule } from 'ngx-spinner';
-import {AceEditorComponent} from 'ng2-ace-editor';
+import { AceEditorComponent } from 'ng2-ace-editor';
// components
-import {MyvnfsComponent} from './myvnfs/myvnfs.component';
-import {ReferenceDataformComponent} from './build-artifacts/reference-dataform/reference-dataform.component';
-import {GoldenConfigurationComponent} from './build-artifacts/template-holder/template-configuration/template-configuration.component';
-import {ParameterComponent} from './build-artifacts/parameter-definitions/parameter.component';
-import {ParameterHolderComponent} from './build-artifacts/parameter-holder/parameter-holder.component';
-import {BootstrapModalModule} from 'ng2-bootstrap-modal';
-import {BuildDesignComponent} from './build-artifacts/build-artifacts.component';
-import {userloginFormComponent} from './userlogin-form/userlogin-form.component';
-import {ReferenceDataHolderComponent} from './build-artifacts/reference-data-holder/reference-data-holder.component';
-import {ModalComponent} from '../shared/modal/modal.component';
-import {VnfsComponent} from './vnfs/vnfs.component';
-import {ConfirmComponent} from '../shared/confirmModal/confirm.component';
-import {GoldenConfigurationHolderComponent} from './build-artifacts/template-holder/template-holder.component';
-import {GoldenConfigurationMappingComponent} from './build-artifacts/template-holder/param-name-value/param-name-value.component';
-import {Tab} from './build-artifacts/template-holder/param-name-value/tab';
-import {Tabs} from './build-artifacts/template-holder/param-name-value/tabs';
-import {Ng2Bs3ModalModule} from 'ng2-bs3-modal/ng2-bs3-modal';
-import {AuthGuardModalComponent} from './auth-guard-modal/auth-guard-modal';
-import {GCAuthGuardService} from './GCAuthGuard/gcauth-guard.service';
-import {LoginGuardService} from './LoginGuardService/Login-guard-service';
-import {SimpleNotificationsModule} from 'angular2-notifications';
+import { MyvnfsComponent } from './myvnfs/myvnfs.component';
+import { ReferenceDataformComponent } from './build-artifacts/reference-dataform/reference-dataform.component';
+import { GoldenConfigurationComponent } from './build-artifacts/template-holder/template-configuration/template-configuration.component';
+import { ParameterComponent } from './build-artifacts/parameter-definitions/parameter.component';
+import { ParameterHolderComponent } from './build-artifacts/parameter-holder/parameter-holder.component';
+import { BootstrapModalModule } from 'ng2-bootstrap-modal';
+import { BuildDesignComponent } from './build-artifacts/build-artifacts.component';
+import { userloginFormComponent } from './userlogin-form/userlogin-form.component';
+import { ReferenceDataHolderComponent } from './build-artifacts/reference-data-holder/reference-data-holder.component';
+import { ModalComponent } from '../shared/modal/modal.component';
+import { VnfsComponent } from './vnfs/vnfs.component';
+import { GoldenConfigurationHolderComponent } from './build-artifacts/template-holder/template-holder.component';
+import { GoldenConfigurationMappingComponent } from './build-artifacts/template-holder/param-name-value/param-name-value.component';
+import { Tab } from './build-artifacts/template-holder/param-name-value/tab';
+import { Tabs } from './build-artifacts/template-holder/param-name-value/tabs';
+import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
+import { AuthGuardModalComponent } from './auth-guard-modal/auth-guard-modal';
+import { GCAuthGuardService } from './GCAuthGuard/gcauth-guard.service';
+import { LoginGuardService } from './LoginGuardService/Login-guard-service';
+import { SimpleNotificationsModule } from 'angular2-notifications';
export const components = [
@@ -71,7 +72,6 @@ export const components = [
AceEditorComponent,
Tab,
Tabs,
- ConfirmComponent,
AuthGuardModalComponent,
@@ -89,7 +89,7 @@ export const modules = [
providers: [GCAuthGuardService, LoginGuardService],
- entryComponents: [ConfirmComponent, AuthGuardModalComponent]
+ entryComponents: [AuthGuardModalComponent]
})
export class VnfsModule {
-} \ No newline at end of file
+}