Compare revisions

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)

    }

  ],

  "dataGroups": [

    {

      "name": "documentation",

      "urls": ["/doc/**"],

      "cacheConfig": {

        "strategy": "freshness",

        "maxSize": 10000,

        "maxAge": "12h",

        "timeout": "5s"

      }

    },

    {

      "name": "ghost",

      "urls": ["/blog/**"],

{

  "name": "pamn",

  "version": "2.0.0-beta5",

  "version": "2.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve --configuration=fr --proxy-config proxy.conf.json",

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

.content-container {

  box-sizing: border-box;

  height: calc(100% - $footer-height);

  padding-top: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

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

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

  }

}

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

.content-container {

  height: calc(100vh - #{$header-height});

  background: $white;

  padding-top: 0.6rem;

  display: flex;

  flex-direction: column;

}

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

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

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

          }

      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;

        }

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

  ): 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();

        }

        }

        return structure;

      })

    ).then((structureList) => {

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

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

    ></app-button>

  </section>

  <section *ngIf="!isPublic">

  <!-- Features not impleted yet -->

  <!-- <section *ngIf="!isPublic">

    <div class="header">

      <h1>Ressources</h1>

    </div>

    <div class="header">

      <h1>Newsletter</h1>

    </div>

  </section>

  </section> -->

</div>

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

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

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

  public excludeModalOpenned = false;

  public cancelAddTempUserModalOpenned = false;

  public buttonTypeEnum = ButtonType;

  public isLoading = true;

  constructor(

    private route: ActivatedRoute,

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

          .getStructureWithOwners(data.structure._id, currentProfile)

          .pipe(finalize(() => (this.isLoading = false)))

          .subscribe((s) => {

            this.structureWithOwners = s;

          });

        this.structureService.getTempUsers(data.structure._id).subscribe((data) => {

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

  &.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;

  modalPrimary,

  modalSecondary,

  TagCloudButton,

  TagCloudResetButton,