Update credit style and translation + add reuse list component

config/config-dev.json

@@ -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

config/config-rec.json

@@ -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

src/app/core/components/main/side-menu/side-menu.component.html

@@ -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">

src/app/core/services/app-config.service.ts

@@ -12,6 +12,7 @@ export class AppConfig {
     matomo: string;
     elasticsearch: string;
     catalogue: string;
+    reuses: string;
   };
 }
 

src/app/editorialisation/components/credits/credits.component.html

 <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>

src/app/editorialisation/components/credits/credits.component.scss

@@ -81,7 +81,7 @@ img {
     position: relative;
 
     p {
-      color: $grey-super-light-color;
+      color: $grey-dark-color;
     }
 
     &:hover {

src/app/editorialisation/components/index.ts

@@ -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,
 ];

src/app/editorialisation/components/reuses-list/reuses-list.component.html

+<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

src/app/editorialisation/components/reuses-list/reuses-list.component.scss

+@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%;
+  }
+}

src/app/editorialisation/components/reuses-list/reuses-list.component.ts

+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(', ');
+  }
+}

src/app/editorialisation/editorialisation-routing.module.ts

 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,

src/app/editorialisation/models/index.ts

@@ -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';

src/app/editorialisation/models/reuse.model.ts

+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;
+  }
+}

src/app/editorialisation/services/index.ts

@@ -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,
 ];

src/app/editorialisation/services/reuses.service.ts

+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;
+      }));
+  }
+}

src/app/routes.ts

@@ -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: {

src/assets/config/config.json

@@ -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

src/i18n/messages.en.xlf

@@ -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>

src/i18n/messages.fr.xlf

@@ -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>

src/i18n/traductions.fr.ts

@@ -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',
+};