geonetwork-ui 2.4.0-dev.aa5f997e → 2.4.0-dev.aa689838

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

@@ -0,0 +1,179 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core'
+import {
+  OnlineLinkResource,
+  OnlineResource,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  FileInputComponent,
+  TextAreaComponent,
+  TextInputComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
+import {
+  ModalDialogComponent,
+  SortableListComponent,
+} from '../../../../../../../../../libs/ui/layout/src'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { Subscription } from 'rxjs'
+import { MatDialog } from '@angular/material/dialog'
+
+@Component({
+  selector: 'gn-ui-form-field-online-link-resources',
+  templateUrl: './form-field-online-link-resources.component.html',
+  styleUrls: ['./form-field-online-link-resources.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FileInputComponent,
+    CommonModule,
+    SortableListComponent,
+    OnlineResourceCardComponent,
+    TextInputComponent,
+    TextAreaComponent,
+    TranslateModule,
+  ],
+})
+export class FormFieldOnlineLinkResourcesComponent {
+  @Input() metadataUuid: string
+  @Input() set value(onlineResources: Array<OnlineResource>) {
+    this.allResources = onlineResources
+    this.linkResources = onlineResources.filter(
+      (res): res is OnlineLinkResource => res.type === 'link'
+    )
+  }
+  @Output() valueChange: EventEmitter<Array<OnlineResource>> =
+    new EventEmitter()
+
+  @ViewChild('dialogTemplate') dialogTemplate: TemplateRef<OnlineResource>
+
+  private allResources: OnlineResource[] = []
+  linkResources: OnlineLinkResource[] = []
+  uploadProgress = undefined
+  uploadSubscription: Subscription = null
+
+  constructor(
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private platformService: PlatformServiceInterface,
+    private cd: ChangeDetectorRef,
+    private dialog: MatDialog
+  ) {}
+
+  handleFileChange(file: File) {
+    this.uploadProgress = 0
+    this.uploadSubscription = this.platformService
+      .attachFileToRecord(this.metadataUuid, file)
+      .subscribe({
+        next: (event) => {
+          if (event.type === 'progress') {
+            this.uploadProgress = event.progress
+            this.cd.detectChanges()
+          } else if (event.type === 'success') {
+            this.uploadProgress = undefined
+            this.cd.detectChanges()
+            const newResource: OnlineLinkResource = {
+              type: 'link',
+              url: new URL(event.attachment.url),
+              name: event.attachment.fileName,
+            }
+            this.valueChange.emit([...this.allResources, newResource])
+          }
+        },
+        error: (error: Error) => this.handleError(error.message),
+      })
+  }
+
+  handleUploadCancel() {
+    if (this.uploadSubscription) {
+      this.uploadProgress = undefined
+      this.uploadSubscription.unsubscribe()
+    }
+  }
+
+  handleUrlChange(url: string) {
+    try {
+      const name = url.split('/').pop()
+      const newLink: OnlineLinkResource = {
+        type: 'link',
+        url: new URL(url),
+        name,
+      }
+      this.valueChange.emit([...this.allResources, newLink])
+    } catch (e) {
+      this.handleError((e as Error).message)
+    }
+  }
+
+  handleResourcesChange(items: unknown[]) {
+    const links = items as OnlineResource[]
+    const newResources = [
+      ...this.allResources.filter((r) => r.type !== 'link'),
+      ...links,
+    ]
+    this.valueChange.emit(newResources)
+  }
+
+  handleResourceModify(resource: OnlineLinkResource, index: number) {
+    this.openEditDialog(resource, index)
+  }
+
+  private handleError(error: string) {
+    this.uploadProgress = undefined
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant(
+        'editor.record.onlineResourceError.title'
+      ),
+      text: `${this.translateService.instant(
+        'editor.record.onlineResourceError.body'
+      )} ${error}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.onlineResourceError.closeMessage'
+      ),
+    })
+  }
+
+  private openEditDialog(resource: OnlineLinkResource, index: number) {
+    const resourceCopy = {
+      ...resource,
+    }
+    this.dialog
+      .open(ModalDialogComponent, {
+        data: {
+          title: this.translateService.instant(
+            'editor.record.form.field.onlineResource.dialogTitle'
+          ),
+          body: this.dialogTemplate,
+          bodyContext: resourceCopy,
+          confirmText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.confirm'
+          ),
+          cancelText: this.translateService.instant(
+            'editor.record.form.field.onlineResource.cancel'
+          ),
+        },
+      })
+      .afterClosed()
+      .subscribe((confirmed: boolean) => {
+        if (!confirmed) return
+        const newLinks = [...this.linkResources]
+        newLinks.splice(index, 1, resourceCopy)
+        this.valueChange.emit([
+          ...this.allResources.filter((r) => r.type !== 'link'),
+          ...newLinks,
+        ])
+      })
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-open-data/form-field-open-data.component.html

@@ -0,0 +1,6 @@
+<gn-ui-check-toggle
+  [label]="'editor.record.form.classification.opendata' | translate"
+  [value]="openData"
+  (toggled)="onOpenDataToggled($event)"
+  data-cy="openDataToggle"
+></gn-ui-check-toggle>

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

@@ -0,0 +1,48 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+} from '@angular/core'
+import { Constraint } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { CheckToggleComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { OPEN_DATA_LICENSES } from './../../../../fields.config'
+
+@Component({
+  selector: 'gn-ui-form-field-open-data',
+  templateUrl: './form-field-open-data.component.html',
+  styleUrls: ['./form-field-open-data.component.css'],
+  standalone: true,
+  imports: [CheckToggleComponent, TranslateModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldOpenDataComponent implements OnChanges {
+  @Input() value: Array<Constraint>
+  @Output() valueChange = new EventEmitter<Array<Constraint>>()
+  @Output() openDataChange = new EventEmitter<boolean>()
+
+  openData = false
+
+  get config() {
+    return OPEN_DATA_LICENSES
+  }
+
+  ngOnChanges() {
+    if (this.value && this.value.length > 0) {
+      this.openData = this.config.includes(this.value[0].text)
+    } else {
+      this.openData = false
+    }
+    this.openDataChange.emit(this.openData)
+  }
+
+  onOpenDataToggled(openData: boolean) {
+    this.openDataChange.emit(openData)
+    if (openData) {
+      this.valueChange.emit([{ text: this.config[0] }])
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+<gn-ui-image-input
+  [maxSizeMB]="5"
+  [previewUrl]="firstOverview.url"
+  [altText]="firstOverview.description"
+  (fileChange)="handleFileChange($event)"
+  (urlChange)="handleUrlChange($event)"
+  (altTextChange)="handleAltTextChange($event)"
+  (delete)="handleDelete()"
+  [uploadProgress]="uploadProgress"
+  (uploadCancel)="handleUploadCancel()"
+></gn-ui-image-input>

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

@@ -0,0 +1,119 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { ImageInputComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
+import { Subscription } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-form-field-overviews',
+  templateUrl: './form-field-overviews.component.html',
+  styleUrls: ['./form-field-overviews.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ImageInputComponent],
+})
+export class FormFieldOverviewsComponent {
+  @Input() metadataUuid: string
+  @Input() value: Array<GraphicOverview>
+  @Output() valueChange: EventEmitter<Array<GraphicOverview>> =
+    new EventEmitter()
+
+  uploadProgress = undefined
+  uploadSubscription: Subscription = null
+
+  get firstOverview() {
+    return (
+      this.value[0] ?? {
+        url: null,
+        description: '',
+      }
+    )
+  }
+
+  constructor(
+    private platformService: PlatformServiceInterface,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  handleFileChange(file: File) {
+    this.uploadProgress = 0
+    this.uploadSubscription = this.platformService
+      .attachFileToRecord(this.metadataUuid, file)
+      .subscribe({
+        next: (event) => {
+          if (event.type === 'progress') {
+            this.uploadProgress = event.progress
+            this.cd.detectChanges()
+          } else if (event.type === 'success') {
+            this.uploadProgress = undefined
+            this.cd.detectChanges()
+            this.emitOverview({
+              url: event.attachment.url,
+              description: event.attachment.fileName,
+            })
+          }
+        },
+        error: this.errorHandle,
+      })
+  }
+
+  handleUploadCancel() {
+    if (this.uploadSubscription) {
+      this.uploadProgress = undefined
+      this.uploadSubscription.unsubscribe()
+    }
+  }
+
+  handleUrlChange(url: string) {
+    try {
+      const filename = url.split('/').pop()
+      this.emitOverview({
+        url: new URL(url),
+        description: filename,
+      })
+    } catch (e) {
+      this.errorHandle(e)
+    }
+  }
+
+  handleAltTextChange(newAltText: string) {
+    this.emitOverview({
+      url: this.firstOverview.url,
+      description: newAltText,
+    })
+  }
+
+  handleDelete() {
+    this.emitOverview(null)
+  }
+
+  emitOverview(overView: GraphicOverview | null) {
+    this.valueChange.emit(overView ? [overView] : [])
+  }
+
+  private errorHandle = (error) => {
+    this.uploadProgress = undefined
+    this.notificationsService.showNotification({
+      type: 'error',
+      title: this.translateService.instant('editor.record.resourceError.title'),
+      text: `${this.translateService.instant(
+        'editor.record.resourceError.body'
+      )} ${error.message}`,
+      closeMessage: this.translateService.instant(
+        'editor.record.resourceError.closeMessage'
+      ),
+    })
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.html

@@ -1,4 +1,4 @@
 <gn-ui-date-picker
-  [date]="control.value"
-  (dateChange)="control.setValue($event)"
+  [date]="value"
+  (dateChange)="valueChange.emit($event)"
 ></gn-ui-date-picker>

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

@@ -1,5 +1,10 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 import { DatePickerComponent } from '../../../../../../../../../libs/ui/inputs/src'
 
 @Component({
@@ -11,5 +16,6 @@ import { DatePickerComponent } from '../../../../../../../../../libs/ui/inputs/s
   imports: [DatePickerComponent],
 })
 export class FormFieldResourceUpdatedComponent {
-  @Input() control!: FormControl
+  @Input() value: Date
+  @Output() valueChange: EventEmitter<Date> = new EventEmitter()
 }

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

@@ -14,7 +14,7 @@
     [preview]="preview"
     [helperText]="helperText"
     [placeholder]="placeholder"
-    [textContent]="control.value"
-    (textContentChanged)="handleTextContentChanged($event)"
+    [textContent]="value"
+    (textContentChanged)="valueChange.emit($event)"
   ></gn-ui-markdown-editor>
 </gn-ui-form-field-wrapper>

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

@@ -1,6 +1,14 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core'
+import { ReactiveFormsModule } from '@angular/forms'
 import { MarkdownEditorComponent } from '../../../../../../../../../libs/ui/elements/src'
 import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
 import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/layout/src'
@@ -20,11 +28,13 @@ import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/la
   ],
 })
 export class FormFieldRichComponent {
-  @Input() control!: FormControl
   @Input() label: string
   @Input() hint: string
   @Input() helperText: string
   @Input() placeholder = 'Votre texte ici' //TODO: translate
+  @Input() value: string
+
+  @Output() valueChange: EventEmitter<string> = new EventEmitter()
 
   preview = false
 
@@ -37,8 +47,4 @@ export class FormFieldRichComponent {
   togglePreview() {
     this.preview = !this.preview
   }
-
-  handleTextContentChanged(textContent: string) {
-    this.control.setValue(textContent)
-  }
 }

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

@@ -2,8 +2,9 @@
   *ngIf="!isSelect"
   [type]="inputType"
   [readonly]="readonly"
-  [formControl]="control"
   [placeholder]="placeholder"
+  [value]="value"
+  (valueChange)="valueChange.emit($event)"
   class="border rounded-md p-3 w-full bg-white transition-colors"
   [ngClass]="{
     'border-pink-500': invalid,
@@ -13,7 +14,8 @@
 />
 <select
   *ngIf="isSelect"
-  [formControl]="control"
+  [value]="value"
+  (valueChange)="valueChange.emit($event)"
   class="border rounded-md p-3 w-full bg-white transition-colors"
   [ngClass]="{
     'border-pink-500': invalid,
@@ -21,7 +23,7 @@
     'text-gray-600': readonly
   }"
 >
-  <option *ngFor="let option of options" [ngValue]="option.value">
+  <option *ngFor="let option of options" [value]="option.value">
     {{ option.label }}
   </option>
 </select>

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

@@ -1,6 +1,11 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 
 @Component({
   selector: 'gn-ui-form-field-simple',
@@ -8,15 +13,17 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms'
   styleUrls: ['./form-field-simple.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [CommonModule],
 })
 export class FormFieldSimpleComponent {
   @Input() type: 'date' | 'url' | 'text' | 'number' | 'list' | 'toggle'
-  @Input() control!: FormControl
   @Input() readonly = false
   @Input() invalid = false
   @Input() placeholder = ''
   @Input() options?: { label: string; value: unknown }[]
+  @Input() value: unknown
+
+  @Output() valueChange: EventEmitter<unknown> = new EventEmitter()
 
   get inputType() {
     switch (this.type) {

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html

@@ -1 +1,15 @@
-<p>form-field-spatial-extent works!</p>
+<div class="flex flex-col gap-3">
+  <gn-ui-generic-keywords
+    [placeholder]="'Search for place keywords'"
+    [keywords]="shownKeywords$ | async"
+    [keywordTypes]="['place']"
+    (deletedKeyword)="handleKeywordDelete($event)"
+    (addedKeyword)="handleKeywordAdd($event)"
+  >
+  </gn-ui-generic-keywords>
+</div>
+<div class="w-full h-96">
+  <gn-ui-form-field-map-container
+    [spatialExtents]="spatialExtents$ | async"
+  ></gn-ui-form-field-map-container>
+</div>