CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.
 
+## [2.0.0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v2.0.0-beta5...v2.0.0) (2022-12-02)
+
+
+### Features
+
+* **dev:** add documentation cache config ([5dfd22c](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/5dfd22c168db1ee5b6c6c5d275984ae535f3348c))
+* **onboarding:** split public in two steps ([d66d67c](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/d66d67c957c26f207bb956ff345bacbe53275d06))
+* **orientation:** print orientation design ([adf8431](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/adf843161ea16c0642dce89150075a41d48f82f0))
+* **profile:** add loader on member loading ([862522c](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/862522c1fed0c30c906d7be7a6793020067fcda0))
+* Remove online mediation button from footer ([401b519](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/401b519c214445fee31f748707ff3f4265237fda))
+
+
+### Bug Fixes
+
+* Hide profile sections that are not implemented yet ([a38bea6](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/a38bea6f7a5ef519025fd4a4a2f1e94802618dbb))
+* **orientation:** distance display when no position sharing ([b17060b](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/b17060bd5f3c969298906c549432f3187ca242a9))
+* **orientation:** onlineProcedure was unnecessarily cut ([d5a29d6](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/d5a29d660cf97e4bc5712c0675bb8b20eaee7abd))
+* **orientation:** typo ([e495be8](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/e495be8c03ad0941aa912693fca2d42880d36653))
+* **profile:** members number display ([7858618](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/785861830fb99a5d012e340032993b059fc23974))
+
 ## [2.0.0-beta5](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v2.0.0-beta4...v2.0.0-beta5) (2022-11-23)
 
 

ngsw-config.json

@@ -19,6 +19,16 @@
     }
   ],
   "dataGroups": [
+    {
+      "name": "documentation",
+      "urls": ["/doc/**"],
+      "cacheConfig": {
+        "strategy": "freshness",
+        "maxSize": 10000,
+        "maxAge": "12h",
+        "timeout": "5s"
+      }
+    },
     {
       "name": "ghost",
       "urls": ["/blog/**"],

package.json

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

src/app/annuaire/annuaire.component.html

-<div class="content-container" [ngClass]="{ logged: userIsLoggedIn() }">
+<div class="content-container no-pt" [ngClass]="{ logged: userIsLoggedIn() }">
   <div *ngIf="userIsLoggedIn()">
     <app-search-bar
       class="hide-on-print"

src/app/annuaire/annuaire.component.scss

@@ -3,7 +3,6 @@
 .content-container {
   box-sizing: border-box;
   height: calc(100% - $footer-height);
-  padding-top: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/app/annuaire/search-bar/search-bar.component.html

@@ -79,8 +79,6 @@
       [text]="filter"
       (action)="removeFilter(filter)"
     ></app-button>
-    <div class="reset-icon" (click)="resetFilters()">
-      <app-svg-icon [type]="'ico'" [icon]="'tagReset'" [iconColor]="'black'"></app-svg-icon>
-    </div>
+    <app-button [style]="buttonTypeEnum.TagCloudResetButton" (action)="resetFilters()"></app-button>
   </div>
 </div>

src/app/annuaire/search-bar/search-bar.component.scss

-@import '../../../assets/scss/color';
-@import '../../../assets/scss/color';
-@import '../../../assets/scss/typography';
-@import '../../../assets/scss/inputs';
-@import '../../../assets/scss/hyperlink';
-@import '../../../assets/scss/breakpoint';
-@import '../../../assets/scss/buttons';
+@import '../../../assets/scss/search';
 
-.block {
-  padding: 0.5rem 0.5rem 0 0.5rem;
-  border-bottom: solid 1px $grey-6;
-  background: $white;
-  @media #{$large-tablet} {
-    padding: 0 10px;
-  }
-}
 .content {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  input {
-    @include lato-regular-13;
-    @include input-search;
-    margin-top: unset;
-  }
   .inputSearch {
-    padding: 6px 10px 6px 6px;
     max-width: 400px;
     width: 100%;
-    min-width: 200px;
-    background-color: $grey-8;
-    color: $grey-3;
-    height: 36px;
-    border-radius: 50px;
-    margin-right: 0.25rem;
-    @media #{$large-desktop} {
-      min-width: 250px;
-    }
-    @media #{$large-tablet} {
-      width: 100%;
-      margin-bottom: 0.5rem;
-      margin-right: 0;
-    }
-    .container {
-      width: 100%;
-      height: 40px;
-      .separation {
-        border-right: solid 1px $grey-4;
-        width: 5px;
-        height: 23px;
-        margin-right: 5px;
-      }
-    }
-  }
-  @media #{$large-tablet} {
-    flex-direction: column !important;
-    padding-top: 1rem;
-  }
-}
-.btn-container {
-  width: 100%;
-  display: flex;
-}
-.btnSection {
-  width: 100%;
-  justify-content: flex-start !important;
-  @media #{$large-tablet} {
-    display: contents !important;
-  }
-  button {
-    background: $white;
-    height: 36px;
-    border: 1px solid $grey-4;
-    padding: 10px 12px;
-    outline: none;
-    border-radius: 50px;
-    cursor: pointer;
-    text-align: left;
-    transition: all 300ms ease;
-    line-height: 110%;
-    @include btn-normal;
-    @include lato-regular-13;
-    &:hover:not(.selected) {
-      background: $grey-7;
-    }
-    .arrow {
-      background-color: transparent;
-      border-bottom: 1px solid $black;
-      border-right: 1px solid $black;
-      transform: translateY(-25%) rotate(45deg);
-      margin: 0 5px 0 10px;
-      height: 7px;
-      width: 7px;
-      transition: all 300ms ease;
-    }
-    &:focus {
-      border-color: $focus-color;
-    }
-  }
-  .selected {
-    background-color: $primary-color;
-    border-color: $primary-color !important;
-    color: $white;
-    .arrow {
-      background-color: transparent;
-      border-bottom: 1px solid $white;
-      border-right: 1px solid $white;
-      transform: translateY(25%) rotate(-135deg);
-      margin: 0 5px 0 10px;
-      height: 7px;
-      width: 7px;
-    }
-  }
-  .btn-filter {
-    height: 40px;
-    span {
-      line-height: 110%;
-    }
-  }
-  .containCheckedFilters {
-    border-color: $primary-color;
-  }
-}
-::ng-deep .btn-regular.tertiary {
-  height: 40px !important;
-  div {
-    line-height: normal;
-  }
-}
-.footerSearchSection {
-  margin: 8px 0px 8px 0px;
-  height: 40px;
-}
-
-.icon {
-  background-color: transparent;
-  border: 1px solid transparent;
-  outline: none;
-  cursor: pointer;
-  &.pin {
-    padding: 4px 6px 8px 6px;
-    &:hover {
-      .ico-pin-search {
-        background-color: $primary-color;
-      }
-    }
-    &:focus {
-      border-color: $primary-color;
-      .ico-pin-search {
-        background-color: $primary-color;
-      }
-    }
-    &:active {
-      border-color: transparent;
-      .ico-pin-search {
-        background-color: $blue-light;
-      }
-    }
-  }
-  &.close {
-    &:focus {
-      border-color: $primary-color;
-    }
-    &:active {
-      border-color: transparent;
-    }
-  }
-}
-a {
-  @include hyperlink;
-  text-align: right;
-}
-
-.phoneSection {
-  margin: 9px 0px 18px 0px;
-  display: none;
-  .btnSection {
-    padding: 0;
-  }
-}
-@media #{$large-tablet} {
-  .isntPhoneContent {
-    display: none !important;
-  }
-  .phoneSection {
-    display: block;
-  }
-}
-.filterTags {
-  margin-top: 0.5rem;
-  .title {
-    margin-top: 5px;
-    color: $grey-3;
-  }
-  .reset-icon {
-    padding-top: 0.2rem;
-    cursor: pointer;
   }
 }

src/app/carto/carto.component.html

-<div class="content-container" [ngClass]="{ 'height-100': isOrientationForm }">
+<div class="content-container no-pt" [ngClass]="{ 'height-100': isOrientationForm }">
   <div class="hide-on-print">
     <app-structure-list-search (searchEvent)="getStructures($event)" [filters]="filters"></app-structure-list-search>
   </div>

src/app/carto/carto.component.scss

@@ -12,7 +12,6 @@
 .content-container {
   height: calc(100vh - #{$header-height});
   background: $white;
-  padding-top: 0.6rem;
   display: flex;
   flex-direction: column;
 }

src/app/carto/carto.component.ts

@@ -49,6 +49,7 @@ export class CartoComponent implements OnInit {
       // Set user location if provided
       if (this.userLatitude && this.userLongitude) {
         this.userLocate = [this.userLongitude, this.userLatitude];
+        this.getAddress(this.userLongitude, this.userLatitude);
       }
       if (navigator.geolocation) {
         this.getLocation(this.filters);
@@ -74,7 +75,7 @@ export class CartoComponent implements OnInit {
       if (this.isLocationRequest(queryString.value)) {
         this.getCoordByAddress(queryString.value).then((res) => {
           this.currentLocation = res;
-          this.updateStructuresdistance(
+          this.updateStructuresDistance(
             this.structures,
             this.currentLocation.geometry.getLon(),
             this.currentLocation.geometry.getLat()
@@ -83,7 +84,7 @@ export class CartoComponent implements OnInit {
       } else {
         this.structureService.getStructures(filters).subscribe((structures) => {
           if (structures) {
-            this.updateStructuresdistance(structures, this.userLongitude, this.userLatitude, false);
+            this.updateStructuresDistance(structures, this.userLongitude, this.userLatitude, false);
           } else {
             this.structures = null;
           }
@@ -93,7 +94,7 @@ export class CartoComponent implements OnInit {
       this.searchedValue = null;
       this.structureService.getStructures(filters).subscribe((structures) => {
         if (structures) {
-          this.updateStructuresdistance(structures, this.userLongitude, this.userLatitude);
+          this.updateStructuresDistance(structures, this.userLongitude, this.userLatitude);
         } else {
           this.structures = null;
         }
@@ -111,10 +112,10 @@ export class CartoComponent implements OnInit {
    * Update structure distance according to user actual position.
    * @param structures structures data to update
    * @param lon user longitude
-   * @param lat user latitde
+   * @param lat user latitude
    * @param sortByDistance if set to `true`, structures data is sort by distance. Default value is `true`
    */
-  private updateStructuresdistance(
+  private updateStructuresDistance(
     structures: Structure[],
     lon: number,
     lat: number,
@@ -122,11 +123,11 @@ export class CartoComponent implements OnInit {
   ): void {
     Promise.all(
       structures.map(async (structure) => {
-        if (this.geolocation) {
+        if (lon && lat) {
           structure = this.getStructurePosition(structure, lon, lat);
-          if (this.isAdmin) {
-            structure.isClaimed = await this.isClaimed(structure).toPromise();
-          }
+        }
+        if (this.isAdmin) {
+          structure.isClaimed = await this.isClaimed(structure).toPromise();
         }
         return structure;
       })

src/app/footer/footer.component.html

@@ -7,10 +7,6 @@
   </div>
 
   <div class="right">
-    <button class="mediationButton" (click)="goToMediation()">
-      <img src="/assets/ico/telephone.svg" alt="telephone" />
-      Médiation numérique
-    </button>
     <a
       class="metro-link"
       href="https://www.grandlyon.com"

src/app/footer/footer.component.ts

 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss'],
 })
-export class FooterComponent {
-  constructor(private router: Router) {}
-
-  public goToMediation(): void {
-    this.router.navigate(['/orientation'], { state: { mediationNumerique: true } });
-  }
-}
+export class FooterComponent {}

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

@@ -447,6 +447,11 @@ export class FormViewComponent implements OnInit, AfterViewInit {
         return {
           categories: {
             age: this.structureForm.get('categories').get('age').value,
+          },
+        };
+      case structureFormStep.structurePublicTargetOptional:
+        return {
+          categories: {
             languageAndIlliteracy: this.structureForm.get('categories').get('languageAndIlliteracy').value,
             handicaps: this.structureForm.get('categories').get('handicaps').value,
             publicOthers: this.structureForm.get('categories').get('publicOthers').value,

src/app/form/form-view/structure-form/structure-form.component.html

@@ -113,9 +113,19 @@
       [isEditMode]="isEditMode"
       [structureForm]="structureForm"
       [age]="age"
+      (validateForm)="setValidationsForm()"
+      (updateChoice)="updateChoice($event)"
+    >
+    </app-structure-public-target>
+  </div>
+  <div *ngIf="currentStep == structureFormStep.structurePublicTargetOptional">
+    <app-structure-public-target
+      [isEditMode]="isEditMode"
+      [structureForm]="structureForm"
       [handicaps]="handicaps"
       [publicOthers]="publicOthers"
       [languageAndIlliteracy]="languageAndIlliteracy"
+      [isMandatoryFields]="false"
       (validateForm)="setValidationsForm()"
       (updateChoice)="updateChoice($event)"
     >

src/app/form/form-view/structure-form/structure-form.component.ts

@@ -68,6 +68,7 @@ export class StructureFormComponent implements OnChanges, OnInit {
         this.currentStep === structureFormStep.structureCreationFinishedInfo ||
         this.currentStep === structureFormStep.structureHours ||
         this.currentStep === structureFormStep.structureTrainingType ||
+        this.currentStep === structureFormStep.structurePublicTargetOptional ||
         this.currentStep === structureFormStep.structureEquipments ||
         this.currentStep === structureFormStep.structureLabels ||
         this.currentStep === structureFormStep.structureSolidarityMaterial ||
@@ -194,6 +195,9 @@ export class StructureFormComponent implements OnChanges, OnInit {
       this.pagesValidation[structureFormStep.structurePublicTarget] = {
         valid: this.structureForm.get('categories').get('age').valid,
       };
+      this.pagesValidation[structureFormStep.structurePublicTargetOptional] = {
+        valid: true,
+      };
       this.pagesValidation[structureFormStep.structureDigitalHelpingAccompanimentOther] = {
         valid: this.structureForm.get('otherDescription').valid,
       };

src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html

@@ -8,74 +8,84 @@
       [icon]="'arrowBack'"
     ></app-svg-icon>
     <div class="titleContent">
-      <h3>Quel public peut être accueilli dans cette structure&nbsp;?</h3>
-      <p>Plusieurs choix possibles</p>
+      <h3>
+        {{
+          isMandatoryFields
+            ? 'Quel public peut être accueilli dans cette structure&nbsp;?'
+            : 'Quels publics spécifiques peuvent être accueillis dans cette structure&nbsp;?'
+        }}
+      </h3>
+      <p>{{ isMandatoryFields ? '' : 'Facultatif - ' }}Plusieurs choix possibles</p>
     </div>
   </div>
   <p class="missing-information" *ngIf="isEditMode && !structureForm.get('categories').get('age').valid">
     <app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" class="validationIcon"></app-svg-icon>
     <span>Il faut renseigner au moins un champ</span>
   </p>
-  <div *ngIf="publicOthers">
-    <div class="btn-grid">
-      <app-button
-        *ngFor="let choice of publicOthers.modules"
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isInArray(choice.id, 'publicOthers') ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="choice.name"
-        (action)="updateChoicePublic(choice.id, 'publicOthers')"
-      ></app-button>
+  <ng-container *ngIf="!isMandatoryFields">
+    <div *ngIf="languageAndIlliteracy">
+      <div class="title">
+        <h4>Langue et illettrisme</h4>
+      </div>
+      <div class="btn-grid">
+        <app-button
+          *ngFor="let choice of languageAndIlliteracy.modules"
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="choice.name"
+          (action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
+        ></app-button>
+      </div>
     </div>
-  </div>
-  <div *ngIf="age">
-    <div class="title">
-      <h4>Âge</h4>
-    </div>
-    <div class="btn-grid">
-      <app-button
-        *ngFor="let choice of age.modules"
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="choice.name"
-        (action)="updateChoicePublic(choice.id, 'age')"
-      ></app-button>
-    </div>
-  </div>
+    <div *ngIf="handicaps">
+      <div class="title">
+        <h4>Handicaps</h4>
+      </div>
 
-  <div *ngIf="languageAndIlliteracy">
-    <div class="title">
-      <h4>Langue et illettrisme</h4>
-      <p>Facultatif</p>
+      <div class="btn-grid">
+        <app-button
+          *ngFor="let choice of handicaps.modules"
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="choice.name"
+          (action)="updateChoicePublic(choice.id, 'handicaps')"
+        ></app-button>
+      </div>
     </div>
-    <div class="btn-grid">
-      <app-button
-        *ngFor="let choice of languageAndIlliteracy.modules"
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="choice.name"
-        (action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
-      ></app-button>
-    </div>
-  </div>
-
-  <div *ngIf="handicaps">
-    <div class="title">
-      <h4>Handicaps</h4>
-      <p>Facultatif</p>
+    <div *ngIf="publicOthers">
+      <div class="title">
+        <h4>Autre</h4>
+      </div>
+      <div class="btn-grid">
+        <app-button
+          *ngFor="let choice of publicOthers.modules"
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isInArray(choice.id, 'publicOthers') ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="choice.name"
+          (action)="updateChoicePublic(choice.id, 'publicOthers')"
+        ></app-button>
+      </div>
     </div>
+  </ng-container>
 
-    <div class="btn-grid">
-      <app-button
-        *ngFor="let choice of handicaps.modules"
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="choice.name"
-        (action)="updateChoicePublic(choice.id, 'handicaps')"
-      ></app-button>
+  <ng-container *ngIf="isMandatoryFields">
+    <div *ngIf="age">
+      <div class="title">
+        <h4>Âge</h4>
+      </div>
+      <div class="btn-grid">
+        <app-button
+          *ngFor="let choice of age.modules"
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="choice.name"
+          (action)="updateChoicePublic(choice.id, 'age')"
+        ></app-button>
+      </div>
     </div>
-  </div>
+  </ng-container>
 </form>

src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.ts

@@ -14,6 +14,7 @@ export class StructurePublicTargetComponent implements OnInit {
   @Input() handicaps: Category;
   @Input() publicOthers: Category;
   @Input() isEditMode: boolean;
+  @Input() isMandatoryFields = true;
   @Output() updateChoice = new EventEmitter<any>();
   @Output() validateForm = new EventEmitter<any>();
 

src/app/form/form-view/structure-form/structureFormStep.enum.ts

@@ -12,6 +12,7 @@ export enum structureFormStep {
   structurePmr,
   structureWebAndSocialNetwork,
   structurePublicTarget,
+  structurePublicTargetOptional,
   structureDigitalHelpingAccompaniment,
   structureDigitalHelpingAccompanimentOther,
   structureTrainingType,

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

@@ -197,7 +197,7 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
     const onlineProcedures: Filter[] = this.onlineDemarchForm.value.onlineDemarcheType.map((module: Module) => {
       return new Filter('onlineProcedures', module.id, module.displayText);
     });
-    if (onlineProcedures.length > 0) this.filters.push(onlineProcedures[0]);
+    if (onlineProcedures.length > 0) this.filters = [...onlineProcedures, ...this.filters];
   }
 
   public setFilters(category: string): void {

src/app/profile/profile.component.html

@@ -103,7 +103,8 @@
     ></app-button>
   </section>
 
-  <section *ngIf="!isPublic">
+  <!-- Features not impleted yet -->
+  <!-- <section *ngIf="!isPublic">
     <div class="header">
       <h1>Ressources</h1>
     </div>
@@ -112,5 +113,5 @@
     <div class="header">
       <h1>Newsletter</h1>
     </div>
-  </section>
+  </section> -->
 </div>