feat(front): Datatable format and selected row

- Get and display data from group_site database (OK)
- Selecting row and get id of row table (OK)

Improve :
- improve assign colname table outside the component (maybe into the
  class folder ?)

Todo/next:
- Filtering table
- Add action column to table
- refactor code by creating component for the ngx-datable in order to
  reuse component for other data

Reviewed-by: andriac
[Refs ticket]: #4

frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css

@@ -1,67 +1,64 @@
 .flex-container {
-    background-color: rgb(240, 240, 240);
-    display: flex;
-  }
-
-  .flex-container > div {
-    width: 50%;
-    padding: 10px;
-    margin: 10px;
-  }
-
-  .flex-container > div:first-child {
-    margin-right: 0;
-  }
+  background-color: rgb(240, 240, 240);
+  display: flex;
+}
 
-  .scroll {
-    overflow-y: scroll;
-  }
-
+.flex-container > div {
+  width: 50%;
+  padding: 10px;
+  margin: 10px;
+}
 
-  :host ::ng-deep .cadre {
-    background-color: white;
-    /* border: 1px solid grey;*/
-    border-radius: 5px;
-    padding: 5px;
-    margin: 5px;
-    /* display: inline-block; */
-  }
+.flex-container > div:first-child {
+  margin-right: 0;
+}
 
+.scroll {
+  overflow-y: scroll;
+}
 
-  /* TABLE */
+:host ::ng-deep .cadre {
+  background-color: white;
+  /* border: 1px solid grey;*/
+  border-radius: 5px;
+  padding: 5px;
+  margin: 5px;
+  /* display: inline-block; */
+}
+
+/* TABLE */
 
-  .cell-link {
-    cursor: pointer;
+.cell-link {
+  cursor: pointer;
 }
 
 :host::ng-deep .datatable-body-row.active .datatable-row-group {
-    background-color: rgb(117, 227, 118) !important;
+  background-color: rgb(117, 227, 118) !important;
 }
 
 .link:hover {
-    background-color: rgba(0, 0, 0, 0.2) !important;
-    transition: background-color 0.5;
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  transition: background-color 0.5;
 }
 
 .link {
-    display: inline;
-    transition: background-color 0.5s;
-    border-radius: 5px;
+  display: inline;
+  transition: background-color 0.5s;
+  border-radius: 5px;
 }
 
 .header-filter-span > input {
-    width: 100%;
+  width: 100%;
 }
 
 .header-sort-span {
-    /* width: 100%; */
-    cursor: pointer;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space:nowrap
+  /* width: 100%; */
+  cursor: pointer;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
-
 .header-sort-span:hover {
-    background-color: rgb(245, 245, 245);
+  background-color: rgb(245, 245, 245);
 }

frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html

@@ -24,102 +24,14 @@
       [rows]="rows"
       [columns]="columns"
       [selected]="selected"
-      (activate)="onActivate($event)"
+      selectionType="single"
       (select)="onSelect($event)"
       [messages]= "{
         emptyMessage: 'Pas de données disponibles',
         totalMessage: 'total',
         selectedMessage: 'selection'
       }"
     ></ngx-datatable>
-  <!-- <div *ngIf="child0 && row_save">
-    ///// A commenter
-    <input
-      type="text"
-      style="padding:8px;margin:15px auto;width:30%;"
-      placeholder="Entrer une valeur pour filtrer les colonnes"
-      (keyup)="updateFilter($event)"
-    /> 
-    //////
-  
-    <ngx-datatable
-      *ngIf="rows"
-      #table
-      class="material striped custom-dt"
-      [columnMode]="'force'"
-      [headerHeight]="'auto'"
-      [footerHeight]="50"
-      [rowHeight]="40"
-      [limit]="10"
-      [rows]="rows"
-      [columns]="columns"
-      [selected]="selected"
-      (activate)="onRowClick($event)"
-      [sorts]="sorts"
-      [messages]= "{
-        emptyMessage: 'Pas de données disponibles',
-        totalMessage: 'total',
-        selectedMessage: 'selection'
-      }"
-    >
-      <ngx-datatable-column
-        [cellClass]="'cell-link'"
-        prop="Action"
-        class="object-link"
-      >
-        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
-          <a
-            class="nav-link link cell-link"
-            (click)="child0.navigateToDetail(row.id)"
-            matTooltip="Consulter {{child0.template.label_art_def}}"
-          >
-            <i class="fa fa-eye" aria-hidden="true"></i>
-          </a>
-          <a
-            *ngIf="child0.child0()"
-            class="nav-link link cell-link"
-            (click)="child0.navigateToAddChildren(null, row.id)"
-            matTooltip="Ajouter {{child0.child0().labelArtUndef(true)}}"
-          >
-            <i class="fa fa-plus" aria-hidden="true"></i>
-          </a>
-        </ng-template>
-      </ngx-datatable-column>
-  
-      <ngx-datatable-column
-        *ngFor="let col of columns"
-        [name]="col.name"
-        [prop]="col.prop"
-        [comparator]="customColumnComparator"
-        [headerTemplate]="hdrTpl"
-      ></ngx-datatable-column>
-    </ngx-datatable>
-  
-    <ng-template #hdrTpl let-column="column" let-sortDir="sortDir" let-sortFn="sortFn">
-      <div class="header-sort-span" (click)="sortFn()">
-        {{column.definition}}
-        <i class="material-icons icon-sort" [innerText]="sortDir ? (sortDir === 'asc' ? 'arrow_upward' : 'arrow_downward') : ''"></i>
-        <i 
-          *ngIf="child0.template.fieldDefinitions[column.prop]"
-          class="material-icons icon-sort" 
-          [matTooltip]="tooltip(column)"
-          matTooltipPosition="above"
-          >help</i>
-        <span
-          [matTooltip]="tooltip(column)"
-          matTooltipPosition="above"
-          > {{ column.name }}</span>
-      </div>
-      <div class="header-filter-span">
-        <input
-          *ngIf="child0.config['display_filter']"
-          [(ngModel)]="filters[column.prop]"
-          (input)="filterInput($event)"
-          type="text"
-        />
-      </div>
-    </ng-template>
-  </div>
-   -->
+
 </div>
 </div>