️ Use unique name for every modal + new event from parent to children to load content + load images when pin opened instead of when page loads
continuous-integration/drone/push Build is passing Details

timeline
Alix JEUDI--LEMOINE 2 weeks ago
parent 530322ae2d
commit c8404b4e4e

@ -1,11 +1,13 @@
<app-confirm-modal <app-confirm-modal
(confirmed)="handleConfirm()" (confirmed)="handleConfirm()"
(cancelled)="handleCancel()" (cancelled)="handleCancel()"
[pinId]="pin.id"
[pinOpened]="pinOpened"
></app-confirm-modal> ></app-confirm-modal>
<app-share-modal></app-share-modal> <app-share-modal [pinOpened]="pinOpened" [pinId]="pin.id"></app-share-modal>
<div class="flex mb-2 justify-end items-center"> <div class="flex mb-2 justify-end items-center">
<app-edit-pin-popup [pin]="pin" [modalId]="pin.id"></app-edit-pin-popup> <app-edit-pin-popup [pin]="pin" [pinId]="pin.id" [pinOpened]="pinOpened"></app-edit-pin-popup>
<button <button
class="p-1 text-gray-500 rounded hover:bg-gray-200 focus:outline-none ml-2 flex items-center" class="p-1 text-gray-500 rounded hover:bg-gray-200 focus:outline-none ml-2 flex items-center"
(click)="sharePin()" (click)="sharePin()"
@ -86,7 +88,7 @@
class="relative h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center" class="relative h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center"
> >
<div <div
*ngFor="let imageUrl of imageUrls; let index = index" *ngFor="let imageId of pin.files; let index = index"
[class]=" [class]="
'absolute inset-0 transition-opacity duration-700 ease-in-out' + 'absolute inset-0 transition-opacity duration-700 ease-in-out' +
(index === currentIndex ? ' opacity-100' : ' opacity-0') (index === currentIndex ? ' opacity-100' : ' opacity-0')
@ -96,13 +98,12 @@
class="relative h-40 overflow-hidden rounded-lg flex items-center justify-center" class="relative h-40 overflow-hidden rounded-lg flex items-center justify-center"
> >
<img <img
[src]="imageUrl" [src]="imageUrls[index]"
(load)="onImageLoad()" [hidden]="!imagesLoaded"
[hidden]="!imageLoaded"
class="object-contain max-h-full max-w-full h-full w-auto mx-auto" class="object-contain max-h-full max-w-full h-full w-auto mx-auto"
/> />
<div <div
*ngIf="!imageLoaded" *ngIf="!imagesLoaded"
class="relative inset-0 bg-gray-200 w-52 h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center" class="relative inset-0 bg-gray-200 w-52 h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center"
> >
<span class="text-gray-500">Loading image...</span> <span class="text-gray-500">Loading image...</span>

@ -1,5 +1,5 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core'; import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import * as L from 'leaflet'; import * as L from 'leaflet';
import { Pin } from '../../model/Pin'; import { Pin } from '../../model/Pin';
@ -27,17 +27,25 @@ export class PinMarkerComponent {
currentIndex: number = 0; currentIndex: number = 0;
imageUrls: SafeUrl[] = []; imageUrls: SafeUrl[] = [];
imageLoaded = false; imagesLoaded = false;
@Output() pinOpened = new EventEmitter<void>();
constructor( constructor(
private pinService: PinService, private pinService: PinService,
private modalService: ModalService, private modalService: ModalService,
private imageService: ImageService, private imageService: ImageService,
private sanitizer: DomSanitizer private sanitizer: DomSanitizer
) {} ) { }
ngOnInit() { ngOnInit() {
this.loadImages(); // Écouter l'événement d'ouverture du popup
this.marker.on('popupopen', () => {
if (!this.imagesLoaded) {
this.loadImages();
this.pinOpened.emit();
}
});
} }
loadImages() { loadImages() {
@ -47,37 +55,33 @@ export class PinMarkerComponent {
const safeUrl = this.sanitizer.bypassSecurityTrustUrl(objectUrl); const safeUrl = this.sanitizer.bypassSecurityTrustUrl(objectUrl);
this.imageUrls.push(safeUrl); this.imageUrls.push(safeUrl);
if (this.imageUrls.length === this.pin.files.length) { if (this.imageUrls.length === this.pin.files.length) {
this.imageLoaded = true; this.imagesLoaded = true;
} }
}); });
}); });
} }
sharePin() { sharePin() {
this.modalService.openModal('share-modal', undefined, this.pin.id); this.modalService.openModal('share-modal-' + this.pin.id);
} }
onClosePopup() { onClosePopup() {
this.marker.closePopup(); this.marker.closePopup();
} }
onImageLoad() {
this.imageLoaded = true;
}
onDelete() { onDelete() {
this.modalService.openModal('confirm-modal'); this.modalService.openModal('confirm-modal-' + this.pin.id);
} }
handleConfirm() { handleConfirm() {
this.pinService.deletePin(this.pin.id).subscribe(() => { this.pinService.deletePin(this.pin.id).subscribe(() => {
this.marker.remove(); this.marker.remove();
this.modalService.closeModal('confirm-modal'); this.modalService.closeModal('confirm-modal-' + this.pin.id);
}); });
} }
handleCancel() { handleCancel() {
this.modalService.closeModal('confirm-modal'); this.modalService.closeModal('confirm-modal-' + this.pin.id);
} }
get formattedDescription(): string { get formattedDescription(): string {

Loading…
Cancel
Save