From 964e32d5cf6d78a07eabaff67098b834a305928f Mon Sep 17 00:00:00 2001 From: Andria Capai Date: Tue, 27 Dec 2022 14:53:01 +0100 Subject: [PATCH] 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 --- .../monitoring-sitesgroups.component.css | 81 ++++---- .../monitoring-sitesgroups.component.html | 92 +-------- .../monitoring-sitesgroups.component.ts | 193 +++++++++++------- 3 files changed, 159 insertions(+), 207 deletions(-) diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css index 05190a9e3..2a6ca24f0 100644 --- a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css +++ b/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); } diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html index 7284bb254..4d4aaf2e3 100644 --- a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html +++ b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html @@ -24,7 +24,7 @@ [rows]="rows" [columns]="columns" [selected]="selected" - (activate)="onActivate($event)" + selectionType="single" (select)="onSelect($event)" [messages]= "{ emptyMessage: 'Pas de données disponibles', @@ -32,94 +32,6 @@ selectedMessage: 'selection' }" > - + \ No newline at end of file diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts index 90f71aa52..9c1947410 100644 --- a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts +++ b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts @@ -1,8 +1,12 @@ -import { Component, OnInit, Input, +import { + Component, + OnInit, + Input, Output, EventEmitter, ViewChild, - SimpleChanges } from "@angular/core"; + SimpleChanges, +} from "@angular/core"; import { SitesService } from "../../services/sites.service"; import { GeoJSON } from "leaflet"; @@ -28,15 +32,22 @@ interface PaginatedSitesGroup { items: SitesGroups[]; } +enum columnNameSiteGroup { + nb_sites = "Nb. sites", + nb_visits = "Nb. visites", + sites_group_code = "Code", + sites_group_name = "Nom", +} + @Component({ selector: "monitoring-sitesgroups", templateUrl: "./monitoring-sitesgroups.component.html", styleUrls: ["./monitoring-sitesgroups.component.css"], }) export class MonitoringSitesGroupsComponent implements OnInit { - @ViewChild(DatatableComponent) table: DatatableComponent; - @Input() rowStatus: Array; + rowStatus: Array; + // @Input() rowStatus: Array; @Output() rowStatusChange = new EventEmitter(); @Output() bEditChanged = new EventEmitter(); objectsStatus; @@ -46,8 +57,7 @@ export class MonitoringSitesGroupsComponent implements OnInit { selected = []; filters = {}; - - listAllColName:{"name":string,"prop":string}[]=[]; + listAllColName: { name: string; prop: string }[] = []; dataTable; rows; columns; @@ -69,51 +79,65 @@ export class MonitoringSitesGroupsComponent implements OnInit { type: "FeatureCollection", }; // console.log(this.sitesGroups); - this.getDataTable() - this.colsTable() + 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() + 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) + getDataTable() { + this.dataTable = this.sitesGroups.features.map((groupSite) => { + let { + comments, + data, + geometry, + uuid_sites_group, + type, + id_sites_group, + sites_group_description, + ...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 + colsTable() { + const arr = Object.keys(this.dataTable[0]); + console.log("arr", arr); + arr.forEach((element) => { + this.listAllColName.push({ + name: + element in ["id", "id_group_site"] + ? element + : columnNameSiteGroup[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) + (groupSite) => { + return { + id: groupSite.id, + selected: false, + visible: true, + current: false, + }; + } + ); + console.log("objectsStatus", objectsStatus); // } // init site status @@ -122,12 +146,12 @@ export class MonitoringSitesGroupsComponent implements OnInit { this.sitesGroups.features.forEach((f) => { // determination du site courrant let cur = false; - if (f.id_sites_group == this.groupSiteId) { + if (f.id == this.groupSiteId) { cur = true; } objectsStatus["sites_groups"].push({ - id: f.id_sites_group, + id: f.id, selected: false, visible: true, current: cur, @@ -136,19 +160,25 @@ export class MonitoringSitesGroupsComponent implements OnInit { } this.objectsStatus = objectsStatus; - console.log("objectsStatus after init",objectsStatus) + console.log("objectsStatus after init", objectsStatus); + this.rowStatus = this.objectsStatus["sites_groups"]; } - onRowClick(event) { - console.log('Select Event', event, this.selected); - if (!(event && event.type === "click")) { - return; - } - const id = event.row && event.row.id; + // 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 + onSelect({ selected }) { + console.log("Select Event", selected, this.selected); + console.log("this.table", this.table); + console.log(this.table._internalRows); + + console.log("event.id", selected.id); + const id = selected[0].id; + console.log("event.row after check event.type", selected); if (!this.rowStatus) { return; } + console.log("this.rowStatus after check rowStatus", this.rowStatus); this.rowStatus.forEach((status) => { const bCond = status.id === id; @@ -157,14 +187,14 @@ export class MonitoringSitesGroupsComponent implements OnInit { 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) + 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 - + console.log("Inside setSelected", this.rowStatus); if (!this.rowStatus) { return; } @@ -185,32 +215,45 @@ export class MonitoringSitesGroupsComponent implements OnInit { this.table.offset = Math.floor(index_row_selected / this.table._limit); } + // Pour l'instant fonction non active + 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; + } + } + } - // 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; - // } + ////////////////////////////////////// + // NON utilisé car le databinding (selected)=onSelect($event) suffit par rapport au but recherché + ///////////////////////////////////////////////// + // onRowClick(event) { + // console.log("inside onRowClick- event",event) + // if (!(event && event.type === "click")) { + // return; // } - // } - + // console.log("inside onRowClick- event.row",event.row) + // const id = event.row && event.row.id; + // if (!this.rowStatus) { + // return; + // } - // TEST - onSelect({ selected }) { - console.log('Select Event', selected, this.selected); - } + // this.rowStatus.forEach((status) => { + // const bCond = status.id === id; + // status["selected"] = bCond && !status["selected"]; + // }); - onActivate(event) { - console.log('Activate Event', event); - } + // this.setSelected(); + // this.rowStatusChange.emit(this.rowStatus); + // } }