Commit 72f5338c authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Update credit style and translation + add reuse list component

parent 5b2c0e6b
Pipeline #1748 passed with stages
in 6 minutes and 8 seconds
......@@ -9,6 +9,7 @@
"email": "https://kong-dev.alpha.grandlyon.com/email",
"matomo": "https://kong-dev.alpha.grandlyon.com/analytics/pageStats",
"elasticsearch": "https://kong-dev.alpha.grandlyon.com/es-consumer-aware",
"catalogue": "https://kong-dev.alpha.grandlyon.com/catalogue"
"catalogue": "https://kong-dev.alpha.grandlyon.com/catalogue",
"reuses": "https://kong-dev.alpha.grandlyon.com/reuses/reuses"
}
}
\ No newline at end of file
......@@ -9,6 +9,7 @@
"email": "https://kong-rec.alpha.grandlyon.com/email",
"matomo": "https://kong-rec.alpha.grandlyon.com/analytics/pageStats",
"elasticsearch": "https://kong-rec.alpha.grandlyon.com/es-consumer-aware",
"catalogue": "https://kong-rec.alpha.grandlyon.com/catalogue"
"catalogue": "https://kong-rec.alpha.grandlyon.com/catalogue",
"reuses": "https://kong-dev.alpha.grandlyon.com/reuses/reuses"
}
}
\ No newline at end of file
......@@ -72,6 +72,17 @@
<span i18n="@@menu.documentation" class="label-menu">Documentation</span>
</a>
</li>
<li>
<a [routerLink]="['/', AppRoutes.reuses.uri]" routerLinkActive="active-link">
<div class="icon-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
<path class="main"
d="M11.5 1L2 5.2v12.7l9.5 4.1 9.5-4.2V5.2zM20 11.4l-3.2 1.5V8L20 6.5zM3 6.5L6.2 8v4.7L3 11.2zm13.1.7l-3.5-1.6L15.9 4l3.6 1.6zm-1.1.5l-3.5 1.6L8 7.7l3.5-1.6zm-8.2-.6L3.5 5.6 7.1 4l3.2 1.5zm.4 1.3l3.8 1.8v4.7l-3.8-1.8zM11 16v4.7L7.2 19v-4.8zm1 .2l3.8-1.8V19L12 20.7zm0-1.1v-5l3.8-1.8v5zm2.7-11.6L11.5 5 8.3 3.5l3.2-1.4zM3 12.3l3.2 1.5v4.8L3 17.2zm13.8 6.3V14l3.2-1.5v4.6z" />
</svg>
</div>
<span i18n="@@menu.reuses" class="label-menu">They use the data</span>
</a>
</li>
<li>
<a [routerLink]="['/', AppRoutes.contribution.uri]" routerLinkActive="active-link">
<div class="icon-item">
......
......@@ -12,6 +12,7 @@ export class AppConfig {
matomo: string;
elasticsearch: string;
catalogue: string;
reuses: string;
};
}
......
<div class="page-container is-fullwidth">
<div class="page-header-container">
<app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
<p class="description">
<ng-container i18n="@@credits.description">Here are the tools we used to create this portal.</ng-container>
<p class="description" i18n="@@credits.description">
Here are the tools we used to create this portal.
</p>
</div>
......@@ -22,8 +22,7 @@
<p>{{credit.description}}</p>
<div class="bottom-section">
<a [href]="credit.links[0].url" i18n="@@credits.moreInformation">Voir le site
web</a>
<a [href]="credit.links[0].url" i18n="@@credits.visitWebsite">Visit the website</a>
</div>
</div>
</div>
......
......@@ -81,7 +81,7 @@ img {
position: relative;
p {
color: $grey-super-light-color;
color: $grey-dark-color;
}
&:hover {
......
......@@ -8,6 +8,7 @@ import { CreditsComponent } from './credits/credits.component';
import { SiteMapComponent } from './site-map/site-map.component';
import { ChangelogComponent } from './changelog/changelog.component';
import { ContributionComponent } from './contribution/contribution.component';
import { ReusesListComponent } from './reuses-list/reuses-list.component';
export {
......@@ -20,6 +21,7 @@ export {
SiteMapComponent,
ChangelogComponent,
ContributionComponent,
ReusesListComponent,
};
// tslint:disable-next-line:variable-name
......@@ -33,4 +35,5 @@ export const EditorialisationComponents = [
SiteMapComponent,
ChangelogComponent,
ContributionComponent,
ReusesListComponent,
];
<div class="page-container is-fullwidth">
<div class="page-header-container">
<app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
<p class="description">
<span i18n="@@reuses.description.part1">Data from data.grandlyon.com feeds many services.</span>
<br />
<span i18n="@@reuses.description.part2">You too, </span><a [routerLink]="['/', AppRoutes.contact.uri]"
[queryParams]="{ subject: contactTrad.reuseSubject }" i18n="@@reuses.description.part3">submit your use of
the data to us</a>.
</p>
</div>
<div class="reuses-container">
<div class="item" *ngFor="let reuse of reuses">
<div class="reuse">
<div class="logo-content">
<img [src]="reuse.logo" [alt]="reuse.name + 'logo'">
</div>
<span class="title">{{reuse.name}}</span>
<p>{{reuse.creator}}</p>
<div class="bottom-section">
<span>{{ formatReusesTypes(reuse.reuseTypes) }}</span>
<span>
{{reuse.datasetsUsed ? reuse.datasetsUsed.length : 0 }} <span
*ngIf="reuse.datasetsUsed.length > 1; else oneReuse" i18n="@@reuses.ngDatasetsReused">jeux de données
utilisés</span>
<ng-template #oneReuse i18n="@@reuses.oneDatasetReused">jeu de données utilisé</ng-template>
</span>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
@import './../../../../scss/variables.scss';
@import "../../../../../node_modules/bulma/sass/utilities/_all";
.page-header-container {
background-color: white;
padding: 0 1.25rem 0 1.25rem;
margin-bottom: 1rem;
}
.description,
.description span {
font-size: 17px;
font-weight: 600;
padding-bottom: 1.875rem;
}
.reuses-container {
display: flex;
flex-wrap: wrap;
margin-left: -1rem;
}
.item {
display: inline-block;
margin: 0 0 1rem 1rem;
width: 100%;
max-width: 100%;
height: 270px;
overflow: hidden;
@media screen and (min-width: 420px) {
// max-width: 705px;
width: 100%;
height: 260px;
}
@media screen and (min-width: 650px) {
// max-width: 705px;
width: calc((100% - 2rem) / 2);
height: 260px;
}
@media screen and (min-width: $tablet) {
// max-width: 705px;
width: calc((705px - 1rem) / 2);
height: 260px;
flex-shrink: 0;
}
@media screen and (min-width: $desktop) {
// max-width: 960px;
width: calc((960px - (2 * 1rem)) / 3);
height: 260px;
}
@media screen and (min-width: $widescreen) {
// max-width: 1152px;
width: calc((1152px - (3 * 1rem)) / 4);
height: 250px;
}
@media screen and (min-width: $fullhd) {
// max-width: 1344px;
width: calc((1344px - (3 * 1rem)) / 4);
height: 250px;
}
p {
text-align: left;
word-break: break-word;
}
.reuse {
background-color: white;
transition: box-shadow 0.3s;
padding: 1.2rem 1.2rem;
height: 100%;
position: relative;
p {
color: $grey-dark-color;
}
&:hover {
box-shadow: inset 0 0 3px 0 grey;
}
}
}
.title {
display: block;
font-size: 1rem;
font-weight: bold;
margin-top: 1rem;
margin-bottom: 0.25rem;
}
.bottom-section {
position: absolute;
bottom: 1rem;
display: flex;
flex-direction: column;
span {
color: $grey-dark-color;
font-style: italic;
}
}
.logo-content {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid $grey-super-light-color;
padding-bottom: 1.2rem;
img {
max-height: 70px;
// width: unset;
// max-width: 80%;
}
}
import { Component, OnInit } from '@angular/core';
import { Reuse } from '../../models';
import { AppRoutes } from '../../../routes';
import { IPageHeaderInfo } from '../../../shared/models';
import { pageTitles, notificationMessages, reusesTypes, contactTrad } from '../../../../i18n/traductions';
import { NotificationService } from '../../../core/services';
import { ReusesService } from '../../services';
@Component({
selector: 'app-reuses-list',
templateUrl: './reuses-list.component.html',
styleUrls: ['./reuses-list.component.scss'],
})
export class ReusesListComponent implements OnInit {
AppRoutes = AppRoutes;
contactTrad = contactTrad;
pageHeaderInfo: IPageHeaderInfo = {
title: pageTitles.reuses,
};
reuses: Reuse[];
constructor(
private _reusesService: ReusesService,
private _notificationService: NotificationService,
) { }
ngOnInit() {
this._reusesService.getReuses().subscribe(
(reuses) => {
this.reuses = reuses;
},
() => {
this._notificationService.notify({
type: 'error',
message: notificationMessages.edito.getReuses,
});
},
);
}
formatReusesTypes(types: string[]) {
return types.map(e => reusesTypes[e] ? reusesTypes[e] : null).filter(e => e !== null).join(', ');
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {
HomeComponent, OrganizationsComponent, CMSPageComponent, CMSDraftsListComponent, SiteMapComponent, ChangelogComponent, ContributionComponent,
HomeComponent, OrganizationsComponent, CMSPageComponent, CMSDraftsListComponent,
SiteMapComponent, ChangelogComponent, ContributionComponent, ReusesListComponent,
} from './components';
import { CMSPostDetailComponent } from './components/cms-post-detail/cms-post-detail.component';
import { PostDetailResolver } from './resolvers/post-detail.resolver';
......@@ -202,6 +203,14 @@ export const routes: Routes = [
uri: AppRoutes.credits.uri,
},
},
{
path: AppRoutes.reuses.uri,
component: ReusesListComponent,
data: {
title: AppRoutes.reuses.title,
uri: AppRoutes.reuses.uri,
},
},
{
path: `${AppRoutes.articles.uri}/:id`,
component: CMSPostDetailComponent,
......
......@@ -2,3 +2,4 @@ export { IOrganization, Organization } from './organization.model';
export { ICredit, Credit } from './credit.model';
export { IChangelog, Changelog } from './changelog.model';
export { IGhostContentResponse, CMSContent, ICMSMedia, ICMSCategory } from './cms-content.model';
export { IReuse, Reuse } from './reuse.model';
export interface IReuse {
_id: number;
name: string;
creator: string;
logo: string;
website: string;
reuseTypes: string[];
datasetsUsed: string[];
published: boolean;
createDate: Date;
updateDate: Date;
}
export class Reuse implements IReuse {
_id: number;
name: string;
creator: string;
logo: string;
website: string;
reuseTypes: string[];
datasetsUsed: string[];
published: boolean;
createDate: Date;
updateDate: Date;
constructor(reuse: IReuse) {
this._id = reuse._id ? reuse._id : null;
this.name = reuse.name ? reuse.name : null;
this.creator = reuse.creator ? reuse.creator : null;
this.logo = reuse.logo ? reuse.logo : null;
this.website = reuse.website ? reuse.website : null;
this.reuseTypes = reuse.reuseTypes ? reuse.reuseTypes : [];
this.datasetsUsed = reuse.datasetsUsed ? reuse.datasetsUsed : [];
this.published = reuse.published ? reuse.published : null;
this.createDate = reuse.createDate ? reuse.createDate : null;
this.updateDate = reuse.updateDate ? reuse.updateDate : null;
}
}
......@@ -2,12 +2,14 @@ import { EditorialisationService } from './editorialisation.service';
import { OrganizationsService } from './organizations.service';
import { CreditsService } from './credits.service';
import { ChangelogsService } from './changelog.service';
import { ReusesService } from './reuses.service';
export {
EditorialisationService,
OrganizationsService,
CreditsService,
ChangelogsService,
ReusesService,
};
// tslint:disable-next-line:variable-name
......@@ -16,4 +18,5 @@ export const EditorialisationServices = [
OrganizationsService,
CreditsService,
ChangelogsService,
ReusesService,
];
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IReuse, Reuse } from '../models';
import { map } from 'rxjs/operators';
import { APP_CONFIG } from '../../core/services/app-config.service';
@Injectable()
export class ReusesService {
constructor(
private _httpClient: HttpClient,
) { }
getReuses() {
return this._httpClient.get<IReuse[]>(APP_CONFIG.backendUrls.reuses, { withCredentials: true }).pipe(
map((reusesBack) => {
const reuses = [];
reusesBack.forEach((reuse) => {
reuses.push(new Reuse(reuse));
});
return reuses;
}));
}
}
......@@ -238,6 +238,13 @@ export const AppRoutes = {
en: 'Publish a dataset',
},
},
reuses: {
uri: 'reutilisations',
title: {
fr: 'Ils utilisent les données',
en: 'They use the data',
},
},
error: {
uri: 'error',
title: {
......
......@@ -9,6 +9,7 @@
"email": "http://localhost:3001",
"matomo": "https://matomo-intothesky.alpha.grandlyon.com",
"elasticsearch": "https://kong-dev.alpha.grandlyon.com/es-consumer-aware",
"catalogue": "https://kong-dev.alpha.grandlyon.com/catalogue"
"catalogue": "https://kong-dev.alpha.grandlyon.com/catalogue",
"reuses": "https://kong-dev.alpha.grandlyon.com/reuses/reuses"
}
}
\ No newline at end of file
......@@ -43,6 +43,10 @@
<source>Data producers</source>
<target>Data producers</target>
</trans-unit>
<trans-unit id="menu.reuses" datatype="html">
<source>They use the data</source>
<target>They use the data</target>
</trans-unit>
<trans-unit id="header.signIn" datatype="html">
<source>Sign In</source>
<target>Sign In</target>
......@@ -569,9 +573,9 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
<source>Here are the tools we used to create this portal.</source>
<target>Here are the tools we used to create this portal.</target>
</trans-unit>
<trans-unit id="credits.moreInformation" datatype="html">
<source>More information</source>
<target>More information</target>
<trans-unit id="credits.visitWebsite" datatype="html">
<source>Visit the website</source>
<target>Visit the website</target>
</trans-unit>
<trans-unit id="organizations.description" datatype="html">
<source>The Lyon Metropolitan Area has opened its portal to all stakeholders in the region who wish to distribute their data, in open data or restricted access. If you wish to make your data available on this shared platform, do not hesitate to </source>
......@@ -1260,6 +1264,26 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
<source>Contact us</source>
<target>Contactez-nous</target>
</trans-unit>
<trans-unit id="reuses.description.part1" datatype="html">
<source>Data from data.grandlyon.com feeds many services.</source>
<target>Data from data.grandlyon.com feeds many services.</target>
</trans-unit>
<trans-unit id="reuses.description.part2" datatype="html">
<source>You too, </source>
<target>You too, </target>
</trans-unit>
<trans-unit id="reuses.description.part3" datatype="html">
<source>submit your use of the data to us</source>
<target>submit your use of the data to us</target>
</trans-unit>
<trans-unit id="reuses.ngDatasetsReused" datatype="html">
<source>datasets used</source>
<target>datasets used</target>
</trans-unit>
<trans-unit id="reuses.oneDatasetReused" datatype="html">
<source>dataset used</source>
<target>dataset used</target>
</trans-unit>
</body>
</file>
</xliff>
......@@ -47,6 +47,10 @@
<source>Data producers</source>
<target>Producteurs de données</target>
</trans-unit>
<trans-unit id="menu.reuses" datatype="html">
<source>They use the data</source>
<target>Ils utilisent les données</target>
</trans-unit>
<trans-unit id="header.signIn" datatype="html">
<source>Sign In</source>
<target>Connexion</target>
......@@ -577,9 +581,9 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
<source>Here are the tools we used to create this portal.</source>
<target>Voici les outils que nous avons utilisés pour créer ce portail.</target>
</trans-unit>
<trans-unit id="credits.moreInformation" datatype="html">
<source>More information</source>
<target>Plus d'informations</target>
<trans-unit id="credits.visitWebsite" datatype="html">
<source>Visit the website</source>
<target>Voir le site web</target>
</trans-unit>
<trans-unit id="organizations.description" datatype="html">
<source>The Lyon Metropolitan Area has opened its portal to all stakeholders in the region who wish to distribute their data, in open data or restricted access. If you wish to make your data available on this shared platform, do not hesitate to </source>
......@@ -1268,6 +1272,26 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
<source>Contact us</source>
<target>Contactez-nous</target>
</trans-unit>
<trans-unit id="reuses.description.part1" datatype="html">
<source>Data from data.grandlyon.com feeds many services.</source>
<target>Les données de data.grandlyon.com alimentent de nombreux services.</target>
</trans-unit>
<trans-unit id="reuses.description.part2" datatype="html">
<source>You too, </source>
<target>Vous aussi, </target>
</trans-unit>
<trans-unit id="reuses.description.part3" datatype="html">
<source>submit your use of the data to us</source>
<target>soumettez-nous votre utilisation des données</target>
</trans-unit>
<trans-unit id="reuses.ngDatasetsReused" datatype="html">
<source>datasets used</source>
<target>jeux de données utilisés</target>
</trans-unit>
<trans-unit id="reuses.oneDatasetReused" datatype="html">
<source>dataset used</source>
<target>jeu de données utilisé</target>
</trans-unit>
</body>
</file>
</xliff>
......@@ -17,6 +17,7 @@ export const notificationMessages = {
getMediaUrl: 'Impossible de récupérer l\'url du média',
getDataProducers: 'Impossible de charger la liste des producteurs de données.',
getCredits: 'Impossible de charger la liste des crédits.',
getReuses: 'Impossible de charger la liste des réutilisations.',
news: 'actualité',
},
......@@ -254,6 +255,7 @@ export const pageTitles = {
userInfo: 'Mes informations',
userPasswordUpdate: 'Modifier mon mot de passe',
contribution: 'Publier un jeu de données',
reuses: 'Ils utilisent les données',
};
export const datatsetDataRepresentationType = {
......@@ -275,6 +277,7 @@ export const feedback = {
export const contactTrad = {
subjectPlaceholder: 'Selectionnez un sujet',
reuseSubject: 'Soumettre une réutilisation',
};
export const cmsPageLink = {
......@@ -295,3 +298,9 @@ export const cmsPageLink = {
imgAlt: 'Picto la démarche',
},
};
export const reusesTypes = {
app: 'Application mobile',
web: 'Site web',
article: 'Article',
};