Commit c5ae6349 authored by ncastejon's avatar ncastejon
Browse files

Merge branch 'fusion-table-map-universe' of...

Merge branch 'fusion-table-map-universe' of https://gitlab.alpha.grandlyon.com/refonte-data/portail-data into fusion-table-map-universe
parents e5a9683a 900d1094
......@@ -3,12 +3,12 @@
<app-restricted-access-banner></app-restricted-access-banner>
</div>
<div class="table-map-header">
<div>
<div class="left-section">
<div class="dropdown properties-dropdown" [ngClass]="{'is-active': displayColumnsMenu}"
(clickOutside)="closeColumsMenu()">
<div class="dropdown-trigger">
<button class="button button-with-icon" aria-haspopup="true" aria-controls="dropdown-menu"
(click)="toogleColumsMenu()" i18n="@@dataset.data.customizeButton">
(click)="toogleColumsMenu()">
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
......@@ -21,6 +21,29 @@
</div>
</div>
</div>
<div class="search-bar">
<div class="field has-addons has-addons-centered is-centered">
<div class="control research-input" [ngClass]="{'has-icons-right': searchInput.value}">
<input type="text" class="input" [formControl]="searchInput" placeholder="Filter records"
i18n-placeholder="@@dataset.data.filterReccordPlaceholder" (keydown.enter)="searchChanged()" />
<span class="icon is-small is-right reset-research-icon" *ngIf="searchInput.value"
(click)="resetResearch()">
<i class="fas fa-times-circle"></i>
</span>
</div>
<div class="control button-research">
<button class="button is-medium" (click)="searchChanged()">
<span class="icon">
<img src="./assets/img/picto_search.svg" alt="Picto search">
<ng-template #spinner>
<i class="fas fa-spinner fa-spin has-text-danger"></i>
</ng-template>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="right-section">
<button class="button button-toogle-table-map" type="button" (click)="toogleTable()" *ngIf="hasTable"
......@@ -44,7 +67,8 @@
<div class="table-map-container">
<div class="table-component-container" *ngIf="hasTable && tableIsEnabled"
[ngClass]="{'is-fullwidth': !hasMap || (hasMap && !mapIsEnabled) }">
<app-dataset-table [selectedProperties]="selectedProperties"></app-dataset-table>
<app-dataset-table [selectedProperties]="selectedProperties">
</app-dataset-table>
</div>
<div class="map-component-container" *ngIf="hasMap && mapIsEnabled">
<app-dataset-map></app-dataset-map>
......
......@@ -15,6 +15,10 @@
height: 2.25rem;
}
.left-section {
display: flex;
}
.properties-dropdown button {
background-image: url('../../../../../assets/img/picto_colonnes.svg');
background-size: 36px 36px;
......@@ -31,6 +35,45 @@
margin-left: 1rem;
}
.left-section .button {
margin-right: 1rem;
}
.button-research button {
background-color: $blue-color;
.icon {
color: white;
}
}
.search-bar {
.field {
height: 100%;
.reset-research-icon {
cursor: pointer;
pointer-events: auto;
i {
font-size: 0.875rem;
}
}
.button,
.input,
.reset-research-icon {
height: 100%;
}
.input {
width: 18.75rem;
box-shadow: none;
}
}
}
.button-toogle-table-map {
width: 100px;
justify-content: flex-start;
......
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { DatasetDetailService } from '../../../services';
import { linkFormats } from '../../../models/metadata.model';
import { DatasetMapComponent } from '../dataset-map/dataset-map.component';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-dataset-table-map',
templateUrl: './dataset-table-map.component.html',
styleUrls: ['./dataset-table-map.component.scss'],
})
export class DatasetTableMapComponent implements OnInit {
export class DatasetTableMapComponent implements OnInit, OnDestroy {
subscriptions: Subscription[] = [];
@ViewChild(DatasetMapComponent) datasetMapComponent: DatasetMapComponent;
......@@ -21,6 +25,9 @@ export class DatasetTableMapComponent implements OnInit {
properties: string[];
selectedProperties: string[] = []; // Array of columns to be displayed
// search
searchInput = new FormControl('');
constructor(
private _datasetDetailService: DatasetDetailService,
) {
......@@ -28,14 +35,23 @@ export class DatasetTableMapComponent implements OnInit {
this.selectedProperties = Array.from(this.properties);
}
ngOnInit() { }
ngOnInit() {
// Intialize the search value with the value from the service in order to keep it when navigating in tabs
this.searchInput.setValue(this._datasetDetailService.searchString);
}
ngOnDestroy() {
this.subscriptions.forEach((sub) => {
sub.unsubscribe();
});
}
toogleFullscreen() {
this.fullscreen = !this.fullscreen;
// Redraw the map
setTimeout(() => {
this.datasetMapComponent.reDraw();
// tslint:disable-next-line: align
// tslint:disable-next-line: align
}, 1);
}
......@@ -44,7 +60,7 @@ export class DatasetTableMapComponent implements OnInit {
this.mapIsEnabled = !this.mapIsEnabled;
setTimeout(() => {
this.datasetMapComponent.reDraw();
// tslint:disable-next-line: align
// tslint:disable-next-line: align
}, 1);
}
}
......@@ -54,7 +70,7 @@ export class DatasetTableMapComponent implements OnInit {
this.tableIsEnabled = !this.tableIsEnabled;
setTimeout(() => {
this.datasetMapComponent.reDraw();
// tslint:disable-next-line: align
// tslint:disable-next-line: align
}, 1);
}
}
......@@ -106,4 +122,13 @@ export class DatasetTableMapComponent implements OnInit {
}
}
resetResearch() {
this.searchInput.setValue('');
this._datasetDetailService.searchChanged('');
}
searchChanged() {
this._datasetDetailService.searchChanged(this.searchInput.value);
}
}
import { Component, OnInit, ElementRef, QueryList, ViewChildren, OnDestroy, Input } from '@angular/core';
import { DatasetDetailService } from '../../../services';
import { Data } from '../../../models';
import { Subscription } from '../../../../../../node_modules/rxjs';
import { Subscription, Observable } from '../../../../../../node_modules/rxjs';
import { debounceTime } from '../../../../../../node_modules/rxjs/operators';
import { geosource } from '../../../../../i18n/traductions';
import { FormControl } from '@angular/forms';
......@@ -31,9 +31,6 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
// Opened data
openedData: number[] = [];
// search
searchInput = new FormControl('');
previousSelectedRow: string;
// columns options
......@@ -47,18 +44,15 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
this.initializeComponent();
// Intialize the search value with the value from the service in order to keep it when navigating in tabs
this.searchInput.setValue(this._datasetDetailService.searchString);
this.subscriptions.push(
// Subscribe to input changes
this.searchInput.valueChanges.pipe(debounceTime(500)).subscribe(() => {
this.searchChanged();
}),
// Subscribe to dataset changes
this._datasetDetailService.dataset$.subscribe(() => {
this.initializeComponent();
}),
// Subscribe to input changes
this._datasetDetailService.datasetDataSearchChanged$.subscribe(() => {
this.getSearchResults();
}),
);
}
......@@ -144,9 +138,7 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
});
}
searchChanged() {
this._datasetDetailService.searchChanged(this.searchInput.value);
getSearchResults() {
this.newAsyncRequest();
// Get the new data
......
......@@ -19,6 +19,7 @@ export class DatasetDetailService {
data: DatasetChild[],
} = { total: null, data: [] };
private _datasetSubject = new Subject<any>();
private _datasetDataSearchChanged = new Subject<string>();
private _initialScrollOptions = {
from: 0,
pageSize: 30,
......@@ -215,6 +216,10 @@ export class DatasetDetailService {
return this._datasetSubject.asObservable();
}
get datasetDataSearchChanged$(): Observable<string> {
return this._datasetDataSearchChanged.asObservable();
}
get datasetChildren() {
return this._children;
}
......@@ -268,6 +273,7 @@ export class DatasetDetailService {
// Reset the from of the query to start again from the beggining
this._elasticSearchOptions.from = this._initialScrollOptions.from;
this._elasticSearchOptions.searchString = value;
this._datasetDataSearchChanged.next(value);
}
reverseSortOrder(): void {
......
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#fff" d="M25.3 24.4L22 21.2c1-1.1 1.5-2.6 1.5-4.2 0-3.6-2.9-6.5-6.5-6.5s-6.5 2.9-6.5 6.5 2.9 6.5 6.5 6.5c1.5 0 3-.5 4.1-1.4l3.3 3.2c.1.1.3.2.5.2s.3-.1.5-.2c.2-.2.2-.6-.1-.9zM11.8 17c0-2.9 2.3-5.2 5.3-5.2 2.9 0 5.3 2.3 5.3 5.2s-2.3 5.2-5.3 5.2c-3 .1-5.3-2.3-5.3-5.2z"/>
</svg>
Supports Markdown
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