src/app/app.component.ts

 import { Component } from '@angular/core';
+import { ProfileService } from './profile/services/profile.service';
+import { AuthService } from './services/auth.service';
 import { PrintService } from './shared/service/print.service';
 
 @Component({
@@ -9,5 +11,13 @@ import { PrintService } from './shared/service/print.service';
 export class AppComponent {
   title = 'pamn';
 
-  constructor(public printService: PrintService) {}
+  constructor(
+    public printService: PrintService,
+    private authService: AuthService,
+    private profilService: ProfileService
+  ) {
+    if (this.authService.isLoggedIn()) {
+      this.profilService.getProfile();
+    }
+  }
 }

src/app/app.module.ts

@@ -43,7 +43,6 @@ import { ResetPasswordComponent } from './reset-password/reset-password.componen
     LegalNoticeComponent,
     AboutComponent,
     MenuPhoneComponent,
-    FormComponent,
     UserVerificationComponent,
     ResetEmailComponent,
     ResetPasswordComponent,

src/app/form/form.component.html

@@ -35,8 +35,9 @@
       </label>
     </div>
   </div>
-  <p>Description</p>
+  <p>Description*</p>
   <textarea rows="4" style="width: 100%" maxlength="500" formControlName="description"></textarea>
+  <app-validator-form [control]="getStructureControl('description')"></app-validator-form>
   <p>
     Afin de rendre visible l'offre de formation numérique proposée lors de ce nouveau confinement, merci d'indiquer ici,
     les activités que vous avez pu maintenir
@@ -77,9 +78,6 @@
   <input type="text" formControlName="contactName" />
   <p>Prénom</p>
   <input type="text" formControlName="contactSurname" />
-  <p>Courriel*</p>
-  <input type="email" formControlName="contactMail" />
-  <app-validator-form [control]="getStructureControl('contactMail')"></app-validator-form>
   <p>Fonction</p>
   <select formControlName="fonction">
     <option value="">---Sélectionner---</option>

src/app/form/form.component.ts

@@ -11,6 +11,7 @@ import { EquipmentAccess } from '../shared/enum/equipmentAccess.enum';
 import { WeekDayEnum } from '../shared/enum/weekDay.enum';
 import { typeStructureEnum } from '../shared/enum/typeStructure.enum';
 import { FonctionContactEnum } from '../shared/enum/fonctionContact.enum';
+import { User } from '../models/user.model';
 
 @Component({
   selector: 'app-structureForm',
@@ -18,7 +19,8 @@ import { FonctionContactEnum } from '../shared/enum/fonctionContact.enum';
   styleUrls: ['./form.component.scss'],
 })
 export class FormComponent implements OnInit {
-  @Input() public idStructure: number;
+  @Input() public idStructure?: number;
+  @Input() public profile?: User;
   @Output() closeEvent = new EventEmitter<Structure>();
   public structureForm: FormGroup;
   public equipmentAccess = EquipmentAccess;
@@ -36,10 +38,14 @@ export class FormComponent implements OnInit {
   constructor(private structureService: StructureService, private searchService: SearchService) {}
 
   ngOnInit(): void {
-    this.structureService.getStructure(this.idStructure).subscribe((structure) => {
-      this.initForm(structure);
-      this.structureId = structure.id;
-    });
+    if (this.idStructure) {
+      this.structureService.getStructure(this.idStructure).subscribe((structure) => {
+        this.initForm(structure);
+        this.structureId = structure.id;
+      });
+    } else {
+      this.initForm(new Structure());
+    }
     this.searchService.getCategoriesAccompaniment().subscribe((categories: Category[]) => {
       this.proceduresAccompaniment = categories[0];
     });
@@ -77,10 +83,12 @@ export class FormComponent implements OnInit {
   private initForm(structure: Structure): void {
     // Init form
     this.structureForm = new FormGroup({
+      id: new FormControl(structure.id),
+      coord: new FormControl(structure.coord),
       structureType: this.loadArrayForCheckbox(structure.structureType, true),
       structureName: new FormControl(structure.structureName, Validators.required),
       structureRepresentation: new FormControl(structure.structureRepresentation, Validators.required),
-      description: new FormControl(structure.description),
+      description: new FormControl(structure.description, Validators.required),
       lockdownActivity: new FormControl(structure.lockdownActivity),
       address: new FormGroup({
         numero: new FormControl(structure.address.numero),
@@ -222,12 +230,21 @@ export class FormComponent implements OnInit {
   }
   public onSubmit(structureForm: FormGroup): void {
     if (structureForm.valid) {
-      this.structureService.postStructure(this.structureId, structureForm.value).subscribe(
-        (structure: Structure) => {
-          this.closeEvent.emit(structure);
-        },
-        (err) => {}
-      );
+      if (this.structureId) {
+        this.structureService.postStructure(this.structureId, structureForm.value).subscribe(
+          (structure: Structure) => {
+            this.closeEvent.emit(structure);
+          },
+          (err) => {}
+        );
+      } else {
+        this.structureService.createStructure(structureForm.value, this.profile).subscribe(
+          (structure: Structure) => {
+            this.closeEvent.emit(structure);
+          },
+          (err) => {}
+        );
+      }
     } else {
     }
   }

src/app/map/components/map.component.scss

@@ -27,29 +27,38 @@
 ::ng-deep .leaflet-popup-close-button {
   display: none;
 }
-
+::ng-deep .leaflet-bar-part-single {
+  &:hover {
+    .fa-map-marker {
+      background-color: $blue-hover;
+    }
+  }
+  &:active {
+    .fa-map-marker {
+      background-color: $blue-active;
+    }
+  }
+}
 ::ng-deep .fa-map-marker {
-  color: $black;
   position: absolute;
-  width: 12px;
-  height: 12px;
-  border: solid 1px currentColor;
-  border-radius: 7px 7px 7px 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 50% 50% 50% 0;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
-  margin-left: -6px;
-  margin-top: 6px;
-}
-
-::ng-deep .fa-map-marker:before {
-  content: '';
-  position: absolute;
-  left: 3px;
-  top: 3px;
-  width: 4px;
-  height: 4px;
-  border: solid 1px currentColor;
-  border-radius: 3px;
+  background-color: $grey-3;
+  margin-left: -8px;
+  margin-top: 4px;
+  &:before {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 6px;
+    width: 7px;
+    height: 7px;
+    border-radius: 4px;
+    background-color: $white;
+  }
 }
 
 ::ng-deep .leaflet-control-locate-circle {
@@ -82,6 +91,7 @@
 ::ng-deep .leaflet-popup {
   border-radius: 6px;
   @include background-hash;
+  border: 1px solid $grey-4;
   padding: 0 0 4px 4px;
   bottom: -15px !important;
   h1 {
@@ -110,7 +120,6 @@
 ::ng-deep .leaflet-popup-content-wrapper {
   box-shadow: unset;
   border-radius: 6px;
-  border: 1px solid $grey-4;
 }
 ::ng-deep .leaflet-popup-content {
   width: 240px;

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

@@ -69,9 +69,11 @@ export class MapComponent implements OnChanges {
     // Handle map marker tooltip
     if (changes.toogleToolTipId && changes.toogleToolTipId.currentValue !== changes.toogleToolTipId.previousValue) {
       if (changes.toogleToolTipId.previousValue !== undefined) {
-        this.mapService.toogleToolTip(changes.toogleToolTipId.previousValue);
+        this.mapService.setUnactiveMarker(changes.toogleToolTipId.previousValue);
+      }
+      if (changes.toogleToolTipId.currentValue !== undefined) {
+        this.mapService.setActiveMarker(changes.toogleToolTipId.currentValue);
       }
-      this.mapService.toogleToolTip(changes.toogleToolTipId.currentValue);
     }
     // Handle map marker selection
     if (changes.selectedMarkerId && this.map) {
@@ -232,15 +234,6 @@ export class MapComponent implements OnChanges {
     });
   }
 
-  /**
-   * Toogle all tooltips given in parameters
-   */
-  public toggleToolTip(ids: Array<number>): void {
-    ids.forEach((id) => {
-      this.mapService.toogleToolTip(id);
-    });
-  }
-
   private centerLeafletMapOnMarker(markerId: number): void {
     const marker = this.mapService.getMarker(markerId);
     const latLngs = [marker.getLatLng()];

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

@@ -8,6 +8,7 @@ import { MarkerType } from '../components/markerType.enum';
 })
 export class MapService {
   private static markersList = {};
+  private isMarkerActive = false;
   public markerIconHover = divIcon({
     className: null,
     html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker-locate"></use></svg>',
@@ -15,6 +16,13 @@ export class MapService {
     iconAnchor: [20, 46],
     popupAnchor: [0, -46],
   });
+  public markerIconActive = divIcon({
+    className: null,
+    html: '<svg width="40" height="46" fill="#d50000"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
+    iconSize: [40, 46],
+    iconAnchor: [20, 46],
+    popupAnchor: [0, -46],
+  });
   public markerIcon = divIcon({
     className: null,
     html:
@@ -96,13 +104,18 @@ export class MapService {
   }
 
   /**
-   * Toogle a tooltip
    * @param id marker id
    */
-  public toogleToolTip(id: number): void {
-    if (id) {
-      this.getMarker(id).togglePopup();
+  public setActiveMarker(id: number): void {
+    this.getMarker(id).setIcon(this.getMarkerIconHover(MarkerType.structure));
+  }
+
+  public setUnactiveMarker(id: number): void {
+    // To skip mouseleave when user emit click on structure list
+    if (!this.isMarkerActive) {
+      this.getMarker(id).setIcon(this.getMarkerIcon(MarkerType.structure));
     }
+    this.isMarkerActive = false;
   }
 
   /**
@@ -121,7 +134,8 @@ export class MapService {
    */
   public setSelectedMarker(id: number): void {
     if (id) {
-      this.getMarker(id).setIcon(this.markerIconHover);
+      this.getMarker(id).setIcon(this.markerIconActive);
+      this.isMarkerActive = true;
     }
   }
 

src/app/models/address.model.ts

 export class Address {
-  numero: string;
-  street: string;
-  commune: string;
+  numero: string = null;
+  street: string = null;
+  commune: string = null;
 }

src/app/models/day.model.ts

 import { Time } from './time.model';
 
 export class Day {
-  open: boolean;
+  open: boolean = false;
   time: Time[];
 
   constructor(obj?: any) {
     Object.assign(this, obj, {
-      time: obj && obj.time ? obj.time.map((time) => new Time(time)) : null,
+      time: obj && obj.time ? obj.time.map((time) => new Time(time)) : [],
     });
   }
 }

src/app/models/openingDay.model.ts

 export class OpeningDay {
-  day: string;
-  schedule: string;
+  day: string = null;
+  schedule: string = null;
 
-  constructor(day: string, schedule: string) {
+  constructor(day?: string, schedule?: string) {
     this.day = day;
     this.schedule = schedule;
   }

src/app/models/structure.model.ts

+import { WebElement } from 'protractor';
 import { Weekday } from '../structure-list/enum/weekday.enum';
 import { Address } from './address.model';
 import { Day } from './day.model';
 import { OpeningDay } from './openingDay.model';
 import { Week } from './week.model';
 export class Structure {
-  public id: number;
-  public numero: string;
-  public createdAt: string;
-  public updatedAt: string;
-  public structureRepresentation: string;
-  public structureName: string;
-  public structureType: string[];
-  public description: string;
-  public address: Address;
-  public contactPhone: string;
-  public contactMail: string;
-  public website: string;
-  public facebook: string;
-  public twitter: string;
-  public instagram: string;
-  public gender: string;
-  public contactName: string;
-  public contactSurname: string;
-  public fonction: string;
-  public lockdownActivity: string;
-  public pmrAccess: boolean;
-  public publicsAccompaniment: string[];
-  public proceduresAccompaniment: string[];
-  public accessModality: string[];
-  public documentsMeeting: string;
-  public labelsQualifications: string[];
-  public publics: string[];
-  public nbComputers: number;
-  public nbPrinters: number;
-  public nbTablets: number;
-  public nbNumericTerminal: number;
-  public exceptionalClosures: string;
-  public equipmentsAndServices: string[];
+  public id: number = null;
+  public numero: string = null;
+  public createdAt: string = null;
+  public updatedAt: string = null;
+  public structureRepresentation: string = null;
+  public structureName: string = null;
+  public structureType: string[] = [];
+  public description: string = null;
+  public address: Address = new Address();
+  public contactPhone: string = null;
+  public contactMail: string = null;
+  public website: string = null;
+  public facebook: string = null;
+  public twitter: string = null;
+  public instagram: string = null;
+  public gender: string = null;
+  public contactName: string = null;
+  public contactSurname: string = null;
+  public fonction: string = null;
+  public lockdownActivity: string = null;
+  public pmrAccess: boolean = false;
+  public publicsAccompaniment: string[] = [];
+  public proceduresAccompaniment: string[] = [];
+  public accessModality: string[] = [];
+  public documentsMeeting: string = null;
+  public labelsQualifications: string[] = [];
+  public publics: string[] = [];
+  public nbComputers: number = null;
+  public nbPrinters: number = null;
+  public nbTablets: number = null;
+  public nbNumericTerminal: number = null;
+  public exceptionalClosures: string = null;
+  public equipmentsAndServices: string[] = [];
   public hours: Week;
-  public equipmentsDetails: string;
-  public equipmentsAccessType: string[];
+  public equipmentsDetails: string = null;
+  public equipmentsAccessType: string[] = [];
 
-  public isOpen: boolean;
-  public openedOn: OpeningDay;
-  public baseSkills: string[];
-  public accessRight: string[];
-  public parentingHelp: string[];
-  public socialAndProfessional: string[];
-  public digitalCultureSecurity: string[];
+  public isOpen: boolean = false;
+  public openedOn: OpeningDay = new OpeningDay();
+  public baseSkills: string[] = [];
+  public accessRight: string[] = [];
+  public parentingHelp: string[] = [];
+  public socialAndProfessional: string[] = [];
+  public digitalCultureSecurity: string[] = [];
 
   public distance?: number;
-  public coord?: number[];
+  public coord?: number[] = [];
 
   constructor(obj?: any) {
     Object.assign(this, obj, {
-      hours: obj && obj.hours ? new Week(obj.hours) : null,
+      hours: obj && obj.hours ? new Week(obj.hours) : new Week(),
     });
   }
 

src/app/models/user.model.ts

@@ -5,4 +5,5 @@ export class User {
   emailVerified: boolean;
   role: number;
   validationToken: string;
+  structuresLink: number[];
 }

src/app/models/week.model.ts

@@ -11,13 +11,13 @@ export class Week {
 
   constructor(obj?: any) {
     Object.assign(this, obj, {
-      monday: obj && obj.monday ? new Day(obj.monday) : null,
-      tuesday: obj && obj.tuesday ? new Day(obj.tuesday) : null,
-      wednesday: obj && obj.wednesday ? new Day(obj.wednesday) : null,
-      thursday: obj && obj.thursday ? new Day(obj.thursday) : null,
-      friday: obj && obj.friday ? new Day(obj.friday) : null,
-      saturday: obj && obj.saturday ? new Day(obj.saturday) : null,
-      sunday: obj && obj.sunday ? new Day(obj.sunday) : null,
+      monday: obj && obj.monday ? new Day(obj.monday) : new Day(),
+      tuesday: obj && obj.tuesday ? new Day(obj.tuesday) : new Day(),
+      wednesday: obj && obj.wednesday ? new Day(obj.wednesday) : new Day(),
+      thursday: obj && obj.thursday ? new Day(obj.thursday) : new Day(),
+      friday: obj && obj.friday ? new Day(obj.friday) : new Day(),
+      saturday: obj && obj.saturday ? new Day(obj.saturday) : new Day(),
+      sunday: obj && obj.sunday ? new Day(obj.sunday) : new Day(),
     });
   }
 

src/app/profile/profile.component.html

@@ -4,6 +4,7 @@
     <div *ngIf="userProfile" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
       <p>Id: {{ userProfile._id }}</p>
       <p>Email: {{ userProfile.email }}</p>
+      <button (click)="toogleAddStructure()">Ajouter une structure</button>
       <button (click)="toogleChangeEmail()">Changer d'email</button>
       <form
         *ngIf="changeEmail"
@@ -77,4 +78,10 @@
       </form>
     </div>
   </div>
+  <app-structureForm
+    *ngIf="addStructure"
+    [profile]="userProfile"
+    (closeEvent)="toogleAddStructure($event)"
+    (clickOutside)="toogleAddStructure()"
+  ></app-structureForm>
 </div>

src/app/profile/profile.component.ts

 import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Structure } from '../models/structure.model';
 import { User } from '../models/user.model';
 import { MustMatch } from '../shared/validator/form';
 import { ProfileService } from './services/profile.service';
@@ -17,11 +18,12 @@ export class ProfileComponent implements OnInit {
   public loading = false;
   public changeEmail = false;
   public formEmail: FormGroup;
+  public addStructure = false;
 
   constructor(private formBuilder: FormBuilder, private profileService: ProfileService) {}
 
   ngOnInit(): void {
-    this.profileService.getProfile().subscribe((profile) => {
+    this.profileService.getProfile().then((profile) => {
       this.userProfile = profile;
     });
     this.initForm();
@@ -55,6 +57,9 @@ export class ProfileComponent implements OnInit {
   public toogleChangePassword(): void {
     this.changePassword = !this.changePassword;
   }
+  public toogleAddStructure(): void {
+    this.addStructure = !this.addStructure;
+  }
 
   public toogleChangeEmail(): void {
     this.changeEmail = !this.changeEmail;

src/app/profile/profile.module.ts

@@ -3,10 +3,11 @@ import { ProfileComponent } from './profile.component';
 import { SharedModule } from '../shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormComponent } from '../form/form.component';
 
 @NgModule({
   imports: [CommonModule, BrowserModule, SharedModule],
-  declarations: [ProfileComponent],
-  exports: [ProfileComponent],
+  declarations: [ProfileComponent, FormComponent],
+  exports: [ProfileComponent, FormComponent],
 })
 export class ProfileModule {}

src/app/profile/services/profile.service.ts

@@ -2,17 +2,27 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { User } from '../../models/user.model';
+import { AuthService } from '../../services/auth.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ProfileService {
   private readonly baseUrl = 'api/users';
+  private currentProfile: User = null;
+  constructor(private http: HttpClient, private authService: AuthService) {}
 
-  constructor(private http: HttpClient) {}
+  public async getProfile(): Promise<User> {
+    // Get profil by API only on first time
+    if (!this.currentProfile) {
+      const profile = await this.http.get<User>(`${this.baseUrl}/profile`).toPromise();
+      this.currentProfile = profile;
+    }
+    return this.currentProfile;
+  }
 
-  public getProfile(): Observable<User> {
-    return this.http.get<User>(`${this.baseUrl}/profile`);
+  public isLinkedToStructure(idStructure: number): boolean {
+    return this.currentProfile.structuresLink.includes(idStructure);
   }
 
   public changePassword(newPassword: string, oldPassword: string): Observable<User> {

src/app/services/structure.service.ts

@@ -11,6 +11,7 @@ import { OpeningDay } from '../models/openingDay.model';
 import { Weekday } from '../structure-list/enum/weekday.enum';
 import { Time } from '../models/time.model';
 import { Filter } from '../structure-list/models/filter.model';
+import { User } from '../models/user.model';
 
 @Injectable({
   providedIn: 'root',
@@ -18,6 +19,11 @@ import { Filter } from '../structure-list/models/filter.model';
 export class StructureService {
   constructor(private http: HttpClient) {}
 
+  public createStructure(structure: Structure, profile: User): Observable<Structure> {
+    const idUser = profile.email;
+    return this.http.post('/api/structures', { structure, idUser }).pipe(map((item: Structure) => new Structure(item)));
+  }
+
   public postStructure(id: number, structure: Structure): Observable<Structure> {
     structure.updatedAt = new Date().toString();
     return this.http.post('/api/structures/' + id, structure).pipe(map((item: Structure) => new Structure(item)));

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

-<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseover)="cardHover()">
+<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseenter)="cardHover()">
   <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
     <span class="nomStructure">{{ structure.structureName }}</span>
     <div

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

@@ -7,6 +7,9 @@
 <div class="structrue-details-container" *ngIf="structure">
   <!-- Header info -->
   <div fxLayout="row" fxLayoutAlign="end center">
+    <button *ngIf="profileService.isLinkedToStructure(structure.id)" (click)="displayForm()">
+      Modifier la structure
+    </button>
     <div (click)="close()" class="ico-close-details"></div>
   </div>
   <div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px">