geonetwork-ui 2.4.0-dev.e7ff1d25 → 2.4.0-dev.e97caaf2

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html

@@ -7,11 +7,13 @@
     ></gn-ui-thumbnail>
     <div class="flex flex-col w-full">
       <div class="flex flex-row justify-between">
-        <span class="flex flex-wrap font-bold w-full"
+        <span
+          class="flex flex-wrap font-bold w-full"
+          data-test="contactCardName"
           >{{ contact.firstName }} {{ contact.lastName }}</span
         >
       </div>
-      <div>{{ contact.email }}</div>
+      <div data-test="contactCardEmail">{{ contact.email }}</div>
     </div>
   </div>
   <gn-ui-button

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html

@@ -0,0 +1,26 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="placeholder"
+    [displayWithFn]="displayWithFn"
+    [action]="autoCompleteAction"
+    (itemSelected)="handleItemSelection($event)"
+    [preventCompleteOnSelection]="true"
+    [minCharacterCount]="0"
+    [allowSubmit]="false"
+  ></gn-ui-autocomplete>
+  <div class="flex gap-2 flex-wrap">
+    <gn-ui-badge
+      *ngFor="let keyword of keywords"
+      [removable]="true"
+      (badgeRemoveClicked)="removeKeyword(keyword)"
+      >{{ keyword.label }}
+
+      <mat-icon
+        *ngIf="isPlaceWithoutExtent(keyword)"
+        [title]="'editor.form.placeKeywordWithoutExtent' | translate"
+        class="material-symbols-outlined"
+        >warning</mat-icon
+      >
+    </gn-ui-badge>
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts

@@ -0,0 +1,89 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import {
+  AutocompleteComponent,
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '../../../../../../../libs/ui/inputs/src'
+import { UiWidgetsModule } from '../../../../../../../libs/ui/widgets/src'
+import { map } from 'rxjs'
+import { Keyword } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
+import { MatIconModule } from '@angular/material/icon'
+import { TranslateModule } from '@ngx-translate/core'
+
+type AutocompleteItem = { title: string; value: Keyword }
+
+@Component({
+  selector: 'gn-ui-generic-keywords',
+  templateUrl: './generic-keywords.component.html',
+  styleUrls: ['./generic-keywords.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+    AutocompleteComponent,
+    MatIconModule,
+    TranslateModule,
+  ],
+})
+export class GenericKeywordsComponent {
+  @Input() keywords: Keyword[]
+  @Input() keywordTypes: KeywordType[]
+  @Input() placeholder: string
+  @Output() changedKeywords: EventEmitter<Keyword[]> = new EventEmitter()
+  @Output() addedKeyword: EventEmitter<Keyword> = new EventEmitter()
+  @Output() deletedKeyword: EventEmitter<Keyword> = new EventEmitter()
+
+  displayWithFn = (item: AutocompleteItem) => {
+    return `${item.title} (${item.value.thesaurus?.name})`
+  }
+
+  autoCompleteAction = (query: string) => {
+    return this.platformService.searchKeywords(query, this.keywordTypes).pipe(
+      map((keywords) =>
+        keywords.map((keyword) => {
+          return { title: keyword.label, value: keyword }
+        })
+      )
+    )
+  }
+
+  constructor(private platformService: PlatformServiceInterface) {}
+
+  handleItemSelection(item: AutocompleteItem) {
+    this.addKeyword(item.value)
+  }
+
+  addKeyword(keyword: Keyword) {
+    const duplicatedKeyword = this.keywords.find(
+      (k) => k.label === keyword.label
+    )
+    if (!duplicatedKeyword) {
+      this.keywords = [...this.keywords, keyword]
+      this.changedKeywords.emit(this.keywords)
+      this.addedKeyword.emit(keyword)
+    }
+  }
+
+  removeKeyword(keyword: Keyword) {
+    this.keywords = this.keywords.filter((k) => k.label !== keyword.label)
+    this.changedKeywords.emit(this.keywords)
+    this.deletedKeyword.emit(keyword)
+  }
+
+  isPlaceWithoutExtent(keyword: Keyword): boolean {
+    if (keyword.type !== 'place') return false
+    return !keyword.bbox
+  }
+}

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html

@@ -1,7 +1,7 @@
 <gn-ui-image-input
   [maxSizeMB]="5"
   [previewUrl]="resourceUrl"
-  [altText]="resourceAltText"
+  [altText]="altText"
   (fileChange)="handleFileChange($event)"
   (urlChange)="handleUrlChange($event)"
   (altTextChange)="handleAltTextChange($event)"

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts

@@ -1,19 +1,16 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
-  OnChanges,
-  OnInit,
   Output,
-  SimpleChanges,
 } from '@angular/core'
-import { CommonModule } from '@angular/common'
+import { GraphicOverview } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { RecordsApiService } from '../../../../../../../libs/data-access/gn4/src'
+import { NotificationsService } from '../../../../../../../libs/feature/notifications/src'
 import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
-import { FormControl } from '@angular/forms'
-import { GraphicOverview } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-overview-upload',
@@ -23,56 +20,54 @@ import { GraphicOverview } from '../../../../../../../libs/common/domain/src/lib
   styleUrls: ['./overview-upload.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OverviewUploadComponent implements OnInit, OnChanges {
+export class OverviewUploadComponent {
   @Input() metadataUuid: string
-  @Input() formControl!: FormControl
+  _overview: GraphicOverview | null
+  @Input()
+  set overview(value: GraphicOverview | null) {
+    this._overview = value
+    if (this._overview) {
+      this.recordsApiService.getAllResources(this.metadataUuid).subscribe({
+        next: (resources) => {
+          const resource = resources.find(
+            (r) => r.url === this._overview.url.toString()
+          )
+          if (resource) {
+            this.resourceFileName = resource.filename
+          }
+        },
+        error: this.errorHandle,
+      })
+      this.resourceUrl = this._overview.url.toString()
+      this.altText = this._overview.description
+    } else {
+      this.resourceUrl = ''
+      this.resourceFileName = ''
+      this.altText = ''
+    }
+  }
+
   @Output() overviewChange = new EventEmitter<GraphicOverview | null>()
-  @Output() altTextChange: EventEmitter<string> = new EventEmitter()
 
-  resourceAltText: string
-  resourceFileName: string
   resourceUrl: string
+  resourceFileName: string
+  altText: string
 
   constructor(
     private recordsApiService: RecordsApiService,
-    private cd: ChangeDetectorRef
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService
   ) {}
 
-  ngOnInit(): void {
-    this.recordsApiService.getAllResources(this.metadataUuid).subscribe({
-      next: (resources) => {
-        if (resources && resources.length > 0) {
-          this.resourceUrl = resources[0].url
-          this.resourceFileName = resources[0].filename
-          if (!this.resourceAltText) {
-            this.resourceAltText = this.resourceFileName
-          }
-        } else {
-          this.resourceUrl = ''
-          this.resourceAltText = ''
-          this.resourceFileName = ''
-        }
-
-        this.cd.markForCheck()
-      },
-      error: this.errorHandle,
-    })
-  }
-
   handleFileChange(file: File) {
     this.recordsApiService
       .putResource(this.metadataUuid, file, 'public')
       .subscribe({
         next: (resource) => {
-          this.resourceUrl = resource.url
-          this.resourceAltText = resource.filename
-
           this.overviewChange.emit({
             url: new URL(resource.url),
             description: resource.filename,
           })
-
-          this.cd.markForCheck()
         },
         error: this.errorHandle,
       })
@@ -83,79 +78,36 @@ export class OverviewUploadComponent implements OnInit, OnChanges {
       .putResourceFromURL(this.metadataUuid, url, 'public')
       .subscribe({
         next: (resource) => {
-          this.resourceUrl = resource.url
-          this.resourceAltText = resource.filename
-
           this.overviewChange.emit({
             url: new URL(resource.url),
             description: resource.filename,
           })
-
-          this.cd.markForCheck()
         },
         error: this.errorHandle,
       })
   }
 
   handleAltTextChange(newAltText: string) {
-    this.resourceAltText = newAltText
-
     this.overviewChange.emit({
       url: new URL(this.resourceUrl),
-      description: this.resourceAltText,
+      description: newAltText,
     })
-
-    this.cd.markForCheck()
   }
 
   handleDelete() {
-    //this.formControl.markAsDirty()
-    this.recordsApiService
-      .delResource(this.metadataUuid, this.resourceFileName)
-      .subscribe({
-        next: () => {
-          this.resourceAltText = ''
-          this.resourceUrl = ''
-
-          this.overviewChange.emit(null)
-
-          this.cd.markForCheck()
-        },
-        error: this.errorHandle,
-      })
-  }
-
-  private errorHandle = (error: never) => {
-    console.error(error)
-
-    this.resourceUrl = ''
-    this.resourceAltText = ''
-    this.resourceFileName = ''
-
     this.overviewChange.emit(null)
-
-    this.cd.markForCheck()
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    const overviewChanges = changes['formControl']
-    if (
-      overviewChanges &&
-      overviewChanges.currentValue !== overviewChanges.previousValue
-    ) {
-      let overview: GraphicOverview
-      if (
-        overviewChanges.currentValue.value &&
-        overviewChanges.currentValue.value.length > 0
-      ) {
-        overview = overviewChanges.currentValue.value[0] as GraphicOverview
-      } else {
-        return
-      }
-      if (overview.description) {
-        this.resourceAltText = overview.description
-        this.cd.markForCheck()
-      }
-    }
+  private errorHandle = (error) => {
+    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-contacts-for-resource/form-field-contacts-for-resource.component.ts

@@ -3,42 +3,42 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
-  OnDestroy,
+  OnChanges,
   OnInit,
+  Output,
 } from '@angular/core'
-import { FormControl } from '@angular/forms'
-import {
-  AutocompleteComponent,
-  DropdownSelectorComponent,
-  UiInputsModule,
-} from '../../../../../../../../../libs/ui/inputs/src'
-import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
 import {
   Individual,
   Organization,
   Role,
   RoleLabels,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib/model/user'
+import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import {
+  DynamicElement,
+  SortableListComponent,
+} from '../../../../../../../../../libs/ui/elements/src'
+import {
+  AutocompleteComponent,
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
+import { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
 import {
   debounceTime,
   distinctUntilChanged,
   firstValueFrom,
   Observable,
-  Subscription,
   switchMap,
 } from 'rxjs'
-import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib/model/user'
-import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
-import { ContactCardComponent } from '../../../contact-card/contact-card.component'
-import {
-  DynamicElement,
-  SortableListComponent,
-} from '../../../../../../../../../libs/ui/elements/src'
-import { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
 import { map } from 'rxjs/operators'
+import { ContactCardComponent } from '../../../contact-card/contact-card.component'
 
 @Component({
   selector: 'gn-ui-form-field-contacts-for-resource',
@@ -58,13 +58,10 @@ import { map } from 'rxjs/operators'
   ],
 })
 export class FormFieldContactsForResourceComponent
-  implements OnInit, OnDestroy
+  implements OnChanges, OnInit
 {
-  @Input() control: FormControl<Individual[]>
-
-  subscription: Subscription = new Subscription()
-
-  allUsers$: Observable<UserModel[]>
+  @Input() value: Individual[]
+  @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
 
   contactsForRessourceByRole: Map<Role, Individual[]> = new Map()
 
@@ -84,10 +81,13 @@ export class FormFieldContactsForResourceComponent
 
   constructor(
     private platformServiceInterface: PlatformServiceInterface,
-    private organizationsServiceInterface: OrganizationsServiceInterface,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
-    this.allUsers$ = this.platformServiceInterface.getUsers()
+    private organizationsServiceInterface: OrganizationsServiceInterface
+  ) {}
+
+  ngOnChanges() {
+    this.updateContactsForRessource()
+    this.manageRoleSectionsToDisplay(this.value)
+    this.filterRolesToPick()
   }
 
   async ngOnInit(): Promise<void> {
@@ -97,20 +97,8 @@ export class FormFieldContactsForResourceComponent
       ).map((organization) => [organization.name, organization])
     )
     this.updateContactsForRessource()
-    this.manageRoleSectionsToDisplay(this.control.value)
+    this.manageRoleSectionsToDisplay(this.value)
     this.filterRolesToPick()
-
-    this.changeDetectorRef.markForCheck()
-
-    this.subscription.add(
-      this.control.valueChanges.subscribe((contactsForResource) => {
-        this.updateContactsForRessource()
-        this.manageRoleSectionsToDisplay(contactsForResource)
-        this.filterRolesToPick()
-
-        this.changeDetectorRef.markForCheck()
-      })
-    )
   }
 
   addRoleToDisplay(roleToAdd: string) {
@@ -125,31 +113,28 @@ export class FormFieldContactsForResourceComponent
   }
 
   updateContactsForRessource() {
-    this.contactsForRessourceByRole = this.control.value.reduce(
-      (acc, contact) => {
-        const completeOrganization = this.allOrganizations.get(
-          contact.organization.name
-        )
-
-        const updatedContact = {
-          ...contact,
-          organization:
-            completeOrganization ??
-            ({ name: contact.organization.name } as Organization),
-        }
-
-        if (!acc.has(contact.role)) {
-          acc.set(contact.role, [])
-        }
-
-        acc.get(contact.role).push(updatedContact)
-
-        return acc
-      },
-      new Map<Role, Individual[]>()
-    )
+    this.contactsForRessourceByRole = this.value.reduce((acc, contact) => {
+      const completeOrganization = this.allOrganizations.get(
+        contact.organization.name
+      )
+
+      const updatedContact = {
+        ...contact,
+        organization:
+          completeOrganization ??
+          ({ name: contact.organization.name } as Organization),
+      }
+
+      if (!acc.has(contact.role)) {
+        acc.set(contact.role, [])
+      }
 
-    this.contactsAsDynElemByRole = this.control.value.reduce((acc, contact) => {
+      acc.get(contact.role).push(updatedContact)
+
+      return acc
+    }, new Map<Role, Individual[]>())
+
+    this.contactsAsDynElemByRole = this.value.reduce((acc, contact) => {
       const completeOrganization = this.allOrganizations.get(
         contact.organization.name
       )
@@ -177,8 +162,6 @@ export class FormFieldContactsForResourceComponent
 
       return acc
     }, new Map<Role, DynamicElement[]>())
-
-    this.changeDetectorRef.markForCheck()
   }
 
   manageRoleSectionsToDisplay(contactsForResource: Individual[]) {
@@ -194,10 +177,8 @@ export class FormFieldContactsForResourceComponent
   }
 
   removeContact(index: number) {
-    const newContactsforRessource = this.control.value.filter(
-      (_, i) => i !== index
-    )
-    this.control.setValue(newContactsforRessource)
+    const newContactsforRessource = this.value.filter((_, i) => i !== index)
+    this.valueChange.emit(newContactsforRessource)
   }
 
   handleContactsChanged(event: DynamicElement[]) {
@@ -213,7 +194,7 @@ export class FormFieldContactsForResourceComponent
       this.contactsForRessourceByRole.values()
     ).flat()
 
-    this.control.setValue(newControlValue)
+    this.valueChange.emit(newControlValue)
   }
 
   protected roleToLabel(role: string): string {
@@ -233,7 +214,7 @@ export class FormFieldContactsForResourceComponent
    */
   autoCompleteAction = (query: string) => {
     const fuzzyFilter = createFuzzyFilter(query)
-    return this.allUsers$.pipe(
+    return this.platformServiceInterface.getUsers().pipe(
       switchMap((users) => [
         users.filter((user) => fuzzyFilter(user.username)),
       ]),
@@ -246,26 +227,23 @@ export class FormFieldContactsForResourceComponent
   /**
    * gn-ui-autocomplete
    */
-  addContact(contact: UserModel, role: string) {
+  addContact(contact: unknown, role: string) {
+    const newContact = contact as UserModel
     const newContactsForRessource = {
-      firstName: contact.name ?? '',
-      lastName: contact.surname ?? '',
+      firstName: newContact.name ?? '',
+      lastName: newContact.surname ?? '',
       organization:
-        this.allOrganizations.get(contact.organisation) ??
-        ({ name: contact.organisation } as Organization),
-      email: contact.email ?? '',
+        this.allOrganizations.get(newContact.organisation) ??
+        ({ name: newContact.organisation } as Organization),
+      email: newContact.email ?? '',
       role,
       address: '',
       phone: '',
       position: '',
     } as Individual
 
-    const newControlValue = [...this.control.value, newContactsForRessource]
-
-    this.control.setValue(newControlValue)
-  }
+    const newControlValue = [...this.value, newContactsForRessource]
 
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe()
+    this.valueChange.emit(newControlValue)
   }
 }

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

@@ -1,19 +1,9 @@
 <div class="flex flex-col gap-3">
-  <gn-ui-autocomplete
-    [placeholder]="'Search for keywords in all thesaurus'"
-    [displayWithFn]="displayWithFn"
-    [action]="autoCompleteAction"
-    (itemSelected)="handleItemSelection($event)"
-    [preventCompleteOnSelection]="true"
-    [minCharacterCount]="0"
-    [allowSubmit]="false"
-  ></gn-ui-autocomplete>
-  <div class="flex gap-2 flex-wrap">
-    <gn-ui-badge
-      *ngFor="let keyword of control.value; let index = index"
-      [removable]="true"
-      (badgeRemoveClicked)="removeKeyword(index)"
-      >{{ keyword.label }}</gn-ui-badge
-    >
-  </div>
+  <gn-ui-generic-keywords
+    [keywords]="value"
+    [keywordTypes]="keywordTypes"
+    [placeholder]="placeholder | translate"
+    (changedKeywords)="handleKeywordsChange($event)"
+  >
+  </gn-ui-generic-keywords>
 </div>