Skip to content

Commit

Permalink
feat(editor): record distribution as online resources
Browse files Browse the repository at this point in the history
  • Loading branch information
LHBruneton-C2C committed Sep 26, 2024
1 parent be95197 commit fc928af
Show file tree
Hide file tree
Showing 28 changed files with 740 additions and 31 deletions.
80 changes: 80 additions & 0 deletions apps/metadata-editor-e2e/src/e2e/edit.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,86 @@ 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')
.find('[data-cy="identifier-in-service"]')
.find('input')
.type('{selectall}{del}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()
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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()
})
})
Original file line number Diff line number Diff line change
@@ -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'
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -43,6 +44,7 @@ import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
OnlineResourceCardComponent,
TextInputComponent,
TextAreaComponent,
UrlInputComponent,
TranslateModule,
],
})
Expand Down Expand Up @@ -154,6 +156,7 @@ export class FormFieldOnlineLinkResourcesComponent {
}
this.dialog
.open(ModalDialogComponent, {
width: '800px',
data: {
title: this.translateService.instant(
'editor.record.form.field.onlineResource.dialogTitle'
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit fc928af

Please sign in to comment.