From ef59a57bee571867ba570dcbe1e461ef37161d7f Mon Sep 17 00:00:00 2001
From: Etienne Delclaux <etienne_delclaux@natural-solutions.eu>
Date: Thu, 17 Oct 2024 12:37:05 +0200
Subject: [PATCH] feat: adjust frontend aprt

---
 .../tab-media/tab-media.component.html        | 26 +++--
 .../tab-media/tab-media.component.scss        | 94 ++++++++++++-------
 .../tab-media/tab-media.component.ts          | 56 +++++++----
 3 files changed, 115 insertions(+), 61 deletions(-)

diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.html b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.html
index 9515d27077..4ba5ac5fc4 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.html
@@ -8,7 +8,7 @@
   class="media-container"
   *ngIf="medias.length !== 0"
 >
-  <div class="media-warpper-list">
+  <div class="media-wrapper-list">
     <div class="media-list">
       <ng-container *ngFor="let media of medias">
         <div
@@ -19,19 +19,33 @@
             *ngIf="_ms.typeMedia(media) === 'Photo'"
             [src]="_ms.href(media, 100)"
             alt="Miniature"
+            [ngClass]="
+              media.id_media == selectedMedia.id_media
+                ? 'media-with-thumbnail media-with-thumbnail--selected'
+                : 'media-with-thumbnail'
+            "
           />
-          <mat-icon *ngIf="_ms.typeMedia(media) !== 'Photo'">{{ _ms.icon(media) }}</mat-icon>
+          <div
+            *ngIf="_ms.typeMedia(media) !== 'Photo'"
+            [ngClass]="
+              media.id_media == selectedMedia.id_media
+                ? 'media-without-thumbnail media-without-thumbnail--selected'
+                : 'media-without-thumbnail'
+            "
+          >
+            <mat-icon>{{ _ms.icon(media) }}</mat-icon>
+          </div>
         </div>
       </ng-container>
     </div>
 
     <mat-paginator
       class="paginator"
-      [length]="totalRows"
-      [pageSize]="pageSize"
-      [pageIndex]="currentPage - 1"
+      [pageSizeOptions]="[10, 25, 50, 100]"
+      [pageSize]="pagination.perPage"
+      [length]="pagination.totalItems"
+      [pageIndex]="pagination.currentPage"
       (page)="onPageChange($event)"
-      hidePageSize="true"
     ></mat-paginator>
   </div>
 
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.scss
index 39566daeb9..e9fdf737e1 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.scss
+++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.scss
@@ -1,10 +1,3 @@
-.media-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  height: 100%;
-}
-
 .media-empty-list {
   flex: 1;
   display: flex;
@@ -12,38 +5,69 @@
   align-items: center;
 }
 
-.media-warpper-list {
+.media-container {
   display: flex;
-  flex-direction: column;
   justify-content: space-between;
-  flex: 1;
-  min-width: 0;
-}
+  // height: 33rem;
+  width: 100%;
 
-.media-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(calc(25% - 7.5px), 1fr));
-  gap: 10px;
-  overflow-y: auto;
-  min-height: 0;
-  justify-content: start;
-}
+  .media-viewer {
+    width: 50%;
+    overflow: hidden;
+    align-content: center;
+  }
 
-.media-item {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  justify-content: center;
-}
+  .media-wrapper-list {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+    min-width: 0;
 
-.media-viewer {
-  width: 50%;
-  overflow: hidden;
-}
+    .media-list {
+      display: flex;
+      flex-flow: row wrap;
+      gap: 2rem;
+      margin: 1rem;
+      justify-content: start;
+      .media-item {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .media-with-thumbnail,
+        .media-without-thumbnail {
+          border: 3px solid rgba(0, 0, 0, 0.125);
+          border-radius: 8px;
+        }
 
-.paginator {
-  display: flex;
-  justify-content: center;
-  flex-shrink: 0;
+        .media-with-thumbnail {
+          height: 7rem;
+          width: auto;
+          border-color: rgba(0, 0, 0, 0);
+          &--selected {
+            border-color: var(--purple);
+          }
+        }
+
+        .media-without-thumbnail {
+          width: 5rem;
+          height: 5rem;
+          color: rgba(0, 0, 0, 0.87);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          &--selected {
+            border-color: var(--purple);
+          }
+        }
+      }
+    }
+    .paginator {
+      display: flex;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+  }
 }
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.ts
index 275d82fce9..b79c385841 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.ts
@@ -6,6 +6,18 @@ import { GN2CommonModule } from '@geonature_common/GN2Common.module';
 import { CommonModule } from '@angular/common';
 import { PageEvent } from '@angular/material/paginator';
 
+export interface Pagination {
+  totalItems: number;
+  currentPage: number;
+  perPage: number;
+}
+
+export const DEFAULT_PAGINATION: Pagination = {
+  totalItems: 0,
+  currentPage: 1,
+  perPage: 10,
+};
+
 @Component({
   standalone: true,
   selector: 'pnx-tab-media',
@@ -18,9 +30,7 @@ export class TabMediaComponent implements OnInit {
   public medias: any[] = [];
   public selectedMedia: any = {};
   taxon: Taxon | null = null;
-  pageSize: number = 12;
-  totalRows: number = 0;
-  currentPage: number = 1;
+  pagination: Pagination = DEFAULT_PAGINATION;
 
   constructor(
     protected _ms: MediaService,
@@ -31,26 +41,32 @@ export class TabMediaComponent implements OnInit {
     this._tss.taxon.subscribe((taxon) => {
       this.taxon = taxon;
       if (!this.taxon) {
+        this.medias = [];
+        this.selectedMedia = {};
+        this.pagination = DEFAULT_PAGINATION;
         return;
       }
       this.loadMedias();
     });
   }
 
-  loadMedias(page: number = 1, pageSize: number = this.pageSize) {
-    const params = {
-      page: page,
-      per_page: pageSize,
-    };
-
-    this._ms.getMediasSpecies(this.taxon!.cd_ref, params).subscribe((response) => {
-      this.medias = response.items;
-      this.totalRows = response.total;
-
-      if (Object.keys(this.selectedMedia).length === 0) {
-        this.selectedMedia = this.medias[0];
-      }
-    });
+  loadMedias() {
+    this._ms
+      .getMediasSpecies(this.taxon.cd_ref, {
+        page: this.pagination.currentPage,
+        per_page: this.pagination.perPage,
+      })
+      .subscribe((response) => {
+        this.medias = response.items;
+        this.pagination = {
+          totalItems: response.total,
+          currentPage: response.page,
+          perPage: response.per_page,
+        };
+        if (!this.medias.some((media) => media.id_media == this.selectedMedia.id_media)) {
+          this.selectedMedia = this.medias[0];
+        }
+      });
   }
 
   selectMedia(media: any) {
@@ -58,8 +74,8 @@ export class TabMediaComponent implements OnInit {
   }
 
   onPageChange(event: PageEvent) {
-    this.currentPage = event.pageIndex + 1;
-    this.pageSize = event.pageSize;
-    this.loadMedias(this.currentPage, this.pageSize);
+    this.pagination.currentPage = event.pageIndex + 1;
+    this.pagination.perPage = event.pageSize;
+    this.loadMedias();
   }
 }