diff options
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/notification')
4 files changed, 121 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.html b/usecaseui-portal/src/app/shared/components/notification/notification.component.html new file mode 100644 index 00000000..f20fd48c --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.html @@ -0,0 +1,50 @@ +<ng-template #notificationModel> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}"> + </span> + <!-- customer&onboard --> + <div *ngIf="!isServicesList"> + <div class="ant-notification-notice-message"> + {{(notificationAttributes.action === 'OnboardingState'? notificationAttributes.title : "i18nTextDefine_"+notificationAttributes.title) | translate}} + {{"i18nTextDefine_"+notificationAttributes.action | translate}} {{"i18nTextDefine_"+notificationAttributes.status | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p *ngIf="notificationAttributes.action !== 'OnboardingState'">{{"i18nTextDefine_"+notificationAttributes.title | translate}}:</p> + <p *ngIf="notificationAttributes.action === 'OnboardingState'">{{notificationAttributes.title}} id: </p> + <span>{{ notificationAttributes.name }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + <!-- services-list --> + <div *ngIf="isServicesList"> + <div class="ant-notification-notice-message" + *ngIf="notificationAttributes.title === 'CCVPN' || notificationAttributes.title === 'SOTN'"> + {{ notificationAttributes.title }} {{notificationAttributes.status === 'Success'? "i18nTextDefine_InstanceTeminatedSuccessfully" : (notificationAttributes.status === 'Failed'?"i18nTextDefine_InstanceTeminationFailed":"i18nTextDefine_InstanceTeminationStarting") | translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="notificationAttributes.title === 'E2E Service' || notificationAttributes.title === 'Network Service'"> + {{notificationAttributes.title === 'E2E Service'?'E2E': 'NS'}} {{notificationAttributes.status === 'Success'? "i18nTextDefine_InstanceTeminatedSuccessfully" :(notificationAttributes.status === 'Failed'?"i18nTextDefine_InstanceTeminationFailed":"i18nTextDefine_InstanceTeminationStarting")| translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ notificationAttributes.name }} </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ notificationAttributes.title }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </div> +</ng-template> diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.less b/usecaseui-portal/src/app/shared/components/notification/notification.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.less diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.spec.ts b/usecaseui-portal/src/app/shared/components/notification/notification.component.spec.ts new file mode 100644 index 00000000..69192c5e --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotificationComponent } from './notification.component'; + +describe('NotificationComponent', () => { + let component: NotificationComponent; + let fixture: ComponentFixture<NotificationComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NotificationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NotificationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.ts b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts new file mode 100644 index 00000000..de0df083 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit, ViewChild, Input } from '@angular/core'; +import { NzNotificationService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-notification', + templateUrl: './notification.component.html', + styleUrls: ['./notification.component.less'] +}) +export class NotificationComponent implements OnInit { + @ViewChild('notificationModel')notificationModel: any; + @Input()isServicesList: boolean; + @Input()customerSelected: object; + + notificationAttributes: { + title: string, + imgPath: string, + action: string, + status: string, + name: string + }; + + constructor(private notification: NzNotificationService) { } + + ngOnInit() { + } + + setNotification({ title, imgPath, action, status, name }):void{ + this.notificationAttributes = { title, imgPath, action, status, name }; + } + notificationSuccess(title: string, action: string, name: string): void { + this.notification.remove(); + this.setNotification({ title, imgPath: "assets/images/execute-success.png", action, status: 'Success', name }) + this.notification.template(this.notificationModel); + } + notificationFailed(title: string, action: string, name: string): void { + this.notification.remove(); + this.setNotification({ title, imgPath: "assets/images/execute-faild.png", action, status: 'Failed', name }) + this.notification.template(this.notificationModel) + } + notificationStart(title: string, action: string, name: string): void { + this.notification.remove(); + this.setNotification({ title, imgPath: "assets/images/execute-inproess.png", action , status: 'instance temination is starting', name }) + this.notification.template(this.notificationModel) + } + +} |