Commit 3be77400 authored by ndurand's avatar ndurand
Browse files

ajout des énumérations pour les choix multiples

parent e3892ff6
import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { ActivatedRoute } from '@angular/router';
import { FeatureCollection } from 'src/app/models/layer-type';
import { TableViewDataService } from 'src/app/services/table-view-data.service';
import { DecimalPipe } from '@angular/common';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
styleUrls: ['./main.component.css'],
providers: [TableViewDataService, DecimalPipe]
})
export class MainComponent implements OnInit {
/** */
private uuid: string;
/** */
private title: string = "";
constructor(private activatedRoute: ActivatedRoute, private dataService: DataService) { }
constructor(private activatedRoute: ActivatedRoute, private dataService: DataService, private tableViewData: TableViewDataService,) { }
ngOnInit() {
/** */
console.log(this.activatedRoute.snapshot.paramMap.get('uuid'))
/** uuid */
let uuid: string;
if(this.activatedRoute.snapshot.paramMap.get('uuid')){
this.uuid = this.activatedRoute.snapshot.paramMap.get('uuid');
console.log(this.uuid);
uuid = this.activatedRoute.snapshot.paramMap.get('uuid');
}
/** */
/** config */
this.dataService.getContifData(this.uuid).subscribe( response => {
if(response && response.metadata && response.metadata.title){
this.title = response.metadata.title;
}
});
/** Data */
this.dataService.getData(uuid).subscribe((featureCollection)=>{
if(featureCollection && featureCollection.features && featureCollection.features.length > 0){
this.tableViewData.initFeatures( featureCollection.features );
}
})
/** Structure */
this.dataService.getStructuByUuid(uuid).subscribe(structures => {
if(structures){
this.tableViewData.structures = structures ;
}
})
/** Enumeration */
this.dataService.getEnumByUuid(uuid).subscribe(enumerations => {
if(enumerations){
this.tableViewData.enumerations = enumerations;
}
})
}
......
......@@ -12,7 +12,7 @@
<ng-container [ngSwitch]="structure.data_type">
<ng-container *ngSwitchCase="'character varying'">
<div class="form-group row">
<label [for]="structure.column_name" class="col-sm-2 col-form-label">{{structure.column_name}}</label>
<label [for]="structure.column_name" class="col-sm-3 col-form-label">{{structure.column_name}}</label>
<div class="col-sm-5">
<input type="text" class="form-control" [(ngModel)]="feature.properties[structure.column_name]" [name]="structure.column_name"
[maxlength]="structure.character_maximum_length" [required]="!structure.is_nullable"/>
......@@ -21,19 +21,22 @@
</ng-container>
<ng-container *ngSwitchCase="'text'">
<div *ngIf="!structure.domain_name" class="form-group row">
<label [for]="structure.column_name" class="col-sm-2 col-form-label">{{structure.column_name}}</label>
<label [for]="structure.column_name" class="col-sm-3 col-form-label">{{structure.column_name}}</label>
<div class="col-sm-5">
<textarea class="form-control" class="col-9 px-0 form-control" cols="15" rows="3"
<textarea class="form-control" class="col-9 px-0 form-control" cols="20" rows="3"
[(ngModel)]="feature.properties[structure.column_name]" [required]="!structure.is_nullable"
[name]="structure.column_name">
</textarea>
</div>
</div>
<td *ngIf="structure.domain_name" class="fiche-modify">
</td>
<div *ngIf="structure.domain_name && structure.domain_name !== 'phone_number'" class="form-group row">
<label [for]="structure.column_name" class="col-sm-2 col-form-label">{{structure.column_name}}</label>
<div class="form-group row" *ngIf="structure.domain_name && !domainNameFile[structure.domain_name]">
<label [for]="structure.column_name" class="col-sm-3 col-form-label">{{structure.column_name}}</label>
<div class="col-sm-5">
<input type="text" class="form-control" [(ngModel)]="feature.properties[structure.column_name]" [name]="structure.column_name"/>
</div>
</div>
<div *ngIf="structure.domain_name && domainNameFile[structure.domain_name]" class="form-group row">
<label [for]="structure.column_name" class="col-sm-3 col-form-label">{{structure.column_name}}</label>
<label class="custom-file-upload btn btn-modal px-3 py-2 mb-0 mr-2">
<input (change)="setImage($event, feature, structure.column_name)" [name]="structure.column_name" type="file" accept=".jpeg, .jpg, .png"
[required]="!structure.is_nullable"/>
......@@ -44,7 +47,7 @@
</ng-container>
<ng-container *ngSwitchCase="'integer'">
<div class="form-group row">
<label [for]="structure.column_name" class="col-sm-2 col-form-label">{{structure.column_name}}</label>
<label [for]="structure.column_name" class="col-sm-3 col-form-label">{{structure.column_name}}</label>
<div class="col-sm-5">
<input type="number" class="form-control" [(ngModel)]="feature.properties[ structure.column_name ]"
[maxlength]="structure.character_maximum_length"
......@@ -78,7 +81,7 @@
</ng-container>
<ng-container *ngSwitchCase="'date'">
<div class="form-group row">
<label [for]="structure.column_name" class="col-sm-2 col-form-label">{{structure.column_name}}</label>
<label [for]="structure.column_name" class="col-sm-3 col-form-label">{{structure.column_name}}</label>
<div class="col-sm-5">
<input type="date" class="form-control" [(ngModel)]="feature.properties[ structure.column_name ]"
[maxlength]="structure.character_maximum_length"
......@@ -88,36 +91,41 @@
</div>
</ng-container>
<ng-container *ngSwitchCase="'USER-DEFINED'">
<td *ngIf="editing && enum" class="fiche-modify">
<select class="form-control custom-select p-1" [(ngModel)]="feature.properties[ structure.column_name ]"
[required]="!structure.is_nullable" [name]="structure.column_name">
<option [ngValue]="'noPresetSelected'" hidden selected disabled>Sélectionnez un ou plusieurs paramètres</option>
<option
*ngFor="let item of getEnum(structure.udt_name)"
[ngValue]="item">
<span>{{ item }}</span>
</option>
</select>
</td>
<div *ngIf="structure.udt_name" class="form-group row">
<label [for]="structure.column_name" class="col-sm-3 col-form-label">{{structure.column_name}}</label>
<div class="col-sm-5">
<select class="form-control " [(ngModel)]="feature.properties[ structure.column_name ]"
[required]="!structure.is_nullable" [name]="structure.column_name">
<option hidden selected disabled>Sélectionnez un ou plusieurs paramètres</option>
<option
*ngFor="let item of getEnumByUdtName(structure.udt_name)" [ngValue]="item">
<span>{{ item }}</span>
</option>
</select>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="'ARRAY'">
<td *ngIf="enum" class="fiche-modify">
<ng-multiselect-dropdown
[placeholder]="'Sélectionnez un ou plusieurs paramètres'"
class="form-control custom-select p-1"
[data]="getEnum(structure.udt_name)"
[(ngModel)]="feature.properties[ structure.column_name ]"
[settings]="dropdownSettings"
[required]="!structure.is_nullable"
[name]="structure.column_name">
</ng-multiselect-dropdown>
</td>
<div *ngIf="structure.udt_name" class="form-group row">
<label [for]="structure.column_name" class="col-sm-3 col-form-label">{{structure.column_name}}</label>
<div class="col-sm-8">
<ng-multiselect-dropdown
[placeholder]="'Sélectionnez un ou plusieurs paramètres'"
class=""
[data]="getEnumByUdtName(structure.udt_name)"
[(ngModel)]="feature.properties[ structure.column_name ]"
[settings]="dropdownSettings"
[required]="!structure.is_nullable"
[name]="structure.column_name">
</ng-multiselect-dropdown>
</div>
</div>
</ng-container>
<ng-container *ngSwitchDefault> <!-- 'double precision', 'numeric', 'smallint', 'real', 'bigint' -->
<div class="form-group row">
<label [for]="structure.column_name" class="col-sm-2 col-form-label">{{structure.column_name}}</label>
<label [for]="structure.column_name" class="col-sm-3 col-form-label">{{structure.column_name}}</label>
<div class="col-sm-5">
<input type="text" class="form-control" [(ngModel)]="feature.properties[ structure.column_name ]"
<input type="number" class="form-control" [(ngModel)]="feature.properties[ structure.column_name ]"
[maxlength]="structure.character_maximum_length"
[required]="!structure.is_nullable"
[name]="structure.column_name"/>
......
......@@ -18,39 +18,51 @@ export class ModalEditComponent {
/** */
private feature : Feature ;
/** */
private domainNameFile = {file: true, image: true }
/** */
private structures: Array<Structure> = [];
/** */
private enumerations: Object;
constructor(config: NgbModalConfig, private modalService: NgbModal, private tableViewData: TableViewDataService) {
// customize default values of modals used by this component tree
config.backdrop = 'static';
config.keyboard = false;
}
privateCreatePropertie(test :Feature){
console.log(test);
}
/** */
open(content) {
console.log(this.featureIndex, this.tableViewData.getFeatureByIndex(this.featureIndex));
this.enumerations = this.tableViewData.enumerations;
this.structures = this.tableViewData.structures;
if(this.tableViewData.getFeatureByIndex(this.featureIndex)){
this.feature = JSON.parse(JSON.stringify( this.tableViewData.getFeatureByIndex(this.featureIndex) ));
console.log(this.feature.properties.tep);
this.structures = this.tableViewData.structures;
this.modalService.open(content,{size: 'lg'});
}
else{
console.log(this.feature);
let properties = {};
this.structures = this.tableViewData.structures;
this.structures.forEach(structure => {
this.tableViewData.structures.forEach(structure => {
properties[structure.column_name] = "";
});
// let newFeature: Feature = objetTmp;
this.feature = <Feature>{properties: properties};
console.log(this.feature)
this.modalService.open(content,{size: 'lg'});
this.modalService.open(content,{size: 'lg'});
}
}
/** */
getEnumByUdtName(udtName: string) : Array<string> {
for(let key in this.enumerations){
if(key === udtName){
return this.enumerations[key];
}
}
return [];
}
}
......@@ -12,17 +12,17 @@
<option *ngFor="let choiceValue of pageSizeChoice" [ngValue]="choiceValue">{{choiceValue}}</option>
</select>
</div>
<table class="table table-striped" *ngIf="featureCollection && featureCollection.features && propertiesName">
<table class="table table-striped" >
<thead>
<tr>
<th scope="col" *ngFor="let name of propertiesName; index as k" [sortable]="name" (sort)="onSort($event)">{{name}}</th>
<th scope="col" *ngFor="let structure of structures$ | async; index as k" [sortable]="structure.column_name" (sort)="onSort($event)">{{structure.column_name}}</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let feature of features$ | async ; index as i">
<td *ngFor="let key of propertiesName; index as j" scope="row">
{{feature.properties[key]}}
<td *ngFor="let structure of structures$ | async; index as j" scope="row">
{{feature.properties[structure.column_name]}}
</td>
<td class="table-button-action">
<app-modal-edit [featureIndex]="i" ></app-modal-edit>
......
......@@ -7,16 +7,17 @@ import { Observable } from 'rxjs';
import { DecimalPipe } from '@angular/common';
import { TableViewDataService } from 'src/app/services/table-view-data.service';
import { EnvService } from 'src/app/services/env.service';
import { Structure } from 'src/app/models/structure';
@Component({
selector: 'app-table-view',
templateUrl: './table-view.component.html',
styleUrls: ['./table-view.component.css'],
providers: [TableViewDataService, DecimalPipe]
})
export class TableViewComponent implements OnInit {
/** */
private propertiesName: string[] = [];
private properctiesName: string[] = [];
private structures$: Observable<Structure[]>;
/** */
private featureCollection: FeatureCollection;
......@@ -33,55 +34,16 @@ export class TableViewComponent implements OnInit {
/** */
constructor(
private activatedRoute: ActivatedRoute,
private dataService: DataService,
private tableViewDataService: TableViewDataService,
private envService: EnvService
) {
this.features$ = this.tableViewDataService.features$;
this.structures$ = this.tableViewDataService.structures$;
this.total$ = this.tableViewDataService.total$;
this.tableViewDataService.searchFromUrlParam();
}
/** */
ngOnInit() {
this.loadAndDisplayData();
}
/** */
private loadAndDisplayData(){
let uuid: string;
if(this.activatedRoute.snapshot.paramMap.get('uuid')){
uuid = this.activatedRoute.snapshot.paramMap.get('uuid');
}
/** */
this.dataService.getData(uuid).subscribe((response)=>{
this.featureCollection = response;
if(this.featureCollection && this.featureCollection.features && this.featureCollection.features.length > 0){
this.tableViewDataService.initFeatures( this.featureCollection.features );
}
})
this.dataService.getStructuByUuid(uuid).subscribe(response => {
if(response){
response.forEach(structure => {
this.propertiesName.push(structure.column_name);
})
this.tableViewDataService.structures = response;
}
})
}
/** */
get features(): Feature[] {
return this.featureCollection.features
.map((feature, i) => ({id: i + 1, ...feature}))
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
ngOnInit() {
this.tableViewDataService.searchFromUrlParam();
}
onSort({column, direction}: SortEvent) {
......
......@@ -18,12 +18,12 @@ export class DataService {
private envService: EnvService,
){}
/** */
/** Donnée tabulaire */
getData(uuid: string): Observable<FeatureCollection> {
return this.http.get<FeatureCollection>( this.envService.catalogueUrl + '/api/data/' + uuid, this.httpOption);
}
/** */
/** Config (pour le titre)*/
getContifData(uuid: string): Observable<ConfigData> {
// let request = this.envService.geonetworkUrl + "/srv/fre/q?_content_type=json&fast=index&uuid=" + uuid;
let request = "assets/dev_files/configData.json"
......@@ -31,7 +31,7 @@ export class DataService {
return this.http.get<ConfigData>(request, this.httpOption);
}
/** */
/** Pour récuperrer les fichier html (header/footer) */
loadHtmlContentByUuid(uuid: string, type: string): Promise<string>{
let retour: string = "";
......@@ -49,8 +49,14 @@ export class DataService {
});
}
/** */
/** Structure */
getStructuByUuid(uuid: string): Observable< Array<Structure> >{
return this.http.get<Array<Structure>>( this.envService.catalogueUrl + '/api/structure/' + uuid, this.httpOption)
}
/** Enumeration */
getEnumByUuid(uuid: string): Observable< Object >{
return this.http.get<Object>(this.envService.catalogueUrl + "/api/enum/" + uuid, this.httpOption);
}
}
......@@ -64,7 +64,11 @@ export class TableViewDataService {
private _features: Array<Feature> = [];
/** */
private _structures$ = new BehaviorSubject<Structure[]>([]);
private _structures: Array<Structure> = [];
/** */
private _enumerations: Object;
private _state: State = {
page: 1,
......@@ -89,7 +93,8 @@ export class TableViewDataService {
this._search$.next();
}
get structures$() {return this._structures$.asObservable();}
get features$() { return this._features$.asObservable(); }
get total$() { return this._total$.asObservable(); }
get loading$() { return this._loading$.asObservable(); }
......@@ -97,7 +102,9 @@ export class TableViewDataService {
get pageSize() { return this._state.pageSize; }
get searchTerm() { return this._state.searchTerm; }
get structures(): Array<Structure> {return this._structures;}
get enumerations() { return this._enumerations; }
get structures(){ return this._structures;}
set page(page: number) { this._set({page}); }
set pageSize(pageSize: number) { this._set({pageSize}); }
......@@ -105,8 +112,8 @@ export class TableViewDataService {
set sortColumn(sortColumn: string) { this._set({sortColumn}); }
set sortDirection(sortDirection: SortDirection) { this._set({sortDirection}); }
set structures(structures: Array<Structure>){ this._structures = structures;}
set structures(structures: Array<Structure>){ this._structures = structures;this._structures$.next(this._structures )}
set enumerations(enumerations: Object) {this._enumerations = enumerations; }
public getFeatureByIndex(index: number){
return this._features[index];
......@@ -115,7 +122,7 @@ export class TableViewDataService {
public searchFromUrlParam(){
let locationUrl = new URL(window.location.href);
let searchTerm = locationUrl.searchParams.get(this.envService.fitlerOnAllColumn); console.log(locationUrl.searchParams.get('q'));
let searchTerm = locationUrl.searchParams.get(this.envService.fitlerOnAllColumn);
let searchField = locationUrl.searchParams.get(this.envService.filterColumnField);
searchTerm = searchField ? locationUrl.searchParams.get(this.envService.filterColumnValue) : searchTerm;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment