feat: Added clear function in the status filter box of the task management page

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

2 files changed, 19 insertions, 8 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
index 135cf3ff..76f0fcf5 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
@@ -2,7 +2,13 @@
   <div nz-row>
     <div nz-col nzSpan="12" class="task_status">
       <span>Status : </span>
-      <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue" (ngModelChange)="getListOfProcessingStatus()">
+      <nz-select 
+        nzShowSearch 
+        nzAllowClear 
+        [(ngModel)]="selectedValue" 
+        nzPlaceHolder="Select a processing status" 
+        (ngModelChange)="getListOfProcessingStatus()"
+      >
         <nz-option *ngFor="let item of statusOptions" [nzLabel]="item.title" [nzValue]="item.value"></nz-option>
       </nz-select>
     </div>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
index 76e67070..a3203695 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
@@ -32,14 +32,19 @@ export class SlicingTaskManagementComponent implements OnInit {
     })
   }
   getListOfProcessingStatus():void {
-    this.myhttp.getTaskProcessingStatus(this.selectedValue, '1', '10').subscribe (res => {
-      const { result_header: { result_code }, result_body: { slicing_task_list } } = res
-      if (+result_code === 200) {
-        this.dataFormatting(slicing_task_list)
-      }
-    })
+    const { selectedValue } = this;
+    if (selectedValue) {
+      this.myhttp.getTaskProcessingStatus(selectedValue, '1', '10').subscribe (res => {
+        const { result_header: { result_code }, result_body: { slicing_task_list } } = res
+        if (+result_code === 200) {
+          this.dataFormatting(slicing_task_list)
+        }
+      })
+    } else {
+      this.getTaskList()
+    }
   }
-  
+
   dataFormatting(list: any):void{
     this.listOfData = list.map( item => {
       item.arrival_time = moment(+item.arrival_time).format('YYYY-MM-DD hh:mm')