fix: filter ,sort and page on datatable (PnX-SI#310)

* fix: filter ,sort and page on datatable

Missing changes to check according to event on table(sort, filter, page)
Refact code for ngOnChanges

Reviewed-by: andriac

* style(front): apply prettier

Reviewed-by: andriacap

frontend/app/components/monitoring-datatable-g/monitoring-datatable-g.component.ts

@@ -5,6 +5,7 @@ import {
   OnInit,
   Output,
   SimpleChanges,
+  SimpleChange,
   TemplateRef,
   ViewChild,
 } from '@angular/core';
@@ -290,9 +291,33 @@ export class MonitoringDatatableGComponent implements OnInit {
   // }
 
   ngOnChanges(changes: SimpleChanges) {
-    // IF prefered ngOnChanges compare to observable   uncomment this:
-    if (changes['dataTableObj'] && this.dataTableObj && Object.keys(this.dataTableObj).length > 0) {
-      this.filters = {};
+    if (changes.activetabIndex) {
+      this.clearFilters();
+    }
+
+    if (changes.obj) {
+      this.updateDataTable(changes.obj);
+    }
+
+    if (changes.rows || changes.page) {
+      this.updateRowsAndPage();
+    }
+
+    for (const propName of Object.keys(changes)) {
+      switch (propName) {
+        case 'rowStatus':
+          this.setSelected();
+          break;
+      }
+    }
+  }
+
+  private clearFilters() {
+    this.filters = {};
+  }
+
+  private updateDataTable(objChanges: SimpleChange) {
+    if (this.dataTableObj && Object.keys(this.dataTableObj).length > 0) {
       for (const objType in this.dataTableObj) {
         this.objectsStatus[objType] = this._dataTableService.initObjectsStatus(
           this.dataTableObj[objType].rows,
@@ -301,31 +326,24 @@ export class MonitoringDatatableGComponent implements OnInit {
       }
 
       this.activetabType = this.dataTableArray[this.activetabIndex].objectType;
-      this.dataTableObj[this.activetabType].rows.length > 0
-        ? (this.columns = this._dataTableService.colsTable(
-            this.dataTableObj[this.activetabType].columns,
-            this.dataTableObj[this.activetabType].rows[0]
-          ))
-        : null;
-      this.rows = this.dataTableObj[this.activetabType].rows;
-      this.page = this.dataTableObj[this.activetabType].page;
+      const dataTable = this.dataTableObj[this.activetabType];
+      if (dataTable.rows.length > 0) {
+        this.columns = this._dataTableService.colsTable(dataTable.columns, dataTable.rows[0]);
+      }
+      this.rows = dataTable.rows;
+      this.page = dataTable.page;
       this.initPermissionAction();
     }
+  }
 
-    if (changes['rows'] && this.rows && this.rows.length > 0) {
+  private updateRowsAndPage() {
+    if (this.rows && this.rows.length > 0) {
       this.activetabType = this.dataTableArray[this.activetabIndex].objectType;
-      this.rows = this.dataTableObj[this.activetabType].rows;
-      this.page = this.dataTableObj[this.activetabType].page;
+      const dataTable = this.dataTableObj[this.activetabType];
+      this.rows = dataTable.rows;
+      this.page = dataTable.page;
       this.initPermissionAction();
     }
-
-    for (const propName of Object.keys(changes)) {
-      switch (propName) {
-        case 'rowStatus':
-          this.setSelected();
-          break;
-      }
-    }
   }
   navigateToAddChildren(_, row) {
     this.addEvent.emit(row);