Editor: Reorder service as resource fields

apps/metadata-editor-e2e/src/e2e/edit.cy.ts

@@ -502,17 +502,14 @@ describe('editor form', () => {
         cy.get('gn-ui-online-service-resource-input mat-radio-button')
           .contains('WMS')
           .click()
-        cy.get('gn-ui-online-service-resource-input')
-          .find('[data-cy="identifier-in-service"]')
-          .type('A layer name as identifier in service')
         cy.get('gn-ui-form-field-online-resources')
           .find('gn-ui-url-input')
           .find('input')
           .type('http://example.com/wms')
-        cy.get('gn-ui-form-field-online-resources')
-          .find('gn-ui-url-input')
-          .find('button')
-          .click()
+        cy.get('gn-ui-online-service-resource-input')
+          .find('[data-cy="identifier-in-service"]')
+          .type('A layer name as identifier in service')
+        cy.get('gn-ui-form-field-online-resources').find('button').eq(2).click()
         cy.editor_publishAndReload()
         cy.get('@saveStatus').should('eq', 'record_up_to_date')
         cy.get('@resourcePageBtn').click()

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>

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

@@ -11,7 +11,7 @@ <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
     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 @@ <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
     </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>

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 '@geonetwork-ui/common/domain/model/record'
-import { TextInputComponent } from '@geonetwork-ui/ui/inputs'
+import {
+  ButtonComponent,
+  TextInputComponent,
+  UrlInputComponent,
+} from '@geonetwork-ui/ui/inputs'
 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
+  }
 }

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 @@ <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
         class="w-full"
         [disabled]="true"
         [value]="onlineResource.url"
-        [showUploadButton]="false"
+        [showValidateButton]="false"
         [disabled]="disabled$ | async"
       ></gn-ui-url-input>
     </div>

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 @@ <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
         class="w-full"
         [disabled]="true"
         [value]="onlineResource.url"
-        [showUploadButton]="false"
+        [showValidateButton]="false"
       ></gn-ui-url-input>
     </div>
   </ng-template>

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

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)
   }
 }

libs/ui/inputs/src/lib/url-input/url-input.component.html

@@ -21,12 +21,14 @@
     <ng-icon name="iconoirLink"></ng-icon>
   </div>
   <gn-ui-button
-    *ngIf="showUploadButton"
+    *ngIf="showValidateButton"
     extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
     type="primary"
     [disabled]="disabled || input.value === '' || !isValidUrl(input.value)"
     (buttonClick)="handleUpload(input)"
   >
-    <ng-icon name="iconoirArrowUp"> </ng-icon>
+    <ng-content>
+      <ng-icon name="iconoirArrowUp"></ng-icon>
+    </ng-content>
   </gn-ui-button>
 </span>

libs/ui/inputs/src/lib/url-input/url-input.component.stories.ts

@@ -20,7 +20,7 @@ export const Primary: StoryObj<UrlInputComponent> = {
     value: 'http://aaa.org/bbb',
     placeholder: 'write a URL here',
     disabled: false,
-    showUploadButton: true,
+    showValidateButton: true,
   },
 }
 
@@ -46,12 +46,12 @@ export const WithoutUploadButton: StoryObj<UrlInputComponent> = {
     value: null,
     disabled: false,
     placeholder: 'https://mysite.org/file',
-    showUploadButton: false,
+    showValidateButton: false,
   },
   render: (args) => ({
     props: args,
     template: `
-    <gn-ui-url-input [value]='value' [disabled]='disabled' [placeholder]='placeholder' [showUploadButton]='showUploadButton'
+    <gn-ui-url-input [value]='value' [disabled]='disabled' [placeholder]='placeholder' [showValidateButton]='showValidateButton'
       (valueChange)='valueChange($event)' (uploadClick)='uploadClick($event)'>
     </gn-ui-url-input>`,
   }),

libs/ui/inputs/src/lib/url-input/url-input.component.ts

@@ -45,7 +45,7 @@ export class UrlInputComponent {
   @Input() extraClass = ''
   @Input() placeholder = 'https://'
   @Input() disabled: boolean
-  @Input() showUploadButton = true
+  @Input() showValidateButton = true
 
   /**
    * This will emit null if the field is emptied

translations/de.json

@@ -235,6 +235,9 @@
   "editor.record.form.field.onlineResource.dialogTitle": "",
   "editor.record.form.field.onlineResource.edit.description": "",
   "editor.record.form.field.onlineResource.edit.protocol": "",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder": "Ebenenname",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder.wps": "Prozessname",
+  "editor.record.form.field.onlineResource.edit.identifier.submit": "Link zum Dienst",
   "editor.record.form.field.onlineResource.edit.title": "",
   "editor.record.form.field.onlineResource.fileSize": "",
   "editor.record.form.field.onlineResource.modify": "",

translations/en.json

@@ -235,6 +235,9 @@
   "editor.record.form.field.onlineResource.dialogTitle": "Modify the dataset preview",
   "editor.record.form.field.onlineResource.edit.description": "Description",
   "editor.record.form.field.onlineResource.edit.protocol": "Protocol",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder": "Layer name",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder.wps": "Process name",
+  "editor.record.form.field.onlineResource.edit.identifier.submit": "Link to the service",
   "editor.record.form.field.onlineResource.edit.title": "Title",
   "editor.record.form.field.onlineResource.fileSize": "{sizeMB}MB",
   "editor.record.form.field.onlineResource.modify": "Modify",

translations/es.json

@@ -235,6 +235,9 @@
   "editor.record.form.field.onlineResource.dialogTitle": "",
   "editor.record.form.field.onlineResource.edit.description": "",
   "editor.record.form.field.onlineResource.edit.protocol": "",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder": "Nombre de la capa",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder.wps": "Nombre del proceso",
+  "editor.record.form.field.onlineResource.edit.identifier.submit": "Enlace al servicio",
   "editor.record.form.field.onlineResource.edit.title": "",
   "editor.record.form.field.onlineResource.fileSize": "",
   "editor.record.form.field.onlineResource.modify": "",

translations/fr.json

@@ -235,6 +235,9 @@
   "editor.record.form.field.onlineResource.dialogTitle": "Modifier l'aperçu du jeu de données",
   "editor.record.form.field.onlineResource.edit.description": "Description",
   "editor.record.form.field.onlineResource.edit.protocol": "Protocole",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder": "Nom de la couche",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder.wps": "Nom du processus",
+  "editor.record.form.field.onlineResource.edit.identifier.submit": "Lier le service",
   "editor.record.form.field.onlineResource.edit.title": "Titre",
   "editor.record.form.field.onlineResource.fileSize": "{sizeMB} Mo",
   "editor.record.form.field.onlineResource.modify": "Modifier",

translations/it.json

@@ -235,6 +235,9 @@
   "editor.record.form.field.onlineResource.dialogTitle": "",
   "editor.record.form.field.onlineResource.edit.description": "",
   "editor.record.form.field.onlineResource.edit.protocol": "",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder": "Nome del livello",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder.wps": "Nome del processo",
+  "editor.record.form.field.onlineResource.edit.identifier.submit": "Collegare il servizio",
   "editor.record.form.field.onlineResource.edit.title": "",
   "editor.record.form.field.onlineResource.fileSize": "",
   "editor.record.form.field.onlineResource.modify": "",

translations/nl.json

@@ -235,6 +235,9 @@
   "editor.record.form.field.onlineResource.dialogTitle": "",
   "editor.record.form.field.onlineResource.edit.description": "",
   "editor.record.form.field.onlineResource.edit.protocol": "",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder": "Laagnaam",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder.wps": "Procesnaam",
+  "editor.record.form.field.onlineResource.edit.identifier.submit": "Link naar de dienst",
   "editor.record.form.field.onlineResource.edit.title": "",
   "editor.record.form.field.onlineResource.fileSize": "",
   "editor.record.form.field.onlineResource.modify": "",

translations/pt.json

@@ -235,6 +235,9 @@
   "editor.record.form.field.onlineResource.dialogTitle": "",
   "editor.record.form.field.onlineResource.edit.description": "",
   "editor.record.form.field.onlineResource.edit.protocol": "",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder": "Nome da camada",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder.wps": "Nome do processo",
+  "editor.record.form.field.onlineResource.edit.identifier.submit": "Link para o serviço",
   "editor.record.form.field.onlineResource.edit.title": "",
   "editor.record.form.field.onlineResource.fileSize": "",
   "editor.record.form.field.onlineResource.modify": "",

translations/sk.json

@@ -235,6 +235,9 @@
   "editor.record.form.field.onlineResource.dialogTitle": "",
   "editor.record.form.field.onlineResource.edit.description": "",
   "editor.record.form.field.onlineResource.edit.protocol": "",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder": "Názov vrstvy",
+  "editor.record.form.field.onlineResource.edit.identifier.placeholder.wps": "Názov procesu",
+  "editor.record.form.field.onlineResource.edit.identifier.submit": "Odkaz na službu",
   "editor.record.form.field.onlineResource.edit.title": "",
   "editor.record.form.field.onlineResource.fileSize": "",
   "editor.record.form.field.onlineResource.modify": "",