Skip to content

Commit

Permalink
feat: display groups sites's child
Browse files Browse the repository at this point in the history
Display group site child into table and uder properties
Use routing and id params to display property of groups site

Create service site
Add logic to check routing and child route to display reactive component
properties and table

Reviewed-by: andriacap
[Refs ticket]: #4
  • Loading branch information
andriacap authored and Maxime Vergez committed Jan 23, 2023
1 parent 7c72b3c commit cee7664
Show file tree
Hide file tree
Showing 7 changed files with 217 additions and 95 deletions.
13 changes: 13 additions & 0 deletions frontend/app/class/monitoring-site.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
import { ISite, JsonData } from "../interfaces/geom";
import { GeoJSON } from "geojson";

export enum columnNameSite{
base_site_name = "Nom",
last_visit = "Dernière visite",
nb_visits = "Nb. visites",
base_site_code = "Code",
altitude_max = "Alt.max",
altitude_min = "Alt.min"
}

export const extendedDetailsSite= {
...columnNameSite,
base_site_description: "Description",
};
export class MonitoringSite implements ISite {
altitude_max: number;
altitude_min: number;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,15 @@
<a
class="nav-link link cell-link"
(click)="navigateToDetail(row)"
matTooltip="Consulter `child0.template.label_art_def` "
matTooltip="Consulter le groupe de site"
>
<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)` "
matTooltip="Ajouter un site "
>
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@
<pnx-monitoring-properties-g [selectedObj]="sitesGroupsSelected">
</pnx-monitoring-properties-g>
</div>
<div *ngIf="!displayDetails">
<div>
<pnx-monitoring-datatable-g
[rows]="sitesGroups"
[colsname]="columnNameSiteGroup"
[rows]="rows"
[colsname]="colsname"
(onSort)="onSortEvent($event)"
[page]="page"
(onFilter)="onFilterEvent($event)"
(onSetPage)="setPage($event)"
[obj]="sitesGroups"
[obj]="obj"
(onDetailsRow)="seeDetails($event)"
></pnx-monitoring-datatable-g>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
import { Component, OnInit, Input } from "@angular/core";
import { LocationStrategy } from "@angular/common";
import { SitesGroupService } from "../../services/sites_group.service";
import {
MonitoringSitesGroup,
columnNameSiteGroup,
} from "../../class/monitoring-sites-group";
import { Page, Paginated } from "../../interfaces/page";
import {
Router
Router,
Event,
NavigationStart,
NavigationEnd,
NavigationError,
ActivatedRoute,
} from "@angular/router";
import { MonitoringSite, columnNameSite } from "../../class/monitoring-site";
import { Subscription } from "rxjs";

const LIMIT = 10;

Expand All @@ -20,25 +26,83 @@ const LIMIT = 10;
export class MonitoringSitesGroupsComponent implements OnInit {
@Input() page: Page;
@Input() sitesGroups: MonitoringSitesGroup[];
@Input() sitesChild: MonitoringSite[];
@Input() columnNameSiteGroup: typeof columnNameSiteGroup =
columnNameSiteGroup;
@Input() columnNameSite: typeof columnNameSite = columnNameSite;
@Input() sitesGroupsSelected: MonitoringSitesGroup;

@Input() rows;
@Input() colsname;
@Input() obj;

filters = {};
displayDetails: boolean = false;
path: string;
currentRoute: string = "";
id: string | null;

private routerSubscription: Subscription;

constructor(
private _sites_group_service: SitesGroupService,
private router: Router,
private location: LocationStrategy
) {
this.path = this.router.url;
this.location.onPopState(() => {
if (this.location.path() === this.path) this.displayDetails = false;
private _Activatedroute: ActivatedRoute
) // private _routingService: RoutingService
{
// TODO: Try to refactor into routingService ?
// console.log(this.id)
// this.id = this._routingService.id
// console.log(this.id)
// // this._routingService.getIdChild()
// this._routingService.idChanging.subscribe(value =>{console.log(value)})
// console.log(this.id)

this.currentRoute = "";
this.routerSubscription = this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationStart) {
// Show progress spinner or progress bar
console.log("Route change detected");
}

if (event instanceof NavigationEnd) {
// Hide progress spinner or progress bar
this.currentRoute = event.url;
this.checkChildRoute();
console.log(event);
console.log(this._Activatedroute.snapshot);
console.log(this._Activatedroute.snapshot.params);
console.log(this.id);
this.getDataAccordingTopath();
}

if (event instanceof NavigationError) {
// Hide progress spinner or progress bar

// Present error to user
console.log(event.error);
}
});
}
ngOnInit() {
this.getSitesGroups();
this.getDataAccordingTopath();
}

ngOnDestroy() {
this.routerSubscription.unsubscribe();
}

checkChildRoute() {
if (this._Activatedroute.firstChild) {
this._Activatedroute.firstChild.params.subscribe((params) => {
this.displayDetails = true;
this.id = params["id"];
});
} else {
this.displayDetails = false;
this.id = null;
}
// console.log(params);
}

getSitesGroups(page = 1, params = {}) {
Expand All @@ -51,31 +115,83 @@ export class MonitoringSitesGroupsComponent implements OnInit {
page: data.page - 1,
};
this.sitesGroups = data.items;
this.rows = this.sitesGroups;
this.obj = this.sitesGroups;
this.colsname = this.columnNameSiteGroup;
console.log("Inside getSitesGroups", this.rows);
});
}

getSitesGroupsById(page = 1, params = {}) {
this._sites_group_service
.get(page, LIMIT, params)
.subscribe((data: Paginated<MonitoringSitesGroup>) => {
this.page = {
count: data.count,
limit: data.limit,
page: data.page - 1,
};
this.sitesGroupsSelected = data.items[0];
console.log("Inside getSitesGroupsById", data.items);
});
}

getSitesGroupsChild(page = 1, params = {}) {
console.log(params);
this._sites_group_service
.getSitesChild(page, LIMIT, params)
.subscribe((data: Paginated<MonitoringSite>) => {
this.page = {
count: data.count,
limit: data.limit,
page: data.page - 1,
};

this.sitesChild = data.items;
this.rows = this.sitesChild;
this.obj = this.sitesChild;
this.colsname = this.columnNameSite;
console.log("Inside getSitesGroupsChild", this.rows);
});
}

getDataAccordingTopath(page = 1, params = {}) {
if (this.id) {
console.log("inside getDataAccording to path", this.id);
console.log("inside getDataAccording to path, params", params);
params["id_sites_group"] = this.id;
this.displayDetails = true;
this.getSitesGroupsById(
(page = 1),
(params = { id_sites_group: this.id })
);
this.getSitesGroupsChild(page, params);
} else {
this.getSitesGroups(page, params);
}
// });
}

setPage($event) {
console.log("setPage Sitesgroups Components");
this.getSitesGroups($event.page + 1, this.filters);
this.getDataAccordingTopath($event.page + 1, this.filters);
}

onSortEvent(filters) {
console.log("onSortEvent sitegroups component, filters", filters);
this.filters = filters;
this.getSitesGroups(1, this.filters);
this.getDataAccordingTopath(1, this.filters);
}

onFilterEvent(filters) {
console.log("onFilterEvent sitegroups component, filters", filters);
this.filters = filters;
this.getSitesGroups(1, this.filters);
this.getDataAccordingTopath(1, this.filters);
}

seeDetails($event) {
console.log("seeDetails", $event);
if ($event) {
this.displayDetails = true;
this.sitesGroupsSelected = $event;
this.router.navigate([
"/monitorings/sites_groups",
$event.id_sites_group,
Expand Down
4 changes: 4 additions & 0 deletions frontend/app/gnModule.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ import { MonitoringSitesGroupsComponent } from "./components/monitoring-sitesgro
import { DataTableService } from "./services/data-table.service";
import { SitesGroupService } from "./services/sites_group.service";
import { MonitoringPropertiesGComponent } from "./components/monitoring-properties-g/monitoring-properties-g.component";
import { SitesService } from "./services/sites.service";
// import { RoutingService } from "./services/routing.service";

// my module routing
const routes: Routes = [
Expand Down Expand Up @@ -109,6 +111,8 @@ const routes: Routes = [
MonitoringObjectService,
DataTableService,
SitesGroupService,
SitesService,
// RoutingService
],
bootstrap: [ModulesComponent],
schemas: [
Expand Down
98 changes: 24 additions & 74 deletions frontend/app/services/sites.service.ts
Original file line number Diff line number Diff line change
@@ -1,81 +1,31 @@
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
// import { GeoJSON } from "geojson";

import { CacheService } from "./cache.service";
import { ConfigService } from "./config.service";
import { HttpClient } from "@angular/common/http";
import { GeoJSON } from "leaflet";
interface SitesGroups{
comments?: string;
data?: any;
// geometry: any;
id_sites_group: number;
nb_sites: number;
nb_visits: number;
sites_group_code: string;
sites_group_description?: string;
sites_group_name: string;
uuid_sites_group: string;
}

interface SitesGroupsExtended extends Omit<GeoJSON.Feature, "P"|"type"> {
// properties:Omit<SitesGroups,"geometry">;
properties:SitesGroups
type:string;
}

interface Page {
count: number;
limit: number;
page: number;
}

interface PaginatedSitesGroup extends Page{
items: SitesGroupsExtended[];
}
interface CustomGeoJson {
type: "FeatureCollection";
features: SitesGroupsExtended[];
}
import { IGeomService, JsonData, ISite } from "../interfaces/geom";
import { Paginated } from "../interfaces/page";
import { MonitoringSite } from "../class/monitoring-site";

@Injectable()
export class SitesService {
constructor(
private _cacheService: CacheService
) {}

getSitesGroups(page=1, limit=10, params={}) {
return this._cacheService.request("get", `sites_groups`, {queryParams: {page, limit, ...params}});
}

setFormatToGeoJson(data:PaginatedSitesGroup):CustomGeoJson{
return {
features: data.items.map((group) => {
let {
geometry,
properties,
..._
} = group;
let result = {"geometry":geometry,"properties":properties,"type":"Feature"}
console.log("result",result)
console.log(group)
return result;
}),
type: "FeatureCollection",
};
export class SitesService implements IGeomService {
constructor(private _cacheService: CacheService) {}

get(
page: number = 1,
limit: number = 10,
params: JsonData = {}
): Observable<Paginated<MonitoringSite>> {
return this._cacheService
.request<Observable<Paginated<ISite>>>("get", `sites`, {
queryParams: { page, limit, ...params },
})
.pipe(
map((response: Paginated<ISite>) => ({
...response,
items: response.items.map((item: ISite) => item as MonitoringSite),
}))
);
}

getDataTable(data:CustomGeoJson) {
return data.features.map((groupSite) => {
let {
comments,
data,
uuid_sites_group,
id_sites_group,
sites_group_description,
...dataTable
} = groupSite.properties;
return dataTable;
});
}

}
Loading

0 comments on commit cee7664

Please sign in to comment.