#9 Rework

src/app/shared/datatable-page/datatable-page.component.html

@@ -9,19 +9,15 @@
     [selection]="selection">
 </app-filters>
 
-<!-- <div class="content"> -->
-    <!-- <div class="block-content"> -->
-        <app-table 
-            [rows]="rows" 
-            [columns]="columns" 
-            [testcaseslist]="true" 
-            [page]="page" 
-            [selection]="selection"
-            [massAction]="massAction"
-            [selected]="selectedRows"
-            [name]="name"
-            (pageUpdate)="pageUpdate($event)"
-            (sort)="applyFilters($event)">
-        </app-table>
-    <!-- </div> -->
-<!-- </div> -->
+<app-table 
+    [rows]="rows" 
+    [columns]="columns" 
+    [testcaseslist]="true" 
+    [page]="page" 
+    [selection]="selection"
+    [massAction]="massAction"
+    [selected]="selectedRows"
+    [name]="name"
+    (pageUpdate)="pageUpdate($event)"
+    (sort)="applyFilters($event)">
+</app-table>

src/app/shared/datatable-page/datatable-page.component.ts

@@ -4,6 +4,7 @@ import { TestService } from 'src/app/core/services/crud/test.service';
 import { FilterService } from 'src/app/core/services/crud/filter.service';
 import { InvariantsService } from 'src/app/core/services/crud/invariants.service';
 
+
 @Component({
   selector: 'app-datatable-page',
   templateUrl: './datatable-page.component.html',
@@ -23,16 +24,18 @@ export class DatatablePageComponent implements OnInit {
   @Input() selection: boolean;
   @Input() selectedRows: Array<any>;
   @Input() name?: string = 'none';
-  cache: number = -1;
+  cache: number = -1; //number of displayed rows
 
   rows: Array<any>;
   globalSearch: string
 
 
-  constructor(private testService: TestService, private filterService: FilterService, private invariantsService: InvariantsService) { }
+  constructor(
+    private testService: TestService, 
+    private filterService: FilterService, 
+    private invariantsService: InvariantsService) { }
 
   ngOnInit() {
-    // this.search();    
     this.invariantsService.observableSystemsSelected.subscribe(rep => {
       this.cache = -1;
       this.rows = null;
@@ -41,15 +44,17 @@ export class DatatablePageComponent implements OnInit {
     })
   }
 
-  search(globalSearch?: string) {
-
-
-
-
+  /**
+   * search
+   * * get rows corresponding to filters and page infomations
+   * @param globalSearch content of the gloabl search field (default: '')
+   */
+  search(globalSearch?: string): void {
+    // if a servlet as been specified
     if (this.servlet) {
       this.globalSearch = (globalSearch) ? globalSearch : '';
-      const a = this.page.number;
-      const delta = a - this.cache;
+      const currentPageNumber = this.page.number;
+      const delta = currentPageNumber - this.cache;
       const countWanted = delta * this.page.size;
 
       if (countWanted>0) {
@@ -66,24 +71,32 @@ export class DatatablePageComponent implements OnInit {
 
           this.page.totalCount = length;
         });
-        this.cache = a;
-        this.page.number = a;      
+        this.cache = currentPageNumber;
+        this.page.number = currentPageNumber;      
       }
-
-
-
     }
   }
 
-  pageUpdate(newPage) { //When selecting a new page    
+  /**
+   * pageUpdate
+   * * to call when a new page is selected or scrolled
+   * @param newPage new page number
+   */
+  pageUpdate(newPage: number): void { //When selecting a new page    
     this.page.number = newPage;
     this.search();
-
   }
-  applyFilters(globalSearch?: string) {
+
+  /**
+   * applyFilters
+   * * update rows with new filters
+   * * reset cache, rows, page number and scroll
+   * @param globalSearch content of global search field
+   */
+  applyFilters(globalSearch?: string): void {
     let a = document.getElementsByClassName("datatable-body")[0];
     a.scroll(0,0);
-    a.scrollBy(0,0);
+    a.scrollBy(0,0); // scroll to the table top
     this.cache = -1;
     this.rows = null;
     this.page.number = 0;

src/app/shared/datatable-page/datatable/datatable.component.html

@@ -5,7 +5,6 @@
         [columnMode]="'flex'" 
         [rowHeight]="50" 
         [headerHeight]="50" 
-        [loadingIndicator]="isLoading"
         [selected]="(selected)? selected :  ''" 
         [selectionType]="(selection)? 'checkbox' : ''"
         [selectAllRowsOnPage]="false" 

src/app/shared/datatable-page/datatable/datatable.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, ViewChild, Output, EventEmitter, HostBinding} from '@angular/core';
+import { Component, Input, OnInit, ViewChild, Output, EventEmitter, HostBinding } from '@angular/core';
 import { Column } from '../../model/column.model';
 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DatalibTclistComponent } from '../utils/datalib-tclist/datalib-tclist.component';
@@ -28,104 +28,154 @@ export class DatatableComponent implements OnInit {
   @Input() selected: Array<any>;
   @Output() pageUpdate = new EventEmitter<number>();
   @Output() sort = new EventEmitter<void>();
-  @ViewChild("dataTable", {static: true}) table: any;
+  @ViewChild("dataTable", { static: true }) table: any;
   @Input() name?: string;
-
-  isLoading: boolean;
   columnActive: number;
 
-  constructor(private modalService: NgbModal, private sideContentService: SidecontentService, private testService: TestService) { }
+  constructor(
+    private modalService: NgbModal,
+    private sideContentService: SidecontentService,
+    private testService: TestService) { }
 
-
-
-  toggleColumn(column): void {
-    column.active = !column.active;
+  ngOnInit() {
     this.columnActive = this.columns.filter(a => a.active).length;
   }
-
-  applyChange() {
-    this.pageUpdate.emit(this.page.number);
-  }
-
 
-  ngOnInit() {
+  /**
+   * toggleColumn
+   * * toggle colmn display from column selector
+   * @param column column to toggle
+   */
+  toggleColumn(column: Column): void {
+    column.active = !column.active;
     this.columnActive = this.columns.filter(a => a.active).length;
   }
 
-  onSelect({ selected }) {
-    if(selected) {
-      console.log('Select Event', selected, this.selected);
+  /**
+   * applyChange
+   * * Update changes
+   */
+  applyChange(): void {
+    this.pageUpdate.emit(this.page.number);
+  }
 
-    this.selected.splice(0, this.selected.length);
-    this.selected.push(...selected);
+  /**
+   * onSelect
+   * * Add new selected event to the list
+   * @param param0 ?
+   */
+  onSelect({ selected }): void {
+    if (selected) {
+      this.selected.splice(0, this.selected.length);
+      this.selected.push(...selected);
     }
-
   }
 
-  addFilter(column) {
+  /**
+   * addFilter
+   * * Add a select filter corresponding to the column
+   * @param column column to filter
+   */
+  addFilter(column: Column): void {
     column.dropActive = !column.dropActive;
   }
 
-  addFilterLike(column: Column) {
+  /**
+   * addFilterLike
+   * * Add a like filter corresponding to the column
+   * @param column column to filter
+   */
+  addFilterLike(column: Column): void {
     column.fieldActive = !column.fieldActive;
   }
-  onSort(event) {
-    this.isLoading = true;
-    this.page.sort = event.sorts;  
-    this.sort.emit();
-    this.isLoading = false;
-  }
 
-  resetColumnDrop() {
-    this.columnActive = null;
+  /**
+   * onSort
+   * * emit column to sort and direction
+   * @param event (generate by angular)
+   */
+  onSort(event): void {
+    this.page.sort = event.sorts;
+    this.sort.emit();
   }
 
-  selectAll() {
-    for(let row of this.rows) {
-      if(!this.selected.includes(row)) {
+  /**
+   * selectAll
+   * * Select all charged columns
+   */
+  selectAll(): void {
+    for (let row of this.rows) {
+      if (!this.selected.includes(row)) {
         this.selected.push(row);
       }
     }
-    
+
   }
 
-  onPage(pageInfo) {
+  /**
+   * onPage
+   * * Change current page informations
+   * @param pageInfo 
+   */
+  onPage(pageInfo: any): void {
     this.page.number = pageInfo.offset;
     this.page.size = pageInfo.pageSize;
     this.applyChange();
   }
 
-  openTCList(row) {
+  // *** TestCase Methods ***
+
+  openTCList(row): void {
     this.sideContentService.addComponentToSideBlock(DatalibTclistComponent, {
       id: row.testDataLibID,
       name: row.name,
       country: row.country
     });
     this.sideContentService.openSideBlock();
   }
-  editDataLib(row) {
+
+  // *** Datalib Methods ***
+
+  /**
+   * editDataLib
+   * * open side content to edit this datalib
+   * @param row datalib to edit
+   */
+  editDataLib(row: any): void {
     this.sideContentService.addComponentToSideBlock(DatalibEditComponent, {
       datalib: row,
       type: 'EDIT',
       exit: () => this.sort.emit()
     });
     this.sideContentService.openSideBlock();
   }
-  duplicateDataLib(row) {
+
+  /**
+   * duplicateDataLib
+   * * open side content to duplpicate this datalib
+   * @param row datalib to duplicate
+   */
+  duplicateDataLib(row: any): void {
     this.sideContentService.addComponentToSideBlock(DatalibEditComponent, {
       datalib: row,
       type: 'DUPLICATE',
       exit: () => this.sort.emit()
     });
     this.sideContentService.openSideBlock();
   }
-  deleteDataLib(row) {
+
+  /**
+   * deleteDataLib
+   * * open modal to delete datalib
+   * @param row datalib to delete
+   */
+  deleteDataLib(row: any) {
     const modalRef = this.modalService.open(CustomModalComponent);
     modalRef.componentInstance.title = 'Delete Test Data Library Entry';
     modalRef.componentInstance.text = "Do you want to delete Test Data Library '" + row.name + "' \
     of system '" + row.system + "' (ID : " + row.testDataLibID + ") ?";
-    modalRef.componentInstance.fct = () => {this.testService.deleteTestDataLib(row.testDataLibID, () =>this.sort.emit());};
+    modalRef.componentInstance.fct = () => { this.testService.deleteTestDataLib(row.testDataLibID, () => this.sort.emit()); };
   }
-  
+
 }