feat: extract the deletion notification of the service-list page

Change-Id: I7520a0a2e7406db712ad7c09dd1f23e213e725dc
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

2 files changed, 49 insertions, 13 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
index acf6f62a..f20fd48c 100644
--- a/usecaseui-portal/src/app/shared/components/notification/notification.component.html
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.html
@@ -4,18 +4,47 @@
       <span class="ant-notification-notice-icon">
         <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
       </span>
-      <div class="ant-notification-notice-message">
-        {{(notificationAttributes.action === 'OnboardingState'? notificationAttributes.title : "i18nTextDefine_"+notificationAttributes.title) | translate}}&nbsp;
-        {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
+      <!-- customer&onboard -->
+      <div *ngIf="!isServicesList">
+        <div class="ant-notification-notice-message">
+          {{(notificationAttributes.action === 'OnboardingState'? notificationAttributes.title : "i18nTextDefine_"+notificationAttributes.title) | translate}}&nbsp;
+          {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"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:&nbsp;</p>
+            <span>{{ notificationAttributes.name }}</span>
+          </div>
+        </div>
+        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
       </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:&nbsp;</p>
-          <span>{{ notificationAttributes.name }}</span>
+      <!-- services-list -->
+      <div *ngIf="isServicesList">
+        <div class="ant-notification-notice-message"
+          *ngIf="notificationAttributes.title === 'CCVPN' || notificationAttributes.title === 'SOTN'">
+          {{ notificationAttributes.title }} &nbsp; {{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'}} &nbsp;{{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 class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
     </div>
   </div>
 </ng-template>
diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.ts b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
index 00ccf90b..de0df083 100644
--- a/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
 import { NzNotificationService } from 'ng-zorro-antd';
 
 @Component({
@@ -8,6 +8,8 @@ import { NzNotificationService } from 'ng-zorro-antd';
 })
 export class NotificationComponent implements OnInit {
   @ViewChild('notificationModel')notificationModel: any;
+  @Input()isServicesList: boolean;
+  @Input()customerSelected: object;
 
   notificationAttributes: {
     title: string,
@@ -23,17 +25,22 @@ export class NotificationComponent implements OnInit {
   }
 
   setNotification({ title, imgPath, action, status, name }):void{
-      this.notificationAttributes = { title, imgPath, action, status, name }
+    this.notificationAttributes = { title, imgPath, action, status, name };
   }
   notificationSuccess(title: string, action: string, name: string): void {
-    this.notification.remove()
+    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.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)
+  }
 
 }