Merge branch 'feature_display_single_metadata' into 'master'

Feature display single metadata

See merge request refonte-data/portail-data!2

webapp/src/app/geosource/components/metadata-detail/metadata-detail.component.html

+<div class="container">
+<div class="row">
+  <div class="col-md-8">
+      <mat-card>
+          <h2> {{ metadata.title }} </h2>   
+          <p>{{ metadata.abstract }}</p>
+          <h5>Mots-clés</h5>
+        <span *ngIf="metadata.keyword"> {{metadata.keyword.join(", ")}} </span>
+      </mat-card>
+  </div>
+  <div class="col-md-4">
+      <mat-card>
+        <strong>Informations</strong>
+        <p> <mat-icon>perm_identity</mat-icon> {{ metadata.contact[0].name }}</p>
+        <p> <mat-icon>copyright</mat-icon> {{ metadata.uri[0].name }}</p> 
+        <p> <mat-icon>update</mat-icon> {{ metadata.date_publication[0] | date: 'dd LLL yyyy'}} </p> 
+        <p *ngFor="let topic of metadata.getCategories()"> 
+            <mat-icon>brightness_2</mat-icon> <span class="category">{{ topic}} </span>
+        </p> 
+      </mat-card>
+  </div>
+</div>
+
+<div class="row">
+    <div class="col-md-8">
+        <mat-card>
+            <strong> Télécharger les sources </strong>   
+       
+        </mat-card>
+    </div>
+
+  </div>
+
+</div>
+
+

webapp/src/app/geosource/components/metadata-detail/metadata-detail.component.scss

+.row {
+    margin: 5px 0;
+}
+
+.mat-icon {
+    vertical-align: middle;
+}
+
+.category {
+    background-color: black;
+    color: white;
+    padding: 2px;
+}
\ No newline at end of file

webapp/src/app/geosource/components/metadata-detail/metadata-detail.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataDetailComponent } from './metadata-detail.component';
+
+describe('MetadataDetailComponent', () => {
+  let component: MetadataDetailComponent;
+  let fixture: ComponentFixture<MetadataDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MetadataDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetadataDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

webapp/src/app/geosource/components/metadata-detail/metadata-detail.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Metadata } from '../../models';
+import { Observable } from 'rxjs/Observable';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { MetadataService } from '../../services';
+import 'rxjs/add/operator/switchMap';
+
+@Component({
+  selector: 'app-metadata-detail',
+  templateUrl: './metadata-detail.component.html',
+  styleUrls: ['./metadata-detail.component.scss']
+})
+export class MetadataDetailComponent implements OnInit {
+
+  metadata: Metadata;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private metadataService: MetadataService
+  ) { }
+
+  ngOnInit() {
+
+    this.route.paramMap
+      .switchMap((params: ParamMap) => this.metadataService.getMetadataById(params.get('id')))
+      .subscribe((metadata: Metadata) => this.metadata = metadata);
+  }
+}

webapp/src/app/geosource/geosource-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MetadataListComponent } from './components/metadata-list/metadata-list.component';
+import { MetadataDetailComponent } from './components/metadata-detail/metadata-detail.component';
 
 const routes: Routes = [
   {
-    path: 'datasets',
+    path: 'metadata',
     component: MetadataListComponent
+  },
+  {
+    path: 'metadata/:id',
+    component: MetadataDetailComponent
   }
 ];
 

webapp/src/app/geosource/geosource.module.ts

@@ -5,6 +5,7 @@ import { GeosourceRoutingModule } from './geosource-routing.module';
 import { MetadataListComponent } from './components/metadata-list/metadata-list.component';
 import { GeosourceServices } from './services';
 import { AppMaterialModule } from '../app.material.module';
+import { MetadataDetailComponent } from './components/metadata-detail/metadata-detail.component';
 
 @NgModule({
   imports: [
@@ -12,7 +13,7 @@ import { AppMaterialModule } from '../app.material.module';
     GeosourceRoutingModule,
     AppMaterialModule
   ],
-  declarations: [MetadataListComponent],
+  declarations: [MetadataListComponent, MetadataDetailComponent],
   providers: [
     ...GeosourceServices
   ]

webapp/src/app/geosource/models/metadata.model.ts

 export interface IMetadata {
   'title': string;
   'abstract': string;
-  'topic_category': Array<string>;
+  'keyword': string[];
+  'uri': IUri[];
+  'contact': IContact [];
+  'date_publication': string[];
+  'topic_category': string[];
+}
+
+interface IContact {
+  'country': string;
+  'postcode': string;
+  'organization': string;
+  'name': string;
+  'city': string;
+  'role': string;
+  'address': string;
+  'email': string;
+}
+
+interface IUri {
+    'description': string;
+    'url':  string;
+    'protocol':  string;
+    'name':  string;
 }
 
 export class Metadata implements IMetadata {
   'title': string;
   'abstract': string;
-  'topic_category': Array<string>;
-  'date_publication': Date;
+  'keyword': string[];
+  'contact': IContact[];
+  'uri': IUri[];
+  'date_publication': string[];
+  'topic_category': string[];
 
   constructor(data?: IMetadata) {
     Object.assign(this, data);
   }
+
+  getCategories(): string[] {
+    return this.topic_category;
+  }
 }

webapp/src/app/geosource/services/metadata.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { IElasticsearchResponse } from '../models';
+import { IElasticsearchResponse, IMetadata, Metadata } from '../models';
 import { Observable } from 'rxjs/Observable';
 
 // To be removed when using real api
@@ -26,4 +26,104 @@ export class MetadataService {
     // return Observable.of(a);
   }
 
+  getMetadataById(id: number | string): Observable<IMetadata> {
+    const metadata = {
+      '_index' : '16a9a65.meta',
+      '_type' : '16a9a65.meta',
+      '_id' : '0e8ed80',
+      '_score' : 1.0,
+      '_source' : {
+        'metadata-fr' : {
+          'contact' : [
+            {
+              'country' : 'France',
+              'postcode' : '69487',
+              'organization' : 'SYTRAL',
+              'name' : 'Administrateur OpenData TCL',
+              'city' : 'LYON',
+              'role' : 'pointOfContact',
+              'address' : '21 Boulevard Vivier Merle',
+              'email' : 'contactopendata@tcl.fr'
+            }
+          ],
+          'use_limitation' : [ ],
+          'rights' : [
+            'otherRestrictions',
+            'Pas de restriction d\'accès public selon INSPIRE'
+          ],
+          'spatial_type' : [ ],
+          'abstract' : 'Les données du réseau de transport en commun TCL présentent des informations relatives aux lignes, aux arrêts, aux horaires et aux services sur le territoire du Grand Lyon.',
+          'denominators' : [
+            '10000'
+          ],
+          'topic_category' : [
+            'transportation',
+            'environment'
+          ],
+          'keyword' : [
+            'Réseaux de transport',
+            'Services d\'utilité publique et services publics',
+            'données ouvertes'
+          ],
+          'bbox' : {
+            'type' : 'Polygon',
+            'coordinates' : [
+              [
+                [
+                  '4.681',
+                  '45.55'
+                ],
+                [
+                  '5.067',
+                  '45.55'
+                ],
+                [
+                  '5.067',
+                  '45.917'
+                ],
+                [
+                  '4.681',
+                  '45.917'
+                ],
+                [
+                  '4.681',
+                  '45.55'
+                ]
+              ]
+            ]
+          },
+          'use_constraints' : [
+            'license'
+          ],
+          'lineage' : 'Données provenant de la base géographique et topologique TCL SYTRAL.',
+          'title' : 'Réseau de transport en commun du Grand Lyon (TCL Sytral)',
+          'type' : 'series',
+          'classification' : [ ],
+          'resolution' : [ ],
+          'schema' : 'http://www.isotc211.org/2005/gmd',
+          'standard' : {
+            'version' : '1.0',
+            'name' : 'ISO 19115:2003/19139'
+          },
+          'date_publication' : [
+            '2015-01-15'
+          ],
+          'href' : 'https://download.data.grandlyon.com/catalogue/srv/eng/csw?request=GetRecordById&service=CSW&version=2.0.2&namespace=xmlns%28csw=http://www.opengis.net/cat/csw%29&resultType=results&outputSchema=http://www.isotc211.org/2005/gmd&outputFormat=application/xml&typeNames=csw:Record&elementSetName=full&constraintLanguage=CQL_TEXT&constraint_language_version=1.1.0&id=16a9a657-e938-484e-a067-5cdacd7a0419',
+          'identifier' : '16a9a657-e938-484e-a067-5cdacd7a0419',
+          'uri' : [
+            {
+              'description' : 'Description des conditions d\'utilisation de la Licence Ouverte',
+              'url' : 'https://download.data.grandlyon.com/files/grandlyon/LicenceOuverte.pdf',
+              'protocol' : 'WWW:LINK-1.0-http--link',
+              'name' : 'Licence Ouverte'
+            }
+          ]
+        }
+      }
+    };
+
+    const objMetadata = new Metadata(metadata['_source']['metadata-fr']);
+    return Observable.of(objMetadata);
+  }
+
 }

webapp/src/index.html

@@ -8,6 +8,8 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
 </head>
 
 <body>