feat(front): Filtering table (OK)

Function filtering is working on each column Button filtering hide/display filter inputs (OK) TODO: - check for "help" icon and description for each column if description present - Check if multiple rows and pages if it's working Reviewed-by: andriac [Refs ticket]: #4
naturalsolutions · Jan 23, 2023 · 60fd1b2 · 60fd1b2
1 parent 964e32d
commit 60fd1b2
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 6 deletions.
diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css
@@ -62,3 +62,16 @@
 .header-sort-span:hover {
   background-color: rgb(245, 245, 245);
 }
+
+.icon-sort {
+    font-size: 1.2em;
+    float: right;
+}
+
+:host::ng-deep .sort-btn {
+    display: none !important;
+}
+
+.custom-dt {
+    box-shadow: none !important;
+}
diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html
@@ -12,6 +12,22 @@
   <!-- <pnx-monitoring-lists-new
   [(bEdit)]="bEdit"
 ></pnx-monitoring-lists-new> -->
+<div class="btn-float-right md-2">
+  <button
+    class="btn btn-info"
+    (click)="displayFilter = !displayFilter"
+    matTooltip="{{displayFilter ? 'Cacher' : 'Afficher'}} les filtres"
+    ><i class="fa fa-filter" aria-hidden="true"></i></button
+  >
+<!--TODO  Revoir pour rendre générique le bouton "Ajouter" , avant : {{ (child0.template["label_art_undef_new"] || "") }}-->
+<!-- TODO Revoir pour les droits pour pouvoir créer un groupe de site avec anciennement:  *ngIf=obj.moduleCode && (currentUser['cruved_object'][child0.objectType] || currentUser['cruved']).C >= child0.cruved('C')" -->
+  <button
+    class="btn btn-success float-right"
+    (click)="navigateToAddChildren(null,null)"
+    ><i class="fa fa-plus" aria-hidden="true"></i> Ajouter un nouveau groupe de site
+    </button
+  >
+</div>
   <ngx-datatable
       *ngIf="rows"
       #table
@@ -31,7 +47,63 @@
         totalMessage: 'total',
         selectedMessage: 'selection'
       }"
-    ></ngx-datatable>
+    > <ngx-datatable-column
+    [cellClass]="'cell-link'"
+    prop="Action"
+    class="object-link"
+  >
+    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+      <!-- TODO Action Column : changer le (click)="navigateToDetail(row.id)-->
+      <a
+        class="nav-link link cell-link"
+        (click)="navigateToDetail(row.id)"
+        matTooltip="Consulter `child0.template.label_art_def` "
+      >
+        <i class="fa fa-eye" aria-hidden="true"></i>
+      </a>
+      <!-- TODO Action Column :  Changer ngIf, click function, matTooltip // voir comment adapter à ce qu'il y avait avant :  *ngIf="child0.child0()"" et dans la function `child0.child0().labelArtUndef(true)` -->
+      <a
+        class="nav-link link cell-link"
+        (click)="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>
+
+   <!-- TODO Filter field :  Changer ngIf et rajouter [comparator]="customColumnComparator"  -->
+  <ngx-datatable-column
+    *ngFor="let col of columns"
+    [name]="col.name"
+    [prop]="col.prop"
+    [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.name}} -->
+    <i class="material-icons icon-sort" [innerText]="sortDir ? (sortDir === 'asc' ? 'arrow_upward' : 'arrow_downward') : ''"></i>
+    <i 
+      *ngIf="column.description"
+      class="material-icons icon-sort" 
+      [matTooltip]="column.description"
+      matTooltipPosition="above"
+      >help</i>
+    <span
+      [matTooltip]="column.name"
+      matTooltipPosition="above"
+      > {{ column.name }}</span>
+  </div>
+  <div class="header-filter-span">
+    <input
+      *ngIf="displayFilter"
+      [(ngModel)]="filters[column.prop]"
+      (input)="filterInput($event)"
+      type="text"
+    />
+  </div>
+</ng-template>
 </div>
 </div>
diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts
@@ -12,6 +12,7 @@ import { GeoJSON } from "leaflet";
 
 import { DatatableComponent } from "@swimlane/ngx-datatable";
 import { Subject } from "rxjs";
+import {debounceTime } from "rxjs/operators";
 interface SitesGroups {
   comments?: string;
   data?: any;
@@ -56,12 +57,23 @@ export class MonitoringSitesGroupsComponent implements OnInit {
   private filterSubject: Subject<string> = new Subject();
   selected = [];
   filters = {};
+  row_save;
 
-  listAllColName: { name: string; prop: string }[] = [];
+
+  listAllColName: { name: string; prop: string,description?:string }[] = [];
   dataTable;
   rows;
   columns;
 
+  // child0 = {
+  //   "config":{
+  //     "display_filter":false
+  //   }
+  // }
+
+  // Est ce qu'un simple boolean ne convient pas ?
+  displayFilter:boolean = false;
+
   sitesGroups: GeoJSON;
 
   constructor(private _sites_service: SitesService) {}
@@ -88,8 +100,10 @@ export class MonitoringSitesGroupsComponent implements OnInit {
         console.log("columns", this.columns);
         this.groupSiteId = this.sitesGroups.features[0].id;
         console.log("this.groupSiteId", this.groupSiteId);
+        this.initDatatable();
         this.initObjectsStatus();
       });
+
   }
 
   getDataTable() {
@@ -119,6 +133,7 @@ export class MonitoringSitesGroupsComponent implements OnInit {
             ? element
             : columnNameSiteGroup[element],
         prop: element,
+        description: undefined
       });
     });
     return this.listAllColName;
@@ -165,16 +180,15 @@ export class MonitoringSitesGroupsComponent implements OnInit {
   }
 
   // ICI le select renvoyé correspond directement aux valeurs de la ligne sélectionné et non à l'event
-  // permet de simplifier la fonction et pas besoin de checke si l'event est un "click" ou non
+  // permet de simplifier la fonction et pas besoin de check si l'event est un "click" ou non
   onSelect({ selected }) {
-    console.log("Select Event", selected, this.selected);
+    console.log("Select Row", selected, this.selected);
     console.log("this.table", this.table);
     console.log(this.table._internalRows);
 
-    console.log("event.id", selected.id);
+    console.log("selected[0].id", selected[0].id);
     const id = selected[0].id;
 
-    console.log("event.row after check event.type", selected);
     if (!this.rowStatus) {
       return;
     }
@@ -233,6 +247,19 @@ export class MonitoringSitesGroupsComponent implements OnInit {
     }
   }
 
+  //  TEST
+  // onSelect({ selected }) {
+  //   console.log('Select Event', selected, this.selected);
+  // }
+
+  // onActivate(event) {
+  //   console.log("Activate Event", event);
+  // }
+
+  //   if (!this.rowStatus) {
+  //     return;
+  //   }
+
   //////////////////////////////////////
   // NON utilisé car le databinding (selected)=onSelect($event) suffit par rapport au but recherché
   /////////////////////////////////////////////////
@@ -256,4 +283,81 @@ export class MonitoringSitesGroupsComponent implements OnInit {
   //   this.setSelected();
   //   this.rowStatusChange.emit(this.rowStatus);
   // }
+
+  ////////////////////////////////////:
+  // WIP : fonctions liés à des classes basées sur ce qui se faisait anciennement avec le module code en parent de tout
+  // A l'adapter pour coller avec l'architecture actuelle
+  /////////////////////// 
+
+  initDatatable() {
+    console.log("Inside initDatatable")
+    this.filters = {};
+    this.filterSubject.pipe(debounceTime(500)).subscribe(() => {
+      this.filter();
+    });
+
+    // this.customColumnComparator = this.customColumnComparator_();
+    this.row_save = this.rows.map((e) => e);
+    // on declenche les filtres (si filtre par defaut)
+    setTimeout(() => {
+      this.filter(true);
+    }, 500);
+  }
+
+  filterInput($event) {
+    this.filterSubject.next();
+  }
+
+  sort() {}
+
+  filter(bInitFilter = false) {
+    // filter all
+
+    let bChange = false;
+    const temp = this.row_save.filter((row, index) => {
+      let bCondVisible = true;
+      for (const key of Object.keys(this.filters)) {
+        let val = this.filters[key];
+        if ([null, undefined].includes(val)) {
+          continue;
+        }
+        val = String(val).toLowerCase();
+        const vals = val.split(" ");
+        for (const v of vals) {
+          bCondVisible =
+            bCondVisible && (String(row[key]) || "").toLowerCase().includes(v);
+        }
+      }
+
+      if (!this.rowStatus) {
+        return bCondVisible;
+      }
+      bChange = bChange || bCondVisible !== this.rowStatus[index].visible;
+      this.rowStatus[index]["visible"] = bCondVisible;
+      this.rowStatus[index]["selected"] =
+        this.rowStatus[index]["selected"] && bCondVisible;
+      return bCondVisible;
+    });
+
+    if (bChange || bInitFilter) {
+      this.rowStatusChange.emit(this.rowStatus);
+    }
+    // update the rows
+    this.rows = temp;
+    // Whenever the filter changes, always go back to the first page
+    this.table.offset = 0;
+    this.setSelected();
+  }
+
+// TODO: TO REPLACE WITH EFFECTIVE FUNCTION
+navigateToDetail(row){
+  console.log("Inside navigateToDetail on eye icon",row)
+}
+
+navigateToAddChildren(_,rowId){
+  console.log("Inside navigateToAddChildren:",rowId)
+}
+
+
+
 }