geonetwork-ui 2.10.0 → 2.11.0-dev.68d9eaa3a

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-associated-records/form-field-associated-records.component.ts

@@ -0,0 +1,94 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import {
+  AssociatedRecord,
+  AssociationType,
+  associationTypeValues,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CheckToggleComponent,
+  DropdownChoice,
+  DropdownSelectorComponent,
+  TextInputComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/layout/src'
+import { TranslatePipe } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-form-field-associated-records',
+  templateUrl: './form-field-associated-records.component.html',
+  styleUrls: ['./form-field-associated-records.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CheckToggleComponent,
+    TextInputComponent,
+    DropdownSelectorComponent,
+    FormFieldWrapperComponent,
+    TranslatePipe,
+  ],
+})
+export class FormFieldAssociatedRecordsComponent {
+  @Input() value?: AssociatedRecord[]
+  @Output() valueChange = new EventEmitter<AssociatedRecord[]>()
+
+  private get list() {
+    return this.value ?? []
+  }
+  private get first() {
+    return this.list[0]
+  }
+  private get rest() {
+    return this.list.slice(1)
+  }
+
+  get hasParentLink() {
+    return this.list.length > 0
+  }
+  get uniqueIdentifier() {
+    return this.first?.uniqueIdentifier ?? ''
+  }
+  get selectedType() {
+    return this.first?.associationType
+  }
+  get choices(): DropdownChoice[] {
+    return associationTypeValues.map((value) => ({
+      value,
+      label: `domain.record.associationType.${value}`,
+    }))
+  }
+
+  onToggle(checked: boolean) {
+    this.valueChange.emit(
+      checked
+        ? [
+            {
+              uniqueIdentifier: '',
+              associationType: associationTypeValues[0],
+            },
+            ...this.rest,
+          ]
+        : this.rest
+    )
+  }
+
+  onUniqueIdentifierChange(uniqueIdentifier: string) {
+    this.valueChange.emit(
+      uniqueIdentifier
+        ? [{ ...this.first, uniqueIdentifier }, ...this.rest]
+        : this.rest
+    )
+  }
+
+  onTypeChange(associationType: DropdownChoice['value']) {
+    this.valueChange.emit([
+      { ...this.first, associationType: associationType as AssociationType },
+      ...this.rest,
+    ])
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.html

@@ -1,17 +1,21 @@
-<div class="flex gap-2 mb-2">
-  @for (addOption of addOptions$ | async; track addOption) {
-    <gn-ui-button type="gray" (buttonClick)="onAdd(addOption.eventName)">
-      <ng-icon name="iconoirPlus" class="text-primary"></ng-icon> &nbsp;{{
-        addOption.buttonLabel
-      }}</gn-ui-button
-    >
+<div class="flex flex-col gap-2">
+  <div class="flex gap-2">
+    @for (addOption of addOptions$ | async; track addOption) {
+      <gn-ui-button type="gray" (buttonClick)="onAdd(addOption.eventName)">
+        <ng-icon name="iconoirPlus" class="text-primary"></ng-icon> &nbsp;{{
+          addOption.buttonLabel
+        }}</gn-ui-button
+      >
+    }
+  </div>
+  @if (extents.length) {
+    <gn-ui-sortable-list
+      [items]="extents"
+      (itemsOrderChange)="onItemsOrderChange($event)"
+      [elementTemplate]="template"
+    ></gn-ui-sortable-list>
   }
 </div>
-<gn-ui-sortable-list
-  [items]="extents"
-  (itemsOrderChange)="onItemsOrderChange($event)"
-  [elementTemplate]="template"
-></gn-ui-sortable-list>
 <ng-template #template let-extent let-index="index">
   @if (extent.end === undefined) {
     <div class="border rounded-lg px-4 pb-4">

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html

@@ -98,6 +98,12 @@
         [recordKind]="recordKind"
       ></gn-ui-form-field-update-frequency>
     </ng-container>
+    <ng-container *ngSwitchCase="'associatedRecords'">
+      <gn-ui-form-field-associated-records
+        [value]="valueAsAssociatedRecords"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-associated-records>
+    </ng-container>
     <ng-container *ngSwitchCase="'temporalExtents'">
       <gn-ui-form-field-temporal-extents
         [value]="valueAsTemporalExtents"

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import {
+  AssociatedRecord,
   CatalogRecordKeys,
   Constraint,
   DatasetTemporalExtent,
@@ -39,6 +40,7 @@ import {
   FormFieldComponentName,
   FormFieldConfig,
 } from '../../../models'
+import { FormFieldAssociatedRecordsComponent } from './form-field-associated-records/form-field-associated-records.component'
 import { FormFieldContactsForResourceComponent } from './form-field-contacts-for-resource/form-field-contacts-for-resource.component'
 import { FormFieldContactsComponent } from './form-field-contacts/form-field-contacts.component'
 import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
@@ -70,6 +72,7 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldLicenseComponent,
     FormFieldDateComponent,
     FormFieldUpdateFrequencyComponent,
+    FormFieldAssociatedRecordsComponent,
     FormFieldTemporalExtentsComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
@@ -140,6 +143,9 @@ export class FormFieldComponent {
   get valueAsUpdateFrequency() {
     return this.value as UpdateFrequency
   }
+  get valueAsAssociatedRecords() {
+    return this.value as Array<AssociatedRecord>
+  }
   get valueAsTemporalExtents() {
     return this.value as Array<DatasetTemporalExtent>
   }

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -134,6 +134,11 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
               },
               hidden: '${record.kind == "service"}',
             },
+            {
+              model: 'associatedRecords',
+              formFieldConfig: {},
+              hidden: '${record.kind == "service"}',
+            },
           ],
         },
 

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

@@ -3,6 +3,7 @@ import { createAction, props } from '@ngrx/store'
 import {
   CatalogRecord,
   DatasetFeatureCatalog,
+  LinkedRecord,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -54,14 +55,9 @@ export const setRelated = createAction(
   props<{ related: CatalogRecord[] }>()
 )
 
-export const setSources = createAction(
-  '[Metadata view] Set sources',
-  props<{ sources: CatalogRecord[] }>()
-)
-
-export const setSourceOf = createAction(
-  '[Metadata view] Set has sources',
-  props<{ sourceOf: CatalogRecord[] }>()
+export const setLinkedRecords = createAction(
+  '[Metadata view] Set associated records',
+  props<{ linkedRecords: LinkedRecord[] }>()
 )
 
 /*

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

@@ -70,25 +70,16 @@ export class MdViewEffects {
     )
   )
 
-  loadSources$ = createEffect(() =>
+  loadLinkedRecords$ = createEffect(() =>
     this.actions$.pipe(
       ofType(MdViewActions.loadFullMetadataSuccess),
-      switchMap(({ full }) => this.recordsRepository.getSources(full)),
-      map((sources) => {
-        return MdViewActions.setSources({ sources })
+      switchMap(({ full }) => this.recordsRepository.getLinkedRecords(full)),
+      map((linkedRecords) => {
+        return MdViewActions.setLinkedRecords({ linkedRecords })
       }),
-      catchError(() => of(MdViewActions.setSources({ sources: null })))
-    )
-  )
-
-  loadSourceOf$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(MdViewActions.loadFullMetadataSuccess),
-      switchMap(({ full }) => this.recordsRepository.getSourceOf(full)),
-      map((sourceOf) => {
-        return MdViewActions.setSourceOf({ sourceOf })
-      }),
-      catchError(() => of(MdViewActions.setSourceOf({ sourceOf: null })))
+      catchError(() =>
+        of(MdViewActions.setLinkedRecords({ linkedRecords: null }))
+      )
     )
   )
 

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

@@ -74,9 +74,7 @@ export class MdViewFacade {
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))
 
-  sources$ = this.store.pipe(select(MdViewSelectors.getSources))
-
-  sourceOf$ = this.store.pipe(select(MdViewSelectors.getSourceOf))
+  linkedRecords$ = this.store.pipe(select(MdViewSelectors.getLinkedRecords))
 
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 

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

@@ -4,6 +4,7 @@ import { DatavizChartConfigModel } from '../../../../../../libs/common/domain/sr
 import {
   CatalogRecord,
   DatasetFeatureCatalog,
+  LinkedRecord,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -14,8 +15,7 @@ export interface MetadataViewState {
   error: { notFound?: boolean; otherError?: string } | null
   metadata?: Partial<CatalogRecord>
   related?: CatalogRecord[]
-  sources?: CatalogRecord[]
-  sourceOf?: CatalogRecord[]
+  linkedRecords?: LinkedRecord[]
   userFeedbacks?: UserFeedback[]
   allUserFeedbacksLoading: boolean
   addUserFeedbackLoading: boolean
@@ -77,14 +77,9 @@ const metadataViewReducer = createReducer(
     related,
   })),
 
-  on(MetadataViewActions.setSources, (state, { sources }) => ({
+  on(MetadataViewActions.setLinkedRecords, (state, { linkedRecords }) => ({
     ...state,
-    sources,
-  })),
-
-  on(MetadataViewActions.setSourceOf, (state, { sourceOf }) => ({
-    ...state,
-    sourceOf,
+    linkedRecords,
   })),
 
   /*

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

@@ -41,14 +41,9 @@ export const getRelated = createSelector(
   (state: MetadataViewState) => state.related
 )
 
-export const getSources = createSelector(
+export const getLinkedRecords = createSelector(
   getMdViewState,
-  (state: MetadataViewState) => state.sources
-)
-
-export const getSourceOf = createSelector(
-  getMdViewState,
-  (state: MetadataViewState) => state.sourceOf
+  (state: MetadataViewState) => state.linkedRecords
 )
 /*
   Metadata selectors

package/src/libs/feature/router/src/lib/default/router.service.ts

@@ -62,6 +62,6 @@ export class RouterService {
   }
 
   getDefaultSort(): SortByField {
-    return SortByEnum.RESOURCE_DATES
+    return SortByEnum.RESOURCE_DATE
   }
 }

package/src/libs/feature/search/src/lib/sort-by/sort-by.component.ts

@@ -34,7 +34,7 @@ export class SortByComponent implements OnInit {
     },
     {
       label: marker('results.sortBy.dateStamp'),
-      value: SortByEnum.RESOURCE_DATES,
+      value: SortByEnum.RESOURCE_DATE,
     },
     {
       label: marker('results.sortBy.popularity'),

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

@@ -6,33 +6,32 @@
       matSort
       (matSortChange)="setSort($event)"
       [matSortDisableClear]="true"
-      *ngrxLet="properties$ as properties"
     >
-      @for (attr of _featureAttributes; track attr) {
-        <ng-container [matColumnDef]="attr.value">
+      @for (column of columns; track column) {
+        <ng-container [matColumnDef]="column.name">
           <th
             mat-header-cell
             *matHeaderCellDef
             mat-sort-header
             class="text-sm text-black bg-white"
           >
-            {{ attr.label }}
+            {{ column.label }}
           </th>
           <td
             mat-cell
             *matCellDef="let element"
             class="whitespace-nowrap pr-1 truncate"
           >
-            {{ element[attr.value] }}
+            {{ element[column.name] }}
           </td>
         </ng-container>
       }
 
-      <tr mat-header-row *matHeaderRowDef="properties; sticky: true"></tr>
+      <tr mat-header-row *matHeaderRowDef="columnNames; sticky: true"></tr>
       <tr
         [id]="getRowEltId(row.id)"
         mat-row
-        *matRowDef="let row; columns: properties"
+        *matRowDef="let row; columns: columnNames"
         (click)="selected.emit(row)"
         [class.active]="
           activeId !== undefined && activeId !== null && row.id === activeId

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

@@ -6,14 +6,14 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   OnChanges,
   OnInit,
   Output,
   ViewChild,
-  inject,
 } from '@angular/core'
-import { MatSort, MatSortModule } from '@angular/material/sort'
+import { MatSort, MatSortModule, Sort } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
 import {
   TranslateDirective,
@@ -29,12 +29,11 @@ import {
 } from '@angular/material/paginator'
 import { CustomMatPaginatorIntl } from './custom.mat.paginator.intl'
 import { CommonModule } from '@angular/common'
-import { BehaviorSubject, filter, firstValueFrom } from 'rxjs'
+import { BehaviorSubject } from 'rxjs'
 import {
   LoadingMaskComponent,
   PopupAlertComponent,
 } from '../../../../../../libs/ui/widgets/src'
-import { LetDirective } from '@ngrx/component'
 
 const rowIdPrefix = 'table-item-'
 
@@ -46,6 +45,11 @@ export interface TableItemModel {
   [key: string]: TableItemType
 }
 
+interface TableColumn {
+  name: string
+  label: string
+}
+
 @Component({
   standalone: true,
   imports: [
@@ -56,7 +60,6 @@ export interface TableItemModel {
     CommonModule,
     LoadingMaskComponent,
     PopupAlertComponent,
-    LetDirective,
     TranslatePipe,
     TranslateDirective,
   ],
@@ -71,15 +74,21 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
   private cdr = inject(ChangeDetectorRef)
   private translateService = inject(TranslateService)
 
-  _featureAttributes = []
+  columnsFromFeatureCatalog: TableColumn[] = null
   @Input() set featureAttributes(value: { value: string; label: string }[]) {
-    this._featureAttributes = value
-    this.properties$.next(value.map((attr) => attr.value))
+    this.columnsFromFeatureCatalog = value.map((attrs) => ({
+      name: attrs.value,
+      label: attrs.label,
+    }))
   }
+  columnsFromDataset: TableColumn[] = []
   @Input() set dataset(value: BaseReader) {
     this.dataset_ = value
     this.dataset_.load()
-    this.dataset_.info.then((info) => (this.count = info.itemsCount))
+    this.dataset_.info.then((info) => {
+      this.count = info.itemsCount
+      this.cdr.detectChanges()
+    })
   }
   @Input() activeId: TableItemId
   @Output() selected = new EventEmitter<any>()
@@ -88,13 +97,19 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
   @ViewChild(MatPaginator) paginator: MatPaginator
 
   dataset_: BaseReader
-  properties$ = new BehaviorSubject<string[]>(null)
   dataSource: DataTableDataSource
   headerHeight: number
   count: number
   loading$ = new BehaviorSubject<boolean>(false)
   error = null
 
+  get columns() {
+    return this.columnsFromFeatureCatalog ?? this.columnsFromDataset
+  }
+  get columnNames() {
+    return this.columns.map((c) => c.name)
+  }
+
   ngOnInit() {
     this.dataSource = new DataTableDataSource()
   }
@@ -110,7 +125,7 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
     this.setPagination()
   }
 
-  setSort(sort: MatSort) {
+  setSort(sort: Sort) {
     if (!this.dataset_) return
     if (!sort.active) {
       this.dataset_.orderBy()
@@ -132,15 +147,12 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
 
   async readData() {
     this.loading$.next(true)
-    // wait for properties to be read
-    const properties = await firstValueFrom(
-      this.properties$.pipe(filter((p) => !!p))
-    )
-    const propsWithoutGeom = properties.filter(
-      (p) => !p.toLowerCase().startsWith('geom')
-    )
-    this.dataset_.select(...propsWithoutGeom)
     try {
+      // wait for properties to be read
+      if (!this.columnsFromFeatureCatalog) {
+        this.columnsFromDataset = await this.dataset_.properties
+      }
+      this.dataset_.select(...this.columnNames)
       await this.dataSource.showData(this.dataset_.read())
       this.error = null
     } catch (error) {

package/src/libs/ui/dataviz/src/lib/data-table/data-table.fixtures.ts

@@ -25,8 +25,8 @@ export const tableItemsFixture = {
       geometry: null,
       properties: {
         id: '0003',
-        firstName: 'Claude',
-        lastName: 'François',
+        firstName: 'Lady',
+        lastName: 'Gaga',
       },
     },
   ] as DataItem[],

package/src/libs/util/data-fetcher/src/lib/data-fetcher.ts

@@ -7,20 +7,19 @@ import { DataItem, DatasetHeaders, FetchError, SupportedType } from './model'
 import { inferDatasetType } from './utils'
 import { BaseReader } from './readers/base'
 import { GmlReader } from './readers/gml'
-import { WfsVersion } from '@camptocamp/ogc-client'
 import { WfsReader } from './readers/wfs'
 
+interface OpenDatasetOptions {
+  typeHint?: SupportedType
+  wfsFeatureType?: string
+  enableCache?: boolean // by default cache will be used if this is not set to false
+}
+
 export async function openDataset(
   url: string,
-  typeHint?: SupportedType,
-  options?: {
-    namespace?: string
-    wfsVersion?: WfsVersion
-    wfsFeatureType?: string
-  },
-  cacheActive?: boolean
+  options?: OpenDatasetOptions
 ): Promise<BaseReader> {
-  const fileType = await inferDatasetType(url, typeHint)
+  const fileType = await inferDatasetType(url, options?.typeHint)
   let reader:
     | CsvReader
     | JsonReader
@@ -43,19 +42,19 @@ export async function openDataset(
         reader = new ExcelReader(url)
         break
       case 'gml':
-        reader = new GmlReader(url, options.namespace, options.wfsVersion)
+        reader = new GmlReader(url)
         break
       case 'wfs':
-        reader = await WfsReader.createReader(url, options.wfsFeatureType)
+        reader = new WfsReader(url, options?.wfsFeatureType)
         break
     }
-    reader.setCacheActive(cacheActive)
+    reader.enableCache(options?.enableCache ?? true)
     reader.load()
     return reader
-  } catch (e: any) {
-    //WfsReader may already raise a FetchError
+  } catch (e: unknown) {
+    // WfsReader may already raise a FetchError
     if (e instanceof FetchError) throw e
-    else throw FetchError.parsingFailed(e.message)
+    else throw FetchError.parsingFailed((e as Error).message)
   }
 }
 
@@ -63,22 +62,20 @@ export async function openDataset(
  * This fetches the full dataset at the given URL and parses it according to its mime type.
  * All items in the dataset are converted to GeoJSON features, even if they do not bear any spatial geometry.
  * File type can be either inferred (from the HTTP headers or the URL), or hinted using the 2nd argument
- * File type is determined liked so:
+ * File type is determined like so:
  *  1. if a type hint is given, use it
  *  2. otherwise, look for a Content-Type header in the response with a supported mime type
  *  3. if no valid mime type was found, look for an explicit file extension in the url (.csv, .geojson etc.)
  */
 export async function readDataset(
   url: string,
-  typeHint?: SupportedType,
-  options?: any,
-  cacheActive = true
+  options?: OpenDatasetOptions
 ): Promise<DataItem[]> {
-  const reader = await openDataset(url, typeHint, options, cacheActive)
+  const reader = await openDataset(url, options)
   try {
     return await reader.read()
-  } catch (e: any) {
-    throw FetchError.parsingFailed(e.message)
+  } catch (e: unknown) {
+    throw FetchError.parsingFailed((e as Error).message)
   }
 }