Skip to content
Snippets Groups Projects
Commit 339f1180 authored by FORESTIER Fabien's avatar FORESTIER Fabien Committed by ncastejon
Browse files

Add tabs in dataset detail + routing + datset-info and dataset-map components

parent f44e6f35
No related branches found
No related tags found
No related merge requests found
Showing
with 308 additions and 91 deletions
<ng-container *ngIf="metadata">
<div class="columns">
<div class="column is-8">
<div class="card">
<div class="card-content">
<h2> {{ metadata.title }} </h2>
<p>{{ metadata.abstract }}</p>
<h5 i18n="@@global.keywords">Keywords</h5>
<span *ngIf="metadata.keyword"> {{metadata.keyword.join(", ")}} </span>
</div>
</div>
</div>
<div class="column is-4">
<div class="card">
<div class="card-content">
<strong i18n="@@global.information">Information</strong>
<p *ngIf="metadata.contact">
<span class="icon">
<i class="far fa-user"></i>
</span>
{{ metadata.contact[0].organization }}</p>
<p *ngIf="metadata.uri">
<span class="icon">
<i class="far fa-copyright"></i>
</span>
{{ metadata.use_limitation[0] }}</p>
<p *ngIf="metadata.date_publication">
<span class="icon">
<i class="far fa-clock"></i>
</span>
{{ metadata.date_publication[0] | date: 'dd LLL yyyy'}} </p>
<p *ngFor="let topic of metadata.getCategories()">
<!-- <span class="icon">
<i class="fa fa-arrow-up"></i>
</span> -->
<span class="category">{{ topic}} </span>
</p>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column is-8">
<div class="card">
<div class="card-content">
<strong> Télécharger les ressources </strong>
<!-- <mat-expansion-panel *ngFor="let uri of metadata.uri" [hideToggle]=true>
<mat-expansion-panel-header>
<mat-panel-title>
{{ uri.description }}
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<strong>URL</strong>
<p class="url-download">{{ uri.url }}</p>
</div>
</mat-expansion-panel> -->
</div>
</div>
</div>
</div>
</ng-container>
\ No newline at end of file
<div class="tabs is-boxed">
<ul>
<li [routerLink]="['info']" [routerLinkActive]="'is-active'">
<a>
<span class="icon is-small">
<i class="fas fa-info" aria-hidden="true"></i>
</span>
<span >Informations</span>
</a>
</li>
<li [routerLink]="['map']" [routerLinkActive]="'is-active'">
<a>
<span class="icon is-small">
<i class="fas fa-map" aria-hidden="true"></i>
</span>
<span>Carte</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
</span>
<span>Export</span>
</a>
</li>
</ul>
</div>
<router-outlet></router-outlet>
\ No newline at end of file
.row {
margin: 5px 0;
}
.category {
background-color: black;
color: white;
padding: 2px;
}
.file-state {
background-color: green;
}
.url-download {
color: darkred;
}
button {
min-width: 33px;
background-color: yellowgreen;
}
\ No newline at end of file
......@@ -21,9 +21,9 @@ export class DatasetDetailComponent implements OnInit {
ngOnInit() {
this._route.paramMap
.switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id')))
.subscribe((metadata: Metadata) => {
this.metadata = metadata;
});
.switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id')))
.subscribe((metadata: Metadata) => {
this.metadata = metadata;
});
}
}
<ng-container *ngIf="metadata">
<div class="columns">
<div class="column is-8">
<div class="card">
<div class="card-content">
<h2> {{ metadata.title }} </h2>
<p>{{ metadata.abstract }}</p>
<h5 i18n="@@global.keywords">Keywords</h5>
<span *ngIf="metadata.keyword"> {{metadata.keyword.join(", ")}} </span>
</div>
</div>
</div>
<div class="column is-4">
<div class="card">
<div class="card-content">
<strong i18n="@@global.information">Information</strong>
<p *ngIf="metadata.contact">
<span class="icon">
<i class="far fa-user"></i>
</span>
{{ metadata.contact[0].organization }}</p>
<p *ngIf="metadata.uri">
<span class="icon">
<i class="far fa-copyright"></i>
</span>
{{ metadata.use_limitation[0] }}</p>
<p *ngIf="metadata.date_publication">
<span class="icon">
<i class="far fa-clock"></i>
</span>
{{ metadata.date_publication[0] | date: 'dd LLL yyyy'}} </p>
<p *ngFor="let topic of metadata.getCategories()">
<!-- <span class="icon">
<i class="fa fa-arrow-up"></i>
</span> -->
<span class="category">{{ topic}} </span>
</p>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column is-8">
<div class="card">
<div class="card-content">
<strong> Télécharger les ressources </strong>
<!-- <mat-expansion-panel *ngFor="let uri of metadata.uri" [hideToggle]=true>
<mat-expansion-panel-header>
<mat-panel-title>
{{ uri.description }}
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<strong>URL</strong>
<p class="url-download">{{ uri.url }}</p>
</div>
</mat-expansion-panel> -->
</div>
</div>
</div>
</div>
</ng-container>
\ No newline at end of file
.row {
margin: 5px 0;
}
.category {
background-color: black;
color: white;
padding: 2px;
}
.file-state {
background-color: green;
}
.url-download {
color: darkred;
}
button {
min-width: 33px;
background-color: yellowgreen;
}
\ No newline at end of file
import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
import { DebugElement, Directive, Input, NO_ERRORS_SCHEMA } from '@angular/core';
import { ActivatedRoute, convertToParamMap, ParamMap } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { DatasetInfoComponent } from './dataset-info.component';
import { DatasetService} from '../../services/dataset.service';
import { Metadata } from '../../models';
import { RouterTestingModule } from '@angular/router/testing';
import 'rxjs/add/observable/of';
describe('DatasetInfoComponent', () => {
const metadata = {
title: 'Metadata Title',
abstract: 'abstract',
keyword: ['riri', 'fifi', 'loulou'],
getCategories: function() { return ['space_exploration', 'tintin_sur_la_lune']; },
} as Metadata;
describe('ngOnInit()', () => {
const metadataId = 1;
let component: DatasetInfoComponent;
let activatedRouteMock: ActivatedRoute;
let datasetServiceMock: DatasetService;
beforeEach(() => {
activatedRouteMock = {
get paramMap(): Observable<ParamMap> {
return null;
},
} as ActivatedRoute;
datasetServiceMock = jasmine.createSpyObj('datasetService', {
getMetadataById: Observable.of(metadata),
});
component = new DatasetInfoComponent(activatedRouteMock, datasetServiceMock);
});
it('should get dataset ID in path and get metadata details from service', () => {
// Given
const paramMapSpy = spyOnProperty(activatedRouteMock, 'paramMap', 'get').and
.returnValue(Observable.of(convertToParamMap({ id: metadataId })));
// When
component.ngOnInit();
// Then
expect(paramMapSpy).toHaveBeenCalled();
expect(datasetServiceMock.getMetadataById).toHaveBeenCalledWith(metadataId);
expect(component.metadata).toBe(metadata);
});
});
describe('template', () => {
let fixture: ComponentFixture<DatasetInfoComponent>;
let comp: DatasetInfoComponent;
let de: DebugElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
DatasetInfoComponent
],
imports: [
RouterTestingModule,
],
schemas: [
NO_ERRORS_SCHEMA,
],
providers: [
{
provide: DatasetService,
useValue: {
getMetadataById(): Observable<Metadata> {
return Observable.of(metadata);
},
},
},
],
}).compileComponents();
});
beforeEach(fakeAsync(() => {
fixture = TestBed.createComponent(DatasetInfoComponent);
de = fixture.debugElement;
comp = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create the component', async(() => {
expect(fixture).toBeTruthy();
}));
});
});
import { Component, OnInit } from '@angular/core';
import { Metadata } from '../../models';
import { Observable } from 'rxjs/Observable';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { DatasetService } from '../../services';
import 'rxjs/add/operator/switchMap';
@Component({
selector: 'app-dataset-info',
templateUrl: './dataset-info.component.html',
styleUrls: ['./dataset-info.component.scss']
})
export class DatasetInfoComponent implements OnInit {
metadata: Metadata;
constructor(
private _route: ActivatedRoute,
private _datasetService: DatasetService,
) {}
ngOnInit() {
this._route.parent.paramMap
.switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id')))
.subscribe((metadata: Metadata) => {
this.metadata = metadata;
});
}
}
<p>
dataset-map works!
</p>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DatasetMapComponent } from './dataset-map.component';
describe('DatasetMapComponent', () => {
let component: DatasetMapComponent;
let fixture: ComponentFixture<DatasetMapComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DatasetMapComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatasetMapComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dataset-map',
templateUrl: './dataset-map.component.html',
styleUrls: ['./dataset-map.component.scss']
})
export class DatasetMapComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { DatasetListComponent } from './dataset-list/dataset-list.component';
import { DatasetDetailComponent } from './dataset-detail/dataset-detail.component';
import { DatasetMapComponent } from './dataset-map/dataset-map.component';
import { DatasetInfoComponent } from './dataset-info/dataset-info.component';
import { SearchBarComponent } from './search-bar/search-bar.component';
import { ResearchComponent } from './research/research.component';
import { SortComponent } from './sort/sort.component';
......@@ -7,6 +9,8 @@ import { FilterListComponent } from './filter-list/filter-list.component';
import { FilterDetailComponent } from './filter-list/filter-detail/filter-detail.component';
export * from './dataset-detail/dataset-detail.component';
export * from './dataset-map/dataset-map.component';
export * from './dataset-info/dataset-info.component';
export * from './dataset-list/dataset-list.component';
export * from './filter-list/filter-list.component';
export * from './search-bar/search-bar.component';
......@@ -15,6 +19,8 @@ export * from './sort/sort.component';
export const GeosourceComponents = [
DatasetDetailComponent,
DatasetMapComponent,
DatasetInfoComponent,
DatasetListComponent,
SearchBarComponent,
ResearchComponent,
......
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DatasetListComponent, DatasetDetailComponent, ResearchComponent } from './components';
import { DatasetListComponent, DatasetDetailComponent, ResearchComponent, DatasetInfoComponent, DatasetMapComponent } from './components';
export const routes: Routes = [
{
......@@ -16,7 +16,19 @@ export const routes: Routes = [
path: 'datasets/:id',
component: DatasetDetailComponent,
children: [
{
path: '',
redirectTo: 'info',
pathMatch: 'full'
},
{
path: 'info',
component: DatasetInfoComponent
},
{
path: 'map',
component: DatasetMapComponent
}
]
},
{
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment