ME: edit record distributions

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

@@ -404,6 +404,88 @@ describe('editor form', () => {
         })
       })
     })
+    describe('distribution resources', () => {
+      beforeEach(() => {
+        cy.get('@resourcePageBtn').click()
+      })
+      it('adds a resource', () => {
+        // item count before adding
+        cy.get(
+          'gn-ui-form-field-online-resources gn-ui-online-resource-card'
+        ).should('have.length', 0)
+        cy.editor_wrapPreviousDraft()
+        // add a service distribution
+        cy.get('[data-cy="online-resources-type"] button').eq(1).click()
+        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.editor_publishAndReload()
+        cy.get('@saveStatus').should('eq', 'record_up_to_date')
+        cy.get('@resourcePageBtn').click()
+        cy.get(
+          'gn-ui-form-field-online-resources gn-ui-online-resource-card'
+        ).should('have.length', 1)
+      })
+      it('modifies a resource', () => {
+        cy.get('gn-ui-form-field-online-resources gn-ui-online-resource-card')
+          .eq(0)
+          .as('wmsService')
+        cy.get('@wmsService')
+          .find('[data-test=card-title]')
+          .invoke('text')
+          .invoke('trim')
+          .should('eql', 'A layer name as identifier in service')
+        cy.editor_wrapPreviousDraft()
+        // open modify dialog
+        cy.get('@wmsService').find('button[data-test=card-modify]').click()
+        cy.get(
+          'gn-ui-modal-dialog [data-cy="identifier-in-service"] input'
+        ).clear()
+        cy.get(
+          'gn-ui-modal-dialog [data-cy="identifier-in-service"] input'
+        ).type('{selectAll}{backspace}new identifier')
+        cy.get('gn-ui-modal-dialog [data-cy=confirm-button]').click()
+        cy.editor_publishAndReload()
+        cy.get('@resourcePageBtn').click()
+        cy.get('@wmsService')
+          .find('[data-test=card-title]')
+          .invoke('text')
+          .invoke('trim')
+          .should('eql', 'new identifier')
+        cy.get('@wmsService').scrollIntoView()
+        cy.screenshot({ capture: 'viewport' })
+      })
+      it('deletes a resource', () => {
+        // item count before deleting
+        cy.get(
+          'gn-ui-form-field-online-resources gn-ui-online-resource-card'
+        ).should('have.length', 1)
+        cy.editor_wrapPreviousDraft()
+        // delete the first item
+        cy.get(
+          'gn-ui-form-field-online-resources gn-ui-sortable-list [data-test=remove-item]'
+        )
+          .eq(0)
+          .click()
+        cy.editor_publishAndReload()
+        cy.get('@saveStatus').should('eq', 'record_up_to_date')
+        cy.get('@resourcePageBtn').click()
+        cy.get(
+          'gn-ui-form-field-online-resources gn-ui-online-resource-card'
+        ).should('have.length', 0)
+      })
+    })
     describe('attached resources', () => {
       beforeEach(() => {
         cy.get('@resourcePageBtn').click()

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

@@ -0,0 +1,31 @@
+<div class="flex flex-row justify-between">
+  <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+    editor.record.form.field.onlineResource.edit.protocol
+  </h3>
+  <span
+    *ngIf="protocolHint"
+    class="material-symbols-outlined m-2 gn-ui-icon-small"
+    [matTooltip]="protocolHint"
+    matTooltipPosition="above"
+  >
+    help
+  </span>
+</div>
+<div class="flex flex-row items-center gap-[16px] h-[48px]">
+  <mat-radio-group
+    aria-labelledby="example-radio-group-label"
+    class="flex flex-row gap-[8px]"
+    [(ngModel)]="service.accessServiceProtocol"
+  >
+    <mat-radio-button
+      *ngFor="let protocolOption of protocolOptions"
+      [value]="protocolOption.value"
+    >
+      {{ protocolOption.label | translate }}
+    </mat-radio-button>
+  </mat-radio-group>
+</div>
+<gn-ui-text-input
+  [(value)]="service.identifierInService"
+  data-cy="identifier-in-service"
+></gn-ui-text-input>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { TranslateModule } from '@ngx-translate/core'
+import { OnlineServiceResourceInputComponent } from './online-service-resource-input.component'
+
+describe('OnlineServiceResourceInputComponent', () => {
+  let component: OnlineServiceResourceInputComponent
+  let fixture: ComponentFixture<OnlineServiceResourceInputComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [OnlineServiceResourceInputComponent, TranslateModule.forRoot()],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(OnlineServiceResourceInputComponent)
+    component = fixture.componentInstance
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,82 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { MatIconModule } from '@angular/material/icon'
+import { MatRadioModule } from '@angular/material/radio'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  DatasetServiceDistribution,
+  ServiceProtocol,
+} from '@geonetwork-ui/common/domain/model/record'
+import { TextInputComponent } from '@geonetwork-ui/ui/inputs'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-online-service-resource-input',
+  templateUrl: './online-service-resource-input.component.html',
+  styleUrls: ['./online-service-resource-input.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatTooltipModule,
+    MatRadioModule,
+    FormsModule,
+    TextInputComponent,
+    TranslateModule,
+  ],
+})
+export class OnlineServiceResourceInputComponent implements OnChanges {
+  @Input() service: Omit<DatasetServiceDistribution, 'url'>
+  @Input() protocolHint?: string
+
+  selectedProtocol: ServiceProtocol
+
+  protocolOptions: {
+    label: string
+    value: ServiceProtocol
+  }[] = [
+    {
+      label: 'OGC API',
+      value: 'ogcFeatures',
+    },
+    {
+      label: 'WFS',
+      value: 'wfs',
+    },
+    {
+      label: 'WMS',
+      value: 'wms',
+    },
+    {
+      label: 'WMTS',
+      value: 'wmts',
+    },
+    {
+      label: 'WPS',
+      value: 'wps',
+    },
+    {
+      label: 'ESRI REST',
+      value: 'esriRest',
+    },
+    {
+      label: marker('editor.record.onlineResource.protocol.other'),
+      value: 'other',
+    },
+  ]
+
+  ngOnChanges() {
+    this.selectedProtocol =
+      this.protocolOptions.find(
+        (option) => option.value === this.service.accessServiceProtocol
+      )?.value ?? 'other'
+  }
+}

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

@@ -20,15 +20,24 @@
 </ng-template>
 
 <ng-template #dialogTemplate let-onlineResource>
-  <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
-    editor.record.form.field.onlineResource.edit.title
-  </h3>
-  <gn-ui-text-input
-    extraClass="mb-[16px]"
-    [(value)]="onlineResource.name"
-  ></gn-ui-text-input>
-  <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
-    editor.record.form.field.onlineResource.edit.description
-  </h3>
-  <gn-ui-text-area [(value)]="onlineResource.description"></gn-ui-text-area>
+  <div class="flex flex-col gap-[16px]">
+    <div>
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.onlineResource.edit.title
+      </h3>
+      <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
+    </div>
+    <div>
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.onlineResource.edit.description
+      </h3>
+      <gn-ui-text-area [(value)]="onlineResource.description"></gn-ui-text-area>
+    </div>
+    <span class="w-full border-b border-gray-300"></span>
+    <gn-ui-url-input
+      class="w-full"
+      [disabled]="true"
+      [value]="onlineResource.url"
+    ></gn-ui-url-input>
+  </div>
 </ng-template>

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

@@ -16,6 +16,7 @@ import {
   FileInputComponent,
   TextAreaComponent,
   TextInputComponent,
+  UrlInputComponent,
 } from '@geonetwork-ui/ui/inputs'
 import { CommonModule } from '@angular/common'
 import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
@@ -43,6 +44,7 @@ import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
     OnlineResourceCardComponent,
     TextInputComponent,
     TextAreaComponent,
+    UrlInputComponent,
     TranslateModule,
   ],
 })
@@ -154,6 +156,7 @@ export class FormFieldOnlineLinkResourcesComponent {
     }
     this.dialog
       .open(ModalDialogComponent, {
+        width: '800px',
         data: {
           title: this.translateService.instant(
             'editor.record.form.field.onlineResource.dialogTitle'

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

@@ -0,0 +1,71 @@
+<gn-ui-switch-toggle
+  [options]="typeOptions"
+  (selectedValue)="onSelectedTypeChange($event.value)"
+  extraClasses="grow"
+  data-cy="online-resources-type"
+></gn-ui-switch-toggle>
+<div class="h-[8px]"></div>
+<gn-ui-file-input
+  *ngIf="selectedType === 'download'"
+  [maxSizeMB]="MAX_UPLOAD_SIZE_MB"
+  (fileChange)="handleFileChange($event)"
+  (uploadCancel)="handleUploadCancel()"
+  [uploadProgress]="uploadProgress"
+  (urlChange)="handleDownloadUrlChange($event)"
+></gn-ui-file-input>
+<div
+  *ngIf="selectedType === 'service'"
+  class="w-full border-2 border-dashed rounded-lg p-6 flex flex-col gap-[16px]"
+>
+  <gn-ui-online-service-resource-input
+    [service]="newService"
+  ></gn-ui-online-service-resource-input>
+  <span class="w-full border-b border-gray-300"></span>
+  <gn-ui-url-input
+    class="w-full"
+    [urlCanParse]="true"
+    (valueChange)="handleServiceUrlChange($event)"
+  ></gn-ui-url-input>
+</div>
+<div class="h-[8px]"></div>
+<gn-ui-sortable-list
+  [items]="notLinkResources"
+  (itemsOrderChange)="handleResourcesChange($event)"
+  [elementTemplate]="template"
+>
+</gn-ui-sortable-list>
+<ng-template #template let-onlineResource let-index="index">
+  <gn-ui-online-resource-card
+    [onlineResource]="onlineResource"
+    (modifyClick)="handleResourceModify(onlineResource, index)"
+  ></gn-ui-online-resource-card>
+</ng-template>
+
+<ng-template #dialogTemplate let-onlineResource>
+  <div class="flex flex-col gap-[16px]">
+    <div>
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.onlineResource.edit.title
+      </h3>
+      <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
+    </div>
+    <div>
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.onlineResource.edit.description
+      </h3>
+      <gn-ui-text-area [(value)]="onlineResource.description"></gn-ui-text-area>
+    </div>
+    <ng-container *ngIf="onlineResource.type === 'service'">
+      <span class="w-full border-b border-gray-300"></span>
+      <gn-ui-online-service-resource-input
+        [service]="onlineResource"
+      ></gn-ui-online-service-resource-input>
+    </ng-container>
+    <span class="w-full border-b border-gray-300"></span>
+    <gn-ui-url-input
+      class="w-full"
+      [disabled]="true"
+      [value]="onlineResource.url"
+    ></gn-ui-url-input>
+  </div>
+</ng-template>