Skip to content

Commit

Permalink
feat(front): Filtering table (OK)
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@andriacap
andriacap authored and Maxime Vergez committed Jan 18, 2023
1 parent 982fed9 commit a63e5cd
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 6 deletions.
13 changes: 13 additions & 0 deletions frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
74 changes: 73 additions & 1 deletion frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
114 changes: 109 additions & 5 deletions frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {}
Expand All @@ -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() {
Expand Down Expand Up @@ -119,6 +133,7 @@ export class MonitoringSitesGroupsComponent implements OnInit {
? element
: columnNameSiteGroup[element],
prop: element,
description: undefined
});
});
return this.listAllColName;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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é
/////////////////////////////////////////////////
Expand All @@ -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)
}



}

0 comments on commit a63e5cd

Please sign in to comment.