️ Unique name for modal share + new event from parent to children instead of NavigationEnd + all component in one div (avoid moving two divs in the body at the same time)

timeline
Alix JEUDI--LEMOINE 2 weeks ago
parent 2f11aae5a2
commit db5c7f6514

@ -1,3 +1,4 @@
<div id="share-modal-{{pinId}}">
<!-- Fond assombri --> <!-- Fond assombri -->
<div <div
class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40" class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
@ -6,12 +7,12 @@
'opacity-100': isShareModalOpen 'opacity-100': isShareModalOpen
}" }"
(click)="closeShareModal()" (click)="closeShareModal()"
id="share-modal-background" id="share-modal-background-{{pinId}}"
></div> ></div>
<!-- Main modal --> <!-- Main modal -->
<div <div
id="share-modal" id="share-modal-{{pinId}}"
tabindex="-1" tabindex="-1"
aria-hidden="true" aria-hidden="true"
[ngClass]="{ [ngClass]="{
@ -114,3 +115,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>

@ -1,9 +1,8 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, Input, EventEmitter, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { NavigationEnd, Router } from '@angular/router'; import { Router } from '@angular/router';
import { Subject, Subscription } from 'rxjs'; import { Subject, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { FriendsService } from '../../services/friends/friends.service'; import { FriendsService } from '../../services/friends/friends.service';
import { ModalService } from '../../services/modal/modal.service'; import { ModalService } from '../../services/modal/modal.service';
import { PinService } from '../../services/pin/pin.service'; import { PinService } from '../../services/pin/pin.service';
@ -16,9 +15,9 @@ import { PinService } from '../../services/pin/pin.service';
}) })
export class ShareModalComponent implements OnInit, OnDestroy { export class ShareModalComponent implements OnInit, OnDestroy {
modalId: string = 'share-modal'; modalId: string = 'share-modal';
isShareModalOpen = false; isShareModalOpen = false;
private modalSub!: Subscription; private modalSub!: Subscription;
private routerSubscription!: Subscription;
isFriendModalOpen: boolean = false; isFriendModalOpen: boolean = false;
hasAcceptedFriends: boolean = false; hasAcceptedFriends: boolean = false;
hasPendingFriends: boolean = false; hasPendingFriends: boolean = false;
@ -26,41 +25,35 @@ export class ShareModalComponent implements OnInit, OnDestroy {
searchTermChanged = new Subject<string>(); searchTermChanged = new Subject<string>();
listUser: any[] = []; listUser: any[] = [];
listFriend: any[] = []; listFriend: any[] = [];
pinId: string = '';
@Input() pinId!: string;
@Input() pinOpened!: EventEmitter<void>;
constructor( constructor(
private modalService: ModalService, private modalService: ModalService,
private friendService: FriendsService, private friendService: FriendsService,
private pinService: PinService, private pinService: PinService,
private router: Router
) {} ) {}
ngOnInit() { ngOnInit() {
this.modalId = 'share-modal-' + this.pinId;
this.modalSub = this.modalService this.modalSub = this.modalService
.getModalState(this.modalId) .getModalState(this.modalId)
.subscribe((open) => { .subscribe((open) => {
this.isShareModalOpen = open; this.isShareModalOpen = open;
if (open) { if (open) {
this.getFriend(); this.getFriend();
this.pinId = this.modalService.getCurrentPinId();
setTimeout(() => this.moveModalToBody(), 0);
} }
}); });
// S'abonner aux événements de navigation du router this.pinOpened.subscribe(() => {
this.routerSubscription = this.router.events this.moveModalToBody();
.pipe(filter((event) => event instanceof NavigationEnd))
.subscribe(() => {
// Attendre que le DOM soit mis à jour après la navigation
setTimeout(() => this.moveModalToBody(), 0);
}); });
} }
ngOnDestroy() { ngOnDestroy() {
this.modalSub?.unsubscribe(); this.modalSub?.unsubscribe();
if (this.routerSubscription) {
this.routerSubscription.unsubscribe();
}
} }
openShareModal() { openShareModal() {
@ -71,20 +64,11 @@ export class ShareModalComponent implements OnInit, OnDestroy {
this.modalService.closeModal(this.modalId); this.modalService.closeModal(this.modalId);
} }
ngAfterViewInit() {
// Appel initial pour déplacer le modal
this.moveModalToBody();
}
private moveModalToBody(): void { private moveModalToBody(): void {
const modal = document.getElementById('share-modal'); const modal = document.getElementById(this.modalId);
if (modal && modal.parentElement !== document.body) { if (modal && modal.parentElement !== document.body) {
document.body.appendChild(modal); document.body.appendChild(modal);
} }
const bg = document.getElementById('share-modal-background');
if (bg && bg.parentElement !== document.body) {
document.body.appendChild(bg);
}
} }
onSearchTermChange(value: string): void { onSearchTermChange(value: string): void {

Loading…
Cancel
Save