geonetwork-ui 2.6.0-dev.c4b99cdef → 2.6.0-dev.c5432f39f

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.ts

@@ -1,15 +1,325 @@
-import { Component } from '@angular/core'
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  QueryList,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { CheckToggleComponent } from '../../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { ButtonComponent, CheckToggleComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  iconoirCheckCircle,
+  iconoirCircle,
+  iconoirSettings,
+} from '@ng-icons/iconoir'
+import { matMoreHorizOutline } from '@ng-icons/material-icons/outline'
+import { EditorFacade } from '../../+state/editor.facade'
+import { ConfirmationDialogComponent } from '../../../../../../../libs/ui/elements/src'
+import { MatDialog } from '@angular/material/dialog'
+import { RecordsRepositoryInterface } from '../../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { map, Subscription } from 'rxjs'
+import { Overlay, OverlayRef } from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
+import { ActionMenuComponent } from '../../../../../../../libs/ui/search/src'
+
+const extraFlagMap: { [key: string]: string } = {
+  ar: 'arab',
+  en: 'gb',
+  ko: 'kr',
+  cs: 'cz',
+  zh: 'cn',
+  ca: 'es-ct',
+  rm: 'ch',
+  da: 'dk',
+  sv: 'se',
+  cy: 'gb-wls',
+  hy: 'am',
+  ka: 'ge',
+  uk: 'ua',
+}
 
 @Component({
   selector: 'gn-ui-multilingual-panel',
   standalone: true,
-  imports: [CommonModule, CheckToggleComponent, TranslateModule],
+  imports: [
+    CommonModule,
+    CheckToggleComponent,
+    TranslateModule,
+    ButtonComponent,
+    NgIconComponent,
+    ActionMenuComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSettings,
+      matMoreHorizOutline,
+      iconoirCheckCircle,
+      iconoirCircle,
+    }),
+    provideNgIconsConfig({
+      size: '1.25em',
+    }),
+  ],
   templateUrl: './multilingual-panel.component.html',
   styleUrl: './multilingual-panel.component.css',
 })
-export class MultilingualPanelComponent {
-  translationsEnabled = false
+export class MultilingualPanelComponent implements OnDestroy {
+  isMultilingual: boolean
+  _record: CatalogRecord
+  editTranslations: boolean
+  selectedLanguages = []
+  recordLanguages = []
+  formLanguage = ''
+  @Input() set record(value: CatalogRecord) {
+    this._record = value
+    this.isMultilingual = value.otherLanguages.length > 0
+    this.editTranslations = false
+    this.recordLanguages = [...value.otherLanguages, value.defaultLanguage]
+    this.selectedLanguages = this.recordLanguages
+    this.formLanguage = value.defaultLanguage
+  }
+  @ViewChildren('actionMenuButton', { read: ElementRef })
+  actionMenuButtons!: QueryList<ElementRef>
+  private overlayRef!: OverlayRef
+
+  isActionMenuOpen = false
+  subscription = new Subscription()
+
+  supportedLanguages$ = this.recordsRepository
+    .getApplicationLanguages()
+    .pipe(map((languages) => this.sortLanguages(languages)))
+
+  constructor(
+    public facade: EditorFacade,
+    public dialog: MatDialog,
+    private translateService: TranslateService,
+    private recordsRepository: RecordsRepositoryInterface,
+    private overlay: Overlay,
+    private viewContainerRef: ViewContainerRef,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
+
+  sortLanguages(languages: string[]) {
+    return languages
+      .map((lang) => {
+        const label = this.translateService.instant('language.' + lang)
+        const isTranslated = label !== 'language.' + lang
+
+        return {
+          lang,
+          label,
+          isTranslated,
+        }
+      })
+      .sort((a, b) => {
+        if (a.isTranslated && !b.isTranslated) return -1
+        if (!a.isTranslated && b.isTranslated) return 1
+
+        return a.label.localeCompare(b.label)
+      })
+      .map((item) => item.lang)
+  }
+
+  toggleLanguageSelection() {
+    this.editTranslations = !this.editTranslations
+  }
+
+  getIconClass(lang: string) {
+    return extraFlagMap[lang]
+      ? `fi fi-${extraFlagMap[lang]} w-4 h-3`
+      : `fi fi-${lang} w-4 h-3`
+  }
+
+  switchMultilingual() {
+    if (this.isMultilingual && this.selectedLanguages.length > 1) {
+      this.confirmDeleteAction()
+    } else {
+      this.isMultilingual = true
+      this.editTranslations = true
+    }
+  }
+
+  getExtraClass(lang: string) {
+    const baseClass = 'h-[34px] w-full font-bold justify-start hover:bg-white'
+    if (this.selectedLanguages.includes(lang)) {
+      return `${baseClass} bg-white border border-black`
+    }
+    return baseClass
+  }
+
+  toggleLanguage(lang: string) {
+    if (this.selectedLanguages.includes(lang)) {
+      this.removeSelectedLanguage(lang)
+    } else {
+      this.selectedLanguages.push(lang)
+    }
+  }
+
+  removeSelectedLanguage(lang: string) {
+    this.selectedLanguages = this.selectedLanguages.filter(
+      (language) => language !== lang
+    )
+  }
+
+  validateTranslations() {
+    const equalLength =
+      this.selectedLanguages.length === this.recordLanguages.length
+    if (
+      this.selectedLanguages.length < this.recordLanguages.length ||
+      (equalLength && this.selectedLanguages !== this.recordLanguages)
+    ) {
+      this.confirmDeleteAction(this.selectedLanguages)
+    } else {
+      this.updateTranslations()
+    }
+  }
+
+  updateTranslations() {
+    this.facade.updateRecordField(
+      'otherLanguages',
+      this.selectedLanguages.filter((lang) => lang !== this.formLanguage)
+    )
+    this.recordLanguages = this.selectedLanguages
+    this.editTranslations = false
+  }
+
+  switchFormLang(lang) {
+    // TO IMPLEMENT FURTHER
+  }
+
+  switchDefaultLang(lang: string) {
+    this.formLanguage = lang
+    this.facade.updateRecordField('defaultLanguage', lang)
+    this.facade.updateRecordField(
+      'otherLanguages',
+      this.selectedLanguages.filter((lang) => lang !== this.formLanguage)
+    )
+    this.closeActionMenu()
+  }
+
+  confirmDeleteAction(lang?: string[] | string) {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        title: this.translateService.instant(
+          'editor.record.multilingual.confirmation.title'
+        ),
+        message: this.translateService.instant(
+          'editor.record.multilingual.confirmation.message'
+        ),
+        confirmText: this.translateService.instant(
+          'editor.record.multilingual.confirmation.confirmText'
+        ),
+        cancelText: this.translateService.instant(
+          'editor.record.multilingual.confirmation.cancelText'
+        ),
+      },
+      restoreFocus: true,
+    })
+    this.subscription.add(
+      dialogRef.afterClosed().subscribe((confirmed) => {
+        if (confirmed) {
+          if (lang) {
+            if (!Array.isArray(lang)) {
+              this.removeSelectedLanguage(lang)
+              this.closeActionMenu()
+            }
+            this.updateTranslations()
+          } else {
+            this.facade.updateRecordField('otherLanguages', [])
+            this.isMultilingual = false
+            this.selectedLanguages = []
+          }
+        } else {
+          this.isMultilingual = true
+          this.selectedLanguages = this.recordLanguages
+        }
+        this.editTranslations = false
+      })
+    )
+  }
+
+  isFirstUnsupported(index: number): boolean {
+    const langs = this.sortLanguages(this.recordLanguages)
+    return (
+      langs[index].length === 3 &&
+      langs.slice(0, index).every((lang) => lang.length !== 3)
+    )
+  }
+
+  isLangSupported(lang: string) {
+    return lang.length === 2
+  }
+
+  getToggleTitle(lang: string) {
+    if (lang === this._record.defaultLanguage) {
+      return this.translateService.instant(
+        'editor.record.form.multilingual.forbidden'
+      )
+    }
+    return ''
+  }
+
+  openActionMenu(item: string, template) {
+    this.isActionMenuOpen = true
+    const index = this.sortLanguages(this.selectedLanguages).indexOf(item)
+    const buttonElement = this.actionMenuButtons.toArray()[index]
+
+    const positionStrategy = this.overlay
+      .position()
+      .flexibleConnectedTo(buttonElement)
+      .withFlexibleDimensions(true)
+      .withPush(true)
+      .withPositions([
+        {
+          originX: 'end',
+          originY: 'bottom',
+          overlayX: 'end',
+          overlayY: 'top',
+        },
+        {
+          originX: 'end',
+          originY: 'top',
+          overlayX: 'end',
+          overlayY: 'bottom',
+        },
+      ])
+
+    this.overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      positionStrategy: positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+    })
+
+    const portal = new TemplatePortal(template, this.viewContainerRef)
+
+    this.overlayRef.attach(portal)
+    this.subscription.add(
+      this.overlayRef.backdropClick().subscribe(() => {
+        this.closeActionMenu()
+      })
+    )
+  }
+
+  closeActionMenu() {
+    if (this.overlayRef) {
+      this.isActionMenuOpen = false
+      this.overlayRef.dispose()
+      this.cdr.markForCheck()
+    }
+  }
 }

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

@@ -5,7 +5,6 @@ export * from './lib/data-view/data-view.component'
 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/gpf-api-dl/gpf-api-dl.component'
+export * from './lib/map-view/map-view.component'
 export * from './lib/record-meta/record-meta.component'
-export * from './lib/external-viewer-button/external-viewer-button.component'

package/src/libs/feature/record/src/lib/data-view/data-view.component.html

@@ -27,12 +27,14 @@
         *ngIf="mode === 'table'"
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
+        [featureCatalog]="mdViewFacade.featureCatalog$ | async"
       ></gn-ui-table-view>
       <gn-ui-chart-view
         *ngIf="mode === 'chart'"
         (chartConfig$)="setChartConfig($event)"
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
+        [featureCatalog]="mdViewFacade.featureCatalog$ | async"
       ></gn-ui-chart-view>
     </div>
   </ng-template>

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -55,7 +55,10 @@
         >
           <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
         </gn-ui-button>
-        <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
+        <gn-ui-feature-detail
+          [featureCatalog]="mdViewFacade.featureCatalog$ | async"
+          [feature]="selection"
+        ></gn-ui-feature-detail>
       </div>
 
       <div

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -39,8 +39,8 @@ import {
 import {
   FeatureDetailComponent,
   MapContainerComponent,
-  prioritizePageScroll,
   MapLegendComponent,
+  prioritizePageScroll,
 } from '../../../../../../libs/ui/map/src'
 import { Feature } from 'geojson'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
@@ -109,9 +109,20 @@ export class MapViewComponent implements AfterViewInit {
     this.mdViewFacade.mapApiLinks$,
     this.mdViewFacade.geoDataLinksWithGeometry$,
   ]).pipe(
-    map(([mapApiLinks, geoDataLinksWithGeometry]) => {
-      return [...mapApiLinks, ...geoDataLinksWithGeometry]
-    })
+    switchMap(async ([mapApiLinks, geoDataLinksWithGeometry]) => {
+      // looking for TMS links to process
+      let processedMapApiLinks = await Promise.all(
+        mapApiLinks.map((link) => {
+          if (link.type === 'service' && link.accessServiceProtocol === 'tms') {
+            return this.dataService.getGeodataLinksFromTms(link)
+          }
+          return link
+        })
+      )
+      processedMapApiLinks = processedMapApiLinks.flat()
+      return [...processedMapApiLinks, ...geoDataLinksWithGeometry]
+    }),
+    shareReplay(1)
   )
 
   dropdownChoices$ = this.compatibleMapLinks$.pipe(
@@ -239,6 +250,26 @@ export class MapViewComponent implements AfterViewInit {
         type: 'wms',
         name: link.name,
       })
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'tms'
+    ) {
+      // FIXME: here we're assuming that the TMS serves vector tiles only; should be checked with ogc-client first
+      return of({
+        url: link.url.toString().replace(/\/?$/, '/{z}/{x}/{y}.pbf'),
+        type: 'xyz',
+        tileFormat: 'application/vnd.mapbox-vector-tile',
+        name: link.name,
+      })
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'maplibre-style'
+    ) {
+      return of({
+        type: 'maplibre-style',
+        name: link.name,
+        styleUrl: link.url.toString(),
+      })
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'wmts'

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

@@ -54,6 +54,16 @@ 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[] }>()
+)
+
 /*
   ChartConfig actions
  */

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

@@ -68,6 +68,28 @@ export class MdViewEffects {
     )
   )
 
+  loadSources$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(MdViewActions.loadFullMetadataSuccess),
+      switchMap(({ full }) => this.recordsRepository.getSources(full)),
+      map((sources) => {
+        return MdViewActions.setSources({ sources })
+      }),
+      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 })))
+    )
+  )
+
   /*
     UserFeedback effects
   */

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

@@ -6,6 +6,7 @@ import {
   filter,
   map,
   mergeMap,
+  shareReplay,
   switchMap,
   toArray,
 } from 'rxjs/operators'
@@ -15,13 +16,11 @@ import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/sh
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   CatalogRecord,
-  DatasetServiceDistribution,
-  ServiceEndpoint,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
 import { OgcApiRecord } from '@camptocamp/ogc-client'
-import { from, of } from 'rxjs'
+import { from, of, Observable } from 'rxjs'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
 
 @Injectable()
@@ -77,24 +76,24 @@ export class MdViewFacade {
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))
 
+  sources$ = this.store.pipe(select(MdViewSelectors.getSources))
+
+  sourceOf$ = this.store.pipe(select(MdViewSelectors.getSourceOf))
+
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 
   allLinks$ = this.metadata$.pipe(
-    map((record) => ('onlineResources' in record ? record.onlineResources : []))
+    map((record) =>
+      'onlineResources' in record ? record.onlineResources : []
+    ),
+    shareReplay(1)
   )
 
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
-      links
-        .filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
-        // Put links to IGN Géoplateforme first
-        .sort((dd1, dd2) => {
-          return (dd2 as DatasetServiceDistribution | ServiceEndpoint)
-            .accessServiceProtocol === 'GPFDL'
-            ? 1
-            : undefined // do not change the sorting otherwise
-        })
-    )
+      links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
+    ),
+    shareReplay(1)
   )
 
   mapApiLinks$ = this.allLinks$.pipe(
@@ -102,7 +101,8 @@ export class MdViewFacade {
       links.filter((link) =>
         this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
       )
-    )
+    ),
+    shareReplay(1)
   )
 
   downloadLinks$ = this.allLinks$.pipe(
@@ -216,4 +216,11 @@ export class MdViewFacade {
   loadUserFeedbacks(datasetUuid: string) {
     this.store.dispatch(MdViewActions.loadUserFeedbacks({ datasetUuid }))
   }
+
+  /**
+   * loadFeatureCatalog
+   */
+  loadFeatureCatalog(metadata: CatalogRecord) {
+    this.store.dispatch(MdViewActions.loadFeatureCatalog({ metadata }))
+  }
 }

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

@@ -14,6 +14,8 @@ export interface MetadataViewState {
   error: { notFound?: boolean; otherError?: string } | null
   metadata?: Partial<CatalogRecord>
   related?: CatalogRecord[]
+  sources?: CatalogRecord[]
+  sourceOf?: CatalogRecord[]
   userFeedbacks?: UserFeedback[]
   allUserFeedbacksLoading: boolean
   addUserFeedbackLoading: boolean
@@ -75,6 +77,16 @@ const metadataViewReducer = createReducer(
     related,
   })),
 
+  on(MetadataViewActions.setSources, (state, { sources }) => ({
+    ...state,
+    sources,
+  })),
+
+  on(MetadataViewActions.setSourceOf, (state, { sourceOf }) => ({
+    ...state,
+    sourceOf,
+  })),
+
   /*
     ChartConfig reducers
   */

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

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

package/src/libs/feature/search/src/lib/constants.ts

@@ -12,6 +12,7 @@ export const FIELDS_SUMMARY: FieldName[] = [
   'overview',
   'logo',
   'codelist_status_text',
+  'link',
   'linkProtocol',
   'contactForResource*.organisation*',
   'contact*.organisation*',

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.ts

@@ -55,8 +55,10 @@ export class ResultsListContainerComponent implements OnInit {
     @Optional()
     @Inject(RECORD_DATASET_URL_TOKEN)
     private recordDatasetUrlTemplate: string,
+    @Optional()
     @Inject(RECORD_SERVICE_URL_TOKEN)
     private recordServiceUrlTemplate: string,
+    @Optional()
     @Inject(RECORD_REUSE_URL_TOKEN)
     private recordReuseUrlTemplate: string
   ) {}

package/src/libs/ui/dataviz/src/lib/chart/chart.component.ts

@@ -57,6 +57,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
     this.dataRaw = value
   }
   @Input() labelProperty: string
+  @Input() prettyLabel: string
   @Input() valueProperty: string
   @Input() secondaryValueProperty: string
   @Input() type: InputChartType = 'bar'
@@ -95,7 +96,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
       labels: this.getDataProxy(this.labelProperty) as string[],
       datasets: [
         {
-          label: this.valueProperty,
+          label: this.prettyLabel,
           data,
         },
       ],

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

@@ -8,21 +8,24 @@
       [matSortDisableClear]="true"
       *ngrxLet="properties$ as properties"
     >
-      <ng-container *ngFor="let prop of properties" [matColumnDef]="prop">
+      <ng-container
+        *ngFor="let attr of _featureAttributes"
+        [matColumnDef]="attr.value"
+      >
         <th
           mat-header-cell
           *matHeaderCellDef
           mat-sort-header
           class="text-sm text-black bg-white"
         >
-          {{ prop }}
+          {{ attr.label }}
         </th>
         <td
           mat-cell
           *matCellDef="let element"
           class="whitespace-nowrap pr-1 truncate"
         >
-          {{ element[prop] }}
+          {{ element[attr.value] }}
         </td>
       </ng-container>
 

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

@@ -61,13 +61,14 @@ export interface TableItemModel {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
+  _featureAttributes = []
+  @Input() set featureAttributes(value: { value: string; label: string }[]) {
+    this._featureAttributes = value
+    this.properties$.next(value.map((attr) => attr.value))
+  }
   @Input() set dataset(value: BaseReader) {
-    this.properties$.next(null)
     this.dataset_ = value
     this.dataset_.load()
-    this.dataset_.properties.then((properties) =>
-      this.properties$.next(properties.map((p) => p.name))
-    )
     this.dataset_.info.then((info) => (this.count = info.itemsCount))
   }
   @Input() activeId: TableItemId