CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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-beta1.1](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v2.0.0-beta1...v2.0.0-beta1.1) (2022-04-04)
+
+
+### Bug Fixes
+
+* V2.0.0-beta1 various design returns for onboarding, carto ans structures ([a9b2386](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/a9b2386538bdbf731660a71bee86dfb19a240906))
+
 ## [2.0.0-beta1](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.16.0...v2.0.0-beta1) (2022-03-29)
 
 

package-lock.json

 {
   "name": "pamn",
-  "version": "2.0.0-beta1",
+  "version": "2.0.0-beta1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

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

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

@@ -125,10 +125,6 @@ export class FooterFormComponent implements OnChanges {
         //TODO Go to send mail page and send the mail
         return;
       }
-      if (this.currentStep === structureFormStep.structureConsent) {
-        const user: User = await this.profileService.getProfile();
-        this.structureService.createStructure(this.form.value, user).subscribe(() => {});
-      }
     }
     if (this.isPersonalOfferpage()) {
       this.endForm.emit({ formType: this.currentForm });

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

@@ -32,11 +32,7 @@
               fxLayoutAlign="space-around"
               class="form-list"
               [class]="
-                structure['alreadySelected']
-                  ? 'already-selected'
-                  : isSelectedStructure(structure)
-                  ? 'item-selected'
-                  : ''
+                structure.alreadySelected ? 'already-selected' : isSelectedStructure(structure) ? 'item-selected' : ''
               "
             >
               <div fxLayout="row" fxLayoutAlign="space-between center">
@@ -51,7 +47,7 @@
                   [type]="'form'"
                   [icon]="'validate'"
                 ></app-svg-icon>
-                <div *ngIf="structure['alreadySelected']" class="sticker">Déjà<br />sélectionnée</div>
+                <div *ngIf="structure.alreadySelected" class="sticker">Déjà<br />sélectionnée</div>
               </div>
             </div>
           </div>

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

@@ -15,8 +15,8 @@ export class ProfileStructureChoiceComponent implements OnInit {
   @Input() structureForm: FormGroup;
   @Output() validateForm = new EventEmitter<Structure>();
   @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
-  @Output() createStructure = new EventEmitter<any>();
-  public searchString: string = '';
+  @Output() createStructure = new EventEmitter<string>();
+  public searchString = '';
   public structures: Structure[];
   public selectedStructureItem: Structure;
   public isAlreadySearching = false;
@@ -29,13 +29,15 @@ export class ProfileStructureChoiceComponent implements OnInit {
     this.isAlreadySearching = true;
     this.profileService.getProfile().then((profile) => {
       this.isAlreadySearching = false;
-      this.profileStructuresLink = profile.structuresLink;
+      this.profileStructuresLink = [...profile.structuresLink, ...profile.pendingStructuresLink];
       this.getStructures(null);
     });
   }
 
-  public onSearchChange(searchString: string) {
-    if (searchString.length < 3 && this.searchString == '') return;
+  public onSearchChange(searchString: string): void {
+    if (searchString.length < 3 && this.searchString === '') {
+      return;
+    }
     this.searchString = searchString;
     const filters: Filter[] = [];
     if (searchString.length > 0) {
@@ -45,28 +47,32 @@ export class ProfileStructureChoiceComponent implements OnInit {
   }
 
   public selectedResult(structure: Structure): void {
-    if (structure['alreadySelected']) return;
-    if (this.selectedStructureItem) this.selectedStructureItem['selected'] = false;
+    if (structure.alreadySelected) {
+      return;
+    }
     this.selectedStructureItem = structure;
     this.structureForm.patchValue({ _id: structure._id, structureName: structure.structureName });
     this.validateForm.emit();
   }
 
   public isSelectedStructure(structure: Structure): boolean {
-    if (this.selectedStructureItem && this.selectedStructureItem._id === structure._id) return true;
-    return false;
+    if (this.selectedStructureItem && this.selectedStructureItem._id === structure._id) {
+      return true;
+    } else {
+      return false;
+    }
   }
 
-  private getStructures(filters: Filter[]) {
+  private getStructures(filters: Filter[]): void {
     if (!this.isAlreadySearching) {
       this.isAlreadySearching = true;
       this.structureService.getStructuresByName(filters).subscribe((structures) => {
         structures.forEach((structure) => {
           if (this.profileStructuresLink.includes(structure._id)) {
-            structure['alreadySelected'] = true;
+            structure.alreadySelected = true;
           }
         });
-        if (this.searchString == '') {
+        if (this.searchString === '') {
           structures.sort((a, b) => a.structureName.localeCompare(b.structureName));
         }
         this.structures = structures;
@@ -76,6 +82,6 @@ export class ProfileStructureChoiceComponent implements OnInit {
   }
 
   public addStructure(): void {
-    this.createStructure.emit();
+    this.createStructure.emit(this.searchString);
   }
 }

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

@@ -3,7 +3,7 @@
     <app-profile-structure-choice
       [structureForm]="structureForm"
       (validateForm)="setValidationsForm()"
-      (createStructure)="goToCreateStructure()"
+      (createStructure)="goToCreateStructure($event)"
     ></app-profile-structure-choice>
   </ng-container>
   <ng-container *ngIf="currentStep === structureFormStep.structureFormTime" class="no-max-width">

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

@@ -352,7 +352,8 @@ export class StructureFormComponent implements OnChanges {
     this.setValidationsForm();
   }
 
-  public goToCreateStructure(): void {
+  public goToCreateStructure(structureName = ''): void {
+    this.structureForm.patchValue({ _id: null, structureName });
     this.isNotExistingStructure.emit();
   }
 }

src/app/login/login.component.ts

@@ -86,7 +86,6 @@ export class LoginComponent implements OnInit {
       .subscribe(
         () => {
           if (this.isWelcome) {
-            console.log('la ?');
             this.router.navigateByUrl('form/profile');
           } else {
             this.router.navigateByUrl('news');

src/app/models/structure.model.ts

@@ -63,6 +63,8 @@ export class Structure {
 
   public personalOffers: PersonalOffer[] = [];
 
+  public alreadySelected? = false;
+
   constructor(obj?: any) {
     Object.assign(this, obj, {
       hours: obj && obj.hours ? new Week(obj.hours) : new Week(),
@@ -176,7 +178,7 @@ export class Structure {
       case Equipment.tablet:
         return this.nbTablets > 1 ? 'Tablettes' : 'Tablette';
       case Equipment.computer:
-        return this.nbComputers > 1 ? 'Ordinateurs à disposition' : 'Ordinateur à disposition';
+        return this.nbComputers > 1 ? 'Ordinateurs' : 'Ordinateur';
       case Equipment.scanner:
         return this.nbScanners > 1 ? 'Scanners' : 'Scanner';
       default:

src/app/post/components/post-header/post-header.component.scss

@@ -59,7 +59,7 @@ h1 {
       width: 7px;
     }
     &:focus {
-      border-color: $blue-middle;
+      border-color: $focus-color;
     }
   }
   .selected {

src/app/structure-list/components/modal-filter/modal-filter.component.html

@@ -99,7 +99,7 @@
     </div>
     <!-- Filter with multiple categories -->
     <div
-      class="contentModal maxModal"
+      class="contentModal maxModal max-height"
       fxLayout="row wrap"
       fxLayoutAlign="flex-start"
       *ngIf="categories.length > 1 && getModalType() !== 'moreFilters'"
@@ -120,13 +120,16 @@
                     class="customCheck customCheckPrimary"
                     [ngClass]="{ halfCheck: getCategoryCheckboxStatus(c) === 'halfChecked' }"
                   ></span>
-                  <div class="label">{{ c.name }}</div>
                 </label>
                 <div
-                  class="arrow"
+                  fxLayout="row"
+                  fxLayoutAlign="space-between center"
+                  class="w-100 clickable"
                   (click)="toggleShowCategory(c.id)"
-                  [ngClass]="{ toggled: this.toggledCategories.includes(c.id) }"
-                ></div>
+                >
+                  <div class="label">{{ c.name }}</div>
+                  <div class="arrow" [ngClass]="{ toggled: this.toggledCategories.includes(c.id) }"></div>
+                </div>
               </div>
               <ul class="blockLigne smallList" [ngClass]="{ show: this.toggledCategories.includes(c.id) }">
                 <div fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre" *ngFor="let module of c.modules">
@@ -137,7 +140,7 @@
                           type="checkbox"
                           [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
                           [value]="module.id"
-                          (change)="onCheckboxChange($event, c.id)"
+                          (change)="onCheckboxChange($event, c.id, module.text)"
                         />
                         <span class="customCheck customCheckPrimary"></span>
                         <div class="label">{{ module.text }}</div>

src/app/structure-list/components/modal-filter/modal-filter.component.scss

@@ -144,6 +144,10 @@
     .toggled {
       transform: translateY(25%) rotate(-135deg);
     }
+    &.max-height {
+      max-height: 50vh;
+      overflow-y: overlay;
+    }
   }
   .footer {
     box-sizing: border-box;
@@ -182,6 +186,7 @@
     background: white;
     margin-top: 10%;
     border-radius: 8px;
+    // overflow: hidden;
   }
   .backDropModal {
     background: white;

src/app/structure-list/components/modal-filter/modal-filter.component.ts

-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { ButtonType } from '../../../shared/components/button/buttonType.enum';
 import { TypeModal } from '../../enum/typeModal.enum';
 import { Category } from '../../models/category.model';
@@ -10,8 +10,9 @@ import { SearchService } from '../../services/search.service';
   templateUrl: './modal-filter.component.html',
   styleUrls: ['./modal-filter.component.scss'],
 })
-export class ModalFilterComponent implements OnInit {
+export class ModalFilterComponent implements OnInit, OnChanges {
   constructor(public searchService: SearchService) {}
+
   @Input() public modalType: TypeModal;
   @Input() public categories: Category[];
   //checked modules filter list
@@ -28,6 +29,12 @@ export class ModalFilterComponent implements OnInit {
     this.checkedModules = this.modules.slice();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.modalType) {
+      this.checkedModules = this.modules.slice();
+    }
+  }
+
   // Management of the checkbox event (Check / Uncheck)
   public onCheckboxChange(event, categ: string, text?: string): void {
     const checkValue: string = event.target.value;

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

@@ -235,9 +235,7 @@
       fxLayoutAlign="baseline baseline"
       fxLayoutGap="12px"
     >
-      <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
-        <h2>Labellisations</h2>
-      </div>
+      <h2>Labellisations</h2>
       <div class="wrapper">
         <div *ngFor="let labels of structure.labelsQualifications">
           <app-logo-card [name]="labels"></app-logo-card>
@@ -253,9 +251,7 @@
       fxLayoutAlign="baseline baseline"
       fxLayoutGap="12px"
     >
-      <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
-        <h2>Aides numérique</h2>
-      </div>
+      <h2>Aides numérique</h2>
       <div fxLayout="column">
         <div class="wrapper">
           <div *ngFor="let accompagnement of structure.proceduresAccompaniment">
@@ -276,11 +272,8 @@
       fxLayout="column"
       class="structure-details-block noSeparator"
       fxLayoutAlign="baseline baseline"
-      fxLayoutGap="20px"
     >
-      <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
-        <h2>Formations</h2>
-      </div>
+      <h2>Formations</h2>
       <div *ngIf="structure.freeWorkShop">
         <span *ngIf="multipleWorkshop()" class="bold-info">L'accès à ces formations est gratuit</span>
         <span *ngIf="!multipleWorkshop()" class="bold-info">L'accès à cette formation est gratuit</span>
@@ -424,11 +417,8 @@
       fxLayout="column"
       class="structure-details-block"
       fxLayoutAlign="baseline baseline"
-      fxLayoutGap="20px"
     >
-      <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
-        <h2>Matériel et wifi</h2>
-      </div>
+      <h2>Matériel et wifi</h2>
       <div fxLayout="column">
         <div *ngIf="filterOnlyEquipments(structure.equipmentsAndServices).includes('wifiEnAccesLibre')">
           {{ getEquipmentsLabel('wifiEnAccesLibre') }}
@@ -459,15 +449,12 @@
       fxLayout="column"
       class="structure-details-block noSeparator"
       fxLayoutAlign="baseline baseline"
-      fxLayoutGap="20px"
     >
-      <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
-        <h2>Accès</h2>
-      </div>
+      <h2>Accès</h2>
       <div fxLayout="column wrap" fxLayoutGap="24px">
         <div *ngFor="let tclStop of tclStopPoints | slice: 0:3">
           {{ tclStop.name }}
-          <div fxLayout="row wrap" fxLayoutGap="24px">
+          <div fxLayout="row wrap" fxLayoutGap="16px">
             <p *ngFor="let sub of tclStop.subLines">
               <app-svg-icon [type]="'tcl'" [icon]="sub" [iconClass]="'icon-75'"></app-svg-icon>
             </p>

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

@@ -86,7 +86,6 @@ h3 {
     }
   }
   @media #{$tablet} {
-    height: calc(100vh - #{$header-height});
     .printButton {
       display: none !important;
     }

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

@@ -140,7 +140,7 @@ export class StructureDetailsComponent implements OnInit {
       case Equipment.tablet:
         return this.structure.nbTablets > 1 ? 'Tablettes' : 'Tablette';
       case Equipment.computer:
-        return this.structure.nbComputers > 1 ? 'Ordinateurs à disposition' : 'Ordinateur à disposition';
+        return this.structure.nbComputers > 1 ? 'Ordinateurs' : 'Ordinateur';
       case Equipment.scanner:
         return this.structure.nbScanners > 1 ? 'Scanners' : 'Scanner';
       default:

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

@@ -92,7 +92,7 @@
       transition: all 300ms ease;
     }
     &:focus {
-      border-color: $blue-middle;
+      border-color: $focus-color;
     }
   }
   .selected {
@@ -154,7 +154,7 @@
       height: 20px;
       border: solid 1px $grey-4;
       background: white;
-      margin-left: 0;
+      margin: 0;
       margin-right: 5px;
       transition: all 300ms ease;
       position: relative;
@@ -201,7 +201,7 @@
     padding: 4px 6px 8px 6px;
     &:hover {
       .ico-pin-search {
-        background-color: $blue-middle;
+        background-color: $primary-color;
       }
     }
     &:focus {

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

-<div class="structureList-container" (scroll)="onScrollDown($event)">
+<div class="structureList-container">
   <div class="structureListHeader hide-on-print">
     <div class="nbStructuresLabel" [ngPlural]="structureList.length">
       <ng-template ngPluralCase="0">0 structure</ng-template>
@@ -16,7 +16,7 @@
 
   <div id="listCard" class="listCard" (mouseleave)="mouseLeave()">
     <app-card
-      *ngFor="let structure of structuresListChunked"
+      *ngFor="let structure of structureList"
       [structure]="structure"
       (showDetails)="showDetails($event, filters)"
       (hover)="handleCardHover($event)"

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

@@ -23,10 +23,6 @@ export class StructureListComponent implements OnChanges {
   public buttonTypeEnum = ButtonType;
   public showStructureDetails = false;
   public structure: Structure;
-  public structuresListChunked: Structure[];
-  private pageStructures = 0;
-  private arrayChunked: Structure[][] = [];
-  private chunck = 10;
 
   constructor(
     private route: ActivatedRoute,
@@ -58,7 +54,6 @@ export class StructureListComponent implements OnChanges {
       });
     }
     if (changes.structureList) {
-      this.structuresListChunked = this.chunckAnArray(this.structureList);
       document.getElementById('listCard').scrollTo(0, 0);
     }
   }
@@ -93,26 +88,4 @@ export class StructureListComponent implements OnChanges {
   public emitUpdatedStructure(s: Structure): void {
     this.updatedStructure.emit(s);
   }
-
-  private chunckAnArray(structures: Structure[]): Structure[] {
-    this.arrayChunked = [];
-    this.pageStructures = 0;
-    for (let i = 0; i < structures.length; i += this.chunck) {
-      this.arrayChunked.push(structures.slice(i, i + this.chunck));
-    }
-    return this.arrayChunked[0];
-  }
-
-  public onScrollDown(event): void {
-    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 50) {
-      this.loadMoreStructures();
-    }
-  }
-  private loadMoreStructures(): void {
-    if (this.pageStructures < this.arrayChunked.length - 1) {
-      this.pageStructures++;
-      const newStructures = _.map(this.arrayChunked[this.pageStructures]);
-      this.structuresListChunked = [...this.structuresListChunked, ...newStructures];
-    }
-  }
 }