geonetwork-ui 2.4.1-dev.7a0dc5e3f → 2.4.1-dev.9ee0df3df

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

@@ -2,8 +2,10 @@ import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
   OnChanges,
+  Output,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { MatRadioModule } from '@angular/material/radio'
@@ -13,8 +15,18 @@ import {
   DatasetServiceDistribution,
   ServiceProtocol,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
-import { TextInputComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  ButtonComponent,
+  TextInputComponent,
+  UrlInputComponent,
+} from '../../../../../../../libs/ui/inputs/src'
 import { TranslateModule } from '@ngx-translate/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirCloudUpload } from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-online-service-resource-input',
@@ -23,20 +35,35 @@ import { TranslateModule } from '@ngx-translate/core'
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
+    ButtonComponent,
     CommonModule,
+    FormsModule,
     MatTooltipModule,
     MatRadioModule,
-    FormsModule,
+    NgIconComponent,
     TextInputComponent,
     TranslateModule,
+    UrlInputComponent,
+  ],
+  providers: [
+    provideIcons({ iconoirCloudUpload }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class OnlineServiceResourceInputComponent implements OnChanges {
   @Input() service: Omit<DatasetServiceDistribution, 'url'>
   @Input() protocolHint?: string
   @Input() disabled? = false
+  @Output() urlChange: EventEmitter<string> = new EventEmitter()
+  @Output() identifierSubmit: EventEmitter<{
+    url: string
+    identifier: string
+  }> = new EventEmitter()
 
   selectedProtocol: ServiceProtocol
+  url: string
 
   protocolOptions: {
     label: string
@@ -78,4 +105,22 @@ export class OnlineServiceResourceInputComponent implements OnChanges {
         (option) => option.value === this.service.accessServiceProtocol
       )?.value ?? 'other'
   }
+
+  handleUrlChange(url: string) {
+    this.url = url
+  }
+
+  submitIdentifier(identifier: string) {
+    if (!identifier) return
+    this.identifierSubmit.emit({ url: this.url, identifier })
+    this.service.identifierInService = null
+  }
+
+  getIdentifierPlaceholder(): string {
+    const baseKey =
+      'editor.record.form.field.onlineResource.edit.identifier.placeholder'
+    return this.service.accessServiceProtocol === 'wps'
+      ? `${baseKey}.wps`
+      : baseKey
+  }
 }

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

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

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

@@ -23,13 +23,9 @@
     <gn-ui-online-service-resource-input
       [service]="newService"
       [disabled]="disabled$ | async"
+      (urlChange)="handleServiceUrlChange($event)"
+      (identifierSubmit)="handleIdentifierSubmit($event)"
     ></gn-ui-online-service-resource-input>
-    <span class="w-full border-b border-gray-300"></span>
-    <gn-ui-url-input
-      class="w-full"
-      (uploadClick)="handleServiceUrlChange($event)"
-      [disabled]="disabled$ | async"
-    ></gn-ui-url-input>
   </div>
   <div class="h-[8px]"></div>
   <gn-ui-sortable-list
@@ -73,7 +69,7 @@
         class="w-full"
         [disabled]="true"
         [value]="onlineResource.url"
-        [showUploadButton]="false"
+        [showValidateButton]="false"
       ></gn-ui-url-input>
     </div>
   </ng-template>

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

@@ -174,6 +174,16 @@ export class FormFieldOnlineResourcesComponent {
     ])
   }
 
+  handleIdentifierSubmit(payload: { url: string; identifier: string }) {
+    this.valueChange.emit([
+      ...this.allResources,
+      {
+        ...this.newService,
+        url: new URL(payload.url),
+      },
+    ])
+  }
+
   handleServiceModify(
     oldService: DatasetServiceDistribution,
     newService: DatasetServiceDistribution

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

@@ -8,7 +8,7 @@ import {
   Output,
 } from '@angular/core'
 import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
-import { ImageInputComponent } from '../../../../../../../../../libs/ui/inputs/src'
+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'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'

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

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-8">
+<div class="flex flex-col gap-3">
   <gn-ui-generic-keywords
     [placeholder]="'Search for place keywords'"
     [keywords]="shownKeywords$ | async"
@@ -7,9 +7,9 @@
     (addedKeyword)="handleKeywordAdd($event)"
   >
   </gn-ui-generic-keywords>
-</div>
-<div class="w-full h-96 mt-2">
-  <gn-ui-form-field-map-container
-    [spatialExtents]="spatialExtents$ | async"
-  ></gn-ui-form-field-map-container>
+  <div class="w-full h-96 mt-2">
+    <gn-ui-form-field-map-container
+      [spatialExtents]="spatialExtents$ | async"
+    ></gn-ui-form-field-map-container>
+  </div>
 </div>

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

@@ -8,6 +8,8 @@ import {
 } from '@angular/core'
 import {
   UpdateFrequency,
+  UpdateFrequencyCode,
+  updateFrequencyCodeValues,
   UpdateFrequencyCustom,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import {
@@ -18,6 +20,10 @@ import {
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { firstValueFrom } from 'rxjs'
 
+const initialListValues = updateFrequencyCodeValues.filter(
+  (code) => !['unknown', 'notPlanned', 'asNeeded', 'irregular'].includes(code)
+)
+
 @Component({
   selector: 'gn-ui-form-field-update-frequency',
   templateUrl: './form-field-update-frequency.component.html',
@@ -33,20 +39,39 @@ export class FormFieldUpdateFrequencyComponent implements OnInit {
   protected choices: DropdownChoice[] = []
 
   get planned() {
-    return typeof this.value !== 'string'
+    return this.value && this.value !== 'notPlanned' && this.value !== 'unknown'
   }
 
   constructor(private translateService: TranslateService) {}
 
   async ngOnInit() {
     this.choices = await this.getInitialChoices()
+    if (!this.planned) {
+      return
+    }
+    if (
+      typeof this.value === 'string' &&
+      !this.choices.map((choice) => choice.value).includes(this.value)
+    ) {
+      this.choices = [
+        {
+          value: this.value,
+          label: await firstValueFrom(
+            this.translateService.get(
+              `domain.record.updateFrequency.${this.value}`
+            )
+          ),
+        },
+        ...this.choices,
+      ]
+    }
     if (typeof this.value === 'string') {
       return
     }
     const updatedTimes = this.value.updatedTimes
     const per = this.value.per
     // the update frequency is not in the list; make it appear there
-    if (updatedTimes && updatedTimes !== 1 && updatedTimes !== 2) {
+    if (updatedTimes) {
       this.choices = [
         {
           value: `${per}.${updatedTimes}`,
@@ -65,90 +90,37 @@ export class FormFieldUpdateFrequencyComponent implements OnInit {
     if (this.planned) {
       this.valueChange.emit('notPlanned')
     } else {
-      this.valueChange.emit({ updatedTimes: 1, per: 'day' })
+      this.valueChange.emit(this.choices[0].value as UpdateFrequencyCode)
     }
   }
 
   get selectedFrequency(): string {
-    if (!this.value || typeof this.value === 'string') return null
+    if (!this.value) return null
+    if (typeof this.value === 'string') return this.value
     const { updatedTimes, per } = this.value
     return `${per}.${updatedTimes}`
   }
 
-  onSelectFrequencyValue(value: unknown) {
-    const split = (value as string).split('.')
-    this.valueChange.emit({
-      updatedTimes: Number(split[1]),
-      per: split[0] as UpdateFrequencyCustom['per'],
-    })
+  onSelectFrequencyValue(value: string) {
+    if (!value.includes('.')) {
+      this.valueChange.emit(value as UpdateFrequencyCode)
+    } else {
+      const split = (value as string).split('.')
+      this.valueChange.emit({
+        updatedTimes: Number(split[1]),
+        per: split[0] as UpdateFrequencyCustom['per'],
+      })
+    }
   }
 
   private async getInitialChoices() {
-    return [
-      {
-        value: 'day.1',
-        label: await firstValueFrom(
-          this.translateService.get('domain.record.updateFrequency.day', {
-            count: 1,
-          })
-        ),
-      },
-      {
-        value: 'day.2',
-        label: await firstValueFrom(
-          this.translateService.get('domain.record.updateFrequency.day', {
-            count: 2,
-          })
-        ),
-      },
-      {
-        value: 'week.1',
-        label: await firstValueFrom(
-          this.translateService.get('domain.record.updateFrequency.week', {
-            count: 1,
-          })
-        ),
-      },
-      {
-        value: 'week.2',
-        label: await firstValueFrom(
-          this.translateService.get('domain.record.updateFrequency.week', {
-            count: 2,
-          })
-        ),
-      },
-      {
-        value: 'month.1',
-        label: await firstValueFrom(
-          this.translateService.get('domain.record.updateFrequency.month', {
-            count: 1,
-          })
-        ),
-      },
-      {
-        value: 'month.2',
-        label: await firstValueFrom(
-          this.translateService.get('domain.record.updateFrequency.month', {
-            count: 2,
-          })
-        ),
-      },
-      {
-        value: 'year.1',
-        label: await firstValueFrom(
-          this.translateService.get('domain.record.updateFrequency.year', {
-            count: 1,
-          })
-        ),
-      },
-      {
-        value: 'year.2',
+    return Promise.all(
+      initialListValues.map(async (value) => ({
+        value,
         label: await firstValueFrom(
-          this.translateService.get('domain.record.updateFrequency.year', {
-            count: 2,
-          })
+          this.translateService.get(`domain.record.updateFrequency.${value}`)
         ),
-      },
-    ]
+      }))
+    )
   }
 }

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

@@ -30,7 +30,7 @@
           #autosize="cdkTextareaAutosize"
           cdkAutosizeMinRows="1"
           data-test="recordTitleInput"
-          class="grow font-title text-3xl font-normal overflow-hidden"
+          class="grow font-title text-3xl font-normal overflow-hidden text-black/80"
           (change)="valueChange.emit($event.target.value)"
           [placeholder]="
             'editor.record.form.field.title.placeholder' | translate

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

@@ -6,14 +6,11 @@
     "
   >
     <ng-container *ngIf="!section.hidden">
-      <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
-        <div
-          class="flex flex-col gap-2"
-          [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
-        >
+      <div class="flex flex-col gap-6 border p-8 rounded-[8px] shadow">
+        <div class="flex flex-col gap-2">
           <div
             *ngIf="section.labelKey"
-            class="text-2xl font-title text-main"
+            class="text-2xl font-title text-black"
             translate
           >
             {{ section.labelKey }}

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

@@ -61,9 +61,7 @@ export const RECORD_LICENSE_FIELD: EditorField = {
 
 export const RECORD_KEYWORDS_FIELD: EditorField = {
   model: 'keywords',
-  formFieldConfig: {
-    labelKey: marker('editor.record.form.field.keywords'),
-  },
+  formFieldConfig: {},
 }
 
 export const RECORD_RESOURCE_CREATED_FIELD: EditorField = {
@@ -156,25 +154,19 @@ export const RECORD_SPATIAL_TOGGLE_FIELD: EditorField = {
 
 export const RECORD_SPATIAL_EXTENTS_FIELD: EditorField = {
   model: 'spatialExtents',
-  formFieldConfig: {
-    labelKey: marker('editor.record.form.field.spatialExtents'),
-  },
+  formFieldConfig: {},
 }
 
 export const RECORD_ONLINE_RESOURCES: EditorField = {
   model: 'onlineResources',
   modelSpecifier: 'onlineResourceType:!link',
-  formFieldConfig: {
-    labelKey: marker('editor.record.form.field.onlineResources'),
-  },
+  formFieldConfig: {},
 }
 
 export const RECORD_ONLINE_LINK_RESOURCES: EditorField = {
   model: 'onlineResources',
   modelSpecifier: 'onlineResourceType:link',
-  formFieldConfig: {
-    labelKey: marker('editor.record.form.field.onlineLinkResources'),
-  },
+  formFieldConfig: {},
 }
 
 /************************************************************
@@ -273,7 +265,12 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
   pages: [
     {
       labelKey: marker('editor.record.form.page.description'),
-      sections: [TITLE_SECTION, ABOUT_SECTION, GEOGRAPHICAL_COVERAGE_SECTION],
+      sections: [
+        TITLE_SECTION,
+        ABOUT_SECTION,
+        CLASSIFICATION_SECTION,
+        GEOGRAPHICAL_COVERAGE_SECTION,
+      ],
     },
     {
       labelKey: marker('editor.record.form.page.ressources'),
@@ -282,7 +279,6 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
     {
       labelKey: marker('editor.record.form.page.accessAndContact'),
       sections: [
-        CLASSIFICATION_SECTION,
         USE_AND_ACCESS_CONDITIONS_SECTION,
         DATA_MANAGERS_SECTION,
         METADATA_POINT_OF_CONTACT_SECTION,

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

@@ -5,6 +5,7 @@ export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
 export * from './lib/error/error.component'
+export * from './lib/image-input/image-input.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
@@ -19,5 +20,5 @@ export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
-export * from './lib/user-preview/user-preview.component'
 export * from './lib/user-feedback-item/user-feedback-item.component'
+export * from './lib/user-preview/user-preview.component'

package/src/libs/ui/{inputs → elements}/src/lib/image-input/image-input.component.html

@@ -2,31 +2,16 @@
 </ng-container>
 
 <ng-template #withImage>
-  <div class="w-full h-full flex flex-col gap-2">
-    <div class="flex-1 group relative">
-      <img
-        class="w-full object-cover border-2 border-gray-300 rounded-lg h-[172px]"
-        [alt]="altText"
-        loading="lazy"
-        [src]="previewUrl"
-      />
-      <gn-ui-button
-        type="outline"
-        style="--gn-ui-button-height: 40px; --gn-ui-button-width: 40px"
-        extraClass="absolute right-2 bottom-2 invisible group-hover:visible bg-background"
-        (buttonClick)="handleDelete()"
-        [disabled]="disabled"
-      >
-        <ng-icon name="iconoirBin"></ng-icon>
-      </gn-ui-button>
-    </div>
+  <div class="w-80 h-full flex flex-col gap-2">
+    <gn-ui-image-overlay-preview class="h-48" [imageUrl]="previewUrl">
+    </gn-ui-image-overlay-preview>
     <gn-ui-text-input
       *ngIf="showAltTextInput"
       [placeholder]="'input.image.altTextPlaceholder' | translate"
       [value]="altText ?? ''"
       (valueChange)="handleAltTextChange($event)"
       extraClass="gn-ui-editor-textarea"
-      [disabled]="disabled"
+      [disabled]="true"
     ></gn-ui-text-input>
     <div class="flex flex-row gap-2 mt-2">
       <gn-ui-button type="gray" (buttonClick)="handleDelete()">

package/src/libs/ui/{inputs → elements}/src/lib/image-input/image-input.component.ts

@@ -9,27 +9,30 @@ import {
   Output,
 } from '@angular/core'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
-import { firstValueFrom } from 'rxjs'
-import { ButtonComponent } from '../button/button.component'
-import { FilesDropDirective } from '../files-drop/files-drop.directive'
-import { TranslateModule } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { UrlInputComponent } from '../url-input/url-input.component'
-import { TextInputComponent } from '../text-input/text-input.component'
+import {
+  ButtonComponent,
+  FilesDropDirective,
+  TextInputComponent,
+  UrlInputComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
 import {
   NgIconComponent,
   provideIcons,
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import {
+  iconoirBin,
   iconoirFramePlusIn,
+  iconoirLink,
   iconoirMediaImage,
   iconoirMediaImageXmark,
-  iconoirBin,
   iconoirPlus,
-  iconoirLink,
 } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
+import { firstValueFrom } from 'rxjs'
+import { ImageOverlayPreviewComponent } from '../image-overlay-preview/image-overlay-preview.component'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -46,6 +49,7 @@ import {
     UrlInputComponent,
     TextInputComponent,
     NgIconComponent,
+    ImageOverlayPreviewComponent,
   ],
   providers: [
     provideIcons({

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

@@ -1,23 +1,24 @@
-import { NgModule } from '@angular/core'
 import { CommonModule, NgOptimizedImage } from '@angular/common'
-import { RouterModule } from '@angular/router'
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { MatTooltipModule } from '@angular/material/tooltip'
-import { UtilSharedModule } from '../../../../../libs/util/shared/src'
-import { PopoverComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
-import { TranslateModule } from '@ngx-translate/core'
-import { ThumbnailComponent } from './thumbnail/thumbnail.component'
+import { RouterModule } from '@angular/router'
 import {
   BadgeComponent,
   TextInputComponent,
   UiInputsModule,
 } from '../../../../../libs/ui/inputs/src'
-import { FormsModule } from '@angular/forms'
+import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
+import { PopoverComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UtilSharedModule } from '../../../../../libs/util/shared/src'
+import { provideNgIconsConfig } from '@ng-icons/core'
+import { TranslateModule } from '@ngx-translate/core'
 import { AvatarComponent } from './avatar/avatar.component'
-import { UserPreviewComponent } from './user-preview/user-preview.component'
+import { ImageInputComponent } from './image-input/image-input.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
+import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
-import { provideNgIconsConfig } from '@ng-icons/core'
+import { UserPreviewComponent } from './user-preview/user-preview.component'
 
 @NgModule({
   imports: [
@@ -38,6 +39,7 @@ import { provideNgIconsConfig } from '@ng-icons/core'
     BadgeComponent,
     MaxLinesComponent,
     TextInputComponent,
+    ImageInputComponent,
   ],
   providers: [
     provideNgIconsConfig({
@@ -50,6 +52,7 @@ import { provideNgIconsConfig } from '@ng-icons/core'
     AvatarComponent,
     UserPreviewComponent,
     MarkdownParserComponent,
+    ImageInputComponent,
   ],
 })
 export class UiElementsModule {}

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

@@ -6,23 +6,22 @@ export * from './lib/checkbox/checkbox.component'
 export * from './lib/chips-input/chips-input.component'
 export * from './lib/copy-text-button/copy-text-button.component'
 export * from './lib/date-picker/date-picker.component'
-export * from './lib/date-range-picker/date-range-picker.component'
 export * from './lib/date-range-dropdown/date-range-dropdown.component'
+export * from './lib/date-range-picker/date-range-picker.component'
 export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
 export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
 export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
 export * from './lib/dropdown-selector/dropdown-selector.component'
 export * from './lib/dropdown-selector/dropdown-selector.model'
 export * from './lib/editable-label/editable-label.directive'
+export * from './lib/file-input/file-input.component'
+export * from './lib/files-drop/files-drop.directive'
 export * from './lib/navigation-button/navigation-button.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/star-toggle/star-toggle.component'
+export * from './lib/switch-toggle/switch-toggle.component'
 export * from './lib/text-area/text-area.component'
 export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
-export * from './lib/switch-toggle/switch-toggle.component'
-export * from './lib/file-input/file-input.component'
-export * from './lib/image-input/image-input.component'
-export * from './lib/url-input/url-input.component'

package/src/libs/ui/inputs/src/lib/button/button.component.ts

@@ -62,9 +62,10 @@ export class ButtonComponent {
     return `${this.btnClass} ${this.extraClass}`
   }
 
-  handleClick(event: Event) {
+  handleClick(event: MouseEvent) {
     this.buttonClick.emit()
     event.preventDefault()
+    ;(event.currentTarget as HTMLElement).blur()
     propagateToDocumentOnly(event)
   }
 }