CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.16.0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.15.0...v1.16.0) (2022-03-18)
+
+
+### Bug Fixes
+
+* **carto:** issue [#11](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/issues/11) responsive structure details ([ad5e3bf](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/ad5e3bf7e824c5e0cde1cafa1019035a51aecb07))
+* **carto:** issue on category name after migration ([41f6d76](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/41f6d76839755d8e0d725ccb1e0fa6eb84258071))
+* **carto:** maker not setting in some case ([a13de9a](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/a13de9a2d184fac6569564a4953b5aeb6a100b04))
+* **pwa:** add icon for ios ([e18c936](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/e18c93606c14a41ba0da4a407d7ec94c492f8089))
+* **structure-details:** display workshops again in structure details ([897a215](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/897a215b2bada359b8ee587902a8a313e7960829))
+* **structures:** Impossible de rentrer des adresses sans numéro ([4d79383](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/4d79383c2703396c9fa0c48bebed8b40ee1543c0))
+
 ## [1.15.0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.14.0...v1.15.0) (2022-03-08)
 
 

package-lock.json

 {
   "name": "pamn",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

 {
   "name": "pamn",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration=fr --proxy-config proxy.conf.json",

src/app/map/components/map.component.ts

@@ -106,7 +106,7 @@ export class MapComponent implements OnChanges {
         );
       }
     }
-    // Handle map marker selection
+    // Handle map marker if none selected
     if (changes.selectedMarkerId && this.map) {
       this.map.closePopup();
       if (changes.selectedMarkerId.currentValue === undefined) {
@@ -115,14 +115,15 @@ export class MapComponent implements OnChanges {
           this.getMarkerTypeByStructureId(changes.selectedMarkerId.previousValue)
         );
         this.map.setView(this.mapOptions.center, this.mapOptions.zoom);
-      } else {
-        this.mapService.setSelectedMarker(
-          changes.selectedMarkerId.currentValue,
-          this.getMarkerTypeByStructureId(changes.selectedMarkerId.currentValue)
-        );
-        this.centerLeafletMapOnMarker(changes.selectedMarkerId.currentValue);
       }
     }
+    // Handle map marker if one is set with url or selected
+    if (this.mapService.getMarker(this.selectedMarkerId)) {
+      this.mapService.setSelectedMarker(this.selectedMarkerId, this.getMarkerTypeByStructureId(this.selectedMarkerId));
+      this.centerLeafletMapOnMarker(this.selectedMarkerId);
+    }
+
+    this.closePreviousMarker(changes);
 
     if (changes.structuresToPrint) {
       if (changes.structuresToPrint.currentValue < changes.structuresToPrint.previousValue) {
@@ -205,7 +206,7 @@ export class MapComponent implements OnChanges {
   }
 
   private getStructuresPositions(structureList: Structure[]): void {
-    structureList.forEach((structure: Structure) => {
+    for (const structure of structureList) {
       this.mapService
         .createMarker(
           structure.getLat(),
@@ -219,7 +220,8 @@ export class MapComponent implements OnChanges {
         .on('popupopen', () => {
           this.currentStructure = structure;
         });
-    });
+    }
+
     // Reset location if active to prevent graphical issue
     if (this.locate) {
       this.lc.stop();
@@ -329,11 +331,13 @@ export class MapComponent implements OnChanges {
   }
 
   private centerLeafletMapOnMarker(markerId: string): void {
-    const marker = this.mapService.getMarker(markerId);
-    const latLngs = [marker.getLatLng()];
-    const markerBounds = latLngBounds(latLngs);
-    // paddingTopLeft is used for centering marker because of structure details pane
-    this.map.fitBounds(markerBounds, { paddingTopLeft: [300, 0] });
+    if (this.mapService.getMarker(markerId)) {
+      const marker = this.mapService.getMarker(markerId);
+      const latLngs = [marker.getLatLng()];
+      const markerBounds = latLngBounds(latLngs);
+      // paddingTopLeft is used for centering marker because of structure details pane
+      this.map.fitBounds(markerBounds, { paddingTopLeft: [300, 0] });
+    }
   }
 
   private initMetropoleLayer(): void {
@@ -347,4 +351,21 @@ export class MapComponent implements OnChanges {
       )
     );
   }
+
+  /**
+   * Close previous markers
+   * - if strucure is closed
+   * - if a new marker is selected
+   */
+  private closePreviousMarker(changes: SimpleChanges): void {
+    if (
+      (changes.selectedMarkerId?.currentValue === undefined && changes.selectedMarkerId?.previousValue) ||
+      changes.selectedMarkerId?.currentValue !== changes.selectedMarkerId?.previousValue
+    ) {
+      this.mapService.setUnactiveMarker(
+        changes.selectedMarkerId.previousValue,
+        this.getMarkerTypeByStructureId(changes.selectedMarkerId.previousValue)
+      );
+    }
+  }
 }

src/app/map/services/map.service.ts

@@ -122,9 +122,7 @@ export class MapService {
 
   public setUnactiveMarker(id: string, type: MarkerType = MarkerType.structure): void {
     // To skip mouseleave when user emit click on structure list
-    if (!this.isMarkerActive) {
-      this.getMarker(id).setIcon(this.getMarkerIcon(type));
-    }
+    this.getMarker(id)?.setIcon(this.getMarkerIcon(type));
     this.isMarkerActive = false;
   }
 
@@ -144,7 +142,7 @@ export class MapService {
    */
   public setSelectedMarker(id: string, type: MarkerType = MarkerType.structure): void {
     if (id) {
-      this.getMarker(id).setIcon(this.getActiveMarkerIcon(type));
+      this.getMarker(id)?.setIcon(this.getActiveMarkerIcon(type));
       this.isMarkerActive = true;
     }
   }

src/app/shared/components/address-autocomplete/address-autocomplete.component.ts

@@ -57,9 +57,13 @@ export class AddressAutocompleteComponent implements OnInit {
   public selectedResult(hit: any): void {
     const address = new Address();
     address.numero = hit.properties.housenumber ? hit.properties.housenumber : null;
-    address.street = hit.properties.street;
     address.commune = hit.properties.city;
     address.coordinates = hit.geometry.coordinates;
+    if (hit.properties.street) {
+      address.street = hit.properties.street;
+    } else {
+      address.street = hit.properties.name;
+    }
     const value = this.parseHitToAddress(hit);
     // Set input value
     this.searchAddress.nativeElement.value = value;

src/app/structure-list/components/structure-details/structure-details.component.html

@@ -229,7 +229,7 @@
     </div>
     <div *ngIf="structure.exceptionalClosures" class="bold-info">
       <h3 class="subtitle">Précisions sur les horaires</h3>
-      <p>{{ structure.exceptionalClosures }}</p>
+      <p class="description">{{ structure.exceptionalClosures }}</p>
     </div>
     <div *ngIf="structure.remoteAccompaniment" class="bold-info">
       <h3>Cette structure propose un accompagnement à distance.</h3>

src/app/structure-list/components/structure-details/structure-details.component.scss

@@ -18,17 +18,15 @@ a {
   left: 0;
   max-width: 980px;
   width: 100%;
+  box-sizing: border-box;
   height: calc(100vh - #{$header-height} - #{$footer-height});
   padding: 0px 24px;
   overflow: auto;
   @media #{$tablet} {
+    height: calc(100vh - #{$header-height});
     .printButton {
       display: none !important;
     }
-
-    .ico-close {
-      margin-left: 16px;
-    }
   }
   .printButton {
     margin-right: 75px;

src/app/structure-list/components/structure-details/structure-details.component.ts

@@ -94,6 +94,7 @@ export class StructureDetailsComponent implements OnInit {
           this.socialAndProfessionalsReferentiel = referentiel;
         }
       });
+      this.setServiceCategories();
       if (this.printMode) {
         this.printService.onDataReady();
       }
@@ -249,6 +250,24 @@ export class StructureDetailsComponent implements OnInit {
     }
   }
 
+  public setServiceCategories(): void {
+    this.baseSkills = this.structure.baseSkills.map((skill) =>
+      _.find(this.baseSkillssReferentiel.modules, { id: skill })
+    );
+    this.accessRights = this.structure.accessRight.map((rights) =>
+      _.find(this.accessRightsReferentiel.modules, { id: rights })
+    );
+    this.parentingHelp = this.structure.parentingHelp.map((help) =>
+      _.find(this.parentingHelpsReferentiel.modules, { id: help })
+    );
+    this.socialAndProfessional = this.structure.socialAndProfessional.map((skill) =>
+      _.find(this.socialAndProfessionalsReferentiel.modules, { id: skill })
+    );
+    this.digitalCultureSecurity = this.structure.digitalCultureSecurity.map((skill) =>
+      _.find(this.digitalCultureSecuritysReferentiel.modules, { id: skill })
+    );
+  }
+
   public keepOriginalOrder = (a, b) => a.key;
 
   public isBaseSkills(): boolean {

src/app/structure-list/models/category.model.ts

@@ -16,22 +16,22 @@ export class Category {
   }
 
   public isBaseSkills(): boolean {
-    return this.name === 'Les compétences de base';
+    return this.id === 'baseSkills';
   }
 
   public isRigthtsAccess(): boolean {
-    return this.name === 'Accès aux droits';
+    return this.id === 'accessRight';
   }
 
   public isParentingHelp(): boolean {
-    return this.name === 'Aide à la parentalité';
+    return this.id === 'parentingHelp';
   }
 
   public isDigitalCultureSecurity(): boolean {
-    return this.name === 'Culture et sécurité numérique';
+    return this.id === 'digitalCultureSecurity';
   }
 
   public isSocialAndProfessional(): boolean {
-    return this.name === 'Insertion sociale et professionnelle';
+    return this.id === 'socialAndProfessional';
   }
 }

src/index.html

@@ -43,6 +43,9 @@
     <!-- Favicon -->
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
+    <!-- PWA -->
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png" />
+
     <!-- CSS & scripts -->
     <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css" />
     <link