create api card and form to request Ign download api

apps/datahub/src/app/app.module.ts

@@ -41,6 +41,7 @@ import {
   UiLayoutModule,
 } from '@geonetwork-ui/ui/layout'
 import { UiSearchModule } from '@geonetwork-ui/ui/search'
+import { IgnApiDlComponent } from '@geonetwork-ui/feature/record'
 import {
   getGlobalConfig,
   getOptionalSearchConfig,
@@ -95,6 +96,7 @@ import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { RecordUserFeedbacksComponent } from './record/record-user-feedbacks/record-user-feedbacks.component'
 import { LetDirective } from '@ngrx/component'
 import { OrganizationPageComponent } from './organization/organization-page/organization-page.component'
+import { MatButtonToggleModule } from '@angular/material/button-toggle'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 
@@ -168,6 +170,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     BlockListComponent,
     PreviousNextButtonsComponent,
     LetDirective,
+    MatButtonToggleModule,
   ],
   providers: [
     importProvidersFrom(FeatureAuthModule),

apps/datahub/src/app/record/record-apis/record-apis.component.html

@@ -36,9 +36,20 @@
   <div class="bg-primary-opacity-10 py-8">
     <div class="flex flex-col px-4 gap-8 container-lg lg:mx-auto">
       <div class="flex flex-wrap justify-between sm:mb-2 ng-star-inserted">
-        <p class="text-[21px] text-title font-title" translate>
+        <p
+          class="text-[21px] text-title font-title"
+          *ngIf="selectedApiLink?.accessServiceProtocol !== 'GPFDL'"
+          translate
+        >
           record.metadata.api.form.title
         </p>
+        <p
+          class="text-[21px] text-title font-title"
+          *ngIf="selectedApiLink?.accessServiceProtocol === 'GPFDL'"
+          translate
+        >
+          record.metadata.api.form.title.gpf
+        </p>
         <button
           type="button"
           class="flex items-center gap-0.5 text-primary group"
@@ -56,7 +67,13 @@
           </mat-icon>
         </button>
       </div>
+
+      <gn-ui-ign-api-dl
+        *ngIf="displayApiIgnForm"
+        [apiLink]="selectedApiLink"
+      ></gn-ui-ign-api-dl>
       <gn-ui-record-api-form
+        *ngIf="!displayApiIgnForm"
         [apiLink]="selectedApiLink"
       ></gn-ui-record-api-form>
     </div>

apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts

@@ -50,7 +50,7 @@ describe('RecordApisComponent', () => {
       expect(component.selectedApiLink).toEqual(serviceDistributionMock)
     })
     it('should update maxHeight for transition', () => {
-      expect(component.maxHeight).toEqual('500px')
+      expect(component.maxHeight).toEqual('700px')
     })
     it('should update opacity for transition', () => {
       expect(component.opacity).toEqual(1)

apps/datahub/src/app/record/record-apis/record-apis.component.ts

@@ -20,6 +20,7 @@ export class RecordApisComponent implements OnInit {
 
   maxHeight = '0px'
   opacity = 0
+  displayApiIgnForm: boolean
   selectedApiLink: DatasetServiceDistribution
 
   apiLinks$ = this.facade.apiLinks$
@@ -51,6 +52,8 @@ export class RecordApisComponent implements OnInit {
   }
 
   openRecordApiForm(link: DatasetServiceDistribution) {
+    this.displayApiIgnForm =
+      link.accessServiceProtocol === 'GPFDL' ? true : false
     this.selectedApiLink = link
     this.setStyle(link)
   }
@@ -61,7 +64,7 @@ export class RecordApisComponent implements OnInit {
   }
 
   setStyle(link: DatasetServiceDistribution) {
-    this.maxHeight = link === undefined ? '0px' : '500px'
+    this.maxHeight = link === undefined ? '0px' : '700px'
     this.opacity = link === undefined ? 0 : 1
   }
 

libs/api/metadata-converter/src/lib/common/distribution.mapper.ts

@@ -7,6 +7,7 @@ export function matchProtocol(protocol: string): ServiceProtocol {
   if (/wps/i.test(protocol)) return 'wps'
   if (/ogc\W*api\W*features/i.test(protocol)) return 'ogcFeatures'
   if (/esri/i.test(protocol)) return 'esriRest'
+  if (/DOWNLOAD-1/i.test(protocol)) return 'GPFDL'
   return 'other'
 }
 

libs/api/metadata-converter/src/lib/gn4/gn4.field.mapper.ts

@@ -393,7 +393,8 @@ export class Gn4FieldMapper {
       /^OGC:WMS/.test(protocol) ||
       /^OGC:WFS/.test(protocol) ||
       /^OGC:WMTS/.test(protocol) ||
-      /ogc\W*api\W*features/i.test(protocol)
+      /ogc\W*api\W*features/i.test(protocol) ||
+      /^WWW:DOWNLOAD-/.test(protocol)
     ) {
       return 'service'
     }

libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -113,6 +113,7 @@ export type ServiceProtocol =
   | 'wmts'
   | 'esriRest'
   | 'ogcFeatures'
+  | 'GPFDL'
   | 'other'
 
 export type OnlineResourceType = 'service' | 'download' | 'link' | 'endpoint'

libs/feature/record/src/index.ts

@@ -7,3 +7,4 @@ export * from './lib/data-view-share/data-view-share.component'
 export * from './lib/data-view-web-component/data-view-web-component.component'
 export * from './lib/external-viewer-button/external-viewer-button.component'
 export * from './lib/map-view/map-view.component'
+export * from './lib/ign-api-dl/ign-api-dl.component'

libs/feature/record/src/lib/feature-record.module.ts

@@ -15,6 +15,8 @@ import {
   METADATA_VIEW_FEATURE_STATE_KEY,
   reducer,
 } from './state/mdview.reducer'
+import { IgnApiDlComponent } from './ign-api-dl/ign-api-dl.component'
+import { IgnApiProduitComponent } from './ign-api-produit/ign-api-produit.component'
 import { MatTabsModule } from '@angular/material/tabs'
 import { MatIconModule } from '@angular/material/icon'
 import { PopupAlertComponent, UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
@@ -35,6 +37,8 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     DataViewPermalinkComponent,
     DataViewWebComponentComponent,
     DataViewShareComponent,
+    IgnApiDlComponent,
+    IgnApiProduitComponent,
   ],
   imports: [
     CommonModule,
@@ -61,6 +65,7 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     DataViewPermalinkComponent,
     DataViewWebComponentComponent,
     DataViewShareComponent,
+    IgnApiDlComponent,
   ],
 })
 export class FeatureRecordModule {}

libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.css

@@ -0,0 +1,22 @@
+:host ::ng-deep input {
+  color: black;
+  opacity: 1;
+}
+
+:host ::ng-deep gn-ui-copy-text-button input[type='text'] {
+  color: black;
+  background-color: white;
+}
+
+:host ::ng-deep gn-ui-copy-text-button button,
+host ::ng-deep gn-ui-copy-text-button button:hover {
+  background-color: var(--color-secondary) !important;
+}
+
+:host ::ng-deep gn-ui-copy-text-button button mat-icon {
+  color: white !important;
+  opacity: 1 !important;
+}
+:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon {
+  color: lightgrey !important;
+}

libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.html

@@ -0,0 +1,108 @@
+<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"
+      >
+        <p class="text-[13px] uppercase" translate>
+          record.metadata.api.form.reset
+        </p>
+      </button>
+    </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>
+    <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>
+  </div>
+</div>