geonetwork-ui 2.4.0 → 2.4.1-dev.2804667fa

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

@@ -14,9 +14,6 @@ export class EditorFacade {
 
   record$ = this.store.pipe(select(EditorSelectors.selectRecord))
   recordSource$ = this.store.pipe(select(EditorSelectors.selectRecordSource))
-  alreadySavedOnce$ = this.store.pipe(
-    select(EditorSelectors.selectRecordAlreadySavedOnce)
-  )
   saving$ = this.store.pipe(select(EditorSelectors.selectRecordSaving))
   saveError$ = this.store.pipe(
     select(EditorSelectors.selectRecordSaveError),
@@ -35,14 +32,14 @@ export class EditorFacade {
   hasRecordChanged$ = this.store.pipe(
     select(EditorSelectors.selectHasRecordChanged)
   )
+  isPublished$ = this.store.pipe(select(EditorSelectors.selectIsPublished))
 
-  openRecord(
-    record: CatalogRecord,
-    recordSource: string,
-    alreadySavedOnce: boolean
-  ) {
+  openRecord(record: CatalogRecord, recordSource: string) {
     this.store.dispatch(
-      EditorActions.openRecord({ record, recordSource, alreadySavedOnce })
+      EditorActions.openRecord({
+        record,
+        recordSource,
+      })
     )
     this.setCurrentPage(0)
   }
@@ -70,4 +67,8 @@ export class EditorFacade {
   checkHasRecordChanged(record: CatalogRecord) {
     this.store.dispatch(EditorActions.hasRecordChangedSinceDraft({ record }))
   }
+
+  isPublished(isPublished: boolean) {
+    this.store.dispatch(EditorActions.isPublished({ isPublished }))
+  }
 }

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

@@ -18,13 +18,13 @@ export const EDITOR_FEATURE_KEY = 'editor'
 export interface EditorState {
   record: CatalogRecord | null
   recordSource: string | null
-  alreadySavedOnce: boolean
   saving: boolean
   saveError: SaveRecordError | null
   changedSinceSave: boolean
   editorConfig: EditorConfig
   currentPage: number
   hasRecordChanged: { user: string; date: Date }
+  isPublished: boolean
 }
 
 export interface EditorPartialState {
@@ -34,27 +34,23 @@ export interface EditorPartialState {
 export const initialEditorState: EditorState = {
   record: null,
   recordSource: null,
-  alreadySavedOnce: false,
   saving: false,
   saveError: null,
   changedSinceSave: false,
   editorConfig: DEFAULT_CONFIGURATION,
   currentPage: 0,
   hasRecordChanged: null,
+  isPublished: true,
 }
 
 const reducer = createReducer(
   initialEditorState,
-  on(
-    EditorActions.openRecord,
-    (state, { record, recordSource, alreadySavedOnce }) => ({
-      ...state,
-      changedSinceSave: false,
-      recordSource: recordSource ?? null,
-      alreadySavedOnce,
-      record,
-    })
-  ),
+  on(EditorActions.openRecord, (state, { record, recordSource }) => ({
+    ...state,
+    changedSinceSave: false,
+    recordSource: recordSource ?? null,
+    record,
+  })),
   on(EditorActions.saveRecord, (state) => ({
     ...state,
     saving: true,
@@ -110,6 +106,10 @@ const reducer = createReducer(
   on(EditorActions.hasRecordChangedSinceDraftSuccess, (state, { changes }) => ({
     ...state,
     hasRecordChanged: changes,
+  })),
+  on(EditorActions.isPublished, (state, { isPublished }) => ({
+    ...state,
+    isPublished: isPublished,
   }))
 )
 

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

@@ -30,11 +30,6 @@ export const selectRecordChangedSinceSave = createSelector(
   (state: EditorState) => state.changedSinceSave
 )
 
-export const selectRecordAlreadySavedOnce = createSelector(
-  selectEditorState,
-  (state: EditorState) => state.alreadySavedOnce
-)
-
 export const selectEditorConfig = createSelector(
   selectEditorState,
   (state: EditorState) => state.editorConfig
@@ -66,3 +61,8 @@ export const selectHasRecordChanged = createSelector(
   selectEditorState,
   (state: EditorState) => state.hasRecordChanged
 )
+
+export const selectIsPublished = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.isPublished
+)

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

@@ -22,7 +22,7 @@
     class="mt-3.5"
     [value]="constraint_.url?.toString()"
     (valueChange)="handleURLChange($event)"
-    [showUploadButton]="false"
+    [showValidateButton]="false"
   >
   </gn-ui-url-input>
 </div>

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

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-3">
+<div class="flex flex-col gap-4">
   <gn-ui-autocomplete
     [placeholder]="placeholder"
     [displayWithFn]="displayWithFn"

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

@@ -11,7 +11,7 @@
     help
   </span>
 </div>
-<div class="flex flex-row items-center gap-[16px] h-[48px]">
+<div class="flex flex-row items-center gap-4 h-[48px]">
   <mat-radio-group
     aria-labelledby="example-radio-group-label"
     class="flex flex-row gap-[8px]"
@@ -26,8 +26,33 @@
     </mat-radio-button>
   </mat-radio-group>
 </div>
-<gn-ui-text-input
-  [(value)]="service.identifierInService"
-  data-cy="identifier-in-service"
-  [disabled]="disabled"
-></gn-ui-text-input>
+
+<div class="flex flex-col gap-4">
+  <gn-ui-url-input
+    class="w-full"
+    (valueChange)="handleUrlChange($event)"
+    [disabled]="disabled"
+    [value]="url"
+    [showValidateButton]="false"
+  >
+    <ng-icon name="iconoirCloudUpload"></ng-icon>
+  </gn-ui-url-input>
+
+  <gn-ui-text-input
+    class="grow border-b border-gray-300 pb-4"
+    [(value)]="service.identifierInService"
+    [placeholder]="getIdentifierPlaceholder() | translate"
+    data-cy="identifier-in-service"
+    [disabled]="disabled"
+  ></gn-ui-text-input>
+
+  <gn-ui-button
+    (buttonClick)="submitIdentifier(service.identifierInService)"
+    [disabled]="disabled || !service.identifierInService || !url"
+    type="primary"
+  >
+    <span class="text-white font-bold" translate
+      >editor.record.form.field.onlineResource.edit.identifier.submit</span
+    >
+  </gn-ui-button>
+</div>

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

@@ -5,7 +5,6 @@
     (uploadCancel)="handleUploadCancel()"
     [uploadProgress]="uploadProgress"
     (urlChange)="handleUrlChange($event)"
-    [disabled]="disabled$ | async"
   ></gn-ui-file-input>
   <div class="h-[8px]"></div>
   <gn-ui-sortable-list
@@ -42,17 +41,9 @@
         class="w-full"
         [disabled]="true"
         [value]="onlineResource.url"
-        [showUploadButton]="false"
         [disabled]="disabled$ | async"
+        [showValidateButton]="false"
       ></gn-ui-url-input>
     </div>
   </ng-template>
-  <div
-    *ngIf="disabled$ | async"
-    class="p-4 text-sm border border-primary bg-primary-lightest rounded-lg"
-    translate
-    data-test="disabled-message"
-  >
-    editor.record.form.field.draft.only.disabled
-  </div>
 </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

@@ -30,7 +30,6 @@ import { PlatformServiceInterface } from '../../../../../../../../../libs/common
 import { map, Subscription } from 'rxjs'
 import { MatDialog } from '@angular/material/dialog'
 import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
-import { EditorFacade } from '../../../../+state/editor.facade'
 
 @Component({
   selector: 'gn-ui-form-field-online-link-resources',
@@ -69,17 +68,12 @@ export class FormFieldOnlineLinkResourcesComponent {
 
   protected MAX_UPLOAD_SIZE_MB = MAX_UPLOAD_SIZE_MB
 
-  disabled$ = this.editorFacade.alreadySavedOnce$.pipe(
-    map((alreadySavedOnce) => !alreadySavedOnce)
-  )
-
   constructor(
     private notificationsService: NotificationsService,
     private translateService: TranslateService,
     private platformService: PlatformServiceInterface,
     private cd: ChangeDetectorRef,
-    private dialog: MatDialog,
-    private editorFacade: EditorFacade
+    private dialog: MatDialog
   ) {}
 
   handleFileChange(file: File) {

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

@@ -4,7 +4,6 @@
     (selectedValue)="onSelectedTypeChange($event.value)"
     extraClasses="grow text-sm"
     data-cy="online-resources-type"
-    [disabled]="disabled$ | async"
   ></gn-ui-switch-toggle>
   <div class="h-[8px]"></div>
   <gn-ui-file-input
@@ -14,7 +13,6 @@
     (uploadCancel)="handleUploadCancel()"
     [uploadProgress]="uploadProgress"
     (urlChange)="handleDownloadUrlChange($event)"
-    [disabled]="disabled$ | async"
   ></gn-ui-file-input>
   <div
     *ngIf="selectedType === 'service'"
@@ -23,13 +21,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
@@ -65,7 +59,6 @@
         <span class="w-full border-b border-gray-300"></span>
         <gn-ui-online-service-resource-input
           [service]="onlineResource"
-          [disabled]="disabled$ | async"
         ></gn-ui-online-service-resource-input>
       </ng-container>
       <span class="w-full border-b border-gray-300"></span>
@@ -73,16 +66,8 @@
         class="w-full"
         [disabled]="true"
         [value]="onlineResource.url"
-        [showUploadButton]="false"
+        [showValidateButton]="false"
       ></gn-ui-url-input>
     </div>
   </ng-template>
-  <div
-    *ngIf="disabled$ | async"
-    class="p-4 text-sm border border-primary bg-primary-lightest rounded-lg"
-    translate
-    data-test="disabled-message"
-  >
-    editor.record.form.field.draft.only.disabled
-  </div>
 </div>

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

@@ -32,11 +32,10 @@ import {
   SortableListComponent,
 } from '../../../../../../../../../libs/ui/layout/src'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
-import { map, Subscription } from 'rxjs'
+import { Subscription } from 'rxjs'
 import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
 import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
 import { OnlineServiceResourceInputComponent } from '../../../online-service-resource-input/online-service-resource-input.component'
-import { EditorFacade } from '../../../../+state/editor.facade'
 
 type OnlineNotLinkResource =
   | DatasetDownloadDistribution
@@ -101,17 +100,12 @@ export class FormFieldOnlineResourcesComponent {
 
   protected MAX_UPLOAD_SIZE_MB = MAX_UPLOAD_SIZE_MB
 
-  disabled$ = this.editorFacade.alreadySavedOnce$.pipe(
-    map((alreadySavedOnce) => !alreadySavedOnce)
-  )
-
   constructor(
     private notificationsService: NotificationsService,
     private translateService: TranslateService,
     private platformService: PlatformServiceInterface,
     private cd: ChangeDetectorRef,
-    private dialog: MatDialog,
-    private editorFacade: EditorFacade
+    private dialog: MatDialog
   ) {}
 
   onSelectedTypeChange(selectedType: unknown) {
@@ -174,6 +168,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.html

@@ -9,14 +9,5 @@
     (delete)="handleDelete()"
     [uploadProgress]="uploadProgress"
     (uploadCancel)="handleUploadCancel()"
-    [disabled]="disabled$ | async"
   ></gn-ui-image-input>
-  <div
-    *ngIf="disabled$ | async"
-    class="p-4 text-sm border border-primary bg-primary-lightest rounded-lg"
-    translate
-    data-test="disabled-message"
-  >
-    editor.record.form.field.draft.only.disabled
-  </div>
 </div>

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

@@ -8,13 +8,12 @@ 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'
-import { map, Subscription } from 'rxjs'
+import { Subscription } from 'rxjs'
 import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
-import { EditorFacade } from '../../../../+state/editor.facade'
 
 @Component({
   selector: 'gn-ui-form-field-overviews',
@@ -30,10 +29,6 @@ export class FormFieldOverviewsComponent {
   @Output() valueChange: EventEmitter<Array<GraphicOverview>> =
     new EventEmitter()
 
-  disabled$ = this.editorFacade.alreadySavedOnce$.pipe(
-    map((alreadySavedOnce) => !alreadySavedOnce)
-  )
-
   uploadProgress = undefined
   uploadSubscription: Subscription = null
 
@@ -52,8 +47,7 @@ export class FormFieldOverviewsComponent {
     private platformService: PlatformServiceInterface,
     private notificationsService: NotificationsService,
     private translateService: TranslateService,
-    private cd: ChangeDetectorRef,
-    private editorFacade: EditorFacade
+    private cd: ChangeDetectorRef
   ) {}
 
   handleFileChange(file: File) {

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}`)
         ),
-      },
-    ]
+      }))
+    )
   }
 }