first version of export tab

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

@@ -21,7 +21,7 @@
         <span>Carte</span>
       </a>
     </li>
-    <li>
+    <li [routerLink]="['export']" [routerLinkActive]="'is-active'">
       <a>
         <span class="icon is-small">
           <i class="fas fa-external-link-alt" aria-hidden="true"></i>

webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.html

+<div class="columns">
+  <div class="column">
+    <div class="card">
+      <header class="card-header">
+        <p class="card-header-title">Ressources à télécharger</p>
+      </header>
+      <div class="card-content">
+        <div class="license-link">
+          <a (click)="toggleLicenseModal()">Licence ouverte</a>
+        </div>
+        <div class="table-container">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Format</th>
+                <th>Date d'envoi</th>
+                <th>Téléchargement</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let protocol of metadata?.uri">
+                <td>{{ protocol.protocol}}</td>
+                <td>-</td>
+                <td>
+                  <a [href]="protocol.url" target="_blank">{{ protocol.url }}</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<app-license-modal (close)="toggleLicenseModal()" [isOpen]="displayLicenseModal"></app-license-modal>
\ No newline at end of file

webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.scss

+@import "../../../../../scss/variables";
+
+.underlined {
+  text-decoration: underline;
+}
+
+.columns {
+  margin-top: 0px;
+}
+
+.license-link {
+  margin-bottom: 1rem;
+  a {
+    text-decoration: underline;
+    color: $black;
+  }
+}
+
+.table-container {
+  overflow-x: auto;
+  table {
+    tbody {
+      td {
+        word-break: break-all;
+      }
+    }
+  }
+}

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

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

webapp/src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { DatasetService } from '../../../services';
+import { Metadata } from '../../../models';
+
+@Component({
+  selector: 'app-dataset-export',
+  templateUrl: './dataset-export.component.html',
+  styleUrls: ['./dataset-export.component.scss']
+})
+export class DatasetExportComponent implements OnInit {
+
+  metadata: Metadata;
+  displayLicenseModal = false;
+
+  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;
+    });
+  }
+
+  toggleLicenseModal() {
+    this.displayLicenseModal = !this.displayLicenseModal;
+  }
+
+}

webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.html

+<div class="modal" [ngClass]="{'is-active': isOpen}">
+  <div class="modal-background" (click)="closeSelf()"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Présentation de la licence ouverte</p>
+      <button class="delete" aria-label="close" (click)="closeSelf()"></button>
+    </header>
+    <section class="modal-card-body">
+      <p>
+        Vous pouvez réutiliser « l’Information » rendue disponible par le « Producteur » dans les libertés et les conditions prévues
+        par la présente licence.
+      </p>
+      <p>
+        La réutilisation de l’Information diffusée sous cette licence.
+      </p>
+      <p>
+        Le « Producteur » garantit au « Réutilisateur » le droit personnel, non exclusif et gratuit, de réutilisation de « l’Information
+        » soumise à la présente licence, dans le monde entier et pour une durée illimitée, dans les libertés et les conditions
+        exprimées ci-dessous.
+      </p>
+      <p>
+        Vous êtes libre de réutiliser « l’Information » :
+      </p>
+      <ul>
+        <li>Reproduire, copier, publier et transmettre « l’Information »</li>
+        <li>Diffuser et redistribuer « l’Information »</li>
+        <li>Adapter, modifier, extraire et transformer à partir de « l’Information », notamment pour créer des « Informations
+          dérivées »</li>
+        <li>Exploiter « l’Information » à titre commercial, par exemple en la combinant avec d’autres « Informations », ou en
+          l’incluant dans votre propre produit ou application</li>
+      </ul>
+
+      <p>Sous réserve de :</p>
+      <ul>
+        <li>
+          Mentionner la paternité de « l’Information » : sa source (a minima le nom du « Producteur ») et la date de sa dernière mise
+          à jour. Le « Réutilisateur » peut notamment s’acquitter de cette condition en indiquant un ou des liens hypertextes
+          (URL) renvoyant vers « l’Information » et assurant une mention effective de sa paternité.
+        </li>
+      </ul>
+      <p>
+        Cette mention de paternité ne doit ni conférer un caractère officiel à la réutilisation de « l’Information », ni suggérer
+        une quelconque reconnaissance ou caution par le « Producteur », ou par toute autre entité publique, du « Réutilisateur
+        » ou de sa réutilisation.
+      </p>
+
+      <h2>Responsabilité</h2>
+      <p>
+        « L’Information » est mise à disposition telle que produite ou reçue par le « Producteur », sans autre garantie expresse
+        ou tacite qui n’est pas prévue par la présente licence.
+      </p>
+      <p>
+        Le « Producteur » garantit qu’il met à disposition gratuitement « l’Information » dans les libertés et les conditions définies
+        par la présente licence. Il ne peut garantir l’absence de défauts ou d’irrégularités éventuellement contenues dans
+        « l’Information ». Il ne garantit pas la fourniture continue de « l’Information ». Il ne peut être tenu pour responsable
+        de toute perte, préjudice ou dommage de quelque sorte causé à des tiers du fait de la réutilisation.
+      </p>
+      <p>
+        Le « Réutilisateur » est le seul responsable de la réutilisation de « l’Information ». La réutilisation ne doit pas induire
+        en erreur des tiers quant au contenu de « l’Information », sa source et sa date de mise à jour.
+      </p>
+      <h2>Droits de propriété intellectuelle</h2>
+      <p>
+        Le « Producteur » garantit que « l’Information » ne contient pas de droits de propriété intellectuelle appartenant à des
+        tiers.
+      </p>
+      <p>
+        Les éventuels « Droits de propriété intellectuelle » détenus par le « Producteur » sur des documents contenant « l’Information
+        » ne font pas obstacle à la libre réutilisation de « l’Information ». Lorsque le « Producteur » détient des « Droits
+        de propriété intellectuelle » sur des documents qui contiennent « l’Information », il les cède de façon non exclusive,
+        à titre gracieux, pour le monde entier et pour toute la durée des « Droits de propriété intellectuelle », au « Réutilisateur
+        » qui peut en faire tout usage conformément aux libertés et aux conditions définies par la présente licence.
+      </p>
+      <h2>Compatibilité de la présente licence</h2>
+      <p>
+        Pour faciliter la réutilisation des « Informations », cette licence a été conçue pour être compatible avec toute licence
+        libre qui exige a minima la mention de paternité. Elle est notamment compatible avec les licences « Open Government
+        Licence » (OGL) du Royaume-Uni, « Creative Commons Attribution 2.0 » (CC-BY 2.0) de Creative Commons et « Open Data
+        Commons Attribution » (ODC-BY) de l’Open Knowledge Foundation.
+      </p>
+      <p>Droit applicable</p>
+      <p>La présente licence est régie par le droit français.</p>
+    </section>
+    <footer class="modal-card-foot">
+      <button class="button" (click)="closeSelf()">Retour aux téléchargements</button>
+    </footer>
+  </div>
+</div>
\ No newline at end of file

webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.scss

+.modal-card {
+  .modal-card-body {
+    p {
+      margin-bottom: 1rem;
+    }
+
+    ul {
+      margin-bottom: 1rem;
+      padding-left: 2.5rem;
+      list-style: disc;
+    }
+
+    h2 {
+      margin-bottom: 1rem;
+      font-size:2,5rem;
+      font-weight: 600;
+    }
+  }
+
+  .modal-card-foot {
+    justify-content: center;
+  }
+}
\ No newline at end of file

webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.spec.ts

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

webapp/src/app/geosource/components/dataset-detail/dataset-export/license-modal/license-modal.component.ts

+import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-license-modal',
+  templateUrl: './license-modal.component.html',
+  styleUrls: ['./license-modal.component.scss']
+})
+export class LicenseModalComponent implements OnInit {
+
+  @Input() isOpen: boolean;
+  @Output() close = new EventEmitter<boolean>();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  closeSelf() {
+    this.close.emit(true);
+  }
+
+}

webapp/src/app/geosource/components/index.ts

 import { DatasetListComponent } from './dataset-list/dataset-list.component';
 import { DatasetDetailComponent } from './dataset-detail/dataset-detail.component';
+
+import { DatasetExportComponent } from './dataset-detail/dataset-export/dataset-export.component';
+import { LicenseModalComponent } from './dataset-detail/dataset-export/license-modal/license-modal.component';
 import { DatasetMapComponent } from './dataset-detail/dataset-map/dataset-map.component';
 import { DatasetInfoComponent } from './dataset-detail/dataset-info/dataset-info.component';
 import { DatasetDescriptionComponent } from './dataset-detail/dataset-info/dataset-description/dataset-description.component';
+
 import { SearchBarComponent } from './search-bar/search-bar.component';
 import { ResearchComponent } from './research/research.component';
 import { SortComponent } from './sort/sort.component';
@@ -10,6 +14,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-detail/dataset-export/dataset-export.component';
+export * from './dataset-detail/dataset-export/license-modal/license-modal.component';
 export * from './dataset-detail/dataset-map/dataset-map.component';
 export * from './dataset-detail/dataset-info/dataset-info.component';
 export * from './dataset-detail/dataset-info/dataset-description/dataset-description.component';
@@ -21,6 +27,8 @@ export * from './sort/sort.component';
 
 export const GeosourceComponents = [
   DatasetDetailComponent,
+  DatasetExportComponent,
+  LicenseModalComponent,
   DatasetMapComponent,
   DatasetInfoComponent,
   DatasetDescriptionComponent,

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

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { DatasetListComponent, DatasetDetailComponent, ResearchComponent, DatasetInfoComponent, DatasetMapComponent } from './components';
+import { DatasetListComponent, DatasetDetailComponent, ResearchComponent, DatasetInfoComponent, DatasetMapComponent, DatasetExportComponent } from './components';
 
 export const routes: Routes = [
   {
@@ -32,6 +32,10 @@ export const routes: Routes = [
           {
             path: 'map',
             component: DatasetMapComponent
+          },
+          {
+            path: 'export',
+            component: DatasetExportComponent
           }
         ]
       }

webapp/src/scss/variables.scss

@@ -20,7 +20,7 @@ $tabs-boxed-link-active-border-color: black;
 
 // Font size settings based on 16px (default browser font-size)
 $size-1: 3rem;
-$size-2: 2.5rem;
+$size-2: 2.5rem;// 40px
 $size-3: 2rem;
 $size-4: 1.25rem; //20px
 $size-5: 1rem; //16px
@@ -37,6 +37,8 @@ $primary: $main;
 $family-primary: $family-sans-serif;
 $pagination-current-background-color: $yellow;
 $pagination-current-border-color: $yellow;
+
+$modal-background-background-color: rgba($black, 0.4);
 // 6. Import the rest of Bulma
 @import "../../node_modules/bulma/sass/utilities/_all";
 @import "../../node_modules/bulma/sass/base/_all";

webapp/src/styles.scss

@@ -17,7 +17,7 @@ h1, h2, h3, h4, h5, h6, .card-header-title, .navbar {
   font-size: $size-6;
 }
 
-span, p, select, input {
+span, p, select, input, ul, tbody {
   font-size: $size-6;
 }