WIP feat(front): DataTable sites_groups

- Table with specific data value (OK) - Table with sort column (OK) - Datatable , select row event and change color (wip). Reviewed-by: andriac [Refs ticket]: #4
naturalsolutions · Dec 26, 2022 · f986e46 · f986e46
1 parent 2c7b55d
commit f986e46
Show file tree

Hide file tree

Showing 3 changed files with 353 additions and 3 deletions.
diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css
@@ -0,0 +1,67 @@
+.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;
+  }
+
+  .scroll {
+    overflow-y: scroll;
+  }
+
+
+  :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;
+}
+
+:host::ng-deep .datatable-body-row.active .datatable-row-group {
+    background-color: rgb(117, 227, 118) !important;
+}
+
+.link:hover {
+    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;
+}
+
+.header-filter-span > input {
+    width: 100%;
+}
+
+.header-sort-span {
+    /* width: 100%; */
+    cursor: pointer;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space:nowrap
+}
+
+
+.header-sort-span:hover {
+    background-color: rgb(245, 245, 245);
+}
diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html
@@ -1,4 +1,5 @@
-<div id="geometry" class="monitoring-map-container">
+<div class="flex-container" id="object">
+<div id="geometry" class="monitoring-map-container" class="cadre">
   <pnx-map height="80vh">
     <pnx-geojson
       [geojson]="sitesGroups"
@@ -7,3 +8,118 @@
     ></pnx-geojson>
   </pnx-map>
 </div>
+<div id="monitoring-elem-container" class="cadre scroll">
+  <!-- <pnx-monitoring-lists-new
+  [(bEdit)]="bEdit"
+></pnx-monitoring-lists-new> -->
+  <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)="onActivate($event)"
+      (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>
diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts
@@ -1,7 +1,13 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit,   Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  SimpleChanges } from "@angular/core";
 import { SitesService } from "../../services/sites.service";
 import { GeoJSON } from "leaflet";
 
+import { DatatableComponent } from "@swimlane/ngx-datatable";
+import { Subject } from "rxjs";
 interface SitesGroups {
   comments?: string;
   data?: any;
@@ -28,7 +34,26 @@ interface PaginatedSitesGroup {
   styleUrls: ["./monitoring-sitesgroups.component.css"],
 })
 export class MonitoringSitesGroupsComponent implements OnInit {
+
+  @ViewChild(DatatableComponent) table: DatatableComponent;
+  @Input() rowStatus: Array<any>;
+  @Output() rowStatusChange = new EventEmitter<Object>();
+  @Output() bEditChanged = new EventEmitter<boolean>();
+  objectsStatus;
+  groupSiteId;
+
+  private filterSubject: Subject<string> = new Subject();
+  selected = [];
+  filters = {};
+
+
+  listAllColName:{"name":string,"prop":string}[]=[];
+  dataTable;
+  rows;
+  columns;
+
   sitesGroups: GeoJSON;
+
   constructor(private _sites_service: SitesService) {}
   ngOnInit() {
     console.log("yolo");
@@ -43,7 +68,149 @@ export class MonitoringSitesGroupsComponent implements OnInit {
           }),
           type: "FeatureCollection",
         };
-        console.log(this.sitesGroups);
+        // console.log(this.sitesGroups);
+        this.getDataTable()
+        this.colsTable()
+        // console.log(this.listAllColName)
+        this.columns = this.listAllColName
+        this.rows=this.dataTable
+        console.log("rows",this.rows)
+        console.log("columns",this.columns)
+        this.groupSiteId= this.sitesGroups.features[0].id 
+        console.log("this.groupSiteId",this.groupSiteId)
+        this.initObjectsStatus()
       });
+
+  }
+
+
+  getDataTable(){
+   this.dataTable =  this.sitesGroups.features.map(groupSite => {
+    let { comments,data,geometry,uuid_sites_group,type, ... dataTable } = groupSite
+    return dataTable
+   }) ;
+  //  console.log(this.dataTable)
+  }
+
+  colsTable(){
+    const arr= Object.keys(this.dataTable[0]);
+    console.log("arr",arr)
+    arr.forEach(element => 
+      this.listAllColName.push({"name": element,"prop": element}));
+    return this.listAllColName
+  }
+
+  initObjectsStatus() {
+    const objectsStatus = {};
+    // for (const childrenType of Object.keys(this.obj.children)) {
+    objectsStatus["sites_groups"] = this.sitesGroups.features.map(
+        (groupSite) => {
+          return {
+            id: groupSite.id,
+            selected: false,
+            visible: true,
+            current: false,
+          };
+        }
+      );
+    console.log("objectsStatus",objectsStatus)
+    // }
+
+    // init site status
+    if (this.groupSiteId) {
+      objectsStatus["sites_groups"] = [];
+      this.sitesGroups.features.forEach((f) => {
+        // determination du site courrant
+        let cur = false;
+        if (f.id_sites_group == this.groupSiteId) {
+          cur = true;
+        }
+
+        objectsStatus["sites_groups"].push({
+          id: f.id_sites_group,
+          selected: false,
+          visible: true,
+          current: cur,
+        });
+      });
+    }
+
+    this.objectsStatus = objectsStatus;
+    console.log("objectsStatus after init",objectsStatus)
+  }
+
+  onRowClick(event) {
+    console.log('Select Event', event, this.selected);
+    if (!(event && event.type === "click")) {
+      return;
+    }
+    const id = event.row && event.row.id;
+
+    if (!this.rowStatus) {
+      return;
+    }
+
+    this.rowStatus.forEach((status) => {
+      const bCond = status.id === id;
+      status["selected"] = bCond && !status["selected"];
+    });
+
+    this.setSelected();
+    this.rowStatusChange.emit(this.rowStatus);
+    console.log("after click rowStatus",this.rowStatus)
+    console.log("after click selected",this.selected)
+    console.log("after click table",this.table)
+  }
+
+  setSelected() {
+    // this.table._internalRows permet d'avoir les ligne triées et d'avoir les bons index
+
+    if (!this.rowStatus) {
+      return;
+    }
+
+    const status_selected = this.rowStatus.find((status) => status.selected);
+    if (!status_selected) {
+      return;
+    }
+
+    const index_row_selected = this.table._internalRows.findIndex(
+      (row) => row.id === status_selected.id
+    );
+    if (index_row_selected === -1) {
+      return;
+    }
+
+    this.selected = [this.table._internalRows[index_row_selected]];
+    this.table.offset = Math.floor(index_row_selected / this.table._limit);
+  }
+
+
+  // ngOnChanges(changes: SimpleChanges) {
+  //   console.log("inside ngOnChanges")
+  //   for (const propName of Object.keys(changes)) {
+  //     const chng = changes[propName];
+  //     const cur = chng.currentValue;
+  //     const pre = chng.currentValue;
+  //     switch (propName) {
+  //       case "rowStatus":
+  //         this.setSelected();
+  //         break;
+  //       // case "child0":
+  //       //   this.customColumnComparator = this.customColumnComparator_();
+  //       //   break;
+  //     }
+  //   }
+  // }
+
+
+
+  //  TEST
+  onSelect({ selected }) {
+    console.log('Select Event', selected, this.selected);
+  }
+
+  onActivate(event) {
+    console.log('Activate Event', event);
   }
 }