geonetwork-ui 2.6.0-dev.502fa026d → 2.6.0-dev.531f5a239

package/src/libs/common/fixtures/src/lib/records.fixtures.ts

@@ -3,6 +3,7 @@ import {
   DatasetRecord,
   DatasetSpatialExtent,
   Keyword,
+  ServiceRecord,
 } from '../../../../../libs/common/domain/src/lib/model/record'
 
 export const datasetRecordsFixture: () => CatalogRecord[] = () => [
@@ -176,6 +177,20 @@ As such, **it is not very interesting at all.**`,
               link: '',
               definition: 'Nom de la rue',
               type: 'String (48)',
+              values: [
+                {
+                  code: 'Pomme',
+                  label: 'Les Pommiers',
+                  description: 'Sous les pommiers',
+                },
+                {
+                  code: 'Cotton',
+                  label: 'Rue Cotton',
+                  description: 'Rue Cotton',
+                },
+                { code: "Passage de l'échiquier" },
+                { description: 'Rue du Charlieu' },
+              ],
             },
             {
               code: 'RUE',
@@ -231,7 +246,7 @@ As such, **it is not very interesting at all.**`,
     recordUpdated: new Date('2022-04-15T14:18:19'),
     resourceUpdated: new Date('2022-03-29'),
     title:
-      "Plan local d'urbanisme (PLU) dématérialisé - commune d'Avrigny - approbation du 29/03/2022",
+      "Plan local d'urbanisme (PLU) dématérialisé - commune d'Avrigny - approbation du 29/03/2022 (Ce lot informe du droit à bâtir sur la commune d'Avrigny)",
     abstract: `Plan local d'urbanisme (PLU) dématérialisé - commune d'Avrigny - approbation du 29/03/2022.
 
 Ce lot informe du droit à bâtir sur la commune d'Avrigny.
@@ -811,6 +826,54 @@ export const importDatasetRecordAsXmlFixture = (): string => `
 	</gmd:identificationInfo>
 </gmd:MD_Metadata>`
 
+export const simpleServiceRecordFixture = (): ServiceRecord => ({
+  kind: 'service',
+  status: null,
+  lineage: null,
+  recordUpdated: new Date('2023-03-17T07:38:08.875Z'),
+  recordPublished: null,
+  ownerOrganization: null,
+  licenses: [],
+  legalConstraints: [],
+  securityConstraints: [],
+  otherConstraints: [],
+  contacts: [],
+  contactsForResource: [],
+  keywords: [],
+  topics: [],
+  spatialExtents: [],
+  temporalExtents: [],
+  overviews: [],
+  defaultLanguage: null,
+  otherLanguages: [],
+  title: 'Sites de gestion des déchets miniers - Service de visualisation WMS',
+  onlineResources: [
+    {
+      name: 'Service de visualisation WMS',
+      description:
+        'Adresse de connexion au service de visualisation WMS de la série de couches de données "Sites de gestion des déchets miniers"',
+      type: 'service',
+      url: new URL(
+        'https://geoservices.wallonie.be/arcgis/services/SOL_SOUS_SOL/DECHETS_MINIERS/MapServer/WMSServer?request=GetCapabilities&service=WMS'
+      ),
+      accessServiceProtocol: 'wms',
+      accessRestricted: false,
+    },
+  ],
+  uniqueIdentifier: '00b22798-ec8e-4500-89e8-90eeeda45919',
+  landingPage: new URL(
+    'http://localhost:4200/geonetwork/srv/fre/catalog.search#/metadata/00b22798-ec8e-4500-89e8-90eeeda45919'
+  ),
+  extras: {
+    isPublishedToAll: true,
+    id: '723',
+    isHarvested: true,
+    ownerInfo: 'admin|admin|admin|Administrator',
+    edit: true,
+  },
+  recordCreated: new Date('2023-03-17T07:38:08.875Z'),
+})
+
 export const NATIONAL_KEYWORD = {
   key: 'http://inspire.ec.europa.eu/metadata-codelist/SpatialScope/national',
   label: 'National',

package/src/libs/feature/dataviz/src/lib/chart-view/chart-view.component.html

@@ -18,15 +18,17 @@
       [selected]="xProperty$.value"
       [title]="'chart.dropdown.xProperty' | translate"
     ></gn-ui-dropdown-selector>
-    <gn-ui-dropdown-selector
-      class="basis-1/4"
-      *ngIf="!isCountAggregation"
-      [choices]="yChoices$ | async"
-      (selectValue)="yProperty$.next($event)"
-      [selected]="yProperty$.value"
-      [title]="'chart.dropdown.yProperty' | translate"
-      class="select-y-prop"
-    ></gn-ui-dropdown-selector>
+    <ng-container *ngIf="yChoices$ | async as yChoices">
+      <gn-ui-dropdown-selector
+        class="basis-1/4"
+        *ngIf="!isCountAggregation"
+        [choices]="yChoices"
+        (selectValue)="yProperty$.next($event)"
+        [selected]="yProperty$.value"
+        [title]="'chart.dropdown.yProperty' | translate"
+        class="select-y-prop"
+      ></gn-ui-dropdown-selector>
+    </ng-container>
     <gn-ui-dropdown-selector
       class="basis-1/4"
       [choices]="aggregationChoices"
@@ -43,6 +45,7 @@
       *ngIf="!error"
       [data]="chartData$ | async"
       [type]="chartType$.value"
+      [prettyLabel]="prettyLabel$ | async"
       [labelProperty]="labelProperty"
       [valueProperty]="valueProperty"
     ></gn-ui-chart>

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

@@ -2,9 +2,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  Inject,
   Input,
-  Optional,
   Output,
 } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
@@ -13,6 +11,7 @@ import {
   FetchError,
   FieldAggregation,
   getJsonDataItemsProxy,
+  PropertyInfo,
 } from '../../../../../../libs/util/data-fetcher/src'
 import {
   DropdownChoice,
@@ -30,7 +29,10 @@ import {
 } from 'rxjs/operators'
 import { DataService } from '../service/data.service'
 import { InputChartType } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetFeatureCatalog,
+  DatasetOnlineResource,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { CommonModule } from '@angular/common'
 import { ChartComponent } from '../../../../../../libs/ui/dataviz/src'
@@ -67,9 +69,18 @@ marker('chart.aggregation.count')
   standalone: true,
 })
 export class ChartViewComponent {
+  public featureCatalog$ = new BehaviorSubject<DatasetFeatureCatalog | null>(
+    null
+  )
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    this.featureCatalog$.next(value)
+  }
   @Input() cacheActive = true
   @Input() set link(value: DatasetOnlineResource) {
     this.currentLink$.next(value)
+    if (value) {
+      this.aggregation$.next('sum')
+    }
   }
   private currentLink$ = new BehaviorSubject<DatasetOnlineResource>(null)
 
@@ -137,6 +148,10 @@ export class ChartViewComponent {
     switchMap((link) => {
       this.error = null
       this.loading = true
+      if (link.accessRestricted) {
+        this.handleError('dataset.error.restrictedAccess')
+        return EMPTY
+      }
       return this.dataService.getDataset(link, this.cacheActive).pipe(
         catchError((error) => {
           this.handleError(error)
@@ -146,13 +161,8 @@ export class ChartViewComponent {
     }),
     shareReplay(1)
   )
-  properties$ = this.dataset$.pipe(
-    switchMap((dataset) =>
-      dataset.properties.catch((error) => {
-        this.handleError(error)
-        return []
-      })
-    ),
+  properties$ = combineLatest([this.dataset$, this.featureCatalog$]).pipe(
+    switchMap(([dataset, catalog]) => this.setProperties(dataset, catalog)),
     shareReplay(1)
   )
   yChoices$ = this.properties$.pipe(
@@ -193,6 +203,7 @@ export class ChartViewComponent {
     this.yProperty$.pipe(filter((value) => value !== undefined)),
     this.aggregation$,
   ]).pipe(
+    filter(([_, x, y]) => !!x || !!y),
     switchMap(([dataset, xProp, yProp, aggregation]) => {
       const fieldAgg: FieldAggregation =
         aggregation === 'count' ? ['count'] : [aggregation, yProp]
@@ -213,6 +224,18 @@ export class ChartViewComponent {
     shareReplay(1)
   )
 
+  prettyLabel$ = combineLatest([
+    this.aggregation$,
+    this.properties$,
+    this.yProperty$,
+  ]).pipe(
+    map(([aggregation, properties, yProperty]) => {
+      if (aggregation === 'count') return 'count()'
+      const prop = properties.find((p) => p.name === yProperty)
+      return prop ? `${aggregation}(${prop.label})` : ''
+    })
+  )
+
   get labelProperty() {
     if (!this.xProperty$.value) return ''
     return `distinct(${this.xProperty$.value})`
@@ -231,6 +254,31 @@ export class ChartViewComponent {
     private translateService: TranslateService
   ) {}
 
+  setProperties(
+    dataset: BaseReader,
+    catalog: DatasetFeatureCatalog
+  ): Promise<PropertyInfo[]> {
+    return dataset.properties
+      .then((properties) => {
+        return properties.map((p) => {
+          if (catalog) {
+            const featureAttributes = catalog?.featureTypes[0]?.attributes ?? []
+            const matchingAttribute = featureAttributes.find(
+              (attr) => attr.name === p.label
+            )
+            if (matchingAttribute?.code) {
+              return { ...p, label: matchingAttribute.code }
+            }
+            return p
+          }
+          return p
+        })
+      })
+      .catch((error) => {
+        this.handleError(error)
+        return []
+      })
+  }
   handleError(error: FetchError | Error | string) {
     if (error instanceof FetchError) {
       this.error = this.translateService.instant(

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -6,6 +6,7 @@ import {
   OgcApiRecord,
   WfsEndpoint,
   WfsVersion,
+  TmsEndpoint,
 } from '@camptocamp/ogc-client'
 import {
   BaseReader,
@@ -231,6 +232,42 @@ export class DataService {
       })
   }
 
+  async getGeodataLinksFromTms(
+    tmsLink: DatasetServiceDistribution,
+    keepOriginalLink = false
+  ): Promise<DatasetServiceDistribution[]> {
+    const endpoint = new TmsEndpoint(tmsLink.url.toString())
+    const tileMaps = await endpoint.allTileMaps
+    if (!tileMaps?.length) return null
+
+    // TODO: at some point use the identifierInService field if more that one layers in the TMS service
+    const tileMapInfo = await endpoint.getTileMapInfo(tileMaps[0].href)
+
+    // case 1: no styles; return a plain TMS link
+    if (!tileMapInfo?.metadata?.length) return [tmsLink]
+
+    // case 2: styles present; return each as a separate link
+    const styleLinks = tileMapInfo.metadata
+      .filter((meta) => meta.href)
+      .map((meta) => {
+        const fileName = meta.href.split('/').pop() || ''
+        const linkName =
+          tmsLink.description || ('name' in tmsLink ? tmsLink.name : '')
+        const styleName = fileName.split('.')[0]
+        const name = `${linkName} - ${styleName}`
+        return {
+          type: 'service',
+          url: new URL(meta.href),
+          name,
+          accessServiceProtocol: 'maplibre-style',
+        } as DatasetServiceDistribution
+      })
+    if (keepOriginalLink) {
+      styleLinks.unshift(tmsLink)
+    }
+    return styleLinks
+  }
+
   getDownloadLinksFromEsriRest(
     esriRestLink: DatasetServiceDistribution
   ): DatasetOnlineResource[] {

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

@@ -4,6 +4,7 @@
       *ngIf="tableData$ | async as dataset"
       class="overflow-auto grow"
       [dataset]="dataset"
+      [featureAttributes]="featureAttributes"
       (selected)="onTableSelect($event)"
     ></gn-ui-data-table>
     <gn-ui-loading-mask

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

@@ -6,11 +6,15 @@ import {
   shareReplay,
   startWith,
   switchMap,
+  tap,
 } from 'rxjs/operators'
 import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import { DataService } from '../service/data.service'
 import { DataTableComponent } from '../../../../../../libs/ui/dataviz/src'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetFeatureCatalog,
+  DatasetOnlineResource,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import {
   LoadingMaskComponent,
@@ -33,6 +37,8 @@ import { CommonModule } from '@angular/common'
   standalone: true,
 })
 export class TableViewComponent {
+  featureAttributes = []
+  @Input() featureCatalog: DatasetFeatureCatalog
   @Input() cacheActive = true
   @Input() set link(value: DatasetOnlineResource) {
     this.currentLink$.next(value)
@@ -46,8 +52,13 @@ export class TableViewComponent {
     switchMap((link) => {
       this.error = null
       if (!link) return of(undefined)
+      if (link.accessRestricted) {
+        this.handleError('dataset.error.restrictedAccess')
+        return of([])
+      }
       this.loading = true
       return this.getDatasetReader(link).pipe(
+        tap((dataset: BaseReader) => this.setProperties(dataset)),
         catchError((error) => {
           this.handleError(error)
           return of(undefined)
@@ -92,4 +103,23 @@ export class TableViewComponent {
     }
     this.loading = false
   }
+
+  setProperties(dataset: BaseReader) {
+    dataset.properties.then((properties) => {
+      const updatedProperties = properties.map((p) => {
+        let label = p.name
+        if (this.featureCatalog) {
+          const attributes = this.featureCatalog.featureTypes[0].attributes
+          const matchingAttribute = attributes.find(
+            (attr) => attr.name === p.name
+          )
+          if (matchingAttribute && matchingAttribute.code) {
+            label = matchingAttribute.code
+          }
+        }
+        return { value: p.name, label }
+      })
+      this.featureAttributes = updatedProperties
+    })
+  }
 }

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

@@ -11,3 +11,4 @@ export * from './lib/components/wizard/wizard.component'
 export * from './lib/components/wizard-field/wizard-field.component'
 export * from './lib/components/wizard-summarize/wizard-summarize.component'
 export * from './lib/components/record-form/form-field'
+export * from './lib/components/multilingual-panel/multilingual-panel.component'

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

@@ -0,0 +1,120 @@
+<div
+  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
+>
+  <div class="flex flex-row px-2 justify-between">
+    <span class="text-3xl font-title text-black/80" translate
+      >editor.record.form.multilingual.title</span
+    >
+    <button
+      [title]="'editor.record.form.multilingual.open' | translate"
+      (click)="toggleLanguageSelection()"
+      *ngIf="isMultilingual"
+      data-test="activateSelection"
+    >
+      <ng-icon class="mt-1" name="iconoirSettings"></ng-icon>
+    </button>
+  </div>
+  <div class="flex flex-col gap-2" *ngIf="editTranslations || !isMultilingual">
+    <gn-ui-check-toggle
+      class="p-2"
+      [label]="'editor.record.form.multilingual.enable' | translate"
+      [color]="'primary'"
+      [(value)]="isMultilingual"
+      (toggled)="switchMultilingual($event)"
+    ></gn-ui-check-toggle>
+    <div *ngIf="isMultilingual" class="flex flex-col gap-2">
+      <div class="flex flex-row justify-between border-t border-gray-300 p-3">
+        <span class="mt-2 text-sm text-gray-600" translate
+          >editor.record.form.multilingual.activate</span
+        >
+        <gn-ui-button
+          extraClass="w-16 h-8 font-bold"
+          type="gray"
+          (buttonClick)="validateTranslations()"
+          data-test="validateSelection"
+          >{{ 'editor.record.form.multilingual.validate' | translate }}
+        </gn-ui-button>
+      </div>
+      <ng-container *ngIf="supportedLanguages$ | async as languages">
+        <div
+          class="flex flex-col gap-2 w-full px-2"
+          data-test="langAvailable"
+          *ngFor="let lang of languages"
+        >
+          <gn-ui-button
+            [extraClass]="getExtraClass(lang)"
+            type="gray"
+            (buttonClick)="toggleLanguage(lang)"
+            [disabled]="lang === _record.defaultLanguage"
+            [title]="getToggleTitle(lang)"
+          >
+            <span [class]="getIconClass(lang)"></span>
+            <span class="ml-2">{{ 'language.' + lang | translate }}</span>
+          </gn-ui-button>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+  <div *ngIf="!editTranslations && isMultilingual" class="flex flex-col gap-2">
+    <gn-ui-button
+      *ngFor="let recordLang of sortLanguages(recordLanguages); let i = index"
+      extraClass="flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full"
+      [ngClass]="{
+        'mt-8': isFirstUnsupported(i),
+        '': true,
+      }"
+      (buttonClick)="switchFormLang(recordLang)"
+      type="outline"
+      data-test="langSwitch"
+    >
+      <div class="flex flex-row gap-2 items-center">
+        <ng-icon
+          *ngIf="recordLang === formLanguage"
+          class="text-primary mt-1"
+          name="iconoirCheckCircle"
+        ></ng-icon>
+        <ng-icon
+          *ngIf="recordLang !== formLanguage"
+          class="text-gray-800 mt-1"
+          name="iconoirCircle"
+        ></ng-icon>
+        <span
+          *ngIf="recordLang.length === 2"
+          [class]="getIconClass(recordLang) + 'mt-1'"
+        ></span>
+        <span [ngClass]="recordLang === formLanguage ? 'text-black' : ''">{{
+          isLangSupported(recordLang)
+            ? ('language.' + recordLang | translate)
+            : recordLang.toUpperCase()
+        }}</span>
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <span
+          *ngIf="recordLang === formLanguage"
+          class="text-xs text-base"
+          translate
+          >editor.record.form.multilingual.default</span
+        >
+        <button
+          (click)="
+            openActionMenu(recordLang, template); $event.stopPropagation()
+          "
+          cdkOverlayOrigin
+          #actionMenuButton
+        >
+          <ng-icon class="pb-5" name="matMoreHorizOutline"></ng-icon>
+        </button>
+        <ng-template #template>
+          <gn-ui-action-menu
+            [canDelete]="recordLang !== _record.defaultLanguage"
+            page="record"
+            (delete)="confirmDeleteAction(recordLang)"
+            (closeActionMenu)="closeActionMenu()"
+            (switch)="switchDefaultLang(recordLang)"
+          >
+          </gn-ui-action-menu>
+        </ng-template>
+      </div>
+    </gn-ui-button>
+  </div>
+</div>