Commit f325da32 authored by ncastejon's avatar ncastejon
Browse files

Fix all issues coming from the merge.

parent aedfa821
import { Component, OnInit, Input } from '@angular/core';
import { IMetadataLink } from '../../../../models';
import { NotificationService, FileService } from '../../../../../core/services';
import { Component, Input, OnInit } from '@angular/core';
import { FileService, NotificationService } from '../../../../core/services';
import { IMetadataLink } from '../../../../shared/models';
@Component({
selector: 'app-resource-static',
......
<div *ngIf="metadata" class="resource-container">
<div class="restricted-access-container" *ngIf="isSample">
<app-restricted-access-banner></app-restricted-access-banner>
</div>
<div class="resource-queryable" *ngIf="hasQueryableResources">
<div class="resource-header">
<span class="resource-header-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 22">
<g id="picto-api">
<path
d="M4.7 11.5l5.2 2.3V17L2 12.9v-2.7L9.8 6v3.2l-5.1 2.3zM12.8 20h-2l4.9-18h2l-4.9 18zM24.4 11.5l-5.3-2.3V6l7.9 4.2v2.7L19.1 17v-3.2l5.3-2.3z"
class="st1" />
</g>
</svg>
</span>
<span class="resource-header-title">API</span>
</div>
<ng-container *ngFor="let resource of queryableResources | keyvalue">
<div class="resource-description">
<span>{{resource.key}}</span>
</div>
<app-resources-queryable [resources]="resource.value" [metadata]="metadata">
</app-resources-queryable>
</ng-container>
</div>
<div class="resources-downloadable" *ngIf="hasDownloadableResources">
<div class="resource-header">
<span class="resource-header-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 22">
<g id="picto-download">
<path
d="M16.1 1h-3.3c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7v7H8.3c-.4 0-.6.2-.8.6-.1.3-.1.6.2.8l6.2 5.4c.2.2.4.2.6.2s.4-.1.6-.2l6.2-5.4c.2-.2.3-.5.2-.8-.2-.4-.4-.6-.8-.6h-3.6V1.9c0-.3-.1-.5-.3-.7-.2-.1-.4-.2-.7-.2z"
class="st1" />
<path
d="M25 20.1v-4.4c0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.7-.3h-6l-2 1.9c-.4.4-.9.6-1.5.6s-1.1-.2-1.5-.6l-2-1.9H5c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7v4.4c0 .3.1.5.3.7.2.1.4.2.7.2h19c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.6z"
class="st1" />
</g>
</svg>
</span>
<span class="resource-header-title" i18n="@@dataset.resources.downloadable.title"> Downloadable Resources </span>
</div>
<div class="resource-downloadable" *ngFor="let downloadable of downloadableResources | keyvalue">
<div class="resource-description">
<span>{{downloadable.key}}</span>
</div>
<div class="resource-downloadable-files" *ngFor="let resource of downloadable.value">
<app-resource-downloadable [link]="resource">
</app-resource-downloadable>
</div>
</div>
</div>
<div class="resources-other" *ngIf="hasOtherResources">
<div class="resource-header">
<span class="resource-header-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 22">
<g id="picto-autres">
<path
d="M6 11c0-.3 0-.5.1-.8.1-.2.3-.4.4-.6.2-.2.4-.3.6-.4.3-.1.6-.2.8-.2.3 0 .5.1.8.2.2.1.4.2.6.4.2.2.3.4.4.6.1.2.2.5.2.8 0 .3-.1.5-.2.8-.1.2-.2.4-.4.6-.2.2-.4.3-.6.4-.2.1-.5.2-.8.2-.3 0-.5-.1-.8-.2-.2-.1-.4-.2-.6-.4-.2-.2-.3-.4-.4-.6-.1-.2-.1-.5-.1-.8zM12.1 11c0-.3 0-.5.1-.8.1-.2.2-.5.4-.6s.4-.3.6-.4c.3-.1.5-.2.8-.2.3 0 .5.1.8.2.2.1.4.2.6.4.2.2.3.4.4.6.1.2.2.5.2.8 0 .3-.1.5-.2.8-.1.2-.2.4-.4.6-.2.2-.4.3-.6.4-.3.1-.5.2-.8.2-.3 0-.5-.1-.8-.2-.2-.1-.4-.2-.6-.4-.2-.2-.3-.4-.4-.6-.1-.2-.1-.5-.1-.8zM18.1 11c0-.3 0-.5.1-.8.1-.2.2-.5.4-.6s.4-.3.6-.4c.3-.1.6-.2.9-.2.3 0 .5.1.8.2.2.1.4.2.6.4.2.2.3.4.4.6.1.2.2.5.2.8 0 .3-.1.5-.2.8-.1.2-.2.4-.4.6-.2.2-.4.3-.6.4-.2.1-.5.2-.8.2-.3 0-.5-.1-.8-.2-.2-.1-.4-.2-.6-.4-.2-.2-.3-.4-.4-.6-.1-.2-.2-.5-.2-.8z"
class="st1" />
</g>
</svg>
</span>
<span class="resource-header-title" i18n="@@dataset.resources.other.title"> Downloadable Resources </span>
</div>
<ng-container *ngIf="otherResources">
<div class="resource-other" *ngFor="let other of otherResources">
<div class="resource-other-title">
<span>{{ other.name }}</span>
</div>
<div class="resource-other-link">
<a [href]="other.url" target="_blank">{{ other.url }}</a>
</div>
</div>
</ng-container>
</div>
</div>
\ No newline at end of file
@import "../../../../scss/variables";
@import "../../../../../node_modules/bulma/sass/utilities/_all";
.resource-container {
padding: 2rem 1.25rem 1.25rem 1.25rem;
}
.restricted-access-container {
margin-top: -2rem;
margin-left: -1.25rem;
margin-right: -1.25rem;
margin-bottom: 1rem;
}
.unlock-icon {
margin-bottom: 0.5rem;
i {
font-size: 1.5rem;
}
}
h3 {
margin-top: 0;
margin-bottom: 0;
}
h4 {
font-weight: 700;
}
.underlined {
text-decoration: underline;
}
.columns {
margin: 0;
margin-bottom: 2rem;
}
.services.columns {
justify-content: space-evenly;
}
.resource-queryable {
padding-bottom: 3rem;
border-bottom: 2px solid $grey-background-color;
.resource-description {
border-bottom: 2px solid $grey-background-color;
padding-bottom: 1.5rem;
span {
font-weight: 600;
line-height: 1;
font-size: 1rem;
}
}
}
.resources-downloadable {
margin-top: 2rem;
border-bottom: 2px solid $grey-background-color;
}
.resource-downloadable {
margin-top: 1rem;
padding-bottom: 1rem;
&:not(:last-of-type) {
border-bottom: 1px solid $grey-background-color;
}
}
.resources-other {
margin-top: 2rem;
}
.resource-other-title {
margin-top: 1rem;
margin-bottom: 1rem;
span {
/* stylelint-disable-line */
font-size: 1.1rem;
font-weight: 600;
}
}
.resource-other-link {
a {
font-size: 0.875rem;
}
}
.resource-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.resource-header-title {
font-size: 1.25rem;
font-weight: 700;
margin-left: 1rem;
}
.resource-header-icon {
height: 2.25rem;
width: 2.25rem;
background-color: $grey-super-light-color;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
svg {
height: 1.125rem;
fill: white;
}
}
// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
// import { DatasetExportComponent } from './dataset-export.component';
// import { LicenseModalComponent } from '../..';
// import { ActivatedRoute } from '@angular/router';
// import { Observable, of } from 'rxjs';
// import { DatasetDetailService, ElasticsearchService } from '../../../services';
// import { HttpClientModule } from '@angular/common/http';
// import { Metadata } from '../../../models';
// import { NotificationService, ErrorService } from '../../../../core/services';
// describe('DatasetExportComponent', () => {
// let component: DatasetExportComponent;
// let fixture: ComponentFixture<DatasetExportComponent>;
// let service: DatasetDetailService;
// beforeEach(async(() => {
// TestBed.configureTestingModule({
// imports: [
// HttpClientModule,
// ],
// declarations: [DatasetExportComponent, LicenseModalComponent],
// providers: [
// {
// provide: ActivatedRoute,
// useValue: {
// parent: {
// get paramMap(): Observable<any> {
// return of();
// },
// },
// },
// },
// DatasetDetailService,
// ElasticsearchService,
// ErrorService,
// NotificationService,
// ],
// })
// .compileComponents();
// }));
// beforeEach(() => {
// fixture = TestBed.createComponent(DatasetExportComponent);
// component = fixture.componentInstance;
// service = TestBed.get(DatasetDetailService);
// spyOn(service, 'getDatasetMetadata').and.returnValue(of(new Metadata()));
// fixture.detectChanges();
// });
// it('should create', () => {
// expect(component).toBeTruthy();
// });
// });
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { notificationMessages } from '../../../../i18n/traductions';
import { Notification } from '../../../core/models';
import { NotificationService } from '../../../core/services';
import { IMetadataLink, Metadata } from '../../../shared/models';
import { Resource } from '../../models';
import { DatasetDetailService, ResourcesService } from '../../services';
@Component({
selector: 'app-dataset-resources',
templateUrl: './dataset-resources.component.html',
styleUrls: ['./dataset-resources.component.scss'],
})
export class DatasetResourcesComponent implements OnInit, OnDestroy {
metadata: Metadata;
resources: Resource[];
displayLicenseModal = false;
sub: Subscription;
hasBeenInitialized = false;
isSample = false;
// To display in the template
queryableResources: Resource[];
downloadableResources: IMetadataLink[];
otherResources: IMetadataLink[];
constructor(
private _datasetDetailService: DatasetDetailService,
private _resourcesService: ResourcesService,
private _notificationService: NotificationService,
) { }
ngOnInit() {
this.resources = [];
this.queryableResources = [];
this.downloadableResources = [];
this.otherResources = [];
this.isSample = this._datasetDetailService.dataset.editorialMetadata.isSample;
this.initialize();
this._resourcesService.getResources().subscribe(
(results) => {
this.resources = results;
this.initialize();
this.sub = this._datasetDetailService.dataset$.subscribe(() => {
this.initialize();
});
},
(err) => {
this._notificationService.notify(new Notification({
type: 'error',
message: `${notificationMessages.resources.initializationError}`,
}));
},
);
}
ngOnDestroy() {
if (this.sub) {
this.sub.unsubscribe();
}
}
// Resources are organized on 2 levels :
// -> 1st level: by metadata link description
// -> 2nd level: for each link description in 3 categories:
// - queryable
// - downloadable
// - other
// How to organize: we compare the type of one resource from our resource service
// and the ES metadata link property. If there is a match, the service will let us know if the resource
// is queryable or downloadable. If there is no match and the ES resource cannot be found in the service,
// we put it in "others" resources catagory.
initialize() {
this.metadata = this._datasetDetailService.datasetMetadata;
if (this.metadata && this.resources.length > 0 && !this.hasBeenInitialized) {
this.hasBeenInitialized = true;
if (this.metadata.link) {
this.metadata.link.forEach((link) => {
if (link.service) {
this.resources.forEach((resource) => {
const resourceCopy = Object.assign({}, resource);
resourceCopy.metadataLink = link;
if (link.service === resource.type && resourceCopy.isQueryable) {
if (!this.queryableResources[link.description]) {
this.queryableResources[link.description] = [];
}
this.queryableResources[link.description].push(resourceCopy);
}
});
} else if (link.service === undefined) {
if (link.formats) {
if (!this.downloadableResources[link.description]) {
this.downloadableResources[link.description] = [];
}
this.downloadableResources[link.description].push(link);
} else {
this.otherResources.push(link);
}
}
});
}
}
}
toggleLicenseModal() {
this.displayLicenseModal = !this.displayLicenseModal;
}
get hasQueryableResources() {
return Object.keys(this.queryableResources).length > 0;
}
get hasDownloadableResources() {
return Object.keys(this.downloadableResources).length > 0;
}
get hasOtherResources() {
return Object.keys(this.otherResources).length > 0;
}
}
<div class="format-icon" [ngClass]="'type-' + resourceType + ' is-' + size">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 40">
<path d="M68 3.5v32.9c0 .8-.7 1.5-1.5 1.5h-63c-.8.1-1.5-.6-1.5-1.4V14.1c0-.4.1-.7.4-1l8.9-10.6c.2-.3.7-.5 1.1-.5h54.1c.8 0 1.5.7 1.5 1.5z" class="white"/>
<path d="M66 4v32H4V14.3L12.6 4H66m.5-2H12.4c-.4 0-.8.2-1.1.5L2.4 13.1c-.2.3-.4.6-.4 1v22.4c0 .8.7 1.5 1.5 1.5h63c.8 0 1.5-.7 1.5-1.5v-33c0-.8-.7-1.5-1.5-1.5z" class="st0"/>
<path d="M12 12.1V2.4L2 14h8.1c1 0 1.9-.9 1.9-1.9z" class="st0"/>
</svg>
<span> {{ resourceType }} </span>
</div>
\ No newline at end of file
<div class="resource">
<div class="resource-left">
<div class="resource-icon" [ngClass]="link.formats[0]">
<span [inlineSVG]="formatSVGPath">
</span>
</div>
<div class="resource-main">
<div class="resource-main-name">
<span>{{ link.name }}
</span>
</div>
<div class="resource-main-size">
<span *ngIf="!humanFileSize(link['content-length'], true).includes('NaN')">
{{ humanFileSize(link['content-length'], true) }}
</span>
</div>
</div>
</div>
<div class="resource-download-icon">
<a [href]="link.url" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23">
<g>
<path
d="M22 14c-.6 0-1 .4-1 1v5H3v-5c0-.6-.4-1-1-1s-1 .4-1 1v6c0 .6.4 1 1 1h20c.6 0 1-.4 1-1v-6c0-.6-.4-1-1-1z"
class="download_x002D_color" />
<path
d="M11.3 16.7c.2.2.5.3.7.3s.5-.1.7-.3l6-6c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13 13.6V2c0-.6-.4-1-1-1s-1 .4-1 1v11.6L6.7 9.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l6 6z"
class="download_x002D_color" />
<g>
<path
d="M22 14c-.6 0-1 .4-1 1v5H3v-5c0-.6-.4-1-1-1s-1 .4-1 1v6c0 .6.4 1 1 1h20c.6 0 1-.4 1-1v-6c0-.6-.4-1-1-1z"
class="download_x002D_color" />
<path
d="M11.3 16.7c.2.2.5.3.7.3s.5-.1.7-.3l6-6c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13 13.6V2c0-.6-.4-1-1-1s-1 .4-1 1v11.6L6.7 9.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l6 6z"
class="download_x002D_color" />
</g>
</g>
</svg>
</a>
</div>
</div>
@import '../../../../../scss/variables.scss';
.resource {
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.resource-download-icon {
padding: 0.5rem 0.4rem;
border: 1px solid $grey-super-light-color;
border-radius: 4px;
margin-right: 0.75rem;
a {
display: flex;
}
svg {
height: 1.5rem;
fill: $link-color;
}
&:hover {
opacity: 0.7;
}
}
.resource-left {
display: flex;
align-items: center;
.resource-main {
margin-left: 1rem;
}
.resource-main-name span {
word-break: break-all;
}
.resource-icon {
/deep/ svg {
height: 2.125rem;
.grey {
fill: #707070;
}
}
span {
display: flex;
}
}
.resource-icon.PDF {
/deep/ svg {
fill: #ef7575;
}
}
.resource-icon.ZIP {
/deep/ svg {
fill: #e5bb4e;
}
}
.resource-icon.ECW {
/deep/ svg {
fill: #da92bb;
}
}
.resource-icon.CSV {
/deep/ svg {
fill: #86b89b;
}
}
.resource-icon.TIF {
/deep/ svg {
fill: #7e99ce;
}
}
}
import { Component, Input, OnInit } from '@angular/core';
import { FileService, NotificationService } from '../../../../core/services';
import { IMetadataLink } from '../../../../shared/models';
@Component({
selector: 'app-resource-downloadable',
te