Merge branch 'feat/US264-delete-my-personal-offer' into 'V2.0'

Feat/us264 delete my personal offer

See merge request !377

src/app/profile/personal-offer-edition/personal-offer-edition.component.html

@@ -9,6 +9,24 @@
         </a>
         <h1>Gérer mon offre de service</h1>
       </div>
+      <app-button
+        class="hide-on-mobile deleteOffer"
+        [style]="buttonTypeEnum.Secondary"
+        [text]="'Supprimer mon offre'"
+        [type]="'button'"
+        [iconType]="'ico'"
+        [iconBtn]="'removeCross'"
+        (action)="showDeleteOfferModal()"
+      ></app-button>
+      <app-button
+        class="hide-on-desktop"
+        [style]="buttonTypeEnum.SecondaryOnlyIcon"
+        [type]="'button'"
+        [iconBtn]="'edit'"
+        [iconType]="'ico'"
+        [iconBtn]="'deleteAccount'"
+        (action)="showDeleteOfferModal()"
+      ></app-button>
     </div>
     <!-- Navigation -->
     <div class="navigation">
@@ -62,4 +80,32 @@
       </app-button>
     </div>
   </div>
+
+  <!-- Modal: Delete offer -->
+  <div class="modalBackground" *ngIf="deleteOfferModal">
+    <div class="modal">
+      <div class="modalHeader">
+        <div class="empty"></div>
+        <h3>Supprimer mon offre</h3>
+        <svg class="close" aria-hidden="true" (click)="closeModal()">
+          <use [attr.xlink:href]="'assets/form/sprite.svg#close'"></use>
+        </svg>
+      </div>
+
+      <div class="modalContent">
+        <p class="warnText">
+          Vous êtes sur le point de supprimer votre offre de service, veuillez confirmer pour poursuivre
+        </p>
+
+        <div class="buttons">
+          <app-button [text]="'Annuler'" (action)="closeModal()"></app-button>
+          <app-button
+            [text]="'Supprimer'"
+            [style]="buttonTypeEnum.Primary"
+            (action)="confirmDeleteOffer()"
+          ></app-button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

src/app/profile/personal-offer-edition/personal-offer-edition.component.scss

@@ -52,6 +52,20 @@
         cursor: pointer;
       }
     }
+
+    .deleteOffer {
+      ::ng-deep {
+        svg {
+          height: 22px;
+          width: 22px;
+          margin-right: 4px;
+        }
+        span {
+          color: $red;
+          @include lato-regular-14;
+        }
+      }
+    }
   }
 
   .navigation {
@@ -103,3 +117,47 @@
     }
   }
 }
+
+.modalBackground {
+  //bck fade
+  .modal {
+    max-width: 390px;
+    background-color: $white;
+    @media #{$tablet} {
+      width: 85%;
+    }
+    .modalHeader {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border: 1px solid $grey-6;
+      padding: 0 8px;
+      h3 {
+        @include lato-bold-18;
+      }
+      svg,
+      .empty {
+        height: 40px;
+        width: 40px;
+      }
+      svg {
+        cursor: pointer;
+      }
+    }
+
+    .modalContent {
+      padding: 24px 40px;
+
+      .warnText {
+        text-align: center;
+        margin: 0 auto 24px auto;
+      }
+    }
+    .buttons {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 24px;
+    }
+  }
+}

src/app/profile/personal-offer-edition/personal-offer-edition.component.ts

 import { Component, OnInit } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { ActivatedRoute, Data } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { CategoriesToggle } from '../../models/categoriesToggle.model';
 import { NotificationService } from '../../services/notification.service';
 import { ButtonType } from '../../shared/components/button/buttonType.enum';
@@ -30,9 +30,11 @@ export class PersonalOfferEditionComponent implements OnInit {
   private initialPersonalOffer;
   public onlineProcedures: Category;
   public trainingCategories: CategoriesToggle[] = [];
+  public deleteOfferModal: boolean;
 
   constructor(
     private route: ActivatedRoute,
+    private router: Router,
     private searchService: SearchService,
     private personalOfferService: PersonalOfferService,
     private notificationService: NotificationService
@@ -87,13 +89,20 @@ export class PersonalOfferEditionComponent implements OnInit {
   }
 
   public confirm(): void {
-    this.personalOfferService
-      .updatePersonalOffer(this.personalOffer._id, this.personalOfferForm.get('categories').value)
-      .subscribe(() => {
-        this.notificationService.showSuccess('Vos informations ont bien été enregistrées');
-        this.initialPersonalOffer = this.personalOfferForm.value;
-        this.personalOfferForm.markAsPristine();
-      });
+    // If all options are unchecked, delete offer instead of saving it
+    const categories: { [key: string]: string[] } = this.personalOfferForm.get('categories').value;
+    const isFormEmpty = Object.keys(categories).every((category) => !categories[category].length);
+    if (isFormEmpty) {
+      this.showDeleteOfferModal();
+    } else {
+      this.personalOfferService
+        .updatePersonalOffer(this.personalOffer._id, this.personalOfferForm.get('categories').value)
+        .subscribe(() => {
+          this.notificationService.showSuccess('Vos informations ont bien été enregistrées');
+          this.initialPersonalOffer = this.personalOfferForm.value;
+          this.personalOfferForm.markAsPristine();
+        });
+    }
   }
 
   public setTrainingsFromCategories(categories: Category[]) {
@@ -105,4 +114,23 @@ export class PersonalOfferEditionComponent implements OnInit {
       }
     }
   }
+
+  public showDeleteOfferModal(): void {
+    this.deleteOfferModal = true;
+  }
+  public closeModal(): void {
+    this.deleteOfferModal = false;
+  }
+
+  public confirmDeleteOffer() {
+    this.personalOfferService.deletePersonalOffer(this.personalOffer._id).subscribe(
+      () => {
+        this.notificationService.showSuccess('Votre offre de service a bien été supprimée.');
+      },
+      (err) => {
+        this.notificationService.showError(`${err.error.message}`, 'Une erreur est survenue');
+      }
+    );
+    this.router.navigate(['/profile']);
+  }
 }

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

@@ -137,7 +137,7 @@
         [text]="'Ajouter une offre'"
         [style]="buttonTypeEnum.SecondaryUltraWide"
         [routerLinkActive]="'active'"
-        [disabled]="true"
+        (click)="goToOffer()"
       ></app-button>
     </div>
   </div>

src/app/services/personal-offer.service.ts

@@ -12,7 +12,7 @@ export class PersonalOfferService {
   constructor(private http: HttpClient) {}
 
   public createPersonalOffer(structureId: string, personalOffer: PersonalOffer): Observable<PersonalOffer> {
-    return this.http.post<PersonalOffer>(this.baseUrl, { structureId: structureId, personalOffer: personalOffer });
+    return this.http.post<PersonalOffer>(this.baseUrl, { structureId, personalOffer });
   }
 
   public getPersonalOffer(id: string): Observable<PersonalOffer> {
@@ -21,7 +21,11 @@ export class PersonalOfferService {
 
   public updatePersonalOffer(id: string, categories: Category[]): Observable<PersonalOffer> {
     return this.http.put<PersonalOffer>(`${this.baseUrl}/${id}`, {
-      categories: categories,
+      categories,
     });
   }
+
+  public deletePersonalOffer(id: string): Observable<PersonalOffer> {
+    return this.http.delete<PersonalOffer>(`${this.baseUrl}/${id}`);
+  }
 }

src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html

-<div fxLayout="column" fxLayoutGap="32px">
-  <div *ngIf="onlineProcedures" class="btn-grid">
-    <app-button
-      *ngFor="let module of onlineProcedures.modules"
-      [extraClass]="isSelectedModule(module) ? 'selected' : ''"
-      [style]="buttonTypeEnum.CheckButton"
-      [text]="module.name"
-      (action)="toogleResult(module)"
-    ></app-button>
-  </div>
+<div *ngIf="onlineProcedures" class="btn-grid">
+  <app-button
+    *ngFor="let module of onlineProcedures.modules"
+    [extraClass]="isSelectedModule(module) ? 'selected' : ''"
+    [style]="buttonTypeEnum.CheckButton"
+    [text]="module.name"
+    (action)="toogleResult(module)"
+  ></app-button>
 </div>