From c9f791e0310937f027e57ef1dbbae20576cecd52 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Fri, 5 Feb 2021 10:18:35 +0100
Subject: [PATCH] fix(form) : fix modal
---
src/app/footer-form/footer-form.component.ts | 4 +-
src/app/form/form.component.html | 8 ++--
src/app/shared/components/index.ts | 3 --
.../modal-confirmation.component.html | 8 ++--
.../modal-confirmation.component.scss | 4 +-
.../modal-confirmation.component.ts | 15 +++----
.../components/modal/modal-type.enum.ts | 5 ---
.../components/modal/modal.component.html | 34 ---------------
.../components/modal/modal.component.scss | 41 -------------------
.../components/modal/modal.component.spec.ts | 24 -----------
.../components/modal/modal.component.ts | 21 ----------
.../components/search/search.component.ts | 4 --
.../structure-details.component.html | 13 +++---
.../structure-details.component.ts | 2 -
14 files changed, 23 insertions(+), 163 deletions(-)
delete mode 100644 src/app/shared/components/modal/modal-type.enum.ts
delete mode 100644 src/app/shared/components/modal/modal.component.html
delete mode 100644 src/app/shared/components/modal/modal.component.scss
delete mode 100644 src/app/shared/components/modal/modal.component.spec.ts
delete mode 100644 src/app/shared/components/modal/modal.component.ts
diff --git a/src/app/footer-form/footer-form.component.ts b/src/app/footer-form/footer-form.component.ts
index a703d492a..e5e6fbfaf 100644
--- a/src/app/footer-form/footer-form.component.ts
+++ b/src/app/footer-form/footer-form.component.ts
@@ -11,9 +11,7 @@ export class FooterFormComponent implements OnInit {
@Output() previousPage = new EventEmitter<any>();
constructor() {}
- ngOnInit(): void {
- console.log(this.isValid);
- }
+ ngOnInit(): void {}
public goToNextPage(): void {
this.nextPage.emit();
diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 0ce70c2ae..f0de254c0 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -1,7 +1,9 @@
<div class="form" fxLayout="column">
- <div *ngIf="showConfirmationModal">
- <app-modal-confirmation (closeModalEvent)="hasRedirectionAccepted($event)"></app-modal-confirmation>
- </div>
+ <app-modal-confirmation
+ [openned]="showConfirmationModal"
+ [content]="'Il vous faudra de nouveau remplir le formulaire si vous quittez'"
+ (closed)="hasRedirectionAccepted($event)"
+ ></app-modal-confirmation>
<app-menu-phone *ngIf="showMenu" (closeEvent)="closeMenu($event)"></app-menu-phone>
<div class="header">
<div class="container-icoMenu">
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 7020169f3..4fecd7be0 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -1,6 +1,5 @@
import { ButtonComponent } from './button/button.component';
import { LogoCardComponent } from './logo-card/logo-card.component';
-import { ModalComponent } from './modal/modal.component';
import { SignUpModalComponent } from './signup-modal/signup-modal.component';
import { SignInModalComponent } from './signin-modal/signin-modal.component';
import { SvgIconComponent } from './svg-icon/svg-icon.component';
@@ -18,7 +17,6 @@ import { ModalConfirmationComponent } from './modal-confirmation/modal-confirmat
export {
LogoCardComponent,
SvgIconComponent,
- ModalComponent,
ButtonComponent,
ValidatorFormComponent,
SignUpModalComponent,
@@ -37,7 +35,6 @@ export {
export const SharedComponents = [
LogoCardComponent,
SvgIconComponent,
- ModalComponent,
ButtonComponent,
ValidatorFormComponent,
SignUpModalComponent,
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.html b/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
index 524906f25..fe2cf5816 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
@@ -1,11 +1,11 @@
-<div class="modalExitContainer">
+<div *ngIf="openned" class="modalExitContainer">
<div class="modal">
<div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
<h3>ATTENTION</h3>
- <p>Il vous faudra de nouveau remplir le formulaire si vous quittez</p>
+ <p>{{ content }}</p>
<div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
- <button class="btn leave" (click)="onConfirm()">Quitter</button>
- <button class="btn" (click)="onDismiss()">Annuler</button>
+ <button class="btn leave" (click)="closeModal(true)">Confirmer</button>
+ <button class="btn" (click)="closeModal(false)">Annuler</button>
</div>
</div>
</div>
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
index e089d14a6..5411fa484 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
@@ -10,11 +10,11 @@
position: absolute;
content: '';
top: 0;
- background: rgba(0, 0, 0, 0.65);
+ background-color: $modal-background;
.modal {
.contentModal {
width: 100%;
- background: rgba(255, 255, 255, 1);
+ background: $white;
padding: 35px 20px 18px 20px;
h3 {
@include cn-bold-18;
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts b/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts
index ba9b5dba2..8c75b179f 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Subject } from 'rxjs';
@Component({
@@ -8,15 +8,12 @@ import { Subject } from 'rxjs';
})
export class ModalConfirmationComponent implements OnInit {
constructor() {}
-
- @Output() closeModalEvent = new EventEmitter<boolean>();
+ @Input() public openned: boolean;
+ @Input() public content: string;
+ @Output() closed = new EventEmitter<boolean>();
ngOnInit(): void {}
- onDismiss() {
- this.closeModalEvent.emit(false);
- }
-
- onConfirm() {
- this.closeModalEvent.emit(true);
+ public closeModal(value: boolean): void {
+ this.closed.emit(value);
}
}
diff --git a/src/app/shared/components/modal/modal-type.enum.ts b/src/app/shared/components/modal/modal-type.enum.ts
deleted file mode 100644
index fc394752f..000000000
--- a/src/app/shared/components/modal/modal-type.enum.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum AppModalType {
- outsideLink = 1,
- information,
- confirmation,
-}
diff --git a/src/app/shared/components/modal/modal.component.html b/src/app/shared/components/modal/modal.component.html
deleted file mode 100644
index 42c917888..000000000
--- a/src/app/shared/components/modal/modal.component.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div class="cModal" [ngClass]="openned ? 'oModal' : ''">
- <div (clickOutside)="closeModal(false)">
- <p>{{ content }}</p>
- <div *ngIf="modalType && modalType === modalTypeEnum.outsideLink" class="footer">
- <a
- (click)="closeModal(false)"
- href="https://services.formulaireextranet.grandlyon.com/saisie-fiche-structure/"
- tabindex="0"
- target="_blank"
- rel="noreferrer noopener"
- >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"
- fxLayoutAlign="center"
- fxLayoutGap="20px"
- class="footer"
- >
- <a (click)="closeModal(false)" tabindex="0">Annuler</a>
- <button (click)="closeModal(true)">Confirmer</button>
- </div>
- </div>
-</div>
diff --git a/src/app/shared/components/modal/modal.component.scss b/src/app/shared/components/modal/modal.component.scss
deleted file mode 100644
index 412a482e4..000000000
--- a/src/app/shared/components/modal/modal.component.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../../../../assets/scss/typography';
-@import '../../../../assets/scss/color';
-@import '../../../../assets/scss/buttons';
-@import '../../../../assets/scss/z-index';
-@import '../../../../assets/scss/hyperlink';
-.cModal {
- position: fixed;
- z-index: $modal-z-index;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: $modal-background;
- display: none;
-}
-.cModal > div {
- max-width: 450px;
- position: relative;
- top: 40%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: $white;
- text-align: center;
- border-radius: 4px;
- @include cn-bold-16;
- p {
- padding: 30px 48px 0 40px;
- }
-}
-.oModal {
- display: block;
-}
-.footer {
- a {
- @include hyperlink;
- }
- padding: 28px;
-}
-button {
- @include btn-search-filter;
-}
diff --git a/src/app/shared/components/modal/modal.component.spec.ts b/src/app/shared/components/modal/modal.component.spec.ts
deleted file mode 100644
index 8f64b3e86..000000000
--- a/src/app/shared/components/modal/modal.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ModalComponent } from './modal.component';
-
-describe('ModalComponent', () => {
- let component: ModalComponent;
- let fixture: ComponentFixture<ModalComponent>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ModalComponent],
- }).compileComponents();
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(ModalComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/shared/components/modal/modal.component.ts b/src/app/shared/components/modal/modal.component.ts
deleted file mode 100644
index 07f877266..000000000
--- a/src/app/shared/components/modal/modal.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { AppModalType } from './modal-type.enum';
-
-@Component({
- selector: 'app-modal',
- templateUrl: './modal.component.html',
- styleUrls: ['./modal.component.scss'],
-})
-export class ModalComponent {
- constructor() {}
-
- @Input() public openned: boolean;
- @Input() public content: string;
- @Input() public modalType: AppModalType;
- @Output() closed = new EventEmitter<boolean>();
- public modalTypeEnum = AppModalType;
-
- public closeModal(value: boolean): void {
- this.closed.emit(value);
- }
-}
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index 341398348..dffac930f 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -1,11 +1,8 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
-import { Router } from '@angular/router';
import { forkJoin } from 'rxjs';
import { GeoJson } from '../../../map/models/geojson.model';
-import { Structure } from '../../../models/structure.model';
import { GeojsonService } from '../../../services/geojson.service';
-import { AppModalType } from '../../../shared/components/modal/modal-type.enum';
import { TypeModal } from '../../enum/typeModal.enum';
import { Category } from '../../models/category.model';
import { Filter } from '../../models/filter.model';
@@ -27,7 +24,6 @@ export class SearchComponent implements OnInit, OnChanges {
@Output() locatationReset: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() locate = false;
- public modalType = AppModalType;
// Form search input
public searchForm: FormGroup;
// Modal variable
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 3e8aae19d..6d346e76d 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
@@ -282,19 +282,16 @@
</div>
</div>
</div>
-<app-modal
- *ngIf="deleteModalOpenned"
- [modalType]="modalType.confirmation"
+<app-modal-confirmation
[openned]="deleteModalOpenned"
[content]="'Voulez-vous vraiment supprimer cette structure ?'"
(closed)="deleteStructure($event)"
-></app-modal>
-<app-modal
- *ngIf="claimModalOpenned"
- [modalType]="modalType.confirmation"
+></app-modal-confirmation>
+
+<app-modal-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>
+></app-modal-confirmation>
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 dc07c8743..4395765f1 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
@@ -15,7 +15,6 @@ import { ProfileService } from '../../../profile/services/profile.service';
import { User } from '../../../models/user.model';
import { AuthService } from '../../../services/auth.service';
import { PublicCategorie } from '../../enum/public.enum';
-import { AppModalType } from '../../../shared/components/modal/modal-type.enum';
@Component({
selector: 'app-structure-details',
templateUrl: './structure-details.component.html',
@@ -41,7 +40,6 @@ export class StructureDetailsComponent implements OnInit {
public currentProfile: User = null;
public deleteModalOpenned = false;
public claimModalOpenned = false;
- public modalType = AppModalType;
constructor(
private printService: PrintService,
--
GitLab