geonetwork-ui 2.10.0-dev.37a1e4c4d → 2.10.0-dev.394310529

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

@@ -3,6 +3,7 @@ import {
   DatasetRecord,
   DatasetSpatialExtent,
   Keyword,
+  ReuseRecord,
   ServiceRecord,
 } from '../../../../../libs/common/domain/src/lib/model/record'
 
@@ -1027,3 +1028,53 @@ export const multilingualDatasetFixture: () => DatasetRecord = () => ({
   topics: [],
   recordUpdated: null,
 })
+
+export const simpleReuseRecordFixture = (): ReuseRecord => ({
+  abstract: `Sample reuse record`,
+  kind: 'reuse',
+  reuseType: 'application',
+  recordUpdated: new Date('2023-03-17T07:38:08.875Z'),
+  recordPublished: null,
+  ownerOrganization: null,
+  licenses: [],
+  legalConstraints: [],
+  securityConstraints: [],
+  otherConstraints: [],
+  contacts: [],
+  contactsForResource: [],
+  keywords: [],
+  topics: [],
+  spatialExtents: [],
+  temporalExtents: [],
+  lineage: 'bla',
+  sourceRecords: [],
+  overviews: [],
+  defaultLanguage: null,
+  otherLanguages: [],
+  title: 'Sites de gestion des déchets miniers - Service de visualisation WMS',
+  onlineResources: [
+    {
+      name: 'Rapport de disponibilité du service WMS',
+      description:
+        'Ce service de visualisation WMS permet de consulter la série de couches de données "Sites de gestion des déchets miniers - Série".',
+      mimeType: 'text/html',
+      type: 'link',
+      url: new URL(
+        'https://geoservices.wallonie.be/rapportDisponibilite/wms/sites_de_gestion_des_dechets_miniers_srie.html'
+      ),
+      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'),
+})

package/src/libs/feature/editor/src/lib/+state/editor.actions.ts

@@ -29,7 +29,10 @@ export const markRecordAsChanged = createAction(
   '[Editor] Mark record as changed'
 )
 
-export const saveRecord = createAction('[Editor] Save record')
+export const saveRecord = createAction(
+  '[Editor] Save record',
+  props<{ publish: boolean }>()
+)
 export const saveRecordSuccess = createAction('[Editor] Save record success')
 export const saveRecordFailure = createAction(
   '[Editor] Save record failure',

package/src/libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -28,30 +28,37 @@ export class EditorEffects {
         this.store.select(selectRecordSource),
         this.store.select(selectEditorConfig)
       ),
-      switchMap(([, record, recordSource, fieldsConfig]) =>
-        this.editorService.saveRecord(record, recordSource, fieldsConfig).pipe(
-          switchMap(([savedRecord, savedRecordSource]) => {
-            const actions: Action[] = [EditorActions.saveRecordSuccess()]
+      switchMap(([{ publish }, record, recordSource, fieldsConfig]) =>
+        this.editorService
+          .saveRecord(record, recordSource, fieldsConfig, publish)
+          .pipe(
+            switchMap(([savedRecord, savedRecordSource]) => {
+              const actions: Action[] = [EditorActions.saveRecordSuccess()]
+
+              if (publish) {
+                // saving without publishing doesn't unpublish
+                actions.push(EditorActions.isPublished({ isPublished: true }))
+              }
 
-            if (!record?.uniqueIdentifier) {
-              actions.push(
-                EditorActions.openRecord({
-                  record: savedRecord,
-                  recordSource: savedRecordSource,
+              if (!record?.uniqueIdentifier) {
+                actions.push(
+                  EditorActions.openRecord({
+                    record: savedRecord,
+                    recordSource: savedRecordSource,
+                  })
+                )
+              }
+
+              return of(...actions)
+            }),
+            catchError((error) =>
+              of(
+                EditorActions.saveRecordFailure({
+                  error,
                 })
               )
-            }
-
-            return of(...actions)
-          }),
-          catchError((error) =>
-            of(
-              EditorActions.saveRecordFailure({
-                error,
-              })
             )
           )
-        )
       )
     )
   )

package/src/libs/feature/editor/src/lib/+state/editor.facade.ts

@@ -54,7 +54,11 @@ export class EditorFacade {
   }
 
   saveRecord() {
-    this.store.dispatch(EditorActions.saveRecord())
+    this.store.dispatch(EditorActions.saveRecord({ publish: false }))
+  }
+
+  saveAndPublishRecord() {
+    this.store.dispatch(EditorActions.saveRecord({ publish: true }))
   }
 
   undoRecordDraft() {

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

@@ -3,13 +3,13 @@
     editor.record.form.field.onlineResource.edit.protocol
   </h3>
   @if (protocolHint) {
-    <span
-      class="material-symbols-outlined m-2 gn-ui-icon-small"
+    <ng-icon
+      name="matHelpOutline"
+      size="16"
+      class="m-2"
       [matTooltip]="protocolHint"
       matTooltipPosition="above"
-    >
-      help
-    </span>
+    ></ng-icon>
   }
 </div>
 <div class="flex flex-row items-center gap-4 h-[48px]">

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

@@ -30,6 +30,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirRefresh } from '@ng-icons/iconoir'
+import { matHelpOutline } from '@ng-icons/material-icons/outline'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BehaviorSubject,
@@ -65,7 +66,7 @@ marker(
     UrlInputComponent,
   ],
   providers: [
-    provideIcons({ iconoirRefresh }),
+    provideIcons({ iconoirRefresh, matHelpOutline }),
     provideNgIconsConfig({
       size: '1.5em',
     }),

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

@@ -3,11 +3,11 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
   TemplateRef,
   ViewChild,
-  inject,
 } from '@angular/core'
 import { MatDialog } from '@angular/material/dialog'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'

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

@@ -3,11 +3,14 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
-  inject,
 } from '@angular/core'
-import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  GraphicOverview,
+  RecordKind,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { ImageInputComponent } from '../../../../../../../../../libs/ui/elements/src'
 import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
@@ -30,6 +33,7 @@ export class FormFieldOverviewsComponent {
   private cd = inject(ChangeDetectorRef)
 
   @Input() metadataUuid: string
+  @Input() recordKind: RecordKind
   @Input() value: Array<GraphicOverview>
   @Output() valueChange: EventEmitter<Array<GraphicOverview>> =
     new EventEmitter()
@@ -111,13 +115,16 @@ export class FormFieldOverviewsComponent {
       {
         type: 'error',
         title: this.translateService.instant(
-          'editor.record.resourceError.title'
+          'editor.record.resourceError.title',
+          { recordKind: this.recordKind }
         ),
         text: `${this.translateService.instant(
-          'editor.record.resourceError.body'
+          'editor.record.resourceError.body',
+          { recordKind: this.recordKind }
         )} ${error.message}`,
         closeMessage: this.translateService.instant(
-          'editor.record.resourceError.closeMessage'
+          'editor.record.resourceError.closeMessage',
+          { recordKind: this.recordKind }
         ),
       },
       undefined,

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

@@ -9,11 +9,11 @@
     "
     (buttonClick)="togglePreview()"
   >
-    <span
-      class="material-symbols-outlined gn-ui-icon-small"
+    <ng-icon
+      [name]="preview ? 'matVisibilityOffOutline' : 'matVisibilityOutline'"
+      size="16"
       [ngClass]="{ 'text-primary': !preview }"
-      >{{ preview ? 'visibility_off' : 'visibility' }}</span
-    >
+    ></ng-icon>
     &nbsp;
     {{ preview ? 'Edit' : 'Preview' }}
   </gn-ui-button>

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

@@ -10,6 +10,11 @@ import { ReactiveFormsModule } from '@angular/forms'
 import { MarkdownEditorComponent } from '../../../../../../../../../libs/ui/elements/src'
 import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
 import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/layout/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  matVisibilityOffOutline,
+  matVisibilityOutline,
+} from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-form-field-rich',
@@ -23,7 +28,9 @@ import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/la
     MarkdownEditorComponent,
     FormFieldWrapperComponent,
     ButtonComponent,
+    NgIconComponent,
   ],
+  providers: [provideIcons({ matVisibilityOutline, matVisibilityOffOutline })],
 })
 export class FormFieldRichComponent {
   @Input() label: string

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

@@ -1,11 +1,15 @@
 <div class="flex flex-col gap-2">
   <gn-ui-check-toggle
-    [label]="'editor.record.form.updateFrequency.planned' | translate"
+    [label]="
+      'editor.record.form.updateFrequency.planned' | translate: { recordKind }
+    "
     [value]="planned"
     (toggled)="onPlannedToggled()"
   ></gn-ui-check-toggle>
   <gn-ui-dropdown-selector
-    [title]="'editor.record.form.field.updateFrequency' | translate"
+    [title]="
+      'editor.record.form.field.updateFrequency' | translate: { recordKind }
+    "
     [showTitle]="false"
     [choices]="choices"
     [selected]="selectedFrequency"

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

@@ -2,12 +2,13 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  inject,
   Input,
   OnInit,
   Output,
-  inject,
 } from '@angular/core'
 import {
+  RecordKind,
   UpdateFrequency,
   UpdateFrequencyCode,
   updateFrequencyCodeValues,
@@ -37,6 +38,7 @@ export class FormFieldUpdateFrequencyComponent implements OnInit {
   private translateService = inject(TranslateService)
 
   @Input() value: UpdateFrequency
+  @Input() recordKind: RecordKind
   @Output() valueChange: EventEmitter<UpdateFrequency> = new EventEmitter()
 
   protected choices: DropdownChoice[] = []

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

@@ -12,8 +12,8 @@
   </ng-container>
   <ng-template #withGenericWrapper>
     <gn-ui-form-field-wrapper
-      [label]="config.labelKey! | translate"
-      [hint]="config.hintKey! | translate"
+      [label]="config.labelKey! | translate: { recordKind }"
+      [hint]="config.hintKey! | translate: { recordKind }"
     >
       <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
     </gn-ui-form-field-wrapper>
@@ -34,30 +34,32 @@
           [value]="valueAsString"
           (change)="valueChange.emit($event.target.value)"
           [placeholder]="
-            'editor.record.form.field.title.placeholder' | translate
+            'editor.record.form.field.title.placeholder'
+              | translate: { recordKind }
           "
         ></textarea>
         <div class="flex flex-row justify-between self-start mt-0.5">
-          <span
-            class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+          <ng-icon
+            name="matEditOutline"
+            size="16"
+            class="m-2 cursor-pointer"
             (click)="focusTitleInput()"
-            >edit</span
-          >
-          <span
+          ></ng-icon>
+          <ng-icon
             *ngIf="config.hintKey"
-            class="material-symbols-outlined gn-ui-icon-small m-2"
-            [matTooltip]="config.hintKey! | translate"
+            name="matHelpOutline"
+            size="16"
+            class="m-2"
+            [matTooltip]="config.hintKey! | translate: { recordKind }"
             matTooltipPosition="above"
-          >
-            help
-          </span>
+          ></ng-icon>
         </div>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="'abstract'">
       <gn-ui-form-field-rich
-        [label]="config.labelKey! | translate"
-        [hint]="config.hintKey! | translate"
+        [label]="config.labelKey! | translate: { recordKind }"
+        [hint]="config.hintKey! | translate: { recordKind }"
         [value]="valueAsString"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-rich>
@@ -65,6 +67,7 @@
     <ng-container *ngSwitchCase="'overviews'">
       <gn-ui-form-field-overviews
         [metadataUuid]="uniqueIdentifier"
+        [recordKind]="recordKind"
         [value]="valueAsOverviews"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-overviews>
@@ -92,6 +95,7 @@
       <gn-ui-form-field-update-frequency
         [value]="valueAsUpdateFrequency"
         (valueChange)="valueChange.emit($event)"
+        [recordKind]="recordKind"
       ></gn-ui-form-field-update-frequency>
     </ng-container>
     <ng-container *ngSwitchCase="'temporalExtents'">
@@ -117,7 +121,7 @@
     </ng-container>
     <ng-container *ngSwitchCase="'licenses'">
       <gn-ui-form-field-license
-        [label]="config.labelKey! | translate"
+        [label]="config.labelKey! | translate: { recordKind }"
         [recordLicences]="valueAsConstraints"
         (recordLicencesChange)="valueChange.emit($event)"
       ></gn-ui-form-field-license>

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

@@ -18,9 +18,15 @@ import {
   Individual,
   Keyword,
   OnlineResource,
+  RecordKind,
   UpdateFrequency,
 } from '../../../../../../../../libs/common/domain/src/lib/model/record'
 import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  matEditOutline,
+  matHelpOutline,
+} from '@ng-icons/material-icons/outline'
 import { TranslatePipe } from '@ngx-translate/core'
 import {
   FieldFocusDirective,
@@ -78,11 +84,14 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldSpatialToggleComponent,
     FormFieldTopicsComponent,
     TextFieldModule,
+    NgIconComponent,
   ],
+  providers: [provideIcons({ matEditOutline, matHelpOutline })],
   hostDirectives: [FieldFocusDirective],
 })
 export class FormFieldComponent {
   @Input() uniqueIdentifier: string
+  @Input() recordKind: RecordKind
   @Input() model: CatalogRecordKeys
   @Input() modelSpecifier: FieldModelSpecifier
   @Input() componentName: FormFieldComponentName

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

@@ -3,7 +3,7 @@
     section of facade.currentSections$ | async;
     track sectionTracker($index, section)
   ) {
-    @if (!section.hidden) {
+    @if (evaluateExpression(section.hidden)() !== true) {
       <div
         class="flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px]"
         gnUiFieldFocus
@@ -11,12 +11,20 @@
       >
         <div class="flex flex-col gap-2">
           @if (section.labelKey) {
-            <div class="text-2xl font-title text-black" translate>
+            <div
+              class="text-2xl font-title text-black"
+              translate
+              [translateParams]="{ recordKind: recordKind$ | async }"
+            >
               {{ section.labelKey }}
             </div>
           }
           @if (section.descriptionKey) {
-            <div class="text-gray-800 text-sm" translate>
+            <div
+              class="text-gray-800 text-sm"
+              translate
+              [translateParams]="{ recordKind: recordKind$ | async }"
+            >
               {{ section.descriptionKey }}
             </div>
           }
@@ -26,7 +34,7 @@
             field of section.fieldsWithValues;
             track fieldTracker($index, field)
           ) {
-            @if (!field.config.hidden) {
+            @if (evaluateExpression(field.config.hidden)() !== true) {
               <gn-ui-form-field
                 [ngClass]="
                   field.config.gridColumnSpan === 1
@@ -34,6 +42,7 @@
                     : 'col-span-2'
                 "
                 [uniqueIdentifier]="recordUniqueIdentifier$ | async"
+                [recordKind]="recordKind$ | async"
                 [model]="field.config.model!"
                 [modelSpecifier]="field.config.modelSpecifier!"
                 [config]="field.config.formFieldConfig"

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

@@ -2,9 +2,12 @@ import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   inject,
   OnDestroy,
   OnInit,
+  Signal,
+  signal,
   viewChildren,
 } from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
@@ -18,6 +21,9 @@ import {
 import { firstValueFrom, map, Subscription, withLatestFrom } from 'rxjs'
 import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { switchMap } from 'rxjs/operators'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { evaluate, isExpression } from '../../expressions'
+import { NotificationsService } from '../../../../../../../libs/feature/notifications/src'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -34,11 +40,13 @@ import { switchMap } from 'rxjs/operators'
 })
 export class RecordFormComponent implements OnInit, OnDestroy {
   facade = inject(EditorFacade)
+  notifications = inject(NotificationsService)
   subscription = new Subscription()
 
   recordUniqueIdentifier$ = this.facade.record$.pipe(
     map((record) => record.uniqueIdentifier)
   )
+  recordKind$ = this.facade.record$.pipe(map((record) => record.kind))
 
   focusFieldWithPage$ = this.facade.focusedField$.pipe(
     switchMap(async (field) => {
@@ -112,4 +120,37 @@ export class RecordFormComponent implements OnInit, OnDestroy {
       .findIndex((s) => s.fields.some((f) => f.model === model))
     return { page, section }
   }
+
+  private recordSignal = toSignal(this.facade.record$, { requireSync: true })
+  private expressionCache = new Map<string, Signal<EditorFieldValue>>()
+
+  // only compiles the expression into an evaluator the first time;
+  // then we store a computed() signal in the cache so that the evaluator is
+  // run again if the record changes
+  evaluateExpression(
+    expressionOrValue: string | EditorFieldValue
+  ): Signal<EditorFieldValue> {
+    if (!isExpression(expressionOrValue)) {
+      return signal(expressionOrValue as EditorFieldValue)
+    }
+    const expression = expressionOrValue as string
+    if (this.expressionCache.has(expression)) {
+      return this.expressionCache.get(expression)
+    }
+    const { evaluator, errors } = evaluate(expression)
+    if (errors.length) {
+      console.error(`The following errors happened while evaluating the expression '${expression}':
+${errors.map((err) => `> ${err}`).join('\n')}`)
+      this.notifications.showNotification({
+        type: 'warning',
+        title: 'Technical error',
+        text: 'An error happened while evaluating an expression inside the editor configuration; open the developer console for more information',
+      })
+    }
+    this.expressionCache.set(
+      expression,
+      computed(() => evaluator({ globals: { record: this.recordSignal() } }))
+    )
+    return this.expressionCache.get(expression)
+  }
 }