geonetwork-ui 2.4.2-dev.ff0aab388 → 2.5.0-dev.77e75b46a

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

@@ -4,7 +4,7 @@
     [thumbnailUrl]="contact.organization?.logoUrl?.href"
     [fit]="'contain'"
   ></gn-ui-thumbnail>
-  <div class="flex flex-col w-full overflow-hidden leading-snug">
+  <div class="flex flex-col w-full overflow-hidden leading-snug justify-center">
     <div class="text-[16px] font-bold text-main" data-test="contactCardName">
       {{ contact.firstName }} {{ contact.lastName }}
     </div>

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html

@@ -18,7 +18,7 @@
 
       <ng-icon
         *ngIf="isPlaceWithoutExtent(keyword)"
-        [title]="'editor.form.placeKeywordWithoutExtent' | translate"
+        [title]="'editor.record.form.keywords.place.withoutExtent' | translate"
         class="badge-warning"
         name="matWarningAmberOutline"
       ></ng-icon>

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

@@ -35,7 +35,10 @@
         >
           <ng-icon name="iconoirArrowLeft"></ng-icon>
         </gn-ui-button>
-        <span class="font-bold"> {{ externalImportBackLabel }}</span>
+        <span class="font-bold" translate
+          >dashboard.importRecord.importExternal.title</span
+        >
+        <span translate>dashboard.importRecord.importExternal.subtitle</span>
       </div>
       <gn-ui-url-input
         (uploadClick)="importRecord($event)"

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

@@ -84,10 +84,6 @@ export class ImportRecordComponent {
 
   sectionDisplayed: ImportMenuPage = 'mainMenu'
 
-  externalImportBackLabel = this.translateService.instant(
-    'dashboard.importRecord.importExternalLabel'
-  )
-
   constructor(
     private router: Router,
     private translateService: TranslateService,

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

@@ -54,8 +54,8 @@ export class OnlineResourceCardComponent {
       case 'service':
       case 'download':
         return (
-          this.onlineResource.name ??
-          this.onlineResource.description ??
+          this.onlineResource.description ||
+          this.onlineResource.name ||
           '(unknown)'
         )
       case 'endpoint':

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

@@ -15,7 +15,7 @@
   <mat-radio-group
     aria-labelledby="example-radio-group-label"
     class="flex flex-row gap-[8px]"
-    [(ngModel)]="service.accessServiceProtocol"
+    [(ngModel)]="_service.accessServiceProtocol"
     [disabled]="disabled"
     (change)="resetAllFormFields()"
   >
@@ -34,11 +34,11 @@
     (uploadClick)="handleUploadClick($event)"
     (valueChange)="handleUrlValueChange($event)"
     [disabled]="disabled"
-    [value]="url"
+    [value]="_service.url?.toString()"
     [showValidateButton]="activeLayerSuggestion"
   >
     <ng-content *ngIf="activeLayerSuggestion">
-      <ng-icon name="iconoirCloudUpload"></ng-icon>
+      <ng-icon name="iconoirRefresh"></ng-icon>
     </ng-content>
   </gn-ui-url-input>
 
@@ -48,13 +48,13 @@
 
   <gn-ui-text-input
     class="grow border-b border-gray-300 pb-4"
-    [(value)]="service.identifierInService"
+    [(value)]="_service.identifierInService"
     [placeholder]="getIdentifierPlaceholder() | translate"
     data-cy="identifier-in-service"
     [disabled]="disabled"
     *ngIf="
       !activeLayerSuggestion ||
-      (url && errorMessage) ||
+      (_service.url && errorMessage) ||
       (modifyMode && (layers$ | async).length === 0)
     "
   ></gn-ui-text-input>
@@ -73,14 +73,14 @@
   >
   </gn-ui-autocomplete>
   <gn-ui-button
-    (buttonClick)="submitIdentifier(service.identifierInService)"
-    [disabled]="disabled || !service.identifierInService"
+    (buttonClick)="submit()"
+    [disabled]="disabled || !_service.identifierInService"
     type="primary"
     *ngIf="
       !modifyMode &&
       ((activeLayerSuggestion && (layers$ | async)) ||
         !activeLayerSuggestion ||
-        (url && errorMessage))
+        (_service.url && errorMessage))
     "
   >
     <span class="text-white font-bold" translate>

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

@@ -5,8 +5,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnChanges,
-  OnInit,
   Output,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
@@ -23,23 +21,27 @@ import {
   TextInputComponent,
   UrlInputComponent,
 } from '../../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { createFuzzyFilter, getLayers } from '../../../../../../../libs/util/shared/src'
 import {
   NgIconComponent,
   provideIcons,
   provideNgIconsConfig,
 } from '@ng-icons/core'
-import { iconoirCloudUpload } from '@ng-icons/iconoir'
-import { createFuzzyFilter, getLayers } from '../../../../../../../libs/util/shared/src'
+import { iconoirRefresh } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
 import {
   BehaviorSubject,
   debounceTime,
   distinctUntilChanged,
-  map,
   Observable,
   switchMap,
 } from 'rxjs'
 
+marker('editor.record.form.field.onlineResource.edit.identifier.placeholder')
+marker(
+  'editor.record.form.field.onlineResource.edit.identifier.placeholder.wps'
+)
+
 @Component({
   selector: 'gn-ui-online-service-resource-input',
   templateUrl: './online-service-resource-input.component.html',
@@ -59,26 +61,25 @@ import {
     UrlInputComponent,
   ],
   providers: [
-    provideIcons({ iconoirCloudUpload }),
+    provideIcons({ iconoirRefresh }),
     provideNgIconsConfig({
       size: '1.5em',
     }),
   ],
 })
-export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
-  @Input() service: DatasetServiceDistribution
+export class OnlineServiceResourceInputComponent {
+  _service: DatasetServiceDistribution
+  @Input() set service(service: DatasetServiceDistribution) {
+    this._service = { ...service }
+  }
   @Input() protocolHint?: string
   @Input() disabled? = false
   @Input() modifyMode? = false
-  @Output() urlChange: EventEmitter<string> = new EventEmitter()
-  @Output() identifierSubmit: EventEmitter<{
-    url: string
-    identifier: string
-  }> = new EventEmitter()
+  @Output() serviceChange: EventEmitter<DatasetServiceDistribution> =
+    new EventEmitter()
 
   errorMessage = false
-  selectedProtocol: ServiceProtocol
-  url = ''
+
   layersSubject = new BehaviorSubject<{ name: string; title: string }[]>([])
   layers$: Observable<{ name: string; title: string }[]> =
     this.layersSubject.asObservable()
@@ -121,35 +122,18 @@ export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
 
   get activeLayerSuggestion() {
     return !['wps', 'GPFDL', 'esriRest', 'other'].includes(
-      this.service.accessServiceProtocol
+      this._service.accessServiceProtocol
     )
   }
 
-  ngOnChanges() {
-    this.selectedProtocol =
-      this.protocolOptions.find(
-        (option) => option.value === this.service.accessServiceProtocol
-      )?.value ?? 'other'
-  }
-
-  ngOnInit() {
-    if (this.service.url) {
-      this.url = this.service.url.toString()
-    }
-  }
-
   handleUrlValueChange(url: string) {
-    this.url = url
-    this.service.url = url ? new URL(url) : undefined
+    this._service.url = url ? new URL(url) : undefined
     this.resetLayersSuggestion()
-    this.urlChange.emit(this.url)
   }
 
   async handleUploadClick(url: string) {
-    this.url = url
-
     try {
-      const layers = await getLayers(url, this.service.accessServiceProtocol)
+      const layers = await getLayers(url, this._service.accessServiceProtocol)
 
       if (layers.length === 0) {
         throw new Error('No layers found')
@@ -165,27 +149,29 @@ export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
   }
 
   resetAllFormFields() {
-    this.url = ''
-    this.service.url = null
+    this._service.url = null
     this.resetLayersSuggestion()
   }
 
   resetLayersSuggestion() {
     this.errorMessage = false
     this.layersSubject.next([])
-    this.service.identifierInService = null
+    this._service.identifierInService = null
   }
 
-  submitIdentifier(identifier: string) {
-    if (!identifier) return
-    this.identifierSubmit.emit({ url: this.url, identifier })
-    this.service.identifierInService = null
+  submit() {
+    this.serviceChange.emit({
+      ...this._service,
+      name: this._service.identifierInService, // should we keep the identifierInService? read-write duplicate with name
+    })
+    this._service.accessServiceProtocol = 'ogcFeatures'
+    this.resetAllFormFields()
   }
 
   getIdentifierPlaceholder(): string {
     const baseKey =
       'editor.record.form.field.onlineResource.edit.identifier.placeholder'
-    return this.service.accessServiceProtocol === 'wps'
+    return this._service.accessServiceProtocol === 'wps'
       ? `${baseKey}.wps`
       : baseKey
   }
@@ -217,6 +203,7 @@ export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
    * gn-ui-autocomplete
    */
   handleSelectValue(val: { name: string; title: string }) {
-    this.service.identifierInService = val.name
+    this._service.identifierInService = val.name // should we keep the identifierInService? read-write duplicate with name
+    this._service.description = val.title
   }
 }

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

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-3">
   <gn-ui-autocomplete
-    [placeholder]="'Choose a contact'"
+    [placeholder]="'editor.record.form.field.contacts.placeholder' | translate"
     [action]="autoCompleteAction"
     (itemSelected)="addContact($event)"
     [displayWithFn]="displayWithFn"

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

@@ -31,7 +31,9 @@
       </div>
 
       <gn-ui-autocomplete
-        [placeholder]="'Choose a contact'"
+        [placeholder]="
+          'editor.record.form.field.contactsForResource.placeholder' | translate
+        "
         [action]="autoCompleteAction"
         (itemSelected)="addContact($event, role)"
         [displayWithFn]="displayWithFn"

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

@@ -2,7 +2,7 @@
   <gn-ui-generic-keywords
     [keywords]="filteredKeywords"
     [keywordTypes]="keywordTypes"
-    [placeholder]="'editor.form.keywords.placeholder' | translate"
+    [placeholder]="'editor.record.form.keywords.placeholder' | translate"
     (changedKeywords)="handleKeywordsChange($event)"
     [allowSubmit]="false"
   >

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.html

@@ -41,7 +41,6 @@
         class="w-full"
         [disabled]="true"
         [value]="onlineResource.url"
-        [disabled]="disabled$ | async"
         [showValidateButton]="false"
       ></gn-ui-url-input>
     </div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -8,28 +9,27 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core'
+import { MatDialog } from '@angular/material/dialog'
 import {
   OnlineLinkResource,
   OnlineResource,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
 import {
   FileInputComponent,
   TextAreaComponent,
   TextInputComponent,
   UrlInputComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
-import { CommonModule } from '@angular/common'
-import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
 import {
   ModalDialogComponent,
   SortableListComponent,
 } from '../../../../../../../../../libs/ui/layout/src'
-import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
-import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { map, Subscription } from 'rxjs'
-import { MatDialog } from '@angular/material/dialog'
+import { Subscription } from 'rxjs'
 import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
+import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
 
 @Component({
   selector: 'gn-ui-form-field-online-link-resources',

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

@@ -20,8 +20,7 @@
   >
     <gn-ui-online-service-resource-input
       [service]="newService"
-      [disabled]="disabled$ | async"
-      (identifierSubmit)="handleIdentifierSubmit($event)"
+      (serviceChange)="handleServiceChange($event)"
     ></gn-ui-online-service-resource-input>
   </div>
   <div class="h-[8px]"></div>
@@ -40,28 +39,36 @@
 
   <ng-template #dialogTemplate let-onlineResource>
     <div class="flex flex-col gap-[16px]">
-      <div>
-        <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
-          editor.record.form.field.onlineResource.edit.title
-        </h3>
-        <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
-      </div>
-      <div>
-        <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
-          editor.record.form.field.onlineResource.edit.description
-        </h3>
-        <gn-ui-text-area
-          [(value)]="onlineResource.description"
-        ></gn-ui-text-area>
-      </div>
       <ng-container *ngIf="onlineResource.type === 'service'; else urlInput">
-        <span class="w-full border-b border-gray-300"></span>
         <gn-ui-online-service-resource-input
           [service]="onlineResource"
           [modifyMode]="true"
+          [disabled]="true"
         ></gn-ui-online-service-resource-input>
+        <div>
+          <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+            editor.record.form.field.onlineResource.edit.description
+          </h3>
+          <gn-ui-text-area
+            [(value)]="onlineResource.description"
+          ></gn-ui-text-area>
+        </div>
       </ng-container>
       <ng-template #urlInput>
+        <div>
+          <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+            editor.record.form.field.onlineResource.edit.title
+          </h3>
+          <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
+        </div>
+        <div>
+          <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+            editor.record.form.field.onlineResource.edit.description
+          </h3>
+          <gn-ui-text-area
+            [(value)]="onlineResource.description"
+          ></gn-ui-text-area>
+        </div>
         <span class="w-full border-b border-gray-300"></span>
         <gn-ui-url-input
           class="w-full"

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-resources/form-field-online-resources.component.ts

@@ -159,33 +159,8 @@ export class FormFieldOnlineResourcesComponent {
     }
   }
 
-  handleServiceUrlChange(url: string) {
-    this.valueChange.emit([
-      ...this.allResources,
-      {
-        ...this.newService,
-        url: new URL(url),
-      },
-    ])
-  }
-
-  handleIdentifierSubmit(payload: { url: string; identifier: string }) {
-    this.valueChange.emit([
-      ...this.allResources,
-      {
-        ...this.newService,
-        url: new URL(payload.url),
-      },
-    ])
-  }
-
-  handleServiceModify(
-    oldService: DatasetServiceDistribution,
-    newService: DatasetServiceDistribution
-  ) {
-    oldService.accessServiceProtocol = newService.accessServiceProtocol
-    oldService.identifierInService = newService.identifierInService
-    oldService.url = newService.url
+  handleServiceChange(service: DatasetServiceDistribution) {
+    this.valueChange.emit([...this.allResources, service])
   }
 
   handleResourcesChange(items: unknown[]) {

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

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-3">
   <gn-ui-generic-keywords
-    [placeholder]="'Search for place keywords'"
+    [placeholder]="'editor.record.form.keywords.place.placeholder' | translate"
     [keywords]="shownKeywords$ | async"
     [keywordTypes]="['place']"
     (deletedKeyword)="handleKeywordDelete($event)"

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts

@@ -10,7 +10,7 @@ import { firstValueFrom, map, shareReplay } from 'rxjs'
 import { EditorFacade } from '../../../../+state/editor.facade'
 import { switchMap } from 'rxjs/operators'
 import { FormFieldMapContainerComponent } from '../form-field-map-container/form-field-map-container.component'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { SPATIAL_SCOPES } from '../../../../fields.config'
 
 // This intermediary type will let us keep track of which keyword is bound to
@@ -36,6 +36,7 @@ type KeywordWithExtent = Keyword & {
     CommonModule,
     GenericKeywordsComponent,
     FormFieldMapContainerComponent,
+    TranslateModule,
   ],
 })
 export class FormFieldSpatialExtentComponent {

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

@@ -5,7 +5,7 @@
     (toggled)="onPlannedToggled()"
   ></gn-ui-check-toggle>
   <gn-ui-dropdown-selector
-    title="updateFrequency"
+    [title]="'editor.record.form.field.updateFrequency' | translate"
     [showTitle]="false"
     [choices]="choices"
     [selected]="selectedFrequency"

package/src/libs/feature/editor/src/lib/components/wizard-summarize/wizard-summarize.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
 import { WizardService } from '../../services/wizard.service'
-import { TranslateService } from '@ngx-translate/core'
+import { DateService } from '../../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-wizard-summarize',
@@ -28,9 +28,8 @@ export class WizardSummarizeComponent {
 
   get createdDate() {
     const time = this.wizardService.getWizardFieldData('datepicker')
-    const locale = this.translateService.currentLang
 
-    return new Date(Number(time)).toLocaleDateString(locale, {
+    return this.dateService.formatDate(new Date(Number(time)), {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
@@ -54,6 +53,6 @@ export class WizardSummarizeComponent {
 
   constructor(
     private wizardService: WizardService,
-    private translateService: TranslateService
+    private dateService: DateService
   ) {}
 }

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -63,6 +63,8 @@ export const RECORD_KEYWORDS_FIELD: EditorField = {
   model: 'keywords',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.keywords')
 
 export const RECORD_RESOURCE_CREATED_FIELD: EditorField = {
   model: 'resourceCreated',
@@ -156,18 +158,24 @@ export const RECORD_SPATIAL_EXTENTS_FIELD: EditorField = {
   model: 'spatialExtents',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.spatialExtents')
 
 export const RECORD_ONLINE_RESOURCES: EditorField = {
   model: 'onlineResources',
   modelSpecifier: 'onlineResourceType:!link',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.onlineResources')
 
 export const RECORD_ONLINE_LINK_RESOURCES: EditorField = {
   model: 'onlineResources',
   modelSpecifier: 'onlineResourceType:link',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.onlineLinkResources')
 
 /************************************************************
  ***************          SECTIONS          *****************
@@ -273,7 +281,7 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
       ],
     },
     {
-      labelKey: marker('editor.record.form.page.ressources'),
+      labelKey: marker('editor.record.form.page.resources'),
       sections: [ASSOCIATED_RESOURCES_SECTION, ANNEXES_SECTION],
     },
     {

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

@@ -1,6 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
   <gn-ui-dropdown-selector
     *ngIf="dropdownChoices$ | async as choices"
+    [ngClass]="{ hidden: !displaySource }"
     [title]="'table.select.data' | translate"
     class="truncate p-1 -mx-1 self-end mb-1"
     extraBtnClass="!text-primary font-sans font-medium"

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

@@ -34,6 +34,7 @@ import { TranslateModule } from '@ngx-translate/core'
 })
 export class DataViewComponent {
   @Input() mode: 'table' | 'chart'
+  @Input() displaySource = true
   @Output() chartConfig$ = new BehaviorSubject<DatavizConfigurationModel>(null)
   compatibleDataLinks$ = combineLatest([
     this.mdViewFacade.dataLinks$,

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

@@ -1,4 +1,4 @@
-<div class="container-lg px-5 my-1 lg:mx-auto">
+<div class="px-5 my-1">
   <mat-tab-group
     [selectedIndex]="0"
     animationDuration="0ms"

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

@@ -1,6 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
   <div class="w-full flex justify-end">
     <gn-ui-dropdown-selector
+      [ngClass]="{ hidden: !displaySource }"
       class="truncate p-1 -mx-1 mb-1"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"

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

@@ -85,6 +85,7 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set excludeWfs(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  @Input() displaySource = true
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   excludeWfs$ = new BehaviorSubject(false)

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -163,13 +163,13 @@
     <div *ngIf="metadata.resourceCreated">
       <p class="text-sm" translate>record.metadata.creation</p>
       <p class="text-primary font-medium mt-1">
-        {{ metadata.resourceCreated.toLocaleDateString() }}
+        {{ formatDate(metadata.resourceCreated) }}
       </p>
     </div>
     <div *ngIf="metadata.resourcePublished">
       <p class="text-sm" translate>record.metadata.publication</p>
       <p class="text-primary font-medium mt-1">
-        {{ metadata.resourcePublished.toLocaleDateString() }}
+        {{ formatDate(metadata.resourcePublished) }}
       </p>
     </div>
     <div *ngIf="updateFrequency">
@@ -233,7 +233,7 @@
     <div *ngIf="metadata.recordUpdated">
       <p class="text-sm" translate>record.metadata.updatedOn</p>
       <p class="text-primary font-medium">
-        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
+        {{ metadata.recordUpdated && formatDateTime(metadata.recordUpdated) }}
       </p>
     </div>
     <div *ngIf="metadata.landingPage">