geonetwork-ui 2.10.0-dev.e97ea6950 → 2.10.0-dev.f1c00d5fe

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

@@ -4,6 +4,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   Output,
   ViewChild,
@@ -17,11 +18,18 @@ 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,
   FormFieldDateComponent,
   FormFieldLicenseComponent,
   FormFieldTemporalExtentsComponent,
@@ -36,6 +44,7 @@ import { FormFieldContactsComponent } from './form-field-contacts/form-field-con
 import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
 import { FormFieldOnlineLinkResourcesComponent } from './form-field-online-link-resources/form-field-online-link-resources.component'
 import { FormFieldOnlineResourcesComponent } from './form-field-online-resources/form-field-online-resources.component'
+import { FormFieldOnlineSingleLinkResourceComponent } from './form-field-online-single-link-resource/form-field-online-single-link-resource.component'
 import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-overviews.component'
 import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
 import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
@@ -70,16 +79,21 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldContactsForResourceComponent,
     FormFieldOnlineResourcesComponent,
     FormFieldOnlineLinkResourcesComponent,
+    FormFieldOnlineSingleLinkResourceComponent,
     FormFieldContactsComponent,
     FormFieldConstraintsComponent,
     FormFieldConstraintsShortcutsComponent,
     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
@@ -92,6 +106,8 @@ export class FormFieldComponent {
   @ViewChild('titleInput') titleInput: ElementRef
   isOpenData = false
 
+  fieldFocus = inject(FieldFocusDirective)
+
   toggleIsOpenData(event: boolean) {
     this.isOpenData = event
   }

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

@@ -1,3 +1,4 @@
+export * from './field-focus.directive'
 export * from './form-field-keywords/form-field-keywords.component'
 export * from './form-field-license/form-field-license.component'
 export * from './form-field-date/form-field-date.component'

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

@@ -0,0 +1,35 @@
+/* Glow applied by FieldFocusDirective (gnUiFieldFocus) to a focused field or,
+   when the field is hidden, to its whole section. */
+.gn-ui-field-focus-glow {
+  position: relative;
+}
+
+.gn-ui-field-focus-glow::after {
+  content: '';
+  position: absolute;
+  inset: -8px;
+  border-radius: 8px;
+  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  pointer-events: none;
+  animation: gn-ui-field-focus-glow 3s ease-out forwards;
+}
+
+.gn-ui-field-focus-glow::before {
+  content: '';
+  position: absolute;
+  inset: -16px;
+  border: 2px dashed var(--color-primary);
+  border-radius: 10px;
+  pointer-events: none;
+  animation: gn-ui-field-focus-glow 3s ease-out forwards;
+}
+
+@keyframes gn-ui-field-focus-glow {
+  0%,
+  55% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

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

@@ -3,16 +3,28 @@
     section of facade.currentSections$ | async;
     track sectionTracker($index, section)
   ) {
-    @if (!section.hidden) {
-      <div class="flex flex-col gap-6 border p-8 rounded-[8px] shadow">
+    @if (evaluateExpression(section.hidden)() !== true) {
+      <div
+        class="flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px] bg-white"
+        gnUiFieldFocus
+        #sectionFocus="fieldFocus"
+      >
         <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>
           }
@@ -22,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
@@ -30,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

@@ -1,15 +1,29 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  OnDestroy,
+  OnInit,
+  Signal,
+  signal,
+  viewChildren,
+} from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
 import { EditorFieldValue } from '../../models'
-import { FormFieldComponent } from './form-field'
+import { FieldFocusDirective, FormFieldComponent } from './form-field'
 import { TranslateDirective } from '@ngx-translate/core'
 import {
   EditorFieldWithValue,
   EditorSectionWithValues,
 } from '../../+state/editor.models'
-import { map } from 'rxjs'
+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',
@@ -17,14 +31,64 @@ import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/l
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, FormFieldComponent, TranslateDirective],
+  imports: [
+    CommonModule,
+    FormFieldComponent,
+    FieldFocusDirective,
+    TranslateDirective,
+  ],
 })
-export class RecordFormComponent {
+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) => {
+      const location = await this.getFieldLocation(field)
+      return [field, location?.page ?? null, location?.section ?? -1] as const
+    })
+  )
+
+  formFields = viewChildren(FormFieldComponent)
+  sectionFocusDirectives = viewChildren<FieldFocusDirective>('sectionFocus')
+
+  focusField(model: CatalogRecordKeys, sectionIndex: number) {
+    const field = this.formFields().find((f) => f.model === model)
+    if (field) {
+      field.fieldFocus.focusField()
+      return
+    }
+    this.sectionFocusDirectives()[sectionIndex]?.focusField(false)
+  }
+
+  ngOnInit() {
+    this.subscription.add(
+      this.focusFieldWithPage$
+        .pipe(
+          withLatestFrom(
+            this.facade.currentPage$,
+            ([field, fieldPage, fieldSection], currentPage) =>
+              [field, fieldPage, fieldSection, currentPage] as const
+          )
+        )
+        .subscribe(([field, fieldPage, fieldSection, currentPage]) => {
+          if (fieldPage !== null && fieldPage !== currentPage) {
+            this.facade.setCurrentPage(fieldPage)
+          }
+          setTimeout(() => this.focusField(field, fieldSection))
+        })
+    )
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
 
   handleFieldValueChange(model: CatalogRecordKeys, newValue: EditorFieldValue) {
     if (!model) {
@@ -40,4 +104,53 @@ export class RecordFormComponent {
   sectionTracker(index: number, section: EditorSectionWithValues) {
     return section.labelKey
   }
+
+  async getFieldLocation(
+    model: CatalogRecordKeys
+  ): Promise<{ page: number; section: number } | null> {
+    const config = await firstValueFrom(this.facade.editorConfig$)
+    const page = config.pages.findIndex((p) =>
+      p.sections.some((s) => s.fields.some((f) => f.model === model))
+    )
+    if (page < 0) {
+      return null
+    }
+    const section = config.pages[page].sections
+      .filter((s) => !s.hidden)
+      .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)
+  }
 }

package/src/libs/feature/editor/src/lib/expressions.ts

@@ -1,16 +1,388 @@
-import { EditorFieldState, EditorFieldValue } from './models/'
+import { EditorFieldValue } from './models/'
 
-export type ExpressionEvaluator = (field: EditorFieldState) => EditorFieldValue
+export interface EvaluationContext {
+  globals: Record<string, object>
+}
+
+export type ExpressionEvaluator = (
+  context: EvaluationContext
+) => EditorFieldValue
+
+const TOKEN_FUNCTION_CALL_START = '('
+const TOKEN_FUNCTION_CALL_END = ')'
+const TOKEN_PROPERTY_ACCESS = '.'
+const TOKEN_OPERATOR_TERNARY_FIRST = '?'
+const TOKEN_OPERATOR_TERNARY_SECOND = ':'
+const TOKEN_OPERATOR_LOGICAL = ['==', '!=']
+const TOKEN_STRING_LITERAL = ["'", '"']
+const TOKEN_GROUP_START = '('
+const TOKEN_GROUP_END = ')'
+
+// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence
+const OPERATORS_BY_PRECEDENCE: string[][] = [
+  [TOKEN_OPERATOR_TERNARY_FIRST, TOKEN_OPERATOR_TERNARY_SECOND],
+  TOKEN_OPERATOR_LOGICAL,
+]
+const ALL_OPERATORS = OPERATORS_BY_PRECEDENCE.flat()
+
+export interface CompilationContext {
+  errors: string[]
+}
+
+export function isExpression(input: unknown): boolean {
+  return typeof input === 'string' && /^\${.*}$/.test(input)
+}
+
+function readNext(input: string, start: number, length = 1): string {
+  return input.substring(start, start + length)
+}
 
-export function evaluate(expression: string): ExpressionEvaluator {
-  if (expression.match(/^\${.*}$/)) {
-    return evaluate(expression.slice(2, -1))
+/**
+ * Will continue looking until an operator is found at the same depth level
+ */
+function readUntilNextOperator(
+  input: string,
+  start: number,
+  currentOperator: string
+): string {
+  let pos = start
+  let result = ''
+  let depth = 0
+  while (pos < input.length) {
+    const isOperator = ALL_OPERATORS.some(
+      (token) => readNext(input, pos, token.length) === token
+    )
+    if (isOperator && depth === 0) {
+      const operatorPrecedence = OPERATORS_BY_PRECEDENCE.findIndex((tokens) =>
+        tokens.some((token) => readNext(input, pos, token.length) === token)
+      )
+      const currentPrecedence =
+        OPERATORS_BY_PRECEDENCE.findIndex((tokens) =>
+          tokens.some((token) => currentOperator === token)
+        ) ?? -1
+      // the new operator has a lower precedence than the current one: we stop here
+      if (operatorPrecedence < currentPrecedence) {
+        return result
+      }
+    }
+    if (input[pos] === TOKEN_GROUP_START) {
+      depth++
+    } else if (input[pos] === TOKEN_GROUP_END) {
+      depth--
+    }
+    if (depth < 0) {
+      return result
+    }
+    result += input[pos]
+    pos++
   }
-  const operator = expression.split('(')[0]
-  switch (operator) {
+  return result
+}
+
+/**
+ * Will look for a specific character or string situated at the same depth level!
+ * Returns null if nothing found
+ */
+function readUntil(input: string, start: number, char: string): string | null {
+  let pos = start
+  let result = ''
+  let depth = 0
+  while (pos < input.length) {
+    if (depth === 0 && readNext(input, pos, char.length) === char) {
+      return result
+    }
+    if (input[pos] === TOKEN_GROUP_START) {
+      depth++
+    } else if (input[pos] === TOKEN_GROUP_END) {
+      depth--
+    }
+    if (depth < 0) {
+      return null
+    }
+    result += input[pos]
+    pos++
+  }
+  return null
+}
+
+function getFunctionEvaluator(
+  functionName: string,
+  context: CompilationContext
+): ExpressionEvaluator {
+  switch (functionName) {
     case 'dateNow':
       return () => new Date()
     default:
-      throw new Error(`Unknown operator: ${operator}`)
+      context.errors.push(`Unknown function: ${functionName}`)
+      return () => undefined
+  }
+}
+
+/**
+ * This evaluates an expression using a very light subset of Javascript.
+ *
+ * Things allowed in expressions are:
+ * - comparing values with == and !=
+ * - ternary comparisons with a ? b : c
+ * - grouping with (...)
+ * - functions: for now only dateNow() is supported and returns a timestamp
+ * - access to globals such as record.type
+ *
+ * Expressions are turned into an evaluator that can be called with a context containing the globals.
+ * Expressions can return any primitive Javascript type
+ * Valid expressions should always be enclosed in ${...}
+ */
+export function evaluate(expression: string): {
+  evaluator: ExpressionEvaluator
+  errors: string[]
+} {
+  if (!/^\${.*}$/.test(expression)) {
+    throw new Error('Malformed expression: missing ${} enclosure')
+  }
+  const context = {
+    errors: [],
+  }
+  const trimmedExpression = expression.slice(2, -1)
+  return evaluateInternal(trimmedExpression, context)
+}
+
+function evaluateInternal(
+  expression: string,
+  currentContext: CompilationContext
+): { evaluator: ExpressionEvaluator; errors: string[] } {
+  let pos = 0
+  let currentSymbol = null
+  let currentEvaluator: ExpressionEvaluator = () => undefined
+
+  while (pos < expression.length) {
+    const isWhitespace = /\s/.test(readNext(expression, pos))
+    if (isWhitespace) {
+      pos++
+      continue
+    }
+
+    // SYMBOL (NAME)
+    const isSymbol = /[a-zA-Z]/.test(readNext(expression, pos))
+    if (isSymbol) {
+      currentSymbol = ''
+      while (pos < expression.length) {
+        if (!/[a-zA-Z]/.test(readNext(expression, pos))) {
+          break
+        }
+        currentSymbol += readNext(expression, pos)
+        pos++
+      }
+      continue
+    }
+
+    // FUNCTION CALL
+    const isFunctionCall =
+      currentSymbol && readNext(expression, pos) === TOKEN_FUNCTION_CALL_START
+    if (isFunctionCall) {
+      pos++
+      // no support for arguments for now (not needed)
+      if (readNext(expression, pos) !== TOKEN_FUNCTION_CALL_END) {
+        currentContext.errors.push(
+          `Expected token '${TOKEN_FUNCTION_CALL_END}' at position ${pos}, got '${readNext(expression, pos)}' instead`
+        )
+        break
+      }
+      pos++
+      currentEvaluator = getFunctionEvaluator(currentSymbol, currentContext)
+      currentSymbol = null
+      continue
+    }
+
+    // PROPERTY ACCESS (single level)
+    const isPropertyAccess =
+      currentSymbol && readNext(expression, pos) === TOKEN_PROPERTY_ACCESS
+    if (isPropertyAccess) {
+      pos++
+      if (!/[a-zA-Z]/.test(readNext(expression, pos))) {
+        currentContext.errors.push(
+          `Expected a property name after '${TOKEN_PROPERTY_ACCESS}' at position ${pos}, got '${readNext(expression, pos)}' instead`
+        )
+        break
+      }
+      let propertyName = ''
+      while (pos < expression.length) {
+        if (!/[a-zA-Z]/.test(readNext(expression, pos))) {
+          break
+        }
+        propertyName += readNext(expression, pos)
+        pos++
+      }
+      const variableName = currentSymbol
+      currentEvaluator = (context) => {
+        if (
+          !Object.prototype.hasOwnProperty.call(context.globals, variableName)
+        ) {
+          return undefined
+        }
+        if (
+          !Object.prototype.hasOwnProperty.call(
+            context.globals[variableName],
+            propertyName
+          )
+        ) {
+          return undefined
+        }
+        return context.globals[variableName][propertyName]
+      }
+      currentSymbol = null
+      continue
+    }
+
+    // we have a symbol but did not do either function call or property access => error
+    if (currentSymbol) {
+      currentContext.errors.push(
+        `Expected a function call or property access after symbol '${currentSymbol}' at position ${pos}, got '${readNext(expression, pos)}' instead`
+      )
+      break
+    }
+
+    // GROUP OPERATOR
+    const isGroupStart = readNext(expression, pos) === TOKEN_GROUP_START
+    if (isGroupStart) {
+      pos++
+      const groupExpression = readUntil(expression, pos, TOKEN_GROUP_END)
+      if (groupExpression === null) {
+        currentContext.errors.push(
+          `Reached end of expression before finding expected token '${TOKEN_GROUP_END}'`
+        )
+        break
+      }
+      pos += groupExpression.length + 1
+      currentEvaluator = evaluateInternal(
+        groupExpression,
+        currentContext
+      ).evaluator
+      continue
+    }
+
+    // LOGICAL OPERATORS
+    const isLogicalOperator = TOKEN_OPERATOR_LOGICAL.some(
+      (token) => readNext(expression, pos, token.length) === token
+    )
+    if (isLogicalOperator) {
+      const matchingOperator = TOKEN_OPERATOR_LOGICAL.find(
+        (token) => readNext(expression, pos, token.length) === token
+      )
+      const isEqual = matchingOperator.startsWith('=')
+      pos += matchingOperator.length
+      const comparedEvaluator = currentEvaluator
+      const comparedToExpression = readUntilNextOperator(
+        expression,
+        pos,
+        matchingOperator
+      )
+      pos += comparedToExpression.length
+      const comparedToEvaluator = evaluateInternal(
+        comparedToExpression,
+        currentContext
+      ).evaluator
+
+      currentEvaluator = (context) => {
+        return (
+          (comparedEvaluator(context) == comparedToEvaluator(context)) ===
+          isEqual
+        )
+      }
+      continue
+    }
+
+    // TERNARY OPERATOR
+    const isTernary = readNext(expression, pos) === TOKEN_OPERATOR_TERNARY_FIRST
+    if (isTernary) {
+      if (!currentEvaluator) {
+        currentContext.errors.push(
+          `Expected an expression before '${TOKEN_OPERATOR_TERNARY_FIRST}' at position ${pos} but could not find any`
+        )
+        break
+      }
+      pos++
+      const ifTrueExpression = readUntil(
+        expression,
+        pos,
+        TOKEN_OPERATOR_TERNARY_SECOND
+      )
+      if (ifTrueExpression === null) {
+        currentContext.errors.push(
+          `Reached end of expression before finding expected token '${TOKEN_OPERATOR_TERNARY_SECOND}'`
+        )
+        break
+      }
+      pos += ifTrueExpression.length + 1
+
+      const ifFalseExpression = readUntilNextOperator(
+        expression,
+        pos,
+        TOKEN_OPERATOR_TERNARY_FIRST
+      )
+      pos += ifFalseExpression.length
+
+      const conditionEvaluator = currentEvaluator
+      const ifTrueEvaluator = evaluateInternal(
+        ifTrueExpression,
+        currentContext
+      ).evaluator
+      const ifFalseEvaluator = evaluateInternal(
+        ifFalseExpression,
+        currentContext
+      ).evaluator
+      currentEvaluator = (context) => {
+        if (conditionEvaluator(context)) {
+          return ifTrueEvaluator(context)
+        }
+        return ifFalseEvaluator(context)
+      }
+      continue
+    }
+
+    // STRING LITERAL
+    const isStringLiteral = TOKEN_STRING_LITERAL.some(
+      (token) => readNext(expression, pos) === token
+    )
+    if (isStringLiteral) {
+      const openingToken = readNext(expression, pos)
+      pos++
+      const literal = readUntil(expression, pos, openingToken)
+      if (literal === null) {
+        currentContext.errors.push(
+          `Reached end of expression before finding corresponding closing token ${openingToken} for string literal`
+        )
+        break
+      }
+      pos += literal.length + 1
+      currentEvaluator = () => literal
+      continue
+    }
+
+    // NUMBER LITERAL
+    const isNumberLiteral = /[0-9]/.test(readNext(expression, pos))
+    if (isNumberLiteral) {
+      let literal = ''
+      while (pos < expression.length) {
+        if (!/[0-9]/.test(readNext(expression, pos))) {
+          break
+        }
+        literal += readNext(expression, pos)
+        pos++
+      }
+      const numberLiteral = parseInt(literal, 10)
+      currentEvaluator = () => numberLiteral
+      continue
+    }
+
+    // could not figure out what that was: leave
+    currentContext.errors.push(
+      `Unexpected character '${readNext(expression, pos)}' at position ${pos}`
+    )
+    break
+  }
+
+  return {
+    evaluator: currentEvaluator,
+    errors: currentContext.errors,
   }
 }