Merge branch 'feat/US31-visual-search-results' into 'dev'

feat/US31-visual-search-result

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!205

src/app/carto/carto.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
 const { DateTime } = require('luxon');
 import * as _ from 'lodash';
 
@@ -30,7 +31,8 @@ export class CartoComponent implements OnInit {
   constructor(
     private structureService: StructureService,
     private geoJsonService: GeojsonService,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private meta: Meta
   ) {}
 
   ngOnInit(): void {
@@ -45,6 +47,11 @@ export class CartoComponent implements OnInit {
     if (history.state.data) {
       this.currentStructure = new Structure(history.state.data);
     }
+
+    this.meta.updateTag({
+      name: 'description',
+      content: 'Recense tous les lieux, accompagnements et ateliers de médiation numérique de la Métropole de Lyon.',
+    });
   }
 
   public getStructures(filters: Filter[]): void {

src/app/contact/contact.component.ts

 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Meta } from '@angular/platform-browser';
 import { ContactMessage } from '../models/contact-message.model';
 import { AuthService } from '../services/auth.service';
 import { ContactService } from '../services/contact.service';
@@ -23,7 +24,8 @@ export class ContactComponent implements OnInit {
     private router: Router,
     private authService: AuthService,
     private notificationService: NotificationService,
-    public utils: Utils
+    public utils: Utils,
+    private meta: Meta
   ) {}
 
   ngOnInit(): void {
@@ -37,6 +39,12 @@ export class ContactComponent implements OnInit {
       subject: ['', Validators.required],
       message: ['', Validators.required],
     });
+
+    this.meta.updateTag({
+      name: 'description',
+      content:
+        "Formulaire pour contacter Rés'IN, le Réseau des acteurs de l'inclusion numérique de la métropole de Lyon",
+    });
   }
 
   public get isLoggedIn(): boolean {

src/app/form/orientation-form/orientation-form.component.ts

 import { stringify } from '@angular/compiler/src/util';
 import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
 import { AbstractControl, Form, FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Meta } from '@angular/platform-browser';
 import { GeoJson } from '../../map/models/geojson.model';
 import { Address } from '../../models/address.model';
 import { OrientationFormFilters } from '../../models/orientation-filter.object';
@@ -79,13 +80,19 @@ export class OrientationFormComponent implements OnInit {
     private routerListener: RouterListenerService,
     private searchService: SearchService,
     private structureService: StructureService,
-    private geoJsonService: GeojsonService
+    private geoJsonService: GeojsonService,
+    private meta: Meta
   ) {}
 
   ngOnInit(): void {
     this.orientationForm = this.createOrientationForm(new OrientationFormFilters());
     this.setValidationsForm();
     this.setCategories();
+    this.meta.updateTag({
+      name: 'description',
+      content:
+        "Permet aux professionnels d'être aidés dans l'accompagnement d'un usager en fragilité numérique pour trouver une réponse adaptée.",
+    });
   }
 
   private async setCategories(): Promise<void> {

src/app/legal-notice/legal-notice.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-legal-notice',
   templateUrl: './legal-notice.component.html',
-  styleUrls: ['./legal-notice.component.scss']
+  styleUrls: ['./legal-notice.component.scss'],
 })
 export class LegalNoticeComponent implements OnInit {
-
-  constructor() { }
+  constructor(private meta: Meta) {}
 
   ngOnInit(): void {
+    this.meta.updateTag({
+      name: 'description',
+      content: "Mentions légales de Rés'IN, le Réseau des acteurs de l'inclusion numérique de la métropole de Lyon",
+    });
   }
-
 }

src/app/page/models/page.model.ts

@@ -10,6 +10,7 @@ export class Page {
   feature_image: string;
   html: string;
   safeHtml: SafeHtml;
+  meta_description: string;
 
   constructor(obj?: any) {
     Object.assign(this, obj);

src/app/page/page.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
+import { Meta } from '@angular/platform-browser';
 import packageJson from '../../../package.json';
 import { Page } from './models/page.model';
 import { PageService } from './services/page.service';
@@ -17,7 +18,12 @@ export class PageComponent implements OnInit {
   private slugPage: string;
   private quiSommesNous = PageEnum.quiSommesNous;
 
-  constructor(private sanitizer: DomSanitizer, private route: ActivatedRoute, private pageService: PageService) {}
+  constructor(
+    private sanitizer: DomSanitizer,
+    private route: ActivatedRoute,
+    private pageService: PageService,
+    private meta: Meta
+  ) {}
 
   ngOnInit(): void {
     this.route.params.subscribe((routeParams) => {
@@ -25,6 +31,10 @@ export class PageComponent implements OnInit {
       this.pageService.getPage(this.slugPage).subscribe((page) => {
         this.page = page.pages[0];
         this.page.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.page.html);
+        this.meta.updateTag({
+          name: 'description',
+          content: this.page.meta_description,
+        });
       });
       // Display version number in 'About' page only
       this.slugPage == this.quiSommesNous ? (this.version = packageJson.version) : (this.version = '');

src/index.html

@@ -11,10 +11,11 @@
     <meta name="title" content="Rés'In | Réseau des acteurs de l'inclusion numérique de la métropole de Lyon" />
     <meta
       name="description"
-      content="Retrouver tous les lieux de la médiation numérique de la métropole mais aussi les actualités, projets, ressources, études et appels à projet liès à l'inclusion numérique..."
+      content="Dédiée aux acteurs de l'inclusion numérique de la Métropole de Lyon, Rés'IN recense tous les lieux qui propose une offre de médiation numérique sur le territoire et vise à permettre une meilleure orientation des usagers. Actualités, appels à projets, outils et ressources en ligne sont également proposés pour faciliter l'accompagnement des personnes en fragilité numérique."
     />
     <meta name="image" content="https://resin.grandlyon.com/assets/logos/resin-logo-1024x512.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="google-site-verification" content="gam2SZSqu_MO1xoHwcvhqPCXNsXf60qxXPalwPVKfLM" />
 
     <!-- Open Graph general -->
     <meta property="og:title" content="Rés'In | Réseau des acteurs de l'inclusion numérique de la métropole de Lyon" />