feat: reorder service as resource fields

geonetwork · Feb 6, 2025 · b03f874 · b03f874
1 parent c1a6849
commit b03f874
Show file tree

Hide file tree

Showing 18 changed files with 121 additions and 26 deletions.
diff --git a/apps/metadata-editor-e2e/src/e2e/edit.cy.ts b/apps/metadata-editor-e2e/src/e2e/edit.cy.ts
@@ -464,10 +464,7 @@ describe('editor form', () => {
           .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-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()

diff --git a/libs/feature/editor/src/lib/components/constraint-card/constraint-card.component.html b/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>
diff --git a/...lib/components/online-service-resource-input/online-service-resource-input.component.html b/...lib/components/online-service-resource-input/online-service-resource-input.component.html
@@ -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-[16px]">
+  <gn-ui-url-input
+    class="w-full"
+    (uploadClick)="handleUrlChange($event)"
+    [disabled]="disabled"
+  >
+    <ng-icon name="iconoirCloudUpload"></ng-icon>
+  </gn-ui-url-input>
+
+  <gn-ui-text-input
+    class="grow"
+    [(value)]="service.identifierInService"
+    [placeholder]="getIdentifierPlaceholder() | translate"
+    data-cy="identifier-in-service"
+    [disabled]="disabled"
+  ></gn-ui-text-input>
+
+  <div class="w-full border-b border-gray-300"></div>
+
+  <gn-ui-button
+    (buttonClick)="submitIdentifier(service.identifierInService)"
+    [disabled]="disabled || !service.identifierInService"
+    type="primary"
+  >
+    <span class="text-white font-bold" translate
+      >editor.record.form.field.onlineResource.edit.identifier.submit</span
+    >
+  </gn-ui-button>
+</div>
diff --git a/...c/lib/components/online-service-resource-input/online-service-resource-input.component.ts b/...c/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,18 +35,29 @@ 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<string> = new EventEmitter()
 
   selectedProtocol: ServiceProtocol
 
@@ -78,4 +101,22 @@ export class OnlineServiceResourceInputComponent implements OnChanges {
         (option) => option.value === this.service.accessServiceProtocol
       )?.value ?? 'other'
   }
+
+  handleUrlChange(url: string) {
+    if (!url) return
+    this.urlChange.emit(url)
+  }
+
+  submitIdentifier(identifier: string) {
+    if (!identifier) return
+    this.identifierSubmit.emit(identifier)
+  }
+
+  getIdentifierPlaceholder(): string {
+    const baseKey =
+      'editor.record.form.field.onlineResource.edit.identifier.placeholder'
+    return this.service.accessServiceProtocol === 'wps'
+      ? `${baseKey}.wps`
+      : baseKey
+  }
 }
diff --git a/...rm-field/form-field-online-link-resources/form-field-online-link-resources.component.html b/...rm-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>

diff --git a/...rd-form/form-field/form-field-online-resources/form-field-online-resources.component.html b/...rd-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>

diff --git a/...cord-form/form-field/form-field-online-resources/form-field-online-resources.component.ts b/...cord-form/form-field/form-field-online-resources/form-field-online-resources.component.ts
@@ -174,6 +174,16 @@ export class FormFieldOnlineResourcesComponent {
     ])
   }
 
+  handleIdentifierSubmit(identifier: string) {
+    this.valueChange.emit([
+      ...this.allResources,
+      {
+        ...this.newService,
+        url: new URL('https://TODO.gov'),
+      },
+    ])
+  }
+
   handleServiceModify(
     oldService: DatasetServiceDistribution,
     newService: DatasetServiceDistribution

diff --git a/libs/ui/inputs/src/lib/url-input/url-input.component.html b/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>
diff --git a/libs/ui/inputs/src/lib/url-input/url-input.component.stories.ts b/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>`,
   }),

diff --git a/libs/ui/inputs/src/lib/url-input/url-input.component.ts b/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

diff --git a/translations/de.json b/translations/de.json
@@ -226,6 +226,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": "",

diff --git a/translations/en.json b/translations/en.json
@@ -226,6 +226,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",

diff --git a/translations/es.json b/translations/es.json
@@ -226,6 +226,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": "",

diff --git a/translations/fr.json b/translations/fr.json
@@ -226,6 +226,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",

diff --git a/translations/it.json b/translations/it.json
@@ -226,6 +226,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": "Collegamento al servizio",
   "editor.record.form.field.onlineResource.edit.title": "",
   "editor.record.form.field.onlineResource.fileSize": "",
   "editor.record.form.field.onlineResource.modify": "",

diff --git a/translations/nl.json b/translations/nl.json
@@ -226,6 +226,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": "",

diff --git a/translations/pt.json b/translations/pt.json
@@ -226,6 +226,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": "",

diff --git a/translations/sk.json b/translations/sk.json
@@ -226,6 +226,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": "",