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

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts

@@ -9,9 +9,8 @@ import {
 } from '@angular/core'
 import { MatDialog, MatDialogModule } from '@angular/material/dialog'
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
-import { ConfirmationDialogComponent } from '../../../../../../../libs/ui/elements/src'
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 
 type ActionMenuPage = 'mainMenu' | 'deleteMenu' | 'rollbackMenu'
 
@@ -25,12 +24,13 @@ type ActionMenuPage = 'mainMenu' | 'deleteMenu' | 'rollbackMenu'
     ButtonComponent,
     MatMenuModule,
     MatDialogModule,
-    ConfirmationDialogComponent,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
   ],
 })
 export class ActionMenuComponent {
   @Input() canDuplicate = true
+  @Input() isDuplicating: boolean
   @Input() canDelete = true
   @Input() page: 'draft' | 'main' | 'record'
   @Output() duplicate = new EventEmitter<void>()

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

@@ -1,5 +1,6 @@
 <gn-ui-interactive-table
   [items]="records"
+  [canEditItem]="canEdit"
   [isDraftPage]="isDraftPage"
   (itemClick)="handleRecordClick($event)"
 >
@@ -9,15 +10,16 @@
       <ng-icon
         name="iconoirLock"
         class="text-purple"
-        *ngIf="(!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'"
+        *ngIf="(canEdit(item) | async) === false; else selectCheckbox"
       ></ng-icon>
-      <gn-ui-checkbox
-        *ngIf="(item.extras?.edit || isDraftPage) && item.kind === 'dataset'"
-        [checked]="isChecked(item)"
-        (changed)="handleRecordSelectedChange($event, item)"
-        class="-m-2"
-        type="default"
-      ></gn-ui-checkbox>
+      <ng-template #selectCheckbox>
+        <gn-ui-checkbox
+          [checked]="isChecked(item)"
+          (changed)="handleRecordSelectedChange($event, item)"
+          class="-m-2"
+          type="default"
+        ></gn-ui-checkbox>
+      </ng-template>
     </ng-template>
   </gn-ui-interactive-table-column>
 
@@ -144,37 +146,27 @@
     <ng-template #header> </ng-template>
     <ng-template #cell let-item>
       <div class="flex justify-end items-center gap-4 w-full">
-        <!-- IS MULTILINGUAL -->
         <ng-icon
           *ngIf="isMultilingual(item)"
           data-cy="multilingual-indicator"
           name="iconoirTranslate"
           [attr.title]="getTxtHoverMultilingual(item)"
         ></ng-icon>
-        <!-- MORE ACTIONS MENU BUTTON -->
         <gn-ui-button
           cdkOverlayOrigin
           #actionMenuButton
           (buttonClick)="openActionMenu(item, template)"
           type="light"
           data-test="record-menu-button"
-          [disabled]="
-            (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'
-          "
         >
-          <ng-icon
-            [ngClass]="{
-              'text-purple-light':
-                (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',
-            }"
-            name="matMoreVert"
-          ></ng-icon>
+          <ng-icon name="matMoreVert"></ng-icon>
         </gn-ui-button>
       </div>
       <ng-template #template>
         <gn-ui-action-menu
-          [canDuplicate]="canDuplicate(item) && !isDuplicating"
-          [canDelete]="canDelete(item)"
+          [canDuplicate]="canDuplicate(item)"
+          [isDuplicating]="isDuplicating"
+          [canDelete]="canDelete(item) | async"
           [page]="isDraftPage ? 'draft' : 'main'"
           (duplicate)="handleDuplicate(item)"
           (delete)="handleDelete(item)"

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

@@ -15,7 +15,11 @@ import {
   FieldSort,
   SortByField,
 } from '../../../../../../libs/common/domain/src/lib/model/search'
-import { BadgeComponent, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import {
+  BadgeComponent,
+  ButtonComponent,
+  CheckboxComponent,
+} from '../../../../../../libs/ui/inputs/src'
 import {
   InteractiveTableColumnComponent,
   InteractiveTableComponent,
@@ -28,13 +32,18 @@ import {
   getFileFormat,
   getFormatPriority,
 } from '../../../../../../libs/util/shared/src'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
 import { ActionMenuComponent } from './action-menu/action-menu.component'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
-import { iconoirUser, iconoirLock, iconoirTranslate } from '@ng-icons/iconoir'
+import { iconoirLock, iconoirTranslate, iconoirUser } from '@ng-icons/iconoir'
 import { CdkOverlayOrigin, Overlay, OverlayRef } from '@angular/cdk/overlay'
 import { TemplatePortal } from '@angular/cdk/portal'
 import { matMoreVert } from '@ng-icons/material-icons/baseline'
+import { Observable, of, take } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-results-table',
@@ -43,14 +52,16 @@ import { matMoreVert } from '@ng-icons/material-icons/baseline'
   standalone: true,
   imports: [
     CommonModule,
-    UiInputsModule,
     InteractiveTableComponent,
     InteractiveTableColumnComponent,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     BadgeComponent,
     ActionMenuComponent,
     NgIconComponent,
     CdkOverlayOrigin,
+    CheckboxComponent,
+    ButtonComponent,
   ],
   providers: [
     provideIcons({ iconoirUser, iconoirLock, iconoirTranslate, matMoreVert }),
@@ -62,7 +73,10 @@ export class ResultsTableComponent {
   @Input() sortOrder: SortByField = null
   @Input() hasDraft: (record: CatalogRecord) => boolean = () => false
   @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
-  @Input() canDelete: (record: CatalogRecord) => boolean = () => true
+  @Input() canDelete: (record: CatalogRecord) => Observable<boolean> = () =>
+    of(true)
+  @Input() canEdit: (record: CatalogRecord) => Observable<boolean> = () =>
+    of(true)
   @Input() isDraftPage = false
   @Input() isDuplicating = false
 
@@ -171,10 +185,14 @@ export class ResultsTableComponent {
     return getBadgeColor(format)
   }
 
-  handleRecordClick(item: CatalogRecord) {
-    if ((item?.extras?.edit || this.isDraftPage) && item.kind === 'dataset') {
-      this.recordClick.emit(item as CatalogRecord)
-    }
+  handleRecordClick(item: unknown) {
+    this.canEdit(item as CatalogRecord)
+      .pipe(take(1))
+      .subscribe((canEdit) => {
+        if (canEdit) {
+          this.recordClick.emit(item as CatalogRecord)
+        }
+      })
   }
 
   handleDuplicate(item: unknown) {
@@ -223,10 +241,13 @@ export class ResultsTableComponent {
   }
 
   getTxtHoverMultilingual(record: CatalogRecord) {
+    const languages = [
+      ...[record.defaultLanguage],
+      ...record.otherLanguages,
+    ].sort((a, b) => a.localeCompare(b))
+
     return this.translateService.instant('dashboard.records.isMultilingual', {
-      languages: [...[record.defaultLanguage], ...record.otherLanguages].join(
-        ', '
-      ),
+      languages: languages.join(', '),
     })
   }
 }

package/src/libs/ui/search/src/lib/ui-search.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import { UtilSharedModule } from '../../../../../libs/util/shared/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { NgxDropzoneModule } from 'ngx-dropzone'
 import { FacetsModule } from './facets/facets.module'
 import { RecordMetricComponent } from './record-metric/record-metric.component'
@@ -21,15 +20,15 @@ import { RecordPreviewComponent } from './record-preview/record-preview.componen
 import { TagInputModule } from 'ngx-chips'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ResultsListItemComponent } from './results-list-item/results-list-item.component'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import {
-  MetadataQualityComponent,
-  UiElementsModule,
+  InternalLinkCardComponent,
   KindBadgeComponent,
+  MarkdownParserComponent,
+  MetadataQualityComponent,
+  ThumbnailComponent,
 } from '../../../../../libs/ui/elements/src'
 import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview-feed.component'
 import { CommonModule } from '@angular/common'
-import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { InteractiveTableComponent } from '../../../../../libs/ui/layout/src'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
@@ -39,6 +38,7 @@ import {
   matMapOutline,
 } from '@ng-icons/material-icons/outline'
 import { matFace } from '@ng-icons/material-icons/baseline'
+import { InlineFilterComponent } from '../../../../../libs/ui/inputs/src'
 import { ActionMenuComponent } from './results-table/action-menu/action-menu.component'
 
 @NgModule({
@@ -58,16 +58,13 @@ import { ActionMenuComponent } from './results-table/action-menu/action-menu.com
   ],
   imports: [
     CommonModule,
-    TranslateModule.forChild(),
+    TranslateDirective,
+    TranslatePipe,
     NgxDropzoneModule,
     FacetsModule,
     FormsModule,
     ReactiveFormsModule,
     TagInputModule,
-    UtilSharedModule,
-    UiWidgetsModule,
-    UiInputsModule,
-    UiElementsModule,
     MatCheckboxModule,
     RouterLink,
     InteractiveTableComponent,
@@ -80,6 +77,10 @@ import { ActionMenuComponent } from './results-table/action-menu/action-menu.com
     }),
     KindBadgeComponent,
     MetadataQualityComponent,
+    InlineFilterComponent,
+    ThumbnailComponent,
+    MarkdownParserComponent,
+    InternalLinkCardComponent,
     ActionMenuComponent,
   ],
   exports: [

package/src/libs/ui/widgets/src/index.ts

@@ -1,4 +1,3 @@
-export * from './lib/ui-widgets.module'
 export * from './lib/progress-bar/progress-bar.component'
 export * from './lib/popover/popover.component'
 export * from './lib/loading-mask/loading-mask.component'

package/src/libs/ui/widgets/src/lib/color-scale/color-scale.component.ts

@@ -4,5 +4,6 @@ import { Component } from '@angular/core'
   selector: 'gn-ui-color-scale',
   templateUrl: './color-scale.component.html',
   styleUrls: ['./color-scale.component.css'],
+  standalone: true,
 })
 export class ColorScaleComponent {}

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -18,7 +18,6 @@ import {
 import { TranslateCompiler, TranslateLoader } from '@ngx-translate/core'
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
 import { HttpClient } from '@angular/common/http'
-import { DEFAULT_LANG } from '../../../../../libs/util/i18n/src'
 import { FileWithOverridesTranslateLoader } from './i18n/file-with-overrides.translate.loader'
 
 const MISSING_CONFIG_ERROR = `Application configuration was not initialized correctly.
@@ -308,7 +307,6 @@ export const TRANSLATE_WITH_OVERRIDES_CONFIG = {
     useFactory: function HttpLoaderFactory(http: HttpClient) {
       return new FileWithOverridesTranslateLoader(http, './assets/i18n/')
     },
-    defaultLanguage: DEFAULT_LANG,
     deps: [HttpClient],
   },
 }

package/src/libs/util/i18n/src/index.ts

@@ -1,7 +1,6 @@
-export * from './lib/util-i18n.module'
+export * from './lib/i18n.providers'
 export * from './lib/i18n.constants'
 export * from './lib/i18n.interceptor'
-export * from './lib/lang.service'
 export * from './lib/file.translate.loader'
 export * from './lib/embedded.translate.loader'
 export * from './lib/translate.loader.utils'

package/src/libs/util/i18n/src/lib/embedded.translate.loader.ts

@@ -1,5 +1,5 @@
 import { TranslateLoader } from '@ngx-translate/core'
-import { Observable, map, of } from 'rxjs'
+import { map, Observable, of } from 'rxjs'
 import { dropEmptyTranslations } from './translate.loader.utils'
 import de from '../../../../../translations/de.json'
 import en from '../../../../../translations/en.json'
@@ -8,10 +8,11 @@ import fr from '../../../../../translations/fr.json'
 import it from '../../../../../translations/it.json'
 import nl from '../../../../../translations/nl.json'
 import pt from '../../../../../translations/pt.json'
+import sk from '../../../../../translations/sk.json'
 
 export class EmbeddedTranslateLoader implements TranslateLoader {
-  getTranslation(lang: string): Observable<any> {
-    const langs = { de, en, es, fr, it, nl, pt }
+  getTranslation(lang: string): Observable<Record<string, string>> {
+    const langs = { de, en, es, fr, it, nl, pt, sk }
     const translations = langs[lang.substring(0, 2)]
     return of(translations).pipe(map(dropEmptyTranslations))
   }

package/src/libs/util/i18n/src/lib/i18n.constants.ts

@@ -1,89 +1,57 @@
 import { HttpClient } from '@angular/common/http'
-import { TranslateCompiler, TranslateLoader } from '@ngx-translate/core'
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
 import { FileTranslateLoader } from './file.translate.loader'
-import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-
-marker('language.en')
-marker('language.nl')
-marker('language.fr')
-marker('language.de')
-marker('language.ko')
-marker('language.es')
-marker('language.cs')
-marker('language.ca')
-marker('language.fi')
-marker('language.is')
-marker('language.it')
-marker('language.pt')
-marker('language.ru')
-marker('language.zh')
-marker('language.sk')
-marker('language.rm')
-marker('language.ar')
-marker('language.da')
-marker('language.no')
-marker('language.pl')
-marker('language.sv')
-marker('language.tr')
-marker('language.hy')
-marker('language.az')
-marker('language.ka')
-marker('language.uk')
-marker('language.cy')
+import {
+  TranslateCompiler,
+  TranslateDefaultParser,
+  TranslateLoader,
+  TranslateModuleConfig,
+  TranslateParser,
+} from '@ngx-translate/core'
+import { Injectable } from '@angular/core'
 
 export const DEFAULT_LANG = 'en'
 
 // Caution: changing this can break language selection from third parties!
 export const LANGUAGE_STORAGE_KEY = 'geonetwork-ui-language'
 
-export const SUPPORTED_LANGUAGES = [
-  'en',
-  'nl',
-  'fr',
-  'de',
-  'ko',
-  'es',
-  'cs',
-  'ca',
-  'fi',
-  'is',
-  'it',
-  'pt',
-  'ru',
-  'zh',
-  'sk',
-  'rm',
-  'ar',
-  'da',
-  'no',
-  'pl',
-  'sv',
-  'tr',
-  'hy',
-  'az',
-  'ka',
-  'uk',
-  'cy',
-]
-
 export function HttpLoaderFactory(http: HttpClient) {
   return new FileTranslateLoader(http, './assets/i18n/')
 }
-//Deprecated, but currently still used in datafeeder
-export function getLangFromBrowser() {
-  return navigator.language.substr(0, 2)
-}
-const COMPILER_CONFIG = {
-  provide: TranslateCompiler,
-  useClass: TranslateMessageFormatCompiler,
-}
-export const TRANSLATE_DEFAULT_CONFIG = {
-  compiler: COMPILER_CONFIG,
+
+export const TRANSLATE_DEFAULT_CONFIG: TranslateModuleConfig = {
+  compiler: {
+    provide: TranslateCompiler,
+    useClass: TranslateMessageFormatCompiler,
+  },
   loader: {
     provide: TranslateLoader,
     useFactory: HttpLoaderFactory,
-    defaultLanguage: DEFAULT_LANG,
     deps: [HttpClient],
   },
 }
+
+@Injectable()
+class DebugTranslateParser extends TranslateDefaultParser {
+  interpolate(expr: string | (() => string), params?: any): string | undefined {
+    if (!params) return expr?.toString()
+    const paramsStr = Object.keys(params)
+      .map((key) => `${key}=${params[key]}`)
+      .join(', ')
+    return `${expr} {{${paramsStr}}}`
+  }
+}
+
+/**
+ * This config will print translation keys in the UI directly; used to identify which keys are used
+ */
+export const TRANSLATE_DEBUG_CONFIG: TranslateModuleConfig = {
+  compiler: {
+    provide: TranslateCompiler,
+    useClass: TranslateMessageFormatCompiler,
+  },
+  parser: {
+    provide: TranslateParser,
+    useClass: DebugTranslateParser,
+  },
+}

package/src/libs/util/i18n/src/lib/i18n.interceptor.ts

@@ -1,25 +1,27 @@
-import { Injectable } from '@angular/core'
 import {
-  HttpRequest,
-  HttpHandler,
   HttpEvent,
+  HttpHandler,
   HttpInterceptor,
+  HttpRequest,
 } from '@angular/common/http'
-import { TranslateService } from '@ngx-translate/core'
-import { Observable } from 'rxjs'
 import { DEFAULT_LANG } from './i18n.constants'
+import { Observable } from 'rxjs'
+import { Injectable, Injector } from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
 
 @Injectable()
 export class I18nInterceptor implements HttpInterceptor {
-  constructor(private translate: TranslateService) {}
+  constructor(private injector: Injector) {}
 
   intercept(
-    request: HttpRequest<any>,
+    request: HttpRequest<unknown>,
     next: HttpHandler
-  ): Observable<HttpEvent<any>> {
+  ): Observable<HttpEvent<unknown>> {
+    // we're injecting the service only when necessary to avoid circular dependencies
+    const translate = this.injector.get(TranslateService)
     request = request.clone({
       setHeaders: {
-        'Accept-Language': this.translate.currentLang || DEFAULT_LANG,
+        'Accept-Language': translate.currentLang || DEFAULT_LANG,
       },
     })
     return next.handle(request)

package/src/libs/util/i18n/src/lib/i18n.providers.ts

@@ -0,0 +1,68 @@
+import {
+  APP_INITIALIZER,
+  EnvironmentProviders,
+  makeEnvironmentProviders,
+  Provider,
+} from '@angular/core'
+import {
+  provideTranslateService,
+  TranslateModuleConfig,
+  TranslateService,
+} from '@ngx-translate/core'
+import {
+  DEFAULT_LANG,
+  LANGUAGE_STORAGE_KEY,
+  TRANSLATE_DEBUG_CONFIG,
+  TRANSLATE_DEFAULT_CONFIG,
+} from './i18n.constants'
+import {
+  HTTP_INTERCEPTORS,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http'
+import { I18nInterceptor } from './i18n.interceptor'
+
+function i18nInitializerFromLocalStorageFactory(translate: TranslateService) {
+  return () => {
+    translate.setDefaultLang(DEFAULT_LANG)
+    let storageLang = null
+    try {
+      storageLang = localStorage.getItem(LANGUAGE_STORAGE_KEY)
+    } catch (error) {
+      console.warn(error)
+    }
+    translate.use(storageLang || translate.getBrowserLang() || DEFAULT_LANG)
+  }
+}
+
+export function provideI18n(
+  config?: TranslateModuleConfig,
+  useLocalStorage = true
+): EnvironmentProviders {
+  // fallback to default config
+  let usedConfig = config ?? TRANSLATE_DEFAULT_CONFIG
+  // if the URL contains ?debugTranslations=true, show translations keys in the UI
+  if (
+    new URL(window.location.toString()).searchParams.get(
+      'debugTranslations'
+    ) === 'true'
+  ) {
+    usedConfig = TRANSLATE_DEBUG_CONFIG
+  }
+
+  const providers: (EnvironmentProviders | Provider)[] = [
+    provideHttpClient(withInterceptorsFromDi()),
+    { provide: HTTP_INTERCEPTORS, useClass: I18nInterceptor, multi: true },
+    provideTranslateService(usedConfig),
+  ]
+  if (useLocalStorage) {
+    providers.push({
+      provide: APP_INITIALIZER,
+      useFactory: i18nInitializerFromLocalStorageFactory,
+      deps: [TranslateService],
+      multi: true,
+    })
+  }
+
+  return makeEnvironmentProviders(providers)
+}

package/src/libs/util/i18n/src/lib/language-codes.ts

@@ -1,4 +1,6 @@
-export const LANG_3_TO_2_MAPPER = {
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+const LANG_3_TO_2_MAPPER = {
   eng: 'en',
   dut: 'nl',
   fre: 'fr',
@@ -64,3 +66,44 @@ export const LANG_2_TO_3_MAPPER = Object.entries(LANG_3_TO_2_MAPPER).reduce(
   },
   {}
 )
+
+export function getLang3FromLang2(lang2: string): string {
+  return LANG_2_TO_3_MAPPER[lang2] ?? lang2
+}
+
+export function getLang2FromLang3(lang3: string): string {
+  return LANG_3_TO_2_MAPPER[lang3] ?? lang3
+}
+
+export function getLocalizedIndexKey(lang2: string): string {
+  const lang3 = getLang3FromLang2(lang2)
+  return lang3 ? `lang${lang3}` : null
+}
+
+marker('language.en')
+marker('language.nl')
+marker('language.fr')
+marker('language.de')
+marker('language.ko')
+marker('language.es')
+marker('language.cs')
+marker('language.ca')
+marker('language.fi')
+marker('language.is')
+marker('language.it')
+marker('language.pt')
+marker('language.ru')
+marker('language.zh')
+marker('language.sk')
+marker('language.rm')
+marker('language.ar')
+marker('language.da')
+marker('language.no')
+marker('language.pl')
+marker('language.sv')
+marker('language.tr')
+marker('language.hy')
+marker('language.az')
+marker('language.ka')
+marker('language.uk')
+marker('language.cy')

package/src/libs/util/shared/src/index.ts

@@ -1,6 +1,6 @@
-export * from './lib/util-shared.module'
 export * from './lib/services'
 export * from './lib/utils'
 export * from './lib/links'
 export * from './lib/image-fallback.directive'
 export * from './lib/gn-ui-version'
+export * from './lib/record.util'

package/src/libs/util/shared/src/lib/image-fallback.directive.ts

@@ -2,6 +2,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core'
 
 @Directive({
   selector: 'img[gnUiImageFallback]',
+  standalone: true,
 })
 export class ImageFallbackDirective {
   @Input() fallbackUrl: string