geonetwork-ui 2.11.0-dev.fb3fea50c → 2.11.0-dev.fb48cfeee

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

@@ -164,69 +164,49 @@ As such, **it is not very interesting at all.**`,
     extras: {
       isPublishedToAll: true,
       edit: true,
-      featureTypes: [
-        {
-          attributeTable: [
-            {
-              code: 'OBJECTID',
-              name: 'OBJECTID',
-              link: '',
-              definition: 'Object identifier',
-              type: 'OID',
-            },
-            {
-              code: 'NOM',
-              name: 'Nom',
-              link: '',
-              definition: 'Nom de la rue',
-              type: 'String (48)',
-              values: [
-                {
-                  code: 'Pomme',
-                  label: 'Les Pommiers',
-                  description: 'Sous les pommiers',
-                },
-                {
-                  code: 'Cotton',
-                  label: 'Rue Cotton',
-                  description: 'Rue Cotton',
-                },
-                { code: "Passage de l'échiquier" },
-                { description: 'Rue du Charlieu' },
-              ],
-            },
-            {
-              code: 'RUE',
-              name: 'Rue',
-              link: '',
-              definition: '',
-              type: 'String (50)',
-            },
-          ],
-          code: '',
-          aliases: '',
-          typeName: "Catalogue d'attributs N°1",
-          definition: 'Définition du catalogue d attributs N°1',
-          isAbstract: 'false',
-        },
-        {
-          attributeTable: [
-            {
-              code: 'UniqueObject',
-              name: 'unique object ',
-              link: '',
-              definition: 'this is the only object of this catalog',
-              type: 'String (50)',
-            },
-          ],
-          code: '',
-          aliases: '',
-          typeName: "Catalogue d'attributs N°2",
-          definition: 'Définition du catalogue d attributs N°2',
-          isAbstract: 'false',
-        },
-      ],
     },
+    featureTypeDescriptions: [
+      {
+        name: "Catalogue d'attributs N°1",
+        description: 'Définition du catalogue d attributs N°1',
+        attributes: [
+          {
+            name: 'OBJECTID',
+            description: 'Object identifier',
+            code: 'OBJECTID',
+            type: 'OID',
+          },
+          {
+            name: 'Nom',
+            description: 'Nom de la rue',
+            code: 'NOM',
+            type: 'String (48)',
+            values: [
+              { value: 'Pomme', label: 'Les Pommiers' },
+              { value: 'Cotton', label: 'Rue Cotton' },
+              { value: "Passage de l'échiquier" },
+            ],
+          },
+          {
+            name: 'Rue',
+            code: 'RUE',
+            type: 'String (50)',
+          },
+        ],
+      },
+      {
+        name: "Catalogue d'attributs N°2",
+        description: 'Définition du catalogue d attributs N°2',
+        attributes: [
+          {
+            name: 'unique object ',
+            description: 'this is the only object of this catalog',
+            code: 'UniqueObject',
+            type: 'String (50)',
+          },
+        ],
+      },
+    ],
   },
   {
     uniqueIdentifier: '7d002c4c-92ef-4b9f-a568-d732f740b99e',

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -209,7 +209,8 @@ export class DataService {
     ogcApiLink: DatasetServiceDistribution
   ): Promise<DatasetOnlineResource[]> {
     const collectionInfo = await this.getDownloadUrlsFromOgcApi(
-      ogcApiLink.url.href
+      ogcApiLink.url.href,
+      ogcApiLink.name
     )
 
     return Object.keys(collectionInfo.bulkDownloadLinks).map((mimeType) => {
@@ -229,31 +230,41 @@ export class DataService {
     })
   }
 
-  async getDownloadUrlsFromOgcApi(url: string): Promise<OgcApiCollectionInfo> {
+  private async getTargetCollectionId(
+    endpoint: OgcApiEndpoint,
+    collectionId?: string
+  ): Promise<string | undefined> {
+    const collections = await endpoint.featureCollections
+    return collections.length === 1 && !collectionId
+      ? collections[0]
+      : collectionId
+  }
+
+  async getDownloadUrlsFromOgcApi(
+    url: string,
+    collectionId?: string
+  ): Promise<OgcApiCollectionInfo> {
     const endpoint = new OgcApiEndpoint(url)
-    return await endpoint.featureCollections
-      .then((collections) => {
-        return endpoint.getCollectionInfo(collections[0])
-      })
-      .catch((error) => {
-        throw new Error(`ogc.unreachable.unknown`)
-      })
+    try {
+      const id = await this.getTargetCollectionId(endpoint, collectionId)
+      return await endpoint.getCollectionInfo(id)
+    } catch {
+      throw new Error('ogc.unreachable.unknown')
+    }
   }
 
   async getItemsFromOgcApi(
     url: string,
+    collectionId?: string,
     limit?: number
   ): Promise<OgcApiRecord[]> {
     const endpoint = new OgcApiEndpoint(url)
-    return await endpoint.featureCollections
-      .then((collections) => {
-        return collections.length
-          ? endpoint.getCollectionItems(collections[0], limit)
-          : null
-      })
-      .catch(() => {
-        throw new Error(`ogc.unreachable.unknown`)
-      })
+    try {
+      const id = await this.getTargetCollectionId(endpoint, collectionId)
+      return await endpoint.getCollectionItems(id, limit)
+    } catch {
+      throw new Error('ogc.unreachable.unknown')
+    }
   }
 
   async getItemsFromStacApi(
@@ -381,7 +392,9 @@ export class DataService {
       link.type === 'service' &&
       link.accessServiceProtocol === 'ogcFeatures'
     ) {
-      return from(this.getDownloadUrlsFromOgcApi(link.url.href)).pipe(
+      return from(
+        this.getDownloadUrlsFromOgcApi(link.url.href, link.name)
+      ).pipe(
         switchMap((collectionInfo) => {
           const isMimeTypeJson = (mimeType: string): boolean => {
             return mimeType.toLowerCase().indexOf('json') > -1

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

@@ -9,10 +9,7 @@ import {
 
 import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
 import { ConstraintCardComponent } from '../../../constraint-card/constraint-card.component'
-import {
-  CatalogRecordKeys,
-  Constraint,
-} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { Constraint } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { TranslatePipe } from '@ngx-translate/core'
@@ -22,6 +19,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirPlus } from '@ng-icons/iconoir'
+import { FormFieldModel } from '../../../../models'
 
 marker('editor.record.form.constraint.add.legalConstraints')
 marker('editor.record.form.constraint.add.securityConstraints')
@@ -53,7 +51,7 @@ marker('editor.record.form.constraint.header.otherConstraints')
 export class FormFieldConstraintsComponent implements OnInit {
   @Input() label: string
   @Input() value: Constraint[]
-  @Input() constraintType: CatalogRecordKeys
+  @Input() constraintType: FormFieldModel
   @Output() valueChange = new EventEmitter<Constraint[]>()
 
   constraintsHeader = ''

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

@@ -36,7 +36,7 @@ import {
 } from '../../../../../../../../../libs/util/shared/src'
 import { map } from 'rxjs/operators'
 import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
-import { FieldModelSpecifier } from '../../../../models/editor-config.model'
+import { FormFieldModelSpecifier } from '../../../../models/editor-config.model'
 
 @Component({
   selector: 'gn-ui-form-field-contacts',
@@ -59,7 +59,7 @@ export class FormFieldContactsComponent implements OnDestroy, OnChanges {
   private changeDetectorRef = inject(ChangeDetectorRef)
 
   @Input() value: Individual[]
-  @Input() modelSpecifier: FieldModelSpecifier
+  @Input() modelSpecifier: FormFieldModelSpecifier
   @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
 
   contacts: Individual[] = []

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

@@ -0,0 +1,18 @@
+<div class="flex-1 flex justify-between items-center">
+  <gn-ui-check-toggle
+    [label]="labelKey() | translate"
+    [value]="initialValue$ | async"
+    (toggled)="onToggle($event)"
+    [attr.data-cy]="'record-flag-toggle-' + flagName()"
+  ></gn-ui-check-toggle>
+
+  @if (hintKey()) {
+  <ng-icon
+    name="matHelpOutline"
+    size="16"
+    class="m-2"
+    [matTooltip]="hintKey() | translate"
+    matTooltipPosition="above"
+  ></ng-icon>
+  }
+</div>

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

@@ -0,0 +1,86 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+} from '@angular/core'
+import { AsyncPipe } from '@angular/common'
+import { CheckToggleComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { EditorFacade } from '../../../../+state/editor.facade'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { RecordFlag } from '../../../../../../../../../libs/common/domain/src/lib/model'
+import { RecordsRepositoryInterface } from '../../../../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { filter } from 'rxjs'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { MatTooltip } from '@angular/material/tooltip'
+import { map, switchMap } from 'rxjs/operators'
+import { matHelpOutline } from '@ng-icons/material-icons/outline'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+
+@Component({
+  selector: 'gn-ui-form-field-record-flag',
+  standalone: true,
+  imports: [AsyncPipe, CheckToggleComponent, TranslatePipe, NgIcon, MatTooltip],
+  viewProviders: [
+    provideIcons({
+      matHelpOutline,
+    }),
+  ],
+  templateUrl: './form-field-record-flag-component.html',
+  styleUrls: ['./form-field-record-flag-component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldRecordFlagComponent {
+  flagName = input<RecordFlag>()
+  labelKey = input<string>()
+  hintKey = input<string>()
+
+  private editorFacade = inject(EditorFacade)
+  private repository = inject(RecordsRepositoryInterface)
+  private notificationsService = inject(NotificationsService)
+  private translateService = inject(TranslateService)
+
+  private record = toSignal(this.editorFacade.record$)
+
+  recordKind = toSignal(
+    this.editorFacade.record$.pipe(map((record) => record.kind))
+  )
+  initialValue$ = this.editorFacade.record$.pipe(
+    filter((record) => !!record),
+    switchMap((record) =>
+      this.repository.getRecordFlag(record.uniqueIdentifier, this.flagName())
+    )
+  )
+
+  onToggle(enabled: boolean) {
+    if (this.record() === null) {
+      return
+    }
+    this.repository
+      .setRecordFlag(this.record().uniqueIdentifier, this.flagName(), enabled)
+      .subscribe({
+        next: () => {
+          // do nothing
+        },
+        error: (error) => {
+          this.notificationsService.showNotification(
+            {
+              type: 'error',
+              title: this.translateService.instant(
+                'editor.record.flag.saveError.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.flag.saveError.body',
+                {
+                  recordKind: this.recordKind(),
+                }
+              )} ${error.message}`,
+            },
+            undefined,
+            error
+          )
+        },
+      })
+  }
+}

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

@@ -7,23 +7,22 @@
   ></gn-ui-form-field-open-data>
 </ng-container> -->
 <div class="flex flex-col h-full">
-  <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
+  @if (withoutWrapper) {
     <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
-  </ng-container>
-  <ng-template #withGenericWrapper>
+  } @else {
     <gn-ui-form-field-wrapper
       [label]="config.labelKey! | translate: { recordKind }"
       [hint]="config.hintKey! | translate: { recordKind }"
     >
       <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
     </gn-ui-form-field-wrapper>
-  </ng-template>
+  }
 </div>
 
 <ng-template #fieldContent>
-  <ng-container [ngSwitch]="model">
-    <ng-container *ngSwitchCase="'title'">
-      <div class="flex flex-row flex-start items-center gap-3 mb-[12px]">
+  @switch (model) {
+    @case ('title') {
+      <div class="flex flex-row flex-start items-center gap-3">
         <textarea
           #titleInput
           cdkTextareaAutosize
@@ -45,158 +44,171 @@
             class="m-2 cursor-pointer"
             (click)="focusTitleInput()"
           ></ng-icon>
-          <ng-icon
-            *ngIf="config.hintKey"
-            name="matHelpOutline"
-            size="16"
-            class="m-2"
-            [matTooltip]="config.hintKey! | translate: { recordKind }"
-            matTooltipPosition="above"
-          ></ng-icon>
+          @if (config.hintKey) {
+            <ng-icon
+              name="matHelpOutline"
+              size="16"
+              class="m-2"
+              [matTooltip]="config.hintKey! | translate: { recordKind }"
+              matTooltipPosition="above"
+            ></ng-icon>
+          }
         </div>
       </div>
-    </ng-container>
-    <ng-container *ngSwitchCase="'abstract'">
+    }
+    @case ('abstract') {
       <gn-ui-form-field-rich
         [label]="config.labelKey! | translate: { recordKind }"
         [hint]="config.hintKey! | translate: { recordKind }"
         [value]="valueAsString"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-rich>
-    </ng-container>
-    <ng-container *ngSwitchCase="'overviews'">
+    }
+    @case ('overviews') {
       <gn-ui-form-field-overviews
         [metadataUuid]="uniqueIdentifier"
         [recordKind]="recordKind"
         [value]="valueAsOverviews"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-overviews>
-    </ng-container>
-    <ng-container *ngSwitchCase="'resourceIdentifiers'">
+    }
+    @case ('resourceIdentifiers') {
       <gn-ui-form-field-simple
         [type]="'text'"
         [value]="valueAsResourceIdentifierCode"
         (valueChange)="handleResourceIdentifierChange($event)"
       ></gn-ui-form-field-simple>
-    </ng-container>
-    <ng-container *ngSwitchCase="'resourceCreated'">
+    }
+    @case ('resourceCreated') {
       <gn-ui-form-field-date
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-date>
-    </ng-container>
-    <ng-container *ngSwitchCase="'resourceUpdated'">
+    }
+    @case ('resourceUpdated') {
       <gn-ui-form-field-date
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-date>
-    </ng-container>
-    <ng-container *ngSwitchCase="'updateFrequency'">
+    }
+    @case ('updateFrequency') {
       <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="'associatedRecords'">
+    }
+    @case ('associatedRecords') {
       <gn-ui-form-field-associated-records
         [value]="valueAsAssociatedRecords"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-associated-records>
-    </ng-container>
-    <ng-container *ngSwitchCase="'temporalExtents'">
+    }
+    @case ('temporalExtents') {
       <gn-ui-form-field-temporal-extents
         [value]="valueAsTemporalExtents"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-temporal-extents>
-    </ng-container>
-    <ng-container *ngSwitchCase="'spatialExtents'">
+    }
+    @case ('spatialExtents') {
       <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
-    </ng-container>
-    <ng-container *ngSwitchCase="'keywords'">
+    }
+    @case ('keywords') {
       <gn-ui-form-field-keywords
         [value]="valueAsKeywords"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-keywords>
-    </ng-container>
-    <ng-container *ngSwitchCase="'topics'">
+    }
+    @case ('topics') {
       <gn-ui-form-field-topics
         [value]="valueAsTopics"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-topics>
-    </ng-container>
-    <ng-container *ngSwitchCase="'licenses'">
+    }
+    @case ('licenses') {
       <gn-ui-form-field-license
         [label]="config.labelKey! | translate: { recordKind }"
         [recordLicences]="valueAsConstraints"
         (recordLicencesChange)="valueChange.emit($event)"
       ></gn-ui-form-field-license>
-    </ng-container>
+    }
 
-    <ng-container *ngSwitchCase="'legalConstraints'">
-      <ng-container *ngTemplateOutlet="formFieldConstraints"></ng-container>
-    </ng-container>
-    <ng-container *ngSwitchCase="'securityConstraints'">
-      <ng-container *ngTemplateOutlet="formFieldConstraints"></ng-container>
-    </ng-container>
-    <ng-container *ngSwitchCase="'otherConstraints'">
-      <ng-container *ngTemplateOutlet="formFieldConstraints"></ng-container
-    ></ng-container>
-    <ng-template #formFieldConstraints>
+    <!-- TODO: merge these cases together when migrated to angular 21 -->
+    @case ('legalConstraints') {
+      <gn-ui-form-field-constraints
+        [label]="config.labelKey"
+        [value]="valueAsConstraints"
+        [constraintType]="model"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-constraints>
+    }
+    @case ('securityConstraints') {
+      <gn-ui-form-field-constraints
+        [label]="config.labelKey"
+        [value]="valueAsConstraints"
+        [constraintType]="model"
+        (valueChange)="valueChange.emit($event)"
+      ></gn-ui-form-field-constraints>
+    }
+    @case ('otherConstraints') {
       <gn-ui-form-field-constraints
         [label]="config.labelKey"
         [value]="valueAsConstraints"
         [constraintType]="model"
         (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-constraints
-    ></ng-template>
+      ></gn-ui-form-field-constraints>
+    }
 
-    <ng-container *ngSwitchCase="'contactsForResource'">
+    @case ('contactsForResource') {
       <gn-ui-form-field-contacts-for-resource
         [value]="valueAsIndividuals"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-contacts-for-resource>
-    </ng-container>
-    <ng-container *ngSwitchCase="'contacts'">
+    }
+    @case ('contacts') {
       <gn-ui-form-field-contacts
         [value]="valueAsIndividuals"
         [modelSpecifier]="modelSpecifier"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-contacts>
-    </ng-container>
-    <ng-container *ngSwitchCase="'onlineResources'">
-      <gn-ui-form-field-online-resources
-        *ngIf="modelSpecifier === 'onlineResourceType:!link'"
-        [metadataUuid]="uniqueIdentifier"
-        [value]="valueAsOnlineResources"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-online-resources>
-    </ng-container>
-    <ng-container *ngSwitchCase="'onlineResources'">
-      <gn-ui-form-field-online-link-resources
-        *ngIf="modelSpecifier === 'onlineResourceType:link'"
-        [metadataUuid]="uniqueIdentifier"
-        [value]="valueAsOnlineResources"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-online-link-resources>
-    </ng-container>
-    <ng-container *ngSwitchCase="'onlineResources'">
-      <gn-ui-form-field-online-single-link-resource
-        *ngIf="modelSpecifier === 'onlineResourceType:singleLink'"
-        [value]="valueAsOnlineResources"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-online-single-link-resource>
-    </ng-container>
-  </ng-container>
+    }
+    @case ('onlineResources') {
+      @if (modelSpecifier === 'onlineResourceType:!link') {
+        <gn-ui-form-field-online-resources
+          [metadataUuid]="uniqueIdentifier"
+          [value]="valueAsOnlineResources"
+          (valueChange)="valueChange.emit($event)"
+        ></gn-ui-form-field-online-resources>
+      } @else if (modelSpecifier === 'onlineResourceType:link') {
+        <gn-ui-form-field-online-link-resources
+          [metadataUuid]="uniqueIdentifier"
+          [value]="valueAsOnlineResources"
+          (valueChange)="valueChange.emit($event)"
+        ></gn-ui-form-field-online-link-resources>
+      } @else if (modelSpecifier === 'onlineResourceType:singleLink') {
+        <gn-ui-form-field-online-single-link-resource
+          [value]="valueAsOnlineResources"
+          (valueChange)="valueChange.emit($event)"
+        ></gn-ui-form-field-online-single-link-resource>
+      }
+    }
+    @case ('flags') {
+      <gn-ui-form-field-record-flag
+        [flagName]="recordFlag"
+        [labelKey]="config.labelKey"
+        [hintKey]="config.hintKey"
+      ></gn-ui-form-field-record-flag>
+    }
+  }
 
-  <ng-container *ngIf="!model">
-    <ng-container [ngSwitch]="componentName">
-      <ng-container *ngSwitchCase="'form-field-constraints-shortcuts'">
+  @if (!model) {
+    @switch (componentName) {
+      @case ('form-field-constraints-shortcuts') {
         <gn-ui-form-field-constraints-shortcuts></gn-ui-form-field-constraints-shortcuts>
-      </ng-container>
-      <ng-container *ngSwitchCase="'form-field-spatial-toggle'">
+      }
+      @case ('form-field-spatial-toggle') {
         <gn-ui-form-field-spatial-toggle></gn-ui-form-field-spatial-toggle>
-      </ng-container>
-    </ng-container>
-  </ng-container>
+      }
+    }
+  }
 </ng-template>