geonetwork-ui 2.3.2 → 2.4.0-dev.10a614b2

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

@@ -0,0 +1,271 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} 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 { 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'
+
+@Component({
+  selector: 'gn-ui-form-field-contacts-for-resource',
+  templateUrl: './form-field-contacts-for-resource.component.html',
+  styleUrls: ['./form-field-contacts-for-resource.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+    AutocompleteComponent,
+    TranslateModule,
+    ContactCardComponent,
+    SortableListComponent,
+  ],
+})
+export class FormFieldContactsForResourceComponent
+  implements OnInit, OnDestroy
+{
+  @Input() control: FormControl<Individual[]>
+
+  subscription: Subscription = new Subscription()
+
+  allUsers$: Observable<UserModel[]>
+
+  contactsForRessourceByRole: Map<Role, Individual[]> = new Map()
+
+  contactsAsDynElemByRole: Map<Role, DynamicElement[]> = new Map()
+
+  rolesToPick: Role[] = [
+    'resource_provider',
+    'custodian',
+    'owner',
+    'point_of_contact',
+    'author',
+  ]
+
+  roleSectionsToDisplay: Role[] = []
+
+  allOrganizations: Map<string, Organization> = new Map()
+
+  constructor(
+    private platformServiceInterface: PlatformServiceInterface,
+    private organizationsServiceInterface: OrganizationsServiceInterface,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+    this.allUsers$ = this.platformServiceInterface.getUsers()
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.allOrganizations = new Map<string, Organization>(
+      (
+        await firstValueFrom(this.organizationsServiceInterface.organisations$)
+      ).map((organization) => [organization.name, organization])
+    )
+    this.updateContactsForRessource()
+    this.manageRoleSectionsToDisplay(this.control.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) {
+    this.roleSectionsToDisplay.push(roleToAdd)
+    this.filterRolesToPick()
+  }
+
+  filterRolesToPick() {
+    this.rolesToPick = this.rolesToPick.filter(
+      (role) => !this.roleSectionsToDisplay.includes(role)
+    )
+  }
+
+  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.contactsAsDynElemByRole = 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),
+      }
+
+      const contactAsDynElem = {
+        component: ContactCardComponent,
+        inputs: {
+          contact: updatedContact,
+          removable: false,
+        },
+      } as DynamicElement
+
+      if (!acc.has(contact.role)) {
+        acc.set(contact.role, [])
+      }
+
+      acc.get(contact.role).push(contactAsDynElem)
+
+      return acc
+    }, new Map<Role, DynamicElement[]>())
+
+    this.changeDetectorRef.markForCheck()
+  }
+
+  manageRoleSectionsToDisplay(contactsForResource: Individual[]) {
+    const roles = contactsForResource.map(
+      (contact: Individual) => contact.role
+    ) as Role[]
+
+    roles.forEach((role: Role) => {
+      if (!this.roleSectionsToDisplay.includes(role)) {
+        this.roleSectionsToDisplay.push(role)
+      }
+    })
+  }
+
+  removeContact(index: number) {
+    const newContactsforRessource = this.control.value.filter(
+      (_, i) => i !== index
+    )
+    this.control.setValue(newContactsforRessource)
+  }
+
+  handleContactsChanged(event: DynamicElement[]) {
+    const newContactsOrdered = event.map(
+      (contactAsDynElem) => contactAsDynElem.inputs['contact']
+    ) as Individual[]
+
+    const role = newContactsOrdered[0].role
+
+    this.contactsForRessourceByRole.set(role, newContactsOrdered)
+
+    const newControlValue = Array.from(
+      this.contactsForRessourceByRole.values()
+    ).flat()
+
+    this.control.setValue(newControlValue)
+  }
+
+  protected roleToLabel(role: string): string {
+    return RoleLabels.get(role)
+  }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  displayWithFn: (user: UserModel) => string = (user) =>
+    `${user.name} ${user.surname} ${
+      user.organisation ? `(${user.organisation})` : ''
+    }`
+
+  /**
+   * gn-ui-autocomplete
+   */
+  autoCompleteAction = (query: string) => {
+    const fuzzyFilter = createFuzzyFilter(query)
+    return this.allUsers$.pipe(
+      switchMap((users) => [
+        users.filter((user) => fuzzyFilter(user.username)),
+      ]),
+      map((results) => results.slice(0, 10)),
+      debounceTime(300),
+      distinctUntilChanged()
+    )
+  }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  addContact(contact: UserModel, role: string) {
+    const newContactsForRessource = {
+      firstName: contact.name ?? '',
+      lastName: contact.surname ?? '',
+      organization:
+        this.allOrganizations.get(contact.organisation) ??
+        ({ name: contact.organisation } as Organization),
+      email: contact.email ?? '',
+      role,
+      address: '',
+      phone: '',
+      position: '',
+    } as Individual
+
+    const newControlValue = [...this.control.value, newContactsForRessource]
+
+    this.control.setValue(newControlValue)
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+}

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

@@ -0,0 +1,19 @@
+<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>
+</div>

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

@@ -0,0 +1,79 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+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'
+
+type AutocompleteItem = { title: string; value: Keyword }
+
+@Component({
+  selector: 'gn-ui-form-field-keywords',
+  templateUrl: './form-field-keywords.component.html',
+  styleUrls: ['./form-field-keywords.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+    AutocompleteComponent,
+  ],
+})
+export class FormFieldKeywordsComponent {
+  @Input() control: FormControl<Keyword[]>
+
+  displayWithFn = (item: AutocompleteItem) => {
+    return `${item.title} (${item.value.thesaurus?.name})`
+  }
+
+  autoCompleteAction = (query: string) => {
+    return this.platformService
+      .searchKeywords(query, ['temporal', 'theme', 'other'])
+      .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 addedKeywords = [...this.control.value, keyword]
+
+    // remove duplicates from keyword
+    const filteredKeywords = addedKeywords.filter((value, index, self) => {
+      return (
+        index ===
+        self.findIndex(
+          (t) =>
+            t?.label === value?.label &&
+            t?.thesaurus?.id === value?.thesaurus?.id &&
+            t?.type === value?.type
+        )
+      )
+    })
+
+    this.control.setValue(filteredKeywords)
+  }
+
+  removeKeyword(index: number) {
+    const removeKeywords = this.control.value.filter((_, i) => i !== index)
+
+    this.control.setValue(removeKeywords)
+  }
+}

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]="value"
+  (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,59 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { CheckToggleComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { OPEN_DATA_LICENSES } from './../../../../fields.config'
+import { Subscription } from 'rxjs'
+
+@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 OnInit {
+  @Input() control: FormControl
+  value = false
+  @Output() visibilityChange = new EventEmitter<boolean>()
+  subscription: Subscription
+
+  get config() {
+    return OPEN_DATA_LICENSES
+  }
+
+  ngOnInit() {
+    this.initToggle()
+    this.subscription = new Subscription()
+
+    this.subscription.add(
+      this.control.valueChanges.subscribe((value) => {
+        this.value = this.config.includes(value[0].text)
+        this.visibilityChange.emit(this.value)
+      })
+    )
+  }
+
+  initToggle() {
+    this.value = this.config.includes(this.control.value[0].text)
+    this.visibilityChange.emit(this.value)
+  }
+
+  onOpenDataToggled(boolean) {
+    if (boolean) {
+      this.control.setValue([{ text: this.config[0] }])
+    }
+    this.value = !this.value
+    this.visibilityChange.emit(boolean)
+  }
+}

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

@@ -0,0 +1,5 @@
+<gn-ui-overview-upload
+  [metadataUuid]="metadataUuid"
+  [formControl]="control"
+  (overviewChange)="handleOverviewChange($event)"
+></gn-ui-overview-upload>

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

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { OverviewUploadComponent } from '../../../overview-upload/overview-upload.component'
+import { FormControl } from '@angular/forms'
+import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+
+@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, OverviewUploadComponent],
+})
+export class FormFieldOverviewsComponent {
+  @Input() metadataUuid: string
+  @Input() control!: FormControl
+
+  handleOverviewChange(overView: GraphicOverview | null) {
+    this.control.setValue(overView ? [overView] : [])
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents-date/form-field-temporal-extents-date.component.html

@@ -0,0 +1,7 @@
+<div class="border rounded-lg px-4 pb-4">
+  <p class="my-2" translate>editor.record.form.temporalExtents.date</p>
+  <gn-ui-date-picker
+    [date]="control.value?.start"
+    (dateChange)="control.setValue({ start: $event })"
+  ></gn-ui-date-picker>
+</div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents-date/form-field-temporal-extents-date.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { DatePickerComponent } from '../../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-form-field-temporal-extents-date',
+  templateUrl: './form-field-temporal-extents-date.component.html',
+  styleUrls: ['./form-field-temporal-extents-date.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DatePickerComponent, TranslateModule],
+})
+export class FormFieldTemporalExtentsDateComponent {
+  @Input() control!: FormControl
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents-range/form-field-temporal-extents-range.component.html

@@ -0,0 +1,13 @@
+<div class="border rounded-lg px-4 pb-4">
+  <p class="my-2" translate>editor.record.form.temporalExtents.range</p>
+  <gn-ui-date-range-picker
+    [startDate]="control.value?.start"
+    [endDate]="control.value?.end"
+    (startDateChange)="
+      control.setValue({ start: $event, end: control.value?.end })
+    "
+    (endDateChange)="
+      control.setValue({ start: control.value?.start, end: $event })
+    "
+  ></gn-ui-date-range-picker>
+</div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents-range/form-field-temporal-extents-range.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { DateRangePickerComponent } from '../../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-form-field-temporal-extents-range',
+  templateUrl: './form-field-temporal-extents-range.component.html',
+  styleUrls: ['./form-field-temporal-extents-range.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DateRangePickerComponent, TranslateModule],
+})
+export class FormFieldTemporalExtentsRangeComponent {
+  @Input() control!: FormControl
+}

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

@@ -0,0 +1,6 @@
+<gn-ui-sortable-list
+  [elements]="elements"
+  (elementsChange)="onElementsChange($event)"
+  [addOptions]="addOptions$ | async"
+  (add)="onAdd($event)"
+></gn-ui-sortable-list>

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

@@ -0,0 +1,131 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  Type,
+} from '@angular/core'
+import { FormArray, FormControl } from '@angular/forms'
+import { SortableListComponent } from '../../../../../../../../../libs/ui/elements/src'
+import { Subscription, combineLatest, map } from 'rxjs'
+import { FormFieldTemporalExtentsDateComponent } from './form-field-temporal-extents-date/form-field-temporal-extents-date.component'
+import { FormFieldTemporalExtentsRangeComponent } from './form-field-temporal-extents-range/form-field-temporal-extents-range.component'
+import { TranslateService } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-form-field-temporal-extents',
+  templateUrl: './form-field-temporal-extents.component.html',
+  styleUrls: ['./form-field-temporal-extents.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, SortableListComponent],
+})
+export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
+  @Input() control!: FormControl
+
+  subscription: Subscription
+
+  array: FormArray = new FormArray([])
+  elements: Array<{
+    component: Type<any>
+    inputs: Record<string, any>
+  }>
+
+  addOptions$ = combineLatest([
+    this.translateService
+      .get('editor.record.form.temporalExtents.addDate')
+      .pipe(map((buttonLabel) => ({ buttonLabel, eventName: 'date' }))),
+    this.translateService
+      .get('editor.record.form.temporalExtents.addRange')
+      .pipe(map((buttonLabel) => ({ buttonLabel, eventName: 'range' }))),
+  ])
+
+  constructor(private translateService: TranslateService) {}
+
+  ngOnInit() {
+    this.resetValueFromInput(this.control.value)
+
+    this.subscription = new Subscription()
+
+    this.subscription.add(
+      this.control.valueChanges.subscribe((value) => {
+        this.resetValueFromInput(value)
+      })
+    )
+
+    this.subscription.add(
+      this.array.valueChanges.subscribe((value) => {
+        this.control.setValue(value)
+      })
+    )
+  }
+
+  onElementsChange(elements: { inputs: Record<string, unknown> }[]) {
+    this.array.clear({ emitEvent: false })
+    elements.forEach((e, i) =>
+      this.array.push(e.inputs.control, {
+        emitEvent: i === elements.length - 1,
+      })
+    )
+  }
+
+  onAdd(eventName: string) {
+    switch (eventName) {
+      case 'date': {
+        const dateControl = new FormControl({ start: new Date() })
+        this.array.push(dateControl)
+        break
+      }
+      case 'range': {
+        const rangeControl = new FormControl({
+          start: new Date(),
+          end: new Date(),
+        })
+        this.array.push(rangeControl)
+        break
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+
+  private resetValueFromInput(value) {
+    this.array.clear({ emitEvent: false })
+    let newElements = []
+    value.forEach((v: any) => {
+      if ('start' in v && 'end' in v) {
+        const rangeControl = new FormControl({
+          start: v.start,
+          end: v.end,
+        })
+        this.array.push(rangeControl, { emitEvent: false })
+        newElements = [
+          ...newElements,
+          {
+            component: FormFieldTemporalExtentsRangeComponent,
+            inputs: {
+              control: rangeControl,
+            },
+          },
+        ]
+      } else {
+        const dateControl = new FormControl({ start: v.start })
+        this.array.push(dateControl, { emitEvent: false })
+        newElements = [
+          ...newElements,
+          {
+            component: FormFieldTemporalExtentsDateComponent,
+            inputs: {
+              control: dateControl,
+            },
+          },
+        ]
+      }
+    })
+    this.elements = newElements
+  }
+}