From 6ffbd4ad6158d15540266a3fe690febd25918042 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20PAILHAREY?= <rpailharey@grandlyon.com>
Date: Fri, 18 Nov 2022 13:06:32 +0000
Subject: [PATCH] feat: delete my personal offer
---
.../personal-offer-edition.component.html | 46 +++++++++++++++
.../personal-offer-edition.component.scss | 58 +++++++++++++++++++
.../personal-offer-edition.component.ts | 44 +++++++++++---
.../profile-structure.component.html | 2 +-
src/app/services/personal-offer.service.ts | 8 ++-
.../accompaniment-picker.component.html | 18 +++---
6 files changed, 155 insertions(+), 21 deletions(-)
diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html b/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
index fc4ac9d2b..5316a10ab 100644
--- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
+++ b/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>
diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss b/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
index 17b70b85a..0a3f56fad 100644
--- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
+++ b/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;
+ }
+ }
+}
diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.ts b/src/app/profile/personal-offer-edition/personal-offer-edition.component.ts
index 77867c21b..db7620bd5 100644
--- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.ts
+++ b/src/app/profile/personal-offer-edition/personal-offer-edition.component.ts
@@ -1,6 +1,6 @@
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']);
+ }
}
diff --git a/src/app/profile/profile-structure/profile-structure.component.html b/src/app/profile/profile-structure/profile-structure.component.html
index 0601de822..90ad4a035 100644
--- a/src/app/profile/profile-structure/profile-structure.component.html
+++ b/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>
diff --git a/src/app/services/personal-offer.service.ts b/src/app/services/personal-offer.service.ts
index 93b485b6c..8e3bf78d8 100644
--- a/src/app/services/personal-offer.service.ts
+++ b/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}`);
+ }
}
diff --git a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
index 786ace30d..42790ee19 100644
--- a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
+++ b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
@@ -1,11 +1,9 @@
-<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>
--
GitLab