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

src/app/profile/structure-edition-summary/structure-edition-summary.component.html

@@ -679,7 +679,11 @@
         ></app-button>
       </div>
       <div class="content" *ngIf="members">
-        <p>{{ members.length }} membre(s)</p>
+        <div [ngPlural]="members.length">
+          <ng-template ngPluralCase="1">Aucun autre membre</ng-template>
+          <ng-template ngPluralCase="2">1 membre</ng-template>
+          <ng-template ngPluralCase="other">{{ members.length - 1 }} membre(s)</ng-template>
+        </div>
       </div>
     </div>
   </div>

src/app/profile/structure-members-management/structure-members-management.component.html

@@ -15,6 +15,9 @@
       ></app-button>
     </div>
 
+    <div *ngIf="isLoading" class="loader">
+      <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+    </div>
     <div *ngIf="structureWithOwners && tempUsers" class="membersList">
       <div *ngFor="let member of structureWithOwners.owners" class="member-card">
         <div class="user">

src/app/profile/structure-members-management/structure-members-management.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { finalize } from 'rxjs';
 import { Owner } from '../../models/owner.model';
 import { Structure } from '../../models/structure.model';
 import { StructureWithOwners } from '../../models/structureWithOwners.model';
@@ -26,6 +27,7 @@ export class StructureMembersManagementComponent implements OnInit {
   public excludeModalOpenned = false;
   public cancelAddTempUserModalOpenned = false;
   public buttonTypeEnum = ButtonType;
+  public isLoading = true;
 
   constructor(
     private route: ActivatedRoute,
@@ -39,9 +41,12 @@ export class StructureMembersManagementComponent implements OnInit {
       if (data.structure) {
         this.structure = new Structure(data.structure);
         let currentProfile = await this.profileService.getProfile();
-        this.structureService.getStructureWithOwners(data.structure._id, currentProfile).subscribe((s) => {
-          this.structureWithOwners = s;
-        });
+        this.structureService
+          .getStructureWithOwners(data.structure._id, currentProfile)
+          .pipe(finalize(() => (this.isLoading = false)))
+          .subscribe((s) => {
+            this.structureWithOwners = s;
+          });
         this.structureService.getTempUsers(data.structure._id).subscribe((data) => {
           this.tempUsers = data;
         });

src/app/shared/components/button/button.component.html

@@ -278,3 +278,9 @@
     ></app-svg-icon>
   </button>
 </ng-container>
+<ng-container *ngIf="style === buttonTypeEnum.TagCloudResetButton">
+  <button class="flex row btn-tags-cloud reset" (click)="doAction()">
+    <span>Supprimer les filtres</span>
+    <app-svg-icon [type]="'ico'" [icon]="'tagReset'" [iconClass]="'icon-16'" [iconColor]="'black'"></app-svg-icon>
+  </button>
+</ng-container>

src/app/shared/components/button/button.component.scss

@@ -316,6 +316,19 @@ button {
   &.unchecked {
     background: $grey-1;
   }
+
+  &.reset {
+    justify-content: space-between;
+    width: 156px;
+    max-width: unset;
+    background: $white;
+    color: $black;
+    border: 1px solid $grey-4;
+    border-radius: 20px;
+    span {
+      max-width: unset;
+    }
+  }
 }
 button:disabled {
   opacity: 0.4;

src/app/shared/components/button/buttonType.enum.ts

@@ -15,4 +15,5 @@ export enum ButtonType {
   modalPrimary,
   modalSecondary,
   TagCloudButton,
+  TagCloudResetButton,
 }

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

@@ -14,7 +14,7 @@
           <span class="typeStructure" [ngClass]="{ typeStructureOrientation: isOrientation }">{{
             structure.getLabelTypeStructure()
           }}</span>
-          <span *ngIf="isOrientation" class="distance">
+          <span *ngIf="isOrientation && structure.distance" class="distance">
             {{ this.formatDistance() }}
           </span>
         </div>