#9 Rework the sorting

src/app/feat-design/campaigns/campaigns.component.html

@@ -1,5 +1,5 @@
 <app-datatable-page
-    [page]="page"
+    [pageSort]="defaultPageSort" 
     [columns]="columns"
     [servlet]="servlet"
     name="campaign">

src/app/feat-design/campaigns/campaigns.component.ts

@@ -10,16 +10,10 @@ import { HeaderTitleService } from 'src/app/core/services/crud/header-title.serv
 })
 export class CampaignsComponent implements OnInit {
 
-  columns: Array<Column> = CampainsColumnsData; // column list
-
-  page = {
-    size: 0, //maximum element per page
-    number: 1, //number of current page
-    sort: [{dir: "asc", prop : "testCase"}], //sort item
-    totalCount: 0 //total count of element in database
-  };
-  selectedRows: Array<any> = [];
-  servlet :string = '/ReadCampaign'
+  private columns: Array<Column> = CampainsColumnsData; // column list  
+  private defaultPageSort = [{dir: "asc", prop : "testCase"}];
+  private selectedRows: Array<any> = [];
+  private servlet :string = '/ReadCampaign'
 
   constructor(private headerTitleService: HeaderTitleService) { 
     headerTitleService.setTitle("Campaigns");

src/app/feat-design/datalibrary/datalibrary.component.html

@@ -1,13 +1,16 @@
 <app-datatable-page
-    [page]="page"
+    [pageSort]="defaultPageSort" 
     [columns]="columns"
     [servlet]="servlet"
     [refreshResults]="refreshResultsEvent.asObservable()">
 
+    <!--START Template for create datalib button-->
     <ng-template datatable-filter-tmp>
         <button class="btn btn-info mr-4 mb-3" (click)="createDatalib()"><i class="fa fa-fw fa-plus download mr-2"></i>Datalib</button>
     </ng-template>
+    <!--END Template for create datalib button-->
 
+    <!--START Template for End Row Buttons-->
     <ng-template datatable-end-line-tmp let-row="row">
         <div class="row-menu">
             <div class="actions-section">
@@ -30,5 +33,6 @@
             </div>
         </div>
     </ng-template>
+    <!--END Template for End Row Buttons-->
 
 </app-datatable-page>

src/app/feat-design/datalibrary/datalibrary.component.scss

@@ -1,35 +1,35 @@
 .hover-action{
-    color: black;
-    position: absolute;
-    top: 0px;
-    right: 0px;
+  color: black;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
+.row-menu {
+  position: absolute;
+  top: 0;
+  right:0;
+  opacity: .8;
+  transition: .2s;
+  &:hover {
+    opacity : 1;
   }
-  .row-menu {
-    position: absolute;
-    top: 0;
-    right:0;
-    opacity: .8;
-    transition: .2s;
-    &:hover {
-      opacity : 1;
-    }
-  }
-  .actions-section {
-    padding: 5px;
-    padding-right: 30px;
-    height: 100%;
-    margin-top: 8px;
-    button {
-      width: 25px;
-      height: 25px;
-      display: inline-block;
-      align-items: center;
-      justify-content: center;
-      margin-left: 4px;
+}
+.actions-section {
+  padding: 5px;
+  padding-right: 30px;
+  height: 100%;
+  margin-top: 8px;
+  button {
+    width: 25px;
+    height: 25px;
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+    padding: 0;
+    font-size: 18px;
+    i {
       padding: 0;
-      font-size: 18px;
-      i {
-        padding: 0;
-      }    
-    }  
-  }
+    }    
+  }  
+}

src/app/feat-design/datalibrary/datalibrary.component.ts

@@ -1,11 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Column } from 'src/app/shared/model/column.model';
 import { TestService } from 'src/app/core/services/crud/test.service';
-import { InvariantsService } from 'src/app/core/services/crud/invariants.service';
-import { LabelfilteringPipe } from 'src/app/shared/pipes/labelfiltering.pipe';
-import { SystemService } from 'src/app/core/services/crud/system.service';
-import { FilterService } from 'src/app/core/services/crud/filter.service';
-import { Filter } from 'src/app/shared/model/filter.model';
 import { DataLibColumnsData } from './datalibrary.columnsdata';
 import { HeaderTitleService } from 'src/app/core/services/crud/header-title.service';
 import { DatalibInteractionComponent, MODE } from './datalib-interaction/datalib-interaction.component';
@@ -24,19 +19,13 @@ import { NotificationStyle } from 'src/app/core/services/utils/notification.mode
 })
 export class DatalibraryComponent implements OnInit {
 
-  columns = DataLibColumnsData;
-  // TODO : create gloabl method
-  page = {
-    size: 0, //maximum element per page
-    number: 1, //number of current page
-    sort: [{ dir: "asc", prop: "testDataLibID" }], //sort item
-    totalCount: 0 //total count of element in database
-  };
-  selectedRows = [];
-  filterList: Array<Filter> = [];
-  globalSearch = ''; // value in global search field
-  servlet = '/ReadTestDataLib';
-  private refreshResultsEvent: Subject<void> = new Subject<void>();
+  private columns: Array<Column> = DataLibColumnsData; // get all columns from `datalibrary.columnsdata.ts`
+
+  // *** parameters for the `datatable-page` component ***
+
+  private defaultPageSort = [{ dir: "asc", prop: "testDataLibID" }];
+  private servlet = '/ReadTestDataLib'; // the api to call to get datalib list
+  private refreshResultsEvent: Subject<void> = new Subject<void>(); // the event to emit to refresh the table
 
   refreshResults() {
     this.refreshResultsEvent.next()
@@ -54,18 +43,25 @@ export class DatalibraryComponent implements OnInit {
 
   ngOnInit() { }
 
-
-  // *** Datalib Methods ***
-
-  openTCList(row): void {
-    this.sideContentService.addComponentToSideBlock(DatalibTclistComponent, {
-      id: row.testDataLibID,
-      name: row.name,
-      country: row.country
+  /** createDatalib
+   * * Open side content for datalib creation
+   */
+  createDatalib() {
+    this.sideContentService.addComponentToSideBlock(DatalibInteractionComponent, {
+      datalib: {},
+      mode: MODE.CREATE,
+      exit: () => {
+        this.refreshResults();
+        this.NotificationService.createANotification('The datalib has been successfully created', NotificationStyle.Success);
+      }
     });
     this.sideContentService.openSideBlock();
   }
 
+  // *********************************
+  // *** End Row buttons functions ***  
+  // *********************************
+
   /**
    * editDataLib
    * * open side content to edit this datalib
@@ -119,19 +115,19 @@ export class DatalibraryComponent implements OnInit {
     };
   }
 
-  /** createDatalib
-   * * Open side  content for datalib creation
+  /** openTCList
+   * * open the testcase list link wich use the datalib in the side content
+   * @param datalib the selected datalib 
    */
-  createDatalib() {
-    this.sideContentService.addComponentToSideBlock(DatalibInteractionComponent, {
-      datalib: {},
-      mode: MODE.CREATE,
-      exit: () => {
-        this.refreshResults();
-        this.NotificationService.createANotification('The datalib has been successfully created', NotificationStyle.Success);
-      }
+  openTCList(datalib): void {
+    this.sideContentService.addComponentToSideBlock(DatalibTclistComponent, {
+      id: datalib.testDataLibID,
+      name: datalib.name,
+      country: datalib.country
     });
     this.sideContentService.openSideBlock();
   }
 
+
+
 }

src/app/feat-design/testcaselist/testcaselist.component.html

@@ -1,5 +1,10 @@
-<app-datatable-page [page]="page" [columns]="columns" [servlet]="servlet" [selectedRows]="selectedRows"
-    [selection]="true" [refreshResults]="refreshResultsEvent.asObservable()">
+<app-datatable-page 
+    [pageSort]="defaultPageSort" 
+    [columns]="columns" 
+    [servlet]="servlet" 
+    [selectedRows]="selectedRows"
+    [selection]="true" 
+    [refreshResults]="refreshResultsEvent.asObservable()">
 
     <!--START Template for create button-->
     <ng-template datatable-filter-tmp>

src/app/feat-design/testcaselist/testcaselist.component.scss

@@ -1,6 +1,3 @@
-.dropdown-menu {
-    margin-top: 300px;
-}
 .hover-action{
     color: black;
     position: absolute;

src/app/feat-design/testcaselist/testcaselist.component.ts

@@ -26,12 +26,7 @@ export class TestcaselistComponent implements OnInit {
 
 
   private columns: Array<Column> = TestCasesColumnsData; // column list from `testcaselist.columnsdata.ts`  
-  private page = {
-    size: 0, //maximum element per page
-    number: 1, //number of current page
-    sort: [{dir: "asc", prop : "testCase"}], //sort item
-    totalCount: 0 //total count of element in database
-  };
+  private defaultPageSort = [{dir: "asc", prop : "testCase"}];
   private selectedRows: Array<any> = []; // the selected rows in the table
   private servlet :string = '/ReadTestCase'; //const : the api to call to refresh datatable results
   private refreshResultsEvent: Subject<void> = new Subject<void>(); //the observable to refresh the table

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

@@ -14,13 +14,7 @@ import { NotificationStyle } from 'src/app/core/services/utils/notification.mode
   styleUrls: ['./datatable-page.component.scss'],
 })
 export class DatatablePageComponent implements OnInit {
-
-  @Input() page: {
-    number: number,
-    size: number,
-    sort: any,
-    totalCount: number
-  };
+  @Input() pageSort: any;
   @Input() columns: Array<Column>;
   @Input() massAction: boolean;
   @Input() servlet: string;
@@ -34,10 +28,15 @@ export class DatatablePageComponent implements OnInit {
   @ContentChild(DatatableEndLineAction, { read: TemplateRef, static: true }) endLineActionTemplate: TemplateRef<any>;
 
 
-  cache: any = {}; //number of displayed rows
-
-  rows: Array<any> = [];
-  globalSearch: string
+  private cache: any = {}; //number of displayed rows
+  private rows: Array<any> = []; //rows to display
+  private globalSearch: string; // value in global search field
+  private page: { // the default page informations
+    number: number, // page number
+    size: number, // number of rows on screen
+    sort: any, // sort informations (column and direction)
+    totalCount: number // total of element in the database
+  };
 
 
   constructor(
@@ -47,6 +46,12 @@ export class DatatablePageComponent implements OnInit {
     private NotificationService: NotificationService) { }
 
   ngOnInit() {
+    this.page = {
+      number: 1,
+      size: 0,
+      sort: this.pageSort,
+      totalCount: 0
+    };
     this.invariantsService.observableSystemsSelected.subscribe(rep => {
       console.log('systemList change')
       this.cache = {};