geonetwork-ui 2.4.0-dev.344a92f2 → 2.4.0-dev.3b6b95eb

package/src/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts

@@ -1,36 +1,21 @@
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  Inject,
   Input,
   OnDestroy,
   OnInit,
   ViewChild,
 } from '@angular/core'
-import {
-  FEATURE_MAP_OPTIONS,
-  FeatureInfoService,
-  MapContextLayerTypeEnum,
-  MapContextModel,
-  MapManagerService,
-  MapOptionsModel,
-} from '../../../../../../libs/feature/map/src'
 import {
   TableComponent,
   TableItemId,
   TableItemModel,
 } from '../../../../../../libs/ui/dataviz/src'
-import type { FeatureCollection } from 'geojson'
-import Map from 'ol/Map'
-import View from 'ol/View'
-import Feature from 'ol/Feature'
-import { Geometry } from 'ol/geom'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import Style from 'ol/style/Style'
+import type { Feature, FeatureCollection } from 'geojson'
 import { Subscription } from 'rxjs'
+import { MapContext } from '@geospatial-sdk/core'
+import { MapContainerComponent } from '../../../../../../libs/ui/map/src'
 
 @Component({
   selector: 'gn-ui-geo-table-view',
@@ -38,50 +23,26 @@ import { Subscription } from 'rxjs'
   styleUrls: ['./geo-table-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class GeoTableViewComponent implements OnInit, OnDestroy {
   @Input() data: FeatureCollection = { type: 'FeatureCollection', features: [] }
-  @ViewChild(TableComponent) uiTable: TableComponent
-
-  private map: Map
-  private view: View
-  private vectorLayer: VectorLayer<VectorSource<Feature<Geometry>>>
-  private vectorSource: VectorSource<Feature<Geometry>>
-  private features: Feature<Geometry>[]
+  @ViewChild('table') uiTable: TableComponent
+  @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   tableData: TableItemModel[]
-  mapContext: MapContextModel
+  mapContext: MapContext
   selectionId: TableItemId
-  selection: Feature<Geometry>
+  selection: Feature
   private subscription = new Subscription()
 
-  constructor(
-    private manager: MapManagerService,
-    private featureInfo: FeatureInfoService,
-    private changeRef: ChangeDetectorRef,
-    @Inject(FEATURE_MAP_OPTIONS) private mapOptions: MapOptionsModel
-  ) {}
+  get features() {
+    return this.data.features
+  }
+
+  constructor(private changeRef: ChangeDetectorRef) {}
 
   ngOnInit(): void {
     this.tableData = this.geojsonToTableData(this.data)
     this.mapContext = this.initMapContext()
-    this.featureInfo.handleFeatureInfo()
-    this.subscription.add(
-      this.featureInfo.features$.subscribe((features) => {
-        this.onMapFeatureSelect(features)
-      })
-    )
-  }
-
-  ngAfterViewInit(): void {
-    const map = (this.map = this.manager.map)
-    this.view = map.getView()
-    this.vectorLayer = this.manager.map.getLayers().item(1) as VectorLayer<
-      VectorSource<Feature<Geometry>>
-    >
-    this.vectorLayer.setStyle(this.styleFn.bind(this))
-    this.vectorSource = this.vectorLayer.getSource()
-    this.features = this.vectorSource.getFeatures()
-    this.view.fit(this.vectorSource.getExtent())
   }
 
   onTableSelect(tableEntry: TableItemModel) {
@@ -93,12 +54,13 @@ export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  onMapFeatureSelect(features: Feature<Geometry>[]): void {
+  onMapFeatureSelect(features: Feature[]): void {
     this.selection = features?.length > 0 && features[0]
     if (this.selection) {
-      this.selectionId = this.selection.getId()
+      // FIXME: show styling for selection
+      this.selectionId = this.selection.id
       this.changeRef.detectChanges()
-      this.vectorLayer.changed()
+      // this.vectorLayer.changed()
       this.uiTable.scrollToItem(this.selectionId)
     }
   }
@@ -110,44 +72,42 @@ export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
     }))
   }
 
-  private initMapContext(): MapContextModel {
+  private initMapContext(): MapContext {
     return {
       layers: [
         {
-          type: MapContextLayerTypeEnum.XYZ,
+          type: 'xyz',
           url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         },
         {
-          type: MapContextLayerTypeEnum.GEOJSON,
+          type: 'geojson',
           data: this.data,
         },
       ],
+      view: {
+        center: [0, 0],
+        zoom: 2,
+      },
     }
   }
 
-  private animateToFeature(feature: Feature<Geometry>): void {
-    this.view.fit(feature.getGeometry().getExtent(), {
-      duration: 1000,
-      maxZoom: 11,
-    })
+  private animateToFeature(feature: Feature): void {
+    this.mapContext = {
+      ...this.mapContext,
+      view: {
+        geometry: feature.geometry,
+        maxZoom: 13,
+      },
+    }
+    // FIXME: animate the view
+    // this.view.fit(feature.getGeometry().getExtent(), {
+    //   duration: 1000,
+    //   maxZoom: 11,
+    // })
   }
 
   private getFeatureFromId(id: TableItemId) {
-    return this.features.find((feature) => feature.getId() === id)
-  }
-
-  private styleFn(
-    feature: Feature<Geometry>,
-    resolution: number
-  ): void | Style | Style[] {
-    if (
-      this.selectionId !== undefined &&
-      this.selectionId === feature.getId()
-    ) {
-      return this.mapOptions.hlStyle(feature, resolution)
-    } else {
-      return this.mapOptions.defaultStyle(feature, resolution)
-    }
+    return this.features.find((feature) => feature.id === id)
   }
 
   ngOnDestroy(): void {

package/src/libs/feature/editor/src/index.ts

@@ -5,6 +5,7 @@ export * from './lib/+state/editor.reducer'
 export * from './lib/+state/editor.actions'
 export * from './lib/feature-editor.module'
 export * from './lib/services/editor.service'
+export * from './lib/components/import-record/import-record.component'
 export * from './lib/components/record-form/record-form.component'
 export * from './lib/components/wizard/wizard.component'
 export * from './lib/components/wizard-field/wizard-field.component'

package/src/libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -9,6 +9,7 @@ import {
   selectEditorConfig,
   selectRecord,
   selectRecordAlreadySavedOnce,
+  selectRecordSource,
 } from './editor.selectors'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
@@ -24,12 +25,13 @@ export class EditorEffects {
       ofType(EditorActions.saveRecord),
       withLatestFrom(
         this.store.select(selectRecord),
+        this.store.select(selectRecordSource),
         this.store.select(selectEditorConfig),
         this.store.select(selectRecordAlreadySavedOnce)
       ),
-      switchMap(([, record, fieldsConfig, alreadySavedOnce]) =>
+      switchMap(([, record, recordSource, fieldsConfig, alreadySavedOnce]) =>
         this.editorService
-          .saveRecord(record, fieldsConfig, !alreadySavedOnce)
+          .saveRecord(record, recordSource, fieldsConfig, !alreadySavedOnce)
           .pipe(
             switchMap(([record, recordSource]) =>
               of(
@@ -64,8 +66,13 @@ export class EditorEffects {
     this.actions$.pipe(
       ofType(EditorActions.updateRecordField),
       debounceTime(1000),
-      withLatestFrom(this.store.select(selectRecord)),
-      switchMap(([, record]) => this.editorService.saveRecordAsDraft(record)),
+      withLatestFrom(
+        this.store.select(selectRecord),
+        this.store.select(selectRecordSource)
+      ),
+      switchMap(([, record, recordSource]) =>
+        this.editorService.saveRecordAsDraft(record, recordSource)
+      ),
       map(() => EditorActions.draftSaveSuccess())
     )
   )

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html

@@ -1,7 +1,7 @@
 <div class="gn-ui-card">
   <gn-ui-thumbnail
     class="w-[56px] h-[56px] rounded-[4px] overflow-hidden shrink-0"
-    [thumbnailUrl]="contact.organization.logoUrl?.href"
+    [thumbnailUrl]="contact.organization?.logoUrl?.href"
     [fit]="'contain'"
   ></gn-ui-thumbnail>
   <div class="flex flex-col w-full overflow-hidden leading-snug">

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

@@ -0,0 +1,47 @@
+<ng-container [ngSwitch]="sectionDisplayed">
+  <ng-container *ngSwitchCase="'mainMenu'">
+    <div
+      data-test="importMenuMainSection"
+      class="mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl"
+    >
+      <ul class="flex flex-col gap-2 w-full">
+        <li *ngFor="let menuItem of importMenuItems">
+          <gn-ui-button
+            [attr.data-test]="menuItem.dataTest"
+            type="light"
+            extraClass="flex flex-row items-center gap-2 w-full justify-start"
+            (buttonClick)="menuItem.action()"
+            [disabled]="menuItem.disabled"
+            [title]="
+              (menuItem.disabled ? 'editor.temporary.disabled' : '') | translate
+            "
+            ><mat-icon class="material-symbols-outlined">
+              {{ menuItem.icon }} </mat-icon
+            ><span>{{ menuItem.label }}</span></gn-ui-button
+          >
+        </li>
+      </ul>
+    </div>
+  </ng-container>
+  <ng-container *ngSwitchCase="'importExternalFile'">
+    <div
+      data-test="importMenuImportExternalFileSection"
+      class="p-6 flex flex-col gap-2 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl"
+    >
+      <div class="flex flex-row items-center gap-2">
+        <gn-ui-button
+          data-test="importMenuImportExternalFileSectionBackButton"
+          type="light"
+          (buttonClick)="displayMainMenu()"
+        >
+          <mat-icon class="material-symbols-outlined">arrow_back</mat-icon>
+        </gn-ui-button>
+        <span class="font-bold"> {{ externalImportBackLabel }}</span>
+      </div>
+      <gn-ui-url-input
+        (valueChange)="importRecord($event)"
+        [disabled]="isRecordImportInProgress"
+      ></gn-ui-url-input>
+    </div>
+  </ng-container>
+</ng-container>

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

@@ -0,0 +1,132 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Output,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent, UrlInputComponent } from '../../../../../../../libs/ui/inputs/src'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { NotificationsService } from '../../../../../../../libs/feature/notifications/src'
+import { RecordsRepositoryInterface } from '../../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { Router } from '@angular/router'
+
+interface ImportMenuItems {
+  label: string
+  icon: string
+  action: () => any
+  dataTest: string
+  disabled?: boolean
+}
+
+type ImportMenuPage = 'mainMenu' | 'importExternalFile'
+
+@Component({
+  selector: 'gn-ui-import-record',
+  templateUrl: './import-record.component.html',
+  styleUrls: ['./import-record.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    ButtonComponent,
+    ThumbnailComponent,
+    UrlInputComponent,
+    TranslateModule,
+  ],
+})
+export class ImportRecordComponent {
+  @Output() closeImportMenu = new EventEmitter<void>()
+
+  importMenuItems: ImportMenuItems[] = [
+    {
+      label: this.translateService.instant('dashboard.importRecord.useModel'),
+      icon: 'highlight',
+      action: () => null,
+      dataTest: 'useAModelButton',
+      disabled: true,
+    },
+    {
+      label: this.translateService.instant(
+        'dashboard.importRecord.importExternal'
+      ),
+      icon: 'cloud_download',
+      action: this.displayImportExternal.bind(this),
+      dataTest: 'importFromUrlButton',
+    },
+  ]
+
+  isRecordImportInProgress = false
+
+  sectionDisplayed: ImportMenuPage = 'mainMenu'
+
+  externalImportBackLabel = this.translateService.instant(
+    'dashboard.importRecord.importExternalLabel'
+  )
+
+  constructor(
+    private router: Router,
+    private translateService: TranslateService,
+    private cdr: ChangeDetectorRef,
+    private notificationsService: NotificationsService,
+    private recordsRepository: RecordsRepositoryInterface
+  ) {}
+
+  displayMainMenu() {
+    this.sectionDisplayed = 'mainMenu'
+    this.cdr.markForCheck()
+  }
+
+  displayImportExternal() {
+    this.sectionDisplayed = 'importExternalFile'
+    this.cdr.markForCheck()
+  }
+
+  importRecord(url: string) {
+    this.isRecordImportInProgress = true
+
+    this.recordsRepository.duplicateExternalRecord(url).subscribe({
+      next: (recordTempId) => {
+        if (recordTempId) {
+          this.notificationsService.showNotification(
+            {
+              type: 'success',
+              title: this.translateService.instant(
+                'editor.record.importFromExternalFile.success.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.importFromExternalFile.success.body'
+              )}`,
+            },
+            2500
+          )
+
+          this.router
+            .navigate(['/edit', recordTempId])
+            .catch((err) => console.error(err))
+        }
+        this.closeImportMenu.next()
+      },
+      error: (error) => {
+        this.notificationsService.showNotification(
+          {
+            type: 'error',
+            title: this.translateService.instant(
+              'editor.record.importFromExternalFile.failure.title'
+            ),
+            text: `${this.translateService.instant(
+              'editor.record.importFromExternalFile.failure.body'
+            )} ${error.message ?? ''}`,
+          },
+          2500
+        )
+        this.isRecordImportInProgress = false
+        this.cdr.markForCheck()
+      },
+    })
+  }
+}

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.html

@@ -0,0 +1,31 @@
+<div class="flex flex-row justify-between">
+  <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+    editor.record.form.field.onlineResource.edit.protocol
+  </h3>
+  <span
+    *ngIf="protocolHint"
+    class="material-symbols-outlined m-2 gn-ui-icon-small"
+    [matTooltip]="protocolHint"
+    matTooltipPosition="above"
+  >
+    help
+  </span>
+</div>
+<div class="flex flex-row items-center gap-[16px] h-[48px]">
+  <mat-radio-group
+    aria-labelledby="example-radio-group-label"
+    class="flex flex-row gap-[8px]"
+    [(ngModel)]="service.accessServiceProtocol"
+  >
+    <mat-radio-button
+      *ngFor="let protocolOption of protocolOptions"
+      [value]="protocolOption.value"
+    >
+      {{ protocolOption.label | translate }}
+    </mat-radio-button>
+  </mat-radio-group>
+</div>
+<gn-ui-text-input
+  [(value)]="service.identifierInService"
+  data-cy="identifier-in-service"
+></gn-ui-text-input>

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.ts

@@ -0,0 +1,82 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { MatIconModule } from '@angular/material/icon'
+import { MatRadioModule } from '@angular/material/radio'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  DatasetServiceDistribution,
+  ServiceProtocol,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { TextInputComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-online-service-resource-input',
+  templateUrl: './online-service-resource-input.component.html',
+  styleUrls: ['./online-service-resource-input.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatTooltipModule,
+    MatRadioModule,
+    FormsModule,
+    TextInputComponent,
+    TranslateModule,
+  ],
+})
+export class OnlineServiceResourceInputComponent implements OnChanges {
+  @Input() service: Omit<DatasetServiceDistribution, 'url'>
+  @Input() protocolHint?: string
+
+  selectedProtocol: ServiceProtocol
+
+  protocolOptions: {
+    label: string
+    value: ServiceProtocol
+  }[] = [
+    {
+      label: 'OGC API',
+      value: 'ogcFeatures',
+    },
+    {
+      label: 'WFS',
+      value: 'wfs',
+    },
+    {
+      label: 'WMS',
+      value: 'wms',
+    },
+    {
+      label: 'WMTS',
+      value: 'wmts',
+    },
+    {
+      label: 'WPS',
+      value: 'wps',
+    },
+    {
+      label: 'ESRI REST',
+      value: 'esriRest',
+    },
+    {
+      label: marker('editor.record.onlineResource.protocol.other'),
+      value: 'other',
+    },
+  ]
+
+  ngOnChanges() {
+    this.selectedProtocol =
+      this.protocolOptions.find(
+        (option) => option.value === this.service.accessServiceProtocol
+      )?.value ?? 'other'
+  }
+}

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

@@ -0,0 +1,40 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="'Choose a contact'"
+    [action]="autoCompleteAction"
+    (itemSelected)="addContact($event)"
+    [displayWithFn]="displayWithFn"
+    [minCharacterCount]="1"
+    [clearOnSelection]="true"
+  >
+  </gn-ui-autocomplete>
+
+  <ng-container *ngIf="contacts.length > 0; else noContact">
+    <ng-container *ngIf="contacts.length === 1">
+      <ng-container *ngFor="let contact of contacts; let index = index">
+        <gn-ui-contact-card
+          [contact]="contact"
+        ></gn-ui-contact-card> </ng-container
+    ></ng-container>
+
+    <ng-container *ngIf="contacts.length > 1">
+      <gn-ui-sortable-list
+        [items]="contacts"
+        (itemsOrderChange)="handleContactsChanged($event)"
+        [elementTemplate]="contactTemplate"
+      ></gn-ui-sortable-list>
+      <ng-template #contactTemplate let-contact>
+        <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+      </ng-template>
+    </ng-container>
+  </ng-container>
+</div>
+
+<ng-template #noContact>
+  <div
+    class="p-4 border border-primary bg-primary-lightest rounded-lg"
+    translate
+  >
+    editor.record.form.field.contacts.noContact
+  </div>
+</ng-template>