From 13a8211486639b7b0774f444a8da4bf53607ae4e Mon Sep 17 00:00:00 2001
From: Ronan <rfouille93@gmail.com>
Date: Tue, 8 Oct 2024 14:44:27 +0200
Subject: [PATCH] =?UTF-8?q?feat(formapi):=20Finalisation=20de=20la=20fen?=
 =?UTF-8?q?=C3=AAtre=20modale=20lorsque=20l'on=20appuis=20sur=20un=20lien?=
 =?UTF-8?q?=20de=20t=C3=A9l=C3=A9chargement=20#56?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../record-apis/record-apis.component.html    |  13 +-
 .../lib/ign-api-dl/ign-api-dl.component.html  | 198 +++++++++---------
 2 files changed, 105 insertions(+), 106 deletions(-)

diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.html b/apps/datahub/src/app/record/record-apis/record-apis.component.html
index be91e024a8..d1b30aa133 100644
--- a/apps/datahub/src/app/record/record-apis/record-apis.component.html
+++ b/apps/datahub/src/app/record/record-apis/record-apis.component.html
@@ -29,12 +29,14 @@
 </gn-ui-carousel>
 <div
   *ngIf="displayApiIgnForm"
-  class="fixed inset-0 overflow-hidden justify-center items-center flex z-50"
+  class="fixed inset-0 w-screen h-screen flex z-50"
   [ngClass]="selectedApiLink ? 'ease-in' : 'ease-out'"
 >
-  <div class="py-8 w-full h-full bg-slate-200 bg-opacity-50 w-full">
-    <div class="flex flex-col px-4 gap-8 container-lg lg:mx-auto bg-white">
-      <div class="flex flex-wrap justify-between sm:mb-2 ng-star-inserted">
+  <div class="py-8 w-full h-full bg-slate-200 bg-opacity-50">
+    <div
+      class="flex flex-col justify-between container-lg lg:mx-auto bg-white h-full"
+    >
+      <div class="flex flex-wrap justify-between sm:mb-2 ng-star-inserted p-5">
         <p
           class="text-[21px] text-title font-title"
           *ngIf="selectedApiLink?.accessServiceProtocol !== 'GPFDL'"
@@ -66,11 +68,12 @@
           </mat-icon>
         </button>
       </div>
-
       <gn-ui-ign-api-dl
+        class="grow"
         *ngIf="displayApiIgnForm"
         [apiLink]="selectedApiLink"
       ></gn-ui-ign-api-dl>
+
       <gn-ui-record-api-form
         *ngIf="!displayApiIgnForm"
         [apiLink]="selectedApiLink"
diff --git a/libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.html b/libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.html
index 3dc41b5f21..b3e646f393 100644
--- a/libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.html
+++ b/libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.html
@@ -1,107 +1,103 @@
-<div class="flex flex-col gap-8">
-  <div class="flex flex-col bg-white p-8 ng-star-inserted shadow-xl">
-    <div class="flex flex-row">
-      <div class="text-[16px] text-black truncate font-title w-11/12" translate>
-        record.metadata.api.form.create
-      </div>
-      <button
-        (click)="resetUrl()"
-        class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors"
+<div class="flex flex-col bg-white p-8 ng-star-inserted shadow-xl h-full">
+  <div class="flex flex-row">
+    <div class="text-[16px] text-black truncate font-title w-11/12" translate>
+      record.metadata.api.form.create
+    </div>
+    <button
+      (click)="resetUrl()"
+      class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors"
+    >
+      <p class="text-[13px] uppercase" translate>
+        record.metadata.api.form.reset
+      </p>
+    </button>
+  </div>
+  <div class="flex flex-row flex-wrap justify-between gap-5">
+    <div class="flex flex-col gap-3">
+      <!--<p class="text-sm" translate>record.metadata.api.form.type</p>-->
+      <gn-ui-dropdown-selector
+        #zone
+        [title]="''"
+        extraBtnClass="secondary min-w-full !w-40 !text-black"
+        [showTitle]="false"
+        class="text-black"
+        [choices]="bucketPromisesZone"
+        (selectValue)="setZone($event)"
+        [selected]="zone$ | async"
       >
-        <p class="text-[13px] uppercase" translate>
-          record.metadata.api.form.reset
-        </p>
-      </button>
+      </gn-ui-dropdown-selector>
     </div>
-    <div class="flex flex-row flex-wrap justify-between flex-grow gap-5">
-      <div class="flex flex-col gap-3">
-        <!--<p class="text-sm" translate>record.metadata.api.form.type</p>-->
-        <gn-ui-dropdown-selector
-          #zone
-          [title]="''"
-          extraBtnClass="secondary min-w-full !w-40 !text-black"
-          [showTitle]="false"
-          class="text-black"
-          [choices]="bucketPromisesZone"
-          (selectValue)="setZone($event)"
-          [selected]="zone$ | async"
-        >
-        </gn-ui-dropdown-selector>
-      </div>
-      <div class="flex flex-col gap-3">
-        <!--<p class="text-sm" translate>record.metadata.api.form.type</p>-->
-        <gn-ui-dropdown-selector
-          #format
-          [title]="''"
-          extraBtnClass="secondary min-w-full !w-40 !text-black"
-          [showTitle]="false"
-          class="text-black"
-          [choices]="bucketPromisesFormat"
-          (selectValue)="setFormat($event)"
-          [selected]="format$ | async"
-        >
-        </gn-ui-dropdown-selector>
-      </div>
-      <div class="flex flex-col gap-3">
-        <!--<p class="text-sm" translate>record.metadata.api.form.type</p>-->
-        <gn-ui-dropdown-selector
-          #format
-          [title]="'CRS'"
-          [choices]="bucketPromisesCrs"
-          (selectValue)="setCrs($event)"
-          [selected]="crs$ | async"
-        >
-        </gn-ui-dropdown-selector>
-      </div>
+    <div class="flex flex-col gap-3">
+      <!--<p class="text-sm" translate>record.metadata.api.form.type</p>-->
+      <gn-ui-dropdown-selector
+        #format
+        [title]="''"
+        extraBtnClass="secondary min-w-full !w-40 !text-black"
+        [showTitle]="false"
+        class="text-black"
+        [choices]="bucketPromisesFormat"
+        (selectValue)="setFormat($event)"
+        [selected]="format$ | async"
+      >
+      </gn-ui-dropdown-selector>
+    </div>
+    <div class="flex flex-col gap-3">
+      <!--<p class="text-sm" translate>record.metadata.api.form.type</p>-->
+      <gn-ui-dropdown-selector
+        #format
+        [title]="'CRS'"
+        [choices]="bucketPromisesCrs"
+        (selectValue)="setCrs($event)"
+        [selected]="crs$ | async"
+      >
+      </gn-ui-dropdown-selector>
     </div>
-    <div class="bg-white rounded-lg h-min">
-      <div class="overflow-auto h-60 w-65 bg-white-300 m-2">
-        <table class="w-full text-left border-collapse">
-          <tbody class="align-baseline">
-            <tr>
-              <div *ngFor="let link of listFilteredProduct$ | async">
-                <div class="mb-2 sm:mb-3">
-                  <gn-ui-ign-api-produit
-                    [link]="link"
-                    color="rgb(124 45 18)"
-                    [format]="getLinkFormat(link)"
-                    [isFromWfs]="true"
-                  ></gn-ui-ign-api-produit>
-                </div>
-              </div>
-            </tr>
-            <tr class="flex items-center justify-between">
-              <div class="w-1/3">
-                <button
-                  *ngIf="page$.value > 1"
-                  (click)="lessResult()"
-                  class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors float-left"
-                >
-                  <p class="text-[13px] uppercase" translate>Page précédente</p>
-                </button>
-                <div *ngIf="page$.value <= 1"></div>
-              </div>
-              <div class="w-1/3 flex items-center justify-center">
-                <div
-                  *ngIf="(pageMax$ | async) !== 1"
-                  class="sticky z-10 leading-6 font-semibold"
-                >
-                  {{ page$.value }}/{{ pageMax$ | async }}
-                </div>
-              </div>
-              <div class="w-1/3">
-                <button
-                  *ngIf="page$.value < (pageMax$ | async)"
-                  (click)="moreResult()"
-                  class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors float-right"
-                >
-                  <p class="text-[13px] uppercase" translate>Page suivante</p>
-                </button>
-                <div *ngIf="page$.value >= (pageMax$ | async)"></div>
-              </div>
-            </tr>
-          </tbody>
-        </table>
+  </div>
+  <div class="grow bg-white rounded-lg">
+    <div class="flex flex-col h-full bg-white-300 m-2">
+      <div class="grow relative pb-2">
+        <div class="overflow-auto h-full w-full absolute">
+          <div *ngFor="let link of listFilteredProduct$ | async">
+            <div class="mb-2 sm:mb-3">
+              <gn-ui-ign-api-produit
+                [link]="link"
+                color="rgb(124 45 18)"
+                [format]="getLinkFormat(link)"
+                [isFromWfs]="true"
+              ></gn-ui-ign-api-produit>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-between pt-4">
+        <div class="w-1/3">
+          <button
+            *ngIf="page$.value > 1"
+            (click)="lessResult()"
+            class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors float-left"
+          >
+            <p class="text-[13px] uppercase" translate>Page précédente</p>
+          </button>
+          <div *ngIf="page$.value <= 1"></div>
+        </div>
+        <div class="w-1/3 flex items-center justify-center">
+          <div
+            *ngIf="(pageMax$ | async) !== 1"
+            class="sticky z-10 leading-6 font-semibold"
+          >
+            {{ page$.value }}/{{ pageMax$ | async }}
+          </div>
+        </div>
+        <div class="w-1/3">
+          <button
+            *ngIf="page$.value < (pageMax$ | async)"
+            (click)="moreResult()"
+            class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors float-right"
+          >
+            <p class="text-[13px] uppercase" translate>Page suivante</p>
+          </button>
+          <div *ngIf="page$.value >= (pageMax$ | async)"></div>
+        </div>
       </div>
     </div>
   </div>