129 lines
4.9 KiB
HTML
129 lines
4.9 KiB
HTML
@if (loading().action === ActionType.UPDATE && loading().isLoading && onSubmitted()) {
|
|
<app-loading message="Mise à jour de l'image de couverture..." />
|
|
} @else {
|
|
<ng-container *ngTemplateOutlet="content" />
|
|
}
|
|
|
|
<ng-template #content>
|
|
<div class="space-y-6 max-w-md mx-auto">
|
|
<!-- Titre -->
|
|
<h3 class="font-ubuntu font-bold text-xl uppercase dark:text-white text-center sm:text-start">
|
|
Aperçu du projet
|
|
</h3>
|
|
|
|
<!-- Prévisualisation de l'image -->
|
|
<div class="flex flex-col items-center space-y-4">
|
|
<div class="relative">
|
|
<div
|
|
class="w-40 h-40 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-lg"
|
|
>
|
|
<img
|
|
[alt]="project()?.nom || 'nouveau-projet'"
|
|
class="object-cover object-center h-full w-full"
|
|
[src]="currentImageUrl"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Bouton de suppression si preview existe -->
|
|
@if (imagePreviewUrl !== null) {
|
|
<button
|
|
type="button"
|
|
(click)="fileManagerService.removeFile()"
|
|
class="absolute -top-2 -right-2 p-2 bg-red-600 hover:bg-red-700 rounded-full text-white transition-colors shadow-lg"
|
|
aria-label="Supprimer l'image"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
}
|
|
</div>
|
|
|
|
<!-- Informations sur le fichier sélectionné -->
|
|
@if (file(); as file) {
|
|
<div class="text-center space-y-1">
|
|
<p class="text-sm text-gray-700 dark:text-gray-300 font-medium break-all max-w-[250px]">
|
|
{{ file.name }}
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ fileManagerService.formatFileSize(file.size) }}
|
|
</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Message d'erreur -->
|
|
@if (fileError()) {
|
|
<div
|
|
class="flex items-start space-x-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<p class="text-sm text-red-800 dark:text-red-200">{{ fileError() }}</p>
|
|
</div>
|
|
}
|
|
|
|
<!-- Bouton de sélection -->
|
|
<label
|
|
for="uploadFile1"
|
|
class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2 bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg cursor-pointer transition-colors w-full"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-white" viewBox="0 0 32 32">
|
|
<path
|
|
d="M23.75 11.044a7.99 7.99 0 0 0-15.5-.009A8 8 0 0 0 9 27h3a1 1 0 0 0 0-2H9a6 6 0 0 1-.035-12 1.038 1.038 0 0 0 1.1-.854 5.991 5.991 0 0 1 11.862 0A1.08 1.08 0 0 0 23 13a6 6 0 0 1 0 12h-3a1 1 0 0 0 0 2h3a8 8 0 0 0 .75-15.956z"
|
|
/>
|
|
<path
|
|
d="M20.293 19.707a1 1 0 0 0 1.414-1.414l-5-5a1 1 0 0 0-1.414 0l-5 5a1 1 0 0 0 1.414 1.414L15 16.414V29a1 1 0 0 0 2 0V16.414z"
|
|
/>
|
|
</svg>
|
|
<span class="text-sm font-medium">
|
|
{{ file() !== null ? "Changer l'image" : 'Sélectionner une image' }}
|
|
</span>
|
|
<input
|
|
type="file"
|
|
id="uploadFile1"
|
|
class="hidden"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
(change)="fileManagerService.onPictureChange($event)"
|
|
/>
|
|
</label>
|
|
|
|
<!-- Information sur les formats acceptés -->
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 text-center">
|
|
Formats acceptés : JPEG, PNG, WebP | Taille maximale : 5 Mo
|
|
</p>
|
|
|
|
<!-- Bouton de soumission -->
|
|
@if (file() !== null && !fileError()) {
|
|
<button
|
|
type="button"
|
|
(click)="onSubmit()"
|
|
[disabled]="!canSubmit"
|
|
class="w-full px-6 py-3 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
|
|
>
|
|
Mettre à jour l'image du projet
|
|
</button>
|
|
}
|
|
</div>
|
|
</ng-template>
|