geonetwork-ui 2.8.0-dev.c77b0c7dd → 2.8.0-dev.dab05894c

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -4,6 +4,7 @@ import {
   EventEmitter,
   Input,
   Output,
+  inject,
 } from '@angular/core'
 import {
   CatalogRecord,
@@ -26,8 +27,8 @@ import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { matMailOutline } from '@ng-icons/material-icons/outline'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { GnUiLinkifyDirective } from './linkify.directive'
+import { GnUiHumanizeDateDirective } from '../../../../../../libs/util/shared/src'
 
-import { CommonModule } from '@angular/common'
 import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
 
 @Component({
@@ -37,7 +38,6 @@ import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    CommonModule,
     TranslateDirective,
     TranslatePipe,
     MarkdownParserComponent,
@@ -49,6 +49,7 @@ import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
     CopyTextButtonComponent,
     NgIcon,
     GnUiLinkifyDirective,
+    GnUiHumanizeDateDirective,
     SpatialExtentComponent,
   ],
   viewProviders: [
@@ -59,13 +60,13 @@ import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
   ],
 })
 export class MetadataInfoComponent {
+  private dateService = inject(DateService)
+
   @Input() metadata: Partial<CatalogRecord>
   @Input() incomplete: boolean
   @Output() keyword = new EventEmitter<Keyword>()
   updatedTimes: number
 
-  constructor(private dateService: DateService) {}
-
   get hasUsage() {
     return (
       this.metadata.extras?.isOpenData === true ||
@@ -146,12 +147,4 @@ export class MetadataInfoComponent {
   onKeywordClick(keyword: Keyword) {
     this.keyword.emit(keyword)
   }
-
-  formatDate(date: Date): string {
-    return this.dateService.formatDate(date)
-  }
-
-  formatDateTime(date: Date): string {
-    return this.dateService.formatDateTime(date)
-  }
 }

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.html

@@ -1,33 +1,36 @@
-<div
-  *ngIf="metadataQualityDisplay"
-  class="flex items-center metadata-quality min-w-0"
-  [ngClass]="{ 'text-xs leading-[8px] m-h-[120px]': smaller }"
->
-  <gn-ui-progress-bar
-    tabindex="0"
-    [value]="qualityScore"
-    [type]="'light'"
-    class="flex-grow"
-  ></gn-ui-progress-bar>
-  <gn-ui-popover
-    *ngIf="popoverDisplay"
-    [content]="popoverItems"
-    theme="light-border"
-    [class]="smaller ? 'ml-2' : 'ml-2 mt-1'"
+@if (metadataQualityDisplay) {
+  <div
+    class="flex items-center metadata-quality min-w-0"
+    [ngClass]="{ 'text-xs leading-[8px] m-h-[120px]': smaller }"
   >
-    <ng-icon
-      name="matInfoOutline"
-      class="flex-shrink-0 text-gray-600"
-    ></ng-icon>
-  </gn-ui-popover>
-</div>
+    <gn-ui-progress-bar
+      tabindex="0"
+      [value]="qualityScore"
+      [type]="'light'"
+      class="flex-grow"
+    ></gn-ui-progress-bar>
+    @if (popoverDisplay) {
+      <gn-ui-popover
+        [content]="popoverItems"
+        theme="light-border"
+        [class]="smaller ? 'ml-2' : 'ml-2 mt-1'"
+      >
+        <ng-icon
+          name="matInfoOutline"
+          class="flex-shrink-0 text-gray-600"
+        ></ng-icon>
+      </gn-ui-popover>
+    }
+  </div>
+}
 <ng-template #popoverItems>
   <div class="p-2 py-4">
     <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
-    <gn-ui-metadata-quality-item
-      *ngFor="let e of items"
-      [name]="e.name"
-      [value]="e.value"
-    ></gn-ui-metadata-quality-item>
+    @for (e of items; track e) {
+      <gn-ui-metadata-quality-item
+        [name]="e.name"
+        [value]="e.value"
+      ></gn-ui-metadata-quality-item>
+    }
   </div>
 </ng-template>

package/src/libs/ui/elements/src/lib/notification/notification.component.html

@@ -23,14 +23,11 @@
       {{ title }}
     </div>
     <div class="text-[14px] text-gray-800 whitespace-pre-wrap">{{ text }}</div>
-    <a
-      href
-      *ngIf="closeMessage"
-      class="text-[14px] gn-ui-link"
-      (click)="handleClose($event)"
-    >
-      {{ closeMessage }}
-    </a>
+    @if (closeMessage) {
+      <a href class="text-[14px] gn-ui-link" (click)="handleClose($event)">
+        {{ closeMessage }}
+      </a>
+    }
   </div>
   <gn-ui-button
     type="light"

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html

@@ -50,17 +50,16 @@
             placeholder=""
           >
           </gn-ui-text-input>
-          <div
-            *ngIf="!supportOffset"
-            class="flex items-center gap-2 text-orange-500 z-10 ml-3"
-          >
-            <span
-              class="material-symbols-outlined"
-              matTooltip="Not supported on this service"
-            >
-              warning
-            </span>
-          </div>
+          @if (!supportOffset) {
+            <div class="flex items-center gap-2 text-orange-500 z-10 ml-3">
+              <span
+                class="material-symbols-outlined"
+                matTooltip="Not supported on this service"
+              >
+                warning
+              </span>
+            </div>
+          }
         </div>
       </div>
       <div class="flex flex-col gap-3">

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.html

@@ -4,104 +4,111 @@
   data-cy="feat-catalog-scrollable"
 >
   <div #scrollContainer class="flex flex-col gap-2 py-5 px-5">
-    <div
-      *ngFor="let featureType of filteredFeatureCatalog?.featureTypes"
-      class="rounded shadow bg-white"
-    >
-      <gn-ui-expandable-panel
-        #expanel
-        [collapsed]="filteredFeatureCatalog?.featureTypes?.length !== 1"
-        iconColor="black"
-      >
-        <ng-template #titleTemplate>
-          <div class="px-2">
-            <div class="text-lg font-bold">{{ featureType.name }}</div>
-            <div class="text-sm" *ngIf="featureType.definition">
-              {{ featureType.definition }}
-            </div>
-          </div>
-        </ng-template>
-        <div
-          *ngIf="expanel && !expanel.collapsed"
-          class="grid gap-0"
-          [style.grid-template-columns]="
-            getGridTemplateColumns(featureType.attributes)
-          "
-          data-cy="feature-type-content"
+    @for (
+      featureType of filteredFeatureCatalog?.featureTypes;
+      track featureType
+    ) {
+      <div class="rounded shadow bg-white">
+        <gn-ui-expandable-panel
+          #expanel
+          [collapsed]="filteredFeatureCatalog?.featureTypes?.length !== 1"
+          iconColor="black"
         >
-          <div
-            class="py-1 px-2 text-sm font-bold text-left border-t break-all"
-            [class.border-l]="i > 0"
-            [class.border-gray-300]="i > 0"
-            [ngClass]="col.class || ''"
-            *ngFor="
-              let col of getColumnsDefinition(featureType.attributes);
-              trackBy: trackByColumn;
-              let i = index
-            "
-            data-test="column-label"
-          >
-            {{ 'feature.catalog.attribute.' + col.key | translate }}
-          </div>
-          <ng-container *ngIf="expanel && !expanel.collapsed">
-            <ng-container *ngFor="let row of featureType.attributes">
-              <div
-                class="bg-white text-sm font-normal text-left border-t"
-                [class.border-l]="i > 0"
-                [class.border-gray-300]="i > 0"
-                *ngFor="
-                  let col of getColumnsDefinition(featureType.attributes);
-                  trackBy: trackByColumn;
-                  let i = index
-                "
-                data-test="cell-content"
-              >
-                <ng-container
-                  *ngIf="col.key === 'values'; then tplValues; else defaultTpl"
-                ></ng-container>
-
-                <ng-template #defaultTpl>
-                  <gn-ui-truncated-text
-                    [scrollContainer]="scrollContainer"
-                    [cdkScrollContainer]="scrollable"
-                    [text]="row[col.key]"
-                  ></gn-ui-truncated-text>
-                </ng-template>
-
-                <ng-template #tplValues>
-                  <gn-ui-cell-popin
-                    #popinRef
-                    [scrollContainer]="scrollContainer"
-                    [cdkScrollContainer]="scrollable"
-                    *ngIf="row.values?.length > 0"
-                  >
-                    <div cellContent data-cy="values-cell-popin-trigger">
-                      <gn-ui-button
-                        type="light"
-                        extraClass="bg-transparent border-none"
-                        (buttonClick)="popinRef.openOverlay()"
-                      >
-                        <ng-icon name="iconoirList" size="24"></ng-icon>
-                      </gn-ui-button>
-                    </div>
+          <ng-template #titleTemplate>
+            <div class="px-2">
+              <div class="text-lg font-bold">{{ featureType.name }}</div>
+              @if (featureType.definition) {
+                <div class="text-sm">
+                  {{ featureType.definition }}
+                </div>
+              }
+            </div>
+          </ng-template>
+          @if (expanel && !expanel.collapsed) {
+            <div
+              class="grid gap-0"
+              [style.grid-template-columns]="
+                getGridTemplateColumns(featureType.attributes)
+              "
+              data-cy="feature-type-content"
+            >
+              @for (
+                col of getColumnsDefinition(featureType.attributes);
+                track trackByColumn(i, col);
+                let i = $index
+              ) {
+                <div
+                  class="py-1 px-2 text-sm font-bold text-left border-t break-all"
+                  [class.border-l]="i > 0"
+                  [class.border-gray-300]="i > 0"
+                  [ngClass]="col.class || ''"
+                  data-test="column-label"
+                >
+                  {{ 'feature.catalog.attribute.' + col.key | translate }}
+                </div>
+              }
+              @if (expanel && !expanel.collapsed) {
+                @for (row of featureType.attributes; track row) {
+                  @for (
+                    col of getColumnsDefinition(featureType.attributes);
+                    track trackByColumn(i, col);
+                    let i = $index
+                  ) {
                     <div
-                      popinContent
-                      class="max-h-60 overflow-y-auto min-w-64 py-4 px-6"
-                      style="scrollbar-width: thin"
+                      class="bg-white text-sm font-normal text-left border-t"
+                      [class.border-l]="i > 0"
+                      [class.border-gray-300]="i > 0"
+                      data-test="cell-content"
                     >
-                      <ul class="list-disc list-inside mr-4">
-                        <li *ngFor="let v of row.values">
-                          {{ v.label || v.code }}
-                        </li>
-                      </ul>
+                      @if (col.key === 'values') {
+                        @if (row.values?.length > 0) {
+                          <gn-ui-cell-popin
+                            #popinRef
+                            [scrollContainer]="scrollContainer"
+                            [cdkScrollContainer]="scrollable"
+                          >
+                            <div
+                              cellContent
+                              data-cy="values-cell-popin-trigger"
+                            >
+                              <gn-ui-button
+                                type="light"
+                                extraClass="bg-transparent border-none"
+                                (buttonClick)="popinRef.openOverlay()"
+                              >
+                                <ng-icon name="iconoirList" size="24"></ng-icon>
+                              </gn-ui-button>
+                            </div>
+                            <div
+                              popinContent
+                              class="max-h-60 overflow-y-auto min-w-64 py-4 px-6"
+                              style="scrollbar-width: thin"
+                            >
+                              <ul class="list-disc list-inside mr-4">
+                                @for (v of row.values; track v) {
+                                  <li>
+                                    {{ v.label || v.code }}
+                                  </li>
+                                }
+                              </ul>
+                            </div>
+                          </gn-ui-cell-popin>
+                        }
+                      } @else {
+                        <gn-ui-truncated-text
+                          [scrollContainer]="scrollContainer"
+                          [cdkScrollContainer]="scrollable"
+                          [text]="row[col.key]"
+                        ></gn-ui-truncated-text>
+                      }
                     </div>
-                  </gn-ui-cell-popin>
-                </ng-template>
-              </div>
-            </ng-container>
-          </ng-container>
-        </div>
-      </gn-ui-expandable-panel>
-    </div>
+                  }
+                }
+              }
+            </div>
+          }
+        </gn-ui-expandable-panel>
+      </div>
+    }
   </div>
 </div>

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.html

@@ -1,108 +1,126 @@
-<div style="height: 652px" id="preview" *ngIf="apiLinks.length > 0">
-  <div class="bg-primary-opacity-10 overflow-visible" style="height: 420px">
-    <div class="container-lg px-4 lg:mx-auto">
-      <div>
-        <div class="gn-ui-section-title mb-6" translate>
-          service.metadata.capabilities
-        </div>
-        <div
-          *ngIf="loading"
-          class="flex justify-center w-full h-[200px] items-center"
-        >
-          <gn-ui-spinning-loader></gn-ui-spinning-loader>
-        </div>
-        <div *ngIf="!loading">
-          <div class="flex flex-row gap-5">
-            <div class="h-14 md:w-2/5 w-full mb-4 flex flex-row relative">
-              <gn-ui-text-input
-                class="w-full"
-                [(value)]="searchQuery"
-                [extraClass]="getExtraInputClass()"
-                [placeholder]="'service.metadata.search' | translate"
-                (input)="onSearchChange($event)"
-                (keydown.enter)="onSearchEnter($event)"
-              >
-              </gn-ui-text-input>
-              <div
-                class="absolute right-14 h-14 w-14 flex items-center justify-center"
-              >
-                <button
-                  #inputBtn
-                  *ngIf="searchQuery"
-                  [aria-label]="'service.metadata.search.clear' | translate"
-                  (click)="clearSearch()"
-                  class="h-12 w-12 border-0 flex items-center justify-center"
-                >
-                  <ng-icon name="matClose"></ng-icon>
-                </button>
-              </div>
-              <div class="border-l absolute border-gray-200 right-0 h-14 w-14">
-                <gn-ui-button
-                  #inputBtn
-                  type="outline"
-                  extraClass="h-12 w-12 border-0 absolute right-1 top-1 bg-white"
-                  (buttonClick)="searchLayers()"
-                >
-                  <ng-icon name="iconoirSearch"></ng-icon>
-                </gn-ui-button>
-              </div>
-            </div>
-            <gn-ui-popover
-              [content]="popoverItems"
-              theme="light"
-              class="w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center"
-            >
-              <ng-icon name="matInfoOutline" class="w-6 h-6 pt-0.5"></ng-icon>
-            </gn-ui-popover>
+@if (apiLinks.length > 0) {
+  <div style="height: 652px" id="preview">
+    <div class="bg-primary-opacity-10 overflow-visible" style="height: 420px">
+      <div class="container-lg px-4 lg:mx-auto">
+        <div>
+          <div class="gn-ui-section-title mb-6" translate>
+            service.metadata.capabilities
           </div>
-          <div
-            style="height: 500px"
-            class="bg-white shadow-xl rounded p-0 flex md:flex-row flex-col"
-          >
-            <div
-              class="flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3"
-              data-test="layer-list"
-            >
-              <gn-ui-button
-                *ngFor="let layerItem of filteredLayers"
-                type="outline"
-                [extraClass]="getExtraClass(layerItem)"
-                (buttonClick)="selectLayer(layerItem)"
-              >
-                {{ layerItem.title || layerItem.name }}
-              </gn-ui-button>
-              <span *ngIf="filteredLayers.length === 0" class="text-gray-800">
-                {{ 'service.metadata.filter.noLayers' | translate }}
-              </span>
+          @if (loading) {
+            <div class="flex justify-center w-full h-[200px] items-center">
+              <gn-ui-spinning-loader></gn-ui-spinning-loader>
             </div>
-            <div
-              data-test="layer-information"
-              class="flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto"
-            >
-              <div
-                *ngFor="let item of layerInformation"
-                class="flex flex-row gap-4 border-b border-gray-200"
-              >
-                <span class="font-semibold w-24">{{ item.displayName }}</span>
-                <div *ngIf="isList(item.value)">
+          }
+          @if (!loading) {
+            <div>
+              <div class="flex flex-row gap-5">
+                <div class="h-14 md:w-2/5 w-full mb-4 flex flex-row relative">
+                  <gn-ui-text-input
+                    class="w-full"
+                    [(value)]="searchQuery"
+                    [extraClass]="getExtraInputClass()"
+                    [placeholder]="'service.metadata.search' | translate"
+                    (input)="onSearchChange($event)"
+                    (keydown.enter)="onSearchEnter($event)"
+                  >
+                  </gn-ui-text-input>
+                  <div
+                    class="absolute right-14 h-14 w-14 flex items-center justify-center"
+                  >
+                    @if (searchQuery) {
+                      <button
+                        #inputBtn
+                        [aria-label]="
+                          'service.metadata.search.clear' | translate
+                        "
+                        (click)="clearSearch()"
+                        class="h-12 w-12 border-0 flex items-center justify-center"
+                      >
+                        <ng-icon name="matClose"></ng-icon>
+                      </button>
+                    }
+                  </div>
                   <div
-                    *ngFor="let subItem of item.value"
-                    class="flex flex-row break-words max-w-72"
+                    class="border-l absolute border-gray-200 right-0 h-14 w-14"
                   >
-                    {{ subItem }}
+                    <gn-ui-button
+                      #inputBtn
+                      type="outline"
+                      extraClass="h-12 w-12 border-0 absolute right-1 top-1 bg-white"
+                      (buttonClick)="searchLayers()"
+                    >
+                      <ng-icon name="iconoirSearch"></ng-icon>
+                    </gn-ui-button>
                   </div>
                 </div>
-                <div class="break-words max-w-72" *ngIf="!isList(item.value)">
-                  {{ item.value }}
+                <gn-ui-popover
+                  [content]="popoverItems"
+                  theme="light"
+                  class="w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center"
+                >
+                  <ng-icon
+                    name="matInfoOutline"
+                    class="w-6 h-6 pt-0.5"
+                  ></ng-icon>
+                </gn-ui-popover>
+              </div>
+              <div
+                style="height: 500px"
+                class="bg-white shadow-xl rounded p-0 flex md:flex-row flex-col"
+              >
+                <div
+                  class="flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3"
+                  data-test="layer-list"
+                >
+                  @for (layerItem of filteredLayers; track layerItem) {
+                    <gn-ui-button
+                      type="outline"
+                      [extraClass]="getExtraClass(layerItem)"
+                      (buttonClick)="selectLayer(layerItem)"
+                    >
+                      {{ layerItem.title || layerItem.name }}
+                    </gn-ui-button>
+                  }
+                  @if (filteredLayers.length === 0) {
+                    <span class="text-gray-800">
+                      {{ 'service.metadata.filter.noLayers' | translate }}
+                    </span>
+                  }
+                </div>
+                <div
+                  data-test="layer-information"
+                  class="flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto"
+                >
+                  @for (item of layerInformation; track item) {
+                    <div class="flex flex-row gap-4 border-b border-gray-200">
+                      <span class="font-semibold w-24">{{
+                        item.displayName
+                      }}</span>
+                      @if (isList(item.value)) {
+                        <div>
+                          @for (subItem of item.value; track subItem) {
+                            <div class="flex flex-row break-words max-w-72">
+                              {{ subItem }}
+                            </div>
+                          }
+                        </div>
+                      }
+                      @if (!isList(item.value)) {
+                        <div class="break-words max-w-72">
+                          {{ item.value }}
+                        </div>
+                      }
+                    </div>
+                  }
                 </div>
               </div>
             </div>
-          </div>
+          }
         </div>
       </div>
     </div>
   </div>
-</div>
+}
 <ng-template #popoverItems>
   <div class="p-2 py-4">
     <div translate>service.metadata.filter</div>

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.ts

@@ -1,5 +1,11 @@
-import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
-import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+  inject,
+} from '@angular/core'
+
 import {
   TranslateDirective,
   TranslatePipe,
@@ -41,7 +47,6 @@ marker(`service.metadata.capabilities.attribution`)
   selector: 'gn-ui-service-capabilities',
   standalone: true,
   imports: [
-    CommonModule,
     TranslateDirective,
     TranslatePipe,
     ButtonComponent,
@@ -61,6 +66,9 @@ marker(`service.metadata.capabilities.attribution`)
   styleUrl: './service-capabilities.component.css',
 })
 export class ServiceCapabilitiesComponent implements OnInit {
+  private cdr = inject(ChangeDetectorRef)
+  private translateService = inject(TranslateService)
+
   @Input() apiLinks = []
   availableLayers = []
   filteredLayers = []
@@ -86,11 +94,6 @@ export class ServiceCapabilitiesComponent implements OnInit {
     'attribution',
   ]
 
-  constructor(
-    private cdr: ChangeDetectorRef,
-    private translateService: TranslateService
-  ) {}
-
   ngOnInit() {
     this.loadLayers()
   }

package/src/libs/ui/elements/src/lib/stac-items-result-grid/stac-items-result-grid.component.html

@@ -0,0 +1,15 @@
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[10px]">
+  @for (item of items; track item) {
+    <div>
+      <div
+        data-cy="stac-item-card"
+        class="h-[173px] flex flex-col justify-between gap-4 bg-white rounded-lg border border-gray-300 px-5 py-3 mx-auto"
+      >
+        <h2 class="text-xl text-black line-clamp-4 break-words">
+          {{ item.id }}
+        </h2>
+        <p class="truncate">{{ item.properties.datetime }}</p>
+      </div>
+    </div>
+  }
+</div>