geonetwork-ui 2.6.0-dev.b1563a5e0 → 2.6.0-dev.c49d02679

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/lib/map-view/map-view.component.html

@@ -1,18 +1,36 @@
 <div class="w-full h-full flex flex-col gap-[13px]">
   <div
-    class="flex py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
+    class="flex flex-col md:flex-row gap-4 py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
   >
-    <div class="grow min-w-0">
+    <gn-ui-dropdown-selector
+      *ngIf="displaySource"
+      class="w-full md:flex-1 md:min-w-0"
+      extraBtnClass="font-sans font-bold"
+      [title]="'map.select.layer' | translate"
+      [choices]="dropdownChoices$ | async"
+      (selectValue)="selectLinkToDisplay($event)"
+    ></gn-ui-dropdown-selector>
+
+    <ng-container *ngIf="(styleLinks$ | async)?.length > 0; else styleDisabled">
       <gn-ui-dropdown-selector
-        [ngClass]="{ hidden: !displaySource }"
-        class="w-full"
+        class="w-full md:flex-1 md:min-w-0"
         extraBtnClass="font-sans font-bold"
-        [title]="'map.select.layer' | translate"
-        [choices]="dropdownChoices$ | async"
-        (selectValue)="selectLinkToDisplay($event)"
+        [title]="'map.select.style' | translate"
+        [choices]="styleDropdownChoices$ | async"
+        (selectValue)="selectStyleToDisplay($event)"
       ></gn-ui-dropdown-selector>
-    </div>
-    <div class="self-end">
+    </ng-container>
+    <ng-template #styleDisabled>
+      <gn-ui-dropdown-selector
+        class="w-full md:flex-1 md:min-w-0 text-gray-400"
+        extraBtnClass="font-sans font-bold text-gray-400"
+        [title]="'map.select.style' | translate"
+        [choices]="styleDropdownChoices$ | async"
+        [disabled]="true"
+      ></gn-ui-dropdown-selector>
+    </ng-template>
+
+    <div class="self-end md:ml-2">
       <gn-ui-external-viewer-button
         extraClass="w-[44px] h-[44px]"
         [link]="selectedLink$ | async"

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

@@ -29,7 +29,10 @@ import {
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state/mdview.facade'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetOnlineResource,
+  DatasetServiceDistribution,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
   createViewFromLayer,
   MapContext,
@@ -62,6 +65,7 @@ import { FetchError } from '../../../../../../libs/util/data-fetcher/src'
 marker('map.dropdown.placeholder')
 marker('wfs.feature.limit')
 marker('dataset.error.restrictedAccess')
+marker('map.select.style')
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -96,32 +100,32 @@ export class MapViewComponent implements AfterViewInit {
   selection: Feature
   showLegend = true
   legendExists = false
+  loading = false
+  error = null
+
+  selectLinkToDisplay(i: number) {
+    this.selectedLinkIndex$.next(i)
+  }
+
+  selectStyleToDisplay(i: number) {
+    this.selectedStyleIndex$.next(i)
+  }
 
   toggleLegend() {
     this.showLegend = !this.showLegend
   }
-
-  onLegendStatusChange(status: boolean) {
-    this.legendExists = status
+  onLegendStatusChange(v: boolean) {
+    this.legendExists = v
   }
 
   compatibleMapLinks$ = combineLatest([
     this.mdViewFacade.mapApiLinks$,
     this.mdViewFacade.geoDataLinksWithGeometry$,
   ]).pipe(
-    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]
-    }),
+    map(([mapApiLinks, geoDataLinksWithGeometry]) => [
+      ...mapApiLinks,
+      ...geoDataLinksWithGeometry,
+    ]),
     shareReplay(1)
   )
 
@@ -135,15 +139,73 @@ export class MapViewComponent implements AfterViewInit {
         : [{ label: 'map.dropdown.placeholder', value: 0 }]
     )
   )
-  selectedLinkIndex$ = new BehaviorSubject(0)
 
-  loading = false
-  error = null
+  private selectedLinkIndex$ = new BehaviorSubject(0)
+  private selectedStyleIndex$ = new BehaviorSubject(0)
 
-  selectedLink$ = combineLatest([
+  selectedSourceLink$ = combineLatest([
     this.compatibleMapLinks$,
     this.selectedLinkIndex$.pipe(distinctUntilChanged()),
-  ]).pipe(map(([links, index]) => links[index]))
+  ]).pipe(
+    map(([links, idx]) => links[idx]),
+    shareReplay(1)
+  )
+
+  styleLinks$ = this.selectedSourceLink$.pipe(
+    switchMap((src) => {
+      if (
+        src &&
+        src.type === 'service' &&
+        src.accessServiceProtocol === 'tms'
+      ) {
+        return from(
+          this.dataService.getGeodataLinksFromTms(
+            src as DatasetServiceDistribution,
+            false
+          )
+        ).pipe(
+          // We need to check for maplibre-style links because when a TMS service has no styles,
+          // getGeodataLinksFromTms returns the original TMS link, which isn't a maplibre-style link
+          map(
+            (links) =>
+              links?.filter(
+                (link) =>
+                  link.type === 'service' &&
+                  link.accessServiceProtocol === 'maplibre-style'
+              ) || []
+          )
+        )
+      }
+      return of([])
+    }),
+    tap(() => this.selectedStyleIndex$.next(0)),
+    shareReplay(1)
+  )
+
+  styleDropdownChoices$ = this.styleLinks$.pipe(
+    map((links) =>
+      links.length
+        ? links.map((link, index) => ({
+            label: getLinkLabel(link),
+            value: index,
+          }))
+        : [
+            {
+              label: '\u00A0\u00A0\u00A0\u00A0',
+              value: 0,
+            },
+          ]
+    )
+  )
+
+  selectedLink$ = combineLatest([
+    this.selectedSourceLink$,
+    this.styleLinks$,
+    this.selectedStyleIndex$.pipe(distinctUntilChanged()),
+  ]).pipe(
+    map(([src, styles, styleIdx]) => (styles.length ? styles[styleIdx] : src)),
+    shareReplay(1)
+  )
 
   currentLayers$ = combineLatest([this.selectedLink$, this.excludeWfs$]).pipe(
     switchMap(([link, excludeWfs]) => {
@@ -296,11 +358,6 @@ export class MapViewComponent implements AfterViewInit {
     }
     return throwError(() => 'protocol not supported')
   }
-
-  selectLinkToDisplay(link: number) {
-    this.selectedLinkIndex$.next(link)
-  }
-
   handleError(error: FetchError | Error | string) {
     if (error instanceof FetchError) {
       this.error = this.translateService.instant(

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

@@ -20,9 +20,10 @@ export const FIELDS_SUMMARY: FieldName[] = [
   'userSavedCount',
   'cl_topic',
   'cl_maintenanceAndUpdateFrequency',
-  'MD_LegalConstraintsUseLimitationObject',
+  'MD_LegalConstraints*Object',
   'qualityScore',
   'allKeywords',
+  'recordLink',
 ]
 
 export const FIELDS_BRIEF: FieldName[] = [

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

@@ -1,5 +1,5 @@
 <gn-ui-autocomplete
-  [placeholder]="'search.field.any.placeholder' | translate"
+  [placeholder]="placeholder ?? ('search.field.any.placeholder' | translate)"
   [displayWithFn]="displayWithFn"
   [action]="autoCompleteAction"
   (itemSelected)="handleItemSelection($event)"

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

@@ -30,6 +30,7 @@ export class FuzzySearchComponent implements OnInit {
   @Input() autoFocus = false
   @Input() forceTrackPosition = false
   @Input() enterButton = false
+  @Input() placeholder?: string
   @Output() itemSelected = new EventEmitter<CatalogRecord>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() isSearchActive = new EventEmitter<boolean>()

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.html

@@ -7,6 +7,7 @@
   [canDelete]="canDelete"
   [canDuplicate]="canDuplicate"
   [isDuplicating]="isDuplicating"
+  [canEdit]="canEdit"
   (recordClick)="handleRecordClick($event)"
   (duplicateRecord)="handleDuplicateRecord($event)"
   (deleteRecord)="handleDeleteRecord($event)"

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

@@ -12,7 +12,7 @@ import { SearchService } from '../utils/service/search.service'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
 import { CommonModule } from '@angular/common'
-import { Subscription } from 'rxjs'
+import { Observable, Subscription } from 'rxjs'
 import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
 import { TranslateService } from '@ngx-translate/core'
 
@@ -24,8 +24,6 @@ import { TranslateService } from '@ngx-translate/core'
   imports: [CommonModule, ResultsTableComponent],
 })
 export class ResultsTableContainerComponent implements OnDestroy {
-  @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
-  @Input() canDelete: (record: CatalogRecord) => boolean = () => true
   @Input() isDuplicating: false
 
   @Output() recordClick = new EventEmitter<CatalogRecord>()
@@ -39,6 +37,18 @@ export class ResultsTableContainerComponent implements OnDestroy {
   hasDraft = (record: CatalogRecord): boolean =>
     this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
 
+  canDuplicate = (record: CatalogRecord): boolean => {
+    return this.recordsRepository.canDuplicate(record)
+  }
+
+  canDelete = (record: CatalogRecord): Observable<boolean> => {
+    return this.recordsRepository.canDelete(record)
+  }
+
+  canEdit = (record: CatalogRecord): Observable<boolean> => {
+    return this.recordsRepository.canEditIndexedRecord(record)
+  }
+
   constructor(
     protected searchFacade: SearchFacade,
     private searchService: SearchService,