From 316d2a7428571661015bdaf025cc7992cf56cd58 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 27 Jan 2021 17:43:24 +0100
Subject: [PATCH] feat: add modal for structure claim + use of ngPlural on
search
---
src/app/shared/components/modal/modal-type.enum.ts | 5 +++--
.../shared/components/modal/modal.component.html | 11 ++++++++++-
.../components/search/search.component.html | 2 +-
.../structure-details.component.html | 13 +++++++++++--
.../structure-details.component.ts | 14 +++++++++++---
.../structure-list/structure-list.component.html | 6 ++++--
6 files changed, 40 insertions(+), 11 deletions(-)
diff --git a/src/app/shared/components/modal/modal-type.enum.ts b/src/app/shared/components/modal/modal-type.enum.ts
index 2dedc045e..fc394752f 100644
--- a/src/app/shared/components/modal/modal-type.enum.ts
+++ b/src/app/shared/components/modal/modal-type.enum.ts
@@ -1,4 +1,5 @@
export enum AppModalType {
- information = 1,
- confirmation = 2,
+ outsideLink = 1,
+ information,
+ confirmation,
}
diff --git a/src/app/shared/components/modal/modal.component.html b/src/app/shared/components/modal/modal.component.html
index c482f44e9..42c917888 100644
--- a/src/app/shared/components/modal/modal.component.html
+++ b/src/app/shared/components/modal/modal.component.html
@@ -1,7 +1,7 @@
<div class="cModal" [ngClass]="openned ? 'oModal' : ''">
<div (clickOutside)="closeModal(false)">
<p>{{ content }}</p>
- <div *ngIf="modalType && modalType === modalTypeEnum.information" class="footer">
+ <div *ngIf="modalType && modalType === modalTypeEnum.outsideLink" class="footer">
<a
(click)="closeModal(false)"
href="https://services.formulaireextranet.grandlyon.com/saisie-fiche-structure/"
@@ -11,6 +11,15 @@
>Continuer vers le formulaire</a
>
</div>
+ <div
+ *ngIf="this.modalType && this.modalType === modalTypeEnum.information"
+ fxLayout="row"
+ fxLayoutAlign="center"
+ fxLayoutGap="20px"
+ class="footer"
+ >
+ <button (click)="closeModal(false)">Ok</button>
+ </div>
<div
*ngIf="this.modalType && this.modalType === modalTypeEnum.confirmation"
fxLayout="row"
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 565f49826..b1538490b 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -110,7 +110,7 @@
</div>
<app-modal
*ngIf="isConfirmationModalOpen"
- [modalType]="modalType.information"
+ [modalType]="modalType.outsideLink"
[openned]="isConfirmationModalOpen"
[content]="confirmationModalContent"
(closed)="closeConfirmationModal()"
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 4f67a0057..83e240101 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -83,7 +83,7 @@
</div>
</div>
<div fxLayout="row" fxLayoutAlign="center center" class="hide-on-print">
- <a *ngIf="!isClaimed" (click)="claimStructure()" class="primary" tabindex="0">Revendiquer cette structure</a>
+ <a *ngIf="!isClaimed" (click)="toggleClaimModal()" class="primary" tabindex="0">Revendiquer cette structure</a>
<a
*ngIf="profileService.isLinkedToStructure(structure._id) || profileService.isAdmin()"
(click)="editStructure()"
@@ -282,6 +282,15 @@
*ngIf="deleteModalOpenned"
[modalType]="modalType.confirmation"
[openned]="deleteModalOpenned"
- [content]="'Voulez-vous vraiment supprimer cette structure ?'"
+ [content]="'Voulez-vous vraiment supprimer cette structure ?'"
(closed)="deleteStructure($event)"
></app-modal>
+<app-modal
+ *ngIf="claimModalOpenned"
+ [modalType]="modalType.confirmation"
+ [openned]="claimModalOpenned"
+ [content]="
+ 'Voulez-vous vraiment revendiquer cette structure ? Une demande sera envoyée a l\'administrateur pour validation'
+ "
+ (closed)="claimStructure($event)"
+></app-modal>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index 0f7026f17..181d9fad8 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -40,6 +40,7 @@ export class StructureDetailsComponent implements OnInit {
public isEditMode: boolean = false;
public currentProfile: User = null;
public deleteModalOpenned = false;
+ public claimModalOpenned = false;
public modalType = AppModalType;
constructor(
@@ -123,6 +124,10 @@ export class StructureDetailsComponent implements OnInit {
this.deleteModalOpenned = !this.deleteModalOpenned;
}
+ public toggleClaimModal(): void {
+ this.claimModalOpenned = !this.claimModalOpenned;
+ }
+
public deleteStructure(shouldDelete: boolean): void {
this.toggleDeleteModal();
if (shouldDelete) {
@@ -138,9 +143,12 @@ export class StructureDetailsComponent implements OnInit {
this.router.navigate(['./'], { relativeTo: this.route });
}
- public claimStructure(): void {
- this.isEditMode = false;
- this.displayForm();
+ public claimStructure(shouldClaim: boolean): void {
+ this.toggleClaimModal();
+ if (shouldClaim) {
+ this.isEditMode = false;
+ this.displayForm();
+ }
}
// Show/hide form structure
public displayForm(): void {
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index 3e78f2ff1..951c2726a 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -6,8 +6,10 @@
[locate]="locate"
></app-structure-list-search>
</div>
-<div class="nbStructuresLabel hide-on-print">
- {{ structureList ? structureList.length : '0' }} structure{{ structureList && structureList.length > 1 ? 's' : '' }}
+<div class="nbStructuresLabel hide-on-print" [ngPlural]="structureList.length">
+ <ng-template ngPluralCase="0">0 structure trouvée</ng-template>
+ <ng-template ngPluralCase="1">1 structure trouvée</ng-template>
+ <ng-template ngPluralCase="other">{{ structureList.length }} structures trouvées</ng-template>
</div>
<div (scroll)="onScrollDown($event)" id="listCard" class="listCard" (mouseleave)="mouseLeave()">
--
GitLab