geonetwork-ui 2.5.0-dev.50bf7a85a → 2.5.0-dev.5d0c263b8

package/src/libs/feature/record/src/lib/state/mdview.effects.ts

@@ -1,11 +1,10 @@
 import { Injectable } from '@angular/core'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { exhaustMap, mergeMap, of } from 'rxjs'
-import { catchError, map, switchMap } from 'rxjs/operators'
+import { catchError, filter, map, switchMap, take } from 'rxjs/operators'
 import * as MdViewActions from './mdview.actions'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
-
 @Injectable()
 export class MdViewEffects {
   constructor(
@@ -33,6 +32,26 @@ export class MdViewEffects {
     )
   )
 
+  loadFeatureCatalog$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(MdViewActions.loadFullMetadataSuccess),
+      filter(({ full }) => full !== undefined),
+      switchMap(({ full }) => this.recordsRepository.getFeatureCatalog(full)),
+      map((featureCatalog) =>
+        MdViewActions.loadFeatureCatalogSuccess({
+          datasetCatalog: featureCatalog,
+        })
+      ),
+      catchError((error) =>
+        of(
+          MdViewActions.loadFeatureCatalogFailure({
+            error: error.message,
+          })
+        )
+      )
+    )
+  )
+
   /*
     Related effects
   */

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -52,11 +52,26 @@ export class MdViewFacade {
     filter((md) => !!md)
   )
 
+  featureCatalog$ = this.store.pipe(select(MdViewSelectors.getFeatureCatalog))
+
   isIncomplete$ = this.store.pipe(
     select(MdViewSelectors.getMetadataIsIncomplete),
     filter((incomplete) => incomplete !== null)
   )
 
+  isHighUpdateFrequency$ = this.metadata$.pipe(
+    map((record) => {
+      if (record.updateFrequency instanceof Object) {
+        return (
+          record.updateFrequency.per === 'day' &&
+          record.updateFrequency.updatedTimes > 1
+        )
+      }
+
+      return record.updateFrequency === 'continual'
+    })
+  )
+
   error$ = this.store.pipe(select(MdViewSelectors.getMetadataError))
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))

package/src/libs/feature/record/src/lib/state/mdview.reducer.ts

@@ -3,6 +3,7 @@ import * as MetadataViewActions from './mdview.actions'
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   CatalogRecord,
+  DatasetFeatureCatalog,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -17,6 +18,9 @@ export interface MetadataViewState {
   allUserFeedbacksLoading: boolean
   addUserFeedbackLoading: boolean
   chartConfig?: DatavizConfigurationModel
+  featureCatalog?: DatasetFeatureCatalog
+  featureCatalogLoading: boolean
+  featureCatalogError: string | null
 }
 
 export const initialMetadataViewState: MetadataViewState = {
@@ -24,6 +28,8 @@ export const initialMetadataViewState: MetadataViewState = {
   loadingFull: false,
   allUserFeedbacksLoading: false,
   addUserFeedbackLoading: false,
+  featureCatalogLoading: false,
+  featureCatalogError: null,
 }
 
 const metadataViewReducer = createReducer(
@@ -105,7 +111,30 @@ const metadataViewReducer = createReducer(
       addUserFeedbackLoading: false,
       allUserFeedbacksLoading: false,
     })
-  )
+  ),
+
+  /**
+   * FeatureCatalog reducers
+   */
+
+  on(MetadataViewActions.loadFeatureCatalog, (state) => ({
+    ...state,
+    featureCatalogError: null,
+    featureCatalogLoading: true,
+  })),
+  on(
+    MetadataViewActions.loadFeatureCatalogSuccess,
+    (state, { datasetCatalog }) => ({
+      ...state,
+      featureCatalog: datasetCatalog,
+      featureCatalogLoading: false,
+    })
+  ),
+  on(MetadataViewActions.loadFeatureCatalogFailure, (state, { error }) => ({
+    ...state,
+    featureCatalogError: error,
+    featureCatalogLoading: false,
+  }))
 )
 
 export function reducer(

package/src/libs/feature/record/src/lib/state/mdview.selectors.ts

@@ -64,3 +64,15 @@ export const getAddUserFeedbacksLoading = createSelector(
   getMdViewState,
   (state: MetadataViewState) => state.addUserFeedbackLoading
 )
+
+/*
+  Feature Catalog Selectors
+*/
+export const getFeatureCatalog = createSelector(
+  getMdViewState,
+  (state: MetadataViewState) => state.featureCatalog
+)
+export const getFeatureCatalogIsLoading = createSelector(
+  getMdViewState,
+  (state: MetadataViewState) => state.featureCatalogLoading
+)

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html

@@ -5,8 +5,11 @@
   (itemSelected)="handleItemSelection($event)"
   (inputSubmitted)="handleInputSubmission($event)"
   (inputCleared)="handleInputCleared()"
+  (isSearchActive)="handleSearchActive($event)"
   [value]="searchInputValue$ | async"
   [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
   [allowSubmit]="true"
+  [forceTrackPosition]="forceTrackPosition"
+  [enterButton]="enterButton"
 ></gn-ui-autocomplete>

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts

@@ -28,8 +28,11 @@ import { SearchFilters } from '../../../../../../libs/api/metadata-converter/src
 export class FuzzySearchComponent implements OnInit {
   @ViewChild(AutocompleteComponent) autocomplete: AutocompleteComponent
   @Input() autoFocus = false
+  @Input() forceTrackPosition = false
+  @Input() enterButton = false
   @Output() itemSelected = new EventEmitter<CatalogRecord>()
   @Output() inputSubmitted = new EventEmitter<string>()
+  @Output() isSearchActive = new EventEmitter<boolean>()
   searchInputValue$: Observable<{ title: string }>
 
   displayWithFn: (record: CatalogRecord) => string = (record) => record.title
@@ -84,4 +87,8 @@ export class FuzzySearchComponent implements OnInit {
       this.searchService.updateFilters({ any: '' })
     }
   }
+
+  handleSearchActive(event: boolean) {
+    this.isSearchActive.emit(event)
+  }
 }

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.html

@@ -32,7 +32,9 @@
         mat-row
         *matRowDef="let row; columns: properties"
         (click)="selected.emit(row)"
-        [class.active]="row.id === activeId"
+        [class.active]="
+          activeId !== undefined && activeId !== null && row.id === activeId
+        "
       ></tr>
     </table>
     <gn-ui-loading-mask

package/src/libs/ui/elements/src/lib/application-banner/application-banner.component.html

@@ -1,12 +1,12 @@
 <div
   *ngIf="message && bannerOpen"
-  class="absolute top-0 text-wrap bg-white mt-4 max-h-24"
+  class="absolute left-0 right-0 text-wrap bg-white mt-4 max-h-24"
 >
   <div
     class="flex flex-row py-2.5 px-5 gap-5 justify-start border max-h-20"
     [ngClass]="classList"
   >
-    <div [ngClass]="{ 'pt-5': message.length > 200 }">
+    <div [ngClass]="message.length > 200 ? 'pt-5' : 'pt-1'">
       <ng-icon [name]="icon"></ng-icon>
     </div>
     <div class="flex flex-col justify-start gap-2.5">

package/src/libs/ui/elements/src/lib/image-input/image-input.component.html

@@ -11,10 +11,13 @@
       [value]="altText ?? ''"
       (valueChange)="handleAltTextChange($event)"
       extraClass="gn-ui-editor-textarea"
-      [disabled]="true"
     ></gn-ui-text-input>
     <div class="flex flex-row gap-2 mt-2">
-      <gn-ui-button type="gray" (buttonClick)="handleDelete()">
+      <gn-ui-button
+        type="gray"
+        (buttonClick)="handleDelete()"
+        data-cy="delete-image"
+      >
         <ng-icon class="me-1 text-primary" name="iconoirBin"></ng-icon>
         {{ 'input.image.delete' | translate }}
       </gn-ui-button>
@@ -38,20 +41,17 @@
       [ngClass]="{
         'border-primary-lighter bg-primary-white': dragFilesOver,
         'border-gray-300': !dragFilesOver,
-        'cursor-pointer hover:border-gray-500':
-          !isUploadInProgress && !uploadError && !showUrlInput && !disabled,
+        'cursor-pointer hover:border-gray-500': !getIsActionBlocked(),
         'cursor-not-allowed': disabled,
       }"
-      [attr.tabindex]="
-        isUploadInProgress || uploadError || showUrlInput || disabled ? null : 0
-      "
+      [attr.tabindex]="getIsActionBlocked() ? null : 0"
       (keydown.enter)="fileInput.click()"
       (dragFilesOver)="handleDragFilesOver($event)"
       (dropFiles)="handleDropFiles($event)"
     >
       <div
         class="w-14 h-14 rounded-md bg-gray-50 grid"
-        *ngIf="!isUploadInProgress && !uploadError"
+        *ngIf="!isUploadInProgress && !imageFileError"
       >
         <ng-icon
           *ngIf="!dragFilesOver"
@@ -66,7 +66,7 @@
       </div>
 
       <div
-        *ngIf="isUploadInProgress && !uploadError"
+        *ngIf="isUploadInProgress && !imageFileError"
         class="w-14 h-14 grid items-center justify-center relative"
       >
         <div class="text-gray-100 absolute">
@@ -88,19 +88,23 @@
         <span class="text-sm text-main font-bold">{{ uploadProgress }}%</span>
       </div>
 
-      <div class="w-14 h-14 rounded-md bg-gray-50 grid" *ngIf="uploadError">
+      <div class="w-14 h-14 rounded-md bg-gray-50 grid" *ngIf="imageFileError">
         <ng-icon
           name="iconoirMediaImageXmark"
           class="place-self-center text-rose-500"
+          data-cy="imgErrorIcon"
         ></ng-icon>
       </div>
 
       <div class="flex flex-col items-center gap-1">
-        <p class="font-medium">{{ getPrimaryText() | translate }}</p>
+        <p class="font-medium" data-cy="imgInputMsgPrimary">
+          {{ getPrimaryText() | translate }}
+        </p>
         <p
           class="text-sm"
+          data-cy="imgInputMsgSecondary"
           [class]="
-            isUploadInProgress || uploadError
+            isUploadInProgress
               ? 'font-bold text-blue-500 cursor-pointer'
               : 'font-medium text-gray-500'
           "
@@ -111,17 +115,17 @@
       </div>
       <input
         #fileInput
+        accept="image/*"
         type="file"
         class="hidden"
         (change)="handleFileInput($event)"
-        [disabled]="
-          showUrlInput || isUploadInProgress || uploadError || disabled
-        "
+        [disabled]="isUploadInProgress || disabled"
       />
     </label>
 
     <div *ngIf="!showUrlInput" class="flex-none mt-2">
       <gn-ui-button
+        data-cy="imgUrlBtn"
         (buttonClick)="displayUrlInput()"
         type="gray"
         [disabled]="disabled"
@@ -135,6 +139,7 @@
     <gn-ui-url-input
       *ngIf="showUrlInput"
       class="mt-3.5"
+      data-cy="imgUrlInput"
       (uploadClick)="downloadUrl($event)"
       [disabled]="isUploadInProgress || disabled"
     >

package/src/libs/ui/elements/src/lib/image-input/image-input.component.ts

@@ -66,9 +66,22 @@ import { ImageOverlayPreviewComponent } from '../image-overlay-preview/image-ove
   ],
 })
 export class ImageInputComponent {
-  @Input() maxSizeMB: number
+  private _altText?: string
+
   @Input() previewUrl?: string
-  @Input() altText?: string
+  @Input()
+  get altText(): string | undefined {
+    return this._altText
+  }
+  set altText(value: string | undefined) {
+    if (value !== 'KO' && this._altText === 'KO') {
+      //This is a dataset rollback after upload error
+      this.resetErrors()
+    }
+    this._altText = value
+  }
+
+  @Input() maxSizeMB: number
   @Input() uploadProgress?: number
   @Input() uploadError?: boolean
   @Input() disabled?: boolean = false
@@ -80,11 +93,9 @@ export class ImageInputComponent {
 
   dragFilesOver = false
   showUrlInput = false
-  downloadError = false
+  imageFileError = this.uploadError
   showAltTextInput = false
-
-  lastUploadType?: 'file' | 'url'
-  lastUploadContent?: string | File
+  pendingAltText: string
 
   get isUploadInProgress() {
     return this.uploadProgress !== undefined
@@ -95,8 +106,12 @@ export class ImageInputComponent {
     private cd: ChangeDetectorRef
   ) {}
 
+  getIsActionBlocked() {
+    return this.isUploadInProgress || this.disabled
+  }
+
   getPrimaryText() {
-    if (this.uploadError) {
+    if (this.imageFileError) {
       return marker('input.image.uploadErrorLabel')
     }
     if (this.uploadProgress) {
@@ -106,8 +121,8 @@ export class ImageInputComponent {
   }
 
   getSecondaryText() {
-    if (this.uploadError) {
-      return marker('input.image.uploadErrorRetry')
+    if (this.imageFileError) {
+      return '\u00A0' // (only to keep same spacing, next step is to handle "Retry")
     }
     if (this.uploadProgress) {
       return marker('input.image.uploadProgressCancel')
@@ -123,19 +138,26 @@ export class ImageInputComponent {
   }
 
   handleDropFiles(files: File[]) {
-    if (!this.showUrlInput) {
-      const validFiles = this.filterTypeImage(files)
-      if (validFiles.length > 0) {
-        this.resizeAndEmit(validFiles[0])
-      }
+    this.resetErrors()
+    const validFiles = this.filterTypeImage(files)
+    if (validFiles.length > 0) {
+      this.showUrlInput = false
+      this.resizeAndEmit(validFiles[0])
+    } else {
+      this.imageFileError = true
+      this.handleAltTextChange('KO')
     }
   }
 
   handleFileInput(event: Event) {
+    this.resetErrors()
     const inputFiles = Array.from((event.target as HTMLInputElement).files)
     const validFiles = this.filterTypeImage(inputFiles)
     if (validFiles.length > 0) {
       this.resizeAndEmit(validFiles[0])
+    } else {
+      this.imageFileError = true
+      this.handleAltTextChange('KO')
     }
   }
 
@@ -145,9 +167,8 @@ export class ImageInputComponent {
   }
 
   async downloadUrl(url: string) {
-    this.downloadError = false
+    this.resetErrors()
     const name = url.split('/').pop()
-
     try {
       const response = await firstValueFrom(
         this.http.head(url, { observe: 'response' })
@@ -164,47 +185,41 @@ export class ImageInputComponent {
             this.fileChange.emit(file)
           },
           error: () => {
-            this.downloadError = true
+            this.imageFileError = true
+            this.handleAltTextChange('KO')
             this.cd.markForCheck()
             this.urlChange.emit(url)
           },
         })
       }
     } catch {
-      this.downloadError = true
+      this.imageFileError = true
+      this.handleAltTextChange('KO')
       this.cd.markForCheck()
       return
     }
   }
 
   handleSecondaryTextClick(event: Event) {
-    if (this.uploadError) {
-      this.handleRetry()
-    } else if (this.uploadProgress) {
-      this.handleCancel()
+    if (this.uploadProgress) {
+      this.handleCancelUpload()
       event.preventDefault()
     }
   }
 
-  handleCancel() {
+  handleCancelUpload() {
     this.uploadCancel.emit()
   }
 
-  handleRetry() {
-    switch (this.lastUploadType) {
-      case 'file':
-        this.fileChange.emit(this.lastUploadContent as File)
-        break
-      case 'url':
-        this.urlChange.emit(this.lastUploadContent as string)
-        break
-    }
-  }
-
   handleDelete() {
     this.delete.emit()
   }
 
+  resetErrors() {
+    this.imageFileError = false
+    this.uploadError = false
+  }
+
   toggleAltTextInput() {
     this.showAltTextInput = !this.showAltTextInput
   }
@@ -212,7 +227,6 @@ export class ImageInputComponent {
   handleAltTextChange(altText: string) {
     this.altTextChange.emit(altText)
   }
-
   private filterTypeImage(files: File[]) {
     return files.filter((file) => {
       return file.type.startsWith('image/')

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { marked } from 'marked'
 
 @Component({
@@ -13,6 +13,6 @@ export class MarkdownParserComponent {
   @Input() whitoutStyles?: boolean
 
   get parsedMarkdown() {
-    return marked.parse(this.textContent)
+    return marked.parse(this.textContent ?? '')
   }
 }

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

@@ -1,13 +1,25 @@
 <div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
-  <gn-ui-popover [content]="popoverItems" theme="light-border">
-    <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
-      <gn-ui-progress-bar
-        tabindex="0"
-        [value]="qualityScore"
-        type="primary"
-      ></gn-ui-progress-bar>
-    </div>
-  </gn-ui-popover>
+  <div
+    class="flex items-center"
+    [class]="smaller ? 'leading-[8px] min-w-[120px]' : 'min-w-[200px]'"
+  >
+    <gn-ui-progress-bar
+      tabindex="0"
+      [value]="qualityScore"
+      [type]="'light'"
+      class="flex-grow"
+    ></gn-ui-progress-bar>
+    <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>
 </div>
 <ng-template #popoverItems>
   <div class="p-2 py-4">

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

@@ -16,6 +16,9 @@ import {
 } from '../../../../../../libs/ui/widgets/src'
 import { CommonModule } from '@angular/common'
 import { TranslateModule } from '@ngx-translate/core'
+import { NgIcon } from '@ng-icons/core'
+import { matInfoOutline } from '@ng-icons/material-icons/outline'
+import { provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 
 @Component({
   selector: 'gn-ui-metadata-quality',
@@ -29,6 +32,16 @@ import { TranslateModule } from '@ngx-translate/core'
     ProgressBarComponent,
     MetadataQualityItemComponent,
     TranslateModule,
+    NgIcon,
+  ],
+  providers: [
+    provideIcons({
+      matInfoOutline,
+    }),
+    provideNgIconsConfig({
+      size: '1.2em',
+      strokeWidth: '1.5px',
+    }),
   ],
 })
 export class MetadataQualityComponent implements OnChanges {

package/src/libs/ui/inputs/src/index.ts

@@ -3,7 +3,6 @@ export * from './lib/badge/badge.component'
 export * from './lib/button/button.component'
 export * from './lib/check-toggle/check-toggle.component'
 export * from './lib/checkbox/checkbox.component'
-export * from './lib/chips-input/chips-input.component'
 export * from './lib/copy-text-button/copy-text-button.component'
 export * from './lib/date-picker/date-picker.component'
 export * from './lib/date-range-dropdown/date-range-dropdown.component'

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -5,31 +5,48 @@
   >
     <ng-icon name="iconoirSearch" class="text-primary search"></ng-icon>
   </div>
-  <input
-    #searchInput
-    type="text"
-    class="gn-ui-text-input"
-    [ngClass]="{
-      'px-[--icon-width]': !allowSubmit,
-    }"
-    [placeholder]="placeholder"
-    [formControl]="control"
-    [matAutocomplete]="auto"
-    (keyup.enter)="handleEnter(searchInput.value)"
-  />
+  <div class="flex flex-row">
+    <input
+      #searchInput
+      type="text"
+      class="gn-ui-text-input"
+      (input)="handleInput($event)"
+      [placeholder]="placeholder"
+      [formControl]="control"
+      [matAutocomplete]="auto"
+      (keyup.enter)="handleEnter(searchInput.value)"
+      [ngClass]="{
+        'text-primary': searchActive && enterButton,
+        'text-gray-900': !searchActive,
+        'px-[--icon-width]': !allowSubmit,
+      }"
+    />
+    <gn-ui-button
+      type="gray"
+      *ngIf="searchInput.value && displayEnterBtn"
+      extraClass="w-32 h-8 !opacity-100"
+      [ngStyle]="{ left: enterBtnPosition + 'px' }"
+      class="absolute"
+      disabled="true"
+    >
+      <ng-icon
+        name="iconoirLongArrowDownLeft"
+        class="!w-4 text-gray-900 font-bold"
+      ></ng-icon>
+      <span translate class="text-bold text-gray-900 font-bold">
+        Enter to search
+      </span>
+    </gn-ui-button>
+  </div>
   <gn-ui-button
-    type="light"
-    extraClass="border-0 text-primary-lightest hover:text-primary focus:text-primary absolute inset-y-[--icon-padding] {{
-      allowSubmit
-        ? 'right-[calc(var(--icon-width)+var(--icon-padding))]'
-        : 'right-[--icon-padding]'
-    }}"
+    type="primary"
+    [extraClass]="getExtraClass()"
     data-test="clear-btn"
     *ngIf="searchInput.value"
     aria-label="Clear"
     (buttonClick)="clear()"
   >
-    <ng-icon name="matClose"></ng-icon>
+    <ng-icon class="text-white" name="matClose"></ng-icon>
   </gn-ui-button>
   <gn-ui-button
     type="light"