geonetwork-ui 2.4.0-dev.ac57b75b → 2.4.0-dev.b0bcda82

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

@@ -0,0 +1,76 @@
+<div class="flex flex-col gap-3">
+  <div class="flex flex-row flex-wrap gap-2" data-test="rolesToPick">
+    <ng-container *ngFor="let role of rolesToPick">
+      <gn-ui-button
+        extraClass="px-2 py-1.5"
+        (buttonClick)="addRoleToDisplay(role)"
+      >
+        <div class="flex flex-row gap-1 items-center">
+          <span class="text-primary text-[20px] leading-[0] font-bold pb-[5px]"
+            >&#8330;</span
+          >
+          <span class="font-bold" translate>{{ roleToLabel(role) }}</span>
+        </div>
+      </gn-ui-button>
+    </ng-container>
+  </div>
+  <div
+    class="mt-8"
+    *ngIf="
+      roleSectionsToDisplay && roleSectionsToDisplay.length > 0;
+      else noContact
+    "
+    data-test="displayedRoles"
+  >
+    <div
+      *ngFor="
+        let role of roleSectionsToDisplay;
+        let index = index;
+        let isLast = last
+      "
+      class="flex flex-col gap-4"
+    >
+      <div class="flex flex-row justify-between">
+        <span class="font-bold text-base" translate>{{
+          roleToLabel(role)
+        }}</span>
+      </div>
+
+      <gn-ui-autocomplete
+        [placeholder]="'Choose a contact'"
+        [action]="autoCompleteAction"
+        (itemSelected)="addContact($event, role)"
+        [displayWithFn]="displayWithFn"
+        [minCharacterCount]="1"
+        [clearOnSelection]="true"
+      >
+      </gn-ui-autocomplete>
+
+      <ng-container *ngIf="contactsForRessourceByRole.get(role) as contacts">
+        <ng-container *ngIf="contacts.length > 1">
+          <gn-ui-sortable-list
+            [elements]="contactsAsDynElemByRole.get(role)"
+            (elementsChange)="handleContactsChanged($event)"
+          ></gn-ui-sortable-list>
+        </ng-container>
+        <ng-container *ngIf="contacts.length === 1">
+          <ng-container *ngFor="let contact of contacts">
+            <gn-ui-contact-card
+              [contact]="contact"
+              (contactRemoved)="removeContact(index)"
+            ></gn-ui-contact-card> </ng-container
+        ></ng-container>
+      </ng-container>
+
+      <hr class="border-t-[#D6D3D1] mt-4 mb-6" *ngIf="!isLast" />
+    </div>
+  </div>
+  <ng-template #noContact>
+    <div
+      class="p-4 border border-primary bg-primary-lightest rounded-lg"
+      translate
+    >
+      editor.record.form.field.contactsForResource.noContact
+    </div>
+  </ng-template>
+</div>

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

@@ -4,7 +4,7 @@
     [displayWithFn]="displayWithFn"
     [action]="autoCompleteAction"
     (itemSelected)="handleItemSelection($event)"
-    [clearOnSelection]="true"
+    [preventCompleteOnSelection]="true"
     [minCharacterCount]="0"
     [allowSubmit]="false"
   ></gn-ui-autocomplete>

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.component.html

@@ -1,4 +1,10 @@
-<div class="flex flex-col h-full">
+<ng-container *ngIf="isOpenData">
+  <gn-ui-form-field-open-data
+    [control]="formControl"
+    (visibilityChange)="onVisibilityChange($event)"
+  ></gn-ui-form-field-open-data>
+</ng-container>
+<div class="flex flex-col h-full" *ngIf="!isHidden">
   <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
     <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
   </ng-container>
@@ -87,4 +93,9 @@
       [control]="formControl"
     ></gn-ui-form-field-keywords>
   </ng-container>
+  <ng-container *ngIf="isContactsForResource">
+    <gn-ui-form-field-contacts-for-resource
+      [control]="formControl"
+    ></gn-ui-form-field-contacts-for-resource>
+  </ng-container>
 </ng-template>

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

@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
+  EventEmitter,
   Input,
   Output,
   ViewChild,
@@ -32,6 +33,8 @@ import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-o
 import { map, take } from 'rxjs/operators'
 import { EditorFacade } from '../../../+state/editor.facade'
 import { FormFieldConfig } from '../../../models'
+import { FormFieldContactsForResourceComponent } from './form-field-contacts-for-resource/form-field-contacts-for-resource.component'
+import { FormFieldOpenDataComponent } from './form-field-open-data/form-field-open-data.component'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -59,6 +62,8 @@ import { FormFieldConfig } from '../../../models'
     FormFieldKeywordsComponent,
     TranslateModule,
     FormFieldOverviewsComponent,
+    FormFieldContactsForResourceComponent,
+    FormFieldOpenDataComponent,
   ],
 })
 export class FormFieldComponent {
@@ -71,6 +76,7 @@ export class FormFieldComponent {
   }
 
   @Output() valueChange: Observable<unknown>
+  isHidden = false
 
   @ViewChild('titleInput') titleInput: ElementRef
 
@@ -89,6 +95,10 @@ export class FormFieldComponent {
     this.titleInput.nativeElement.children[0].focus()
   }
 
+  onVisibilityChange(visibility: boolean) {
+    this.isHidden = visibility
+  }
+
   get isTitle() {
     return this.model === 'title'
   }
@@ -122,8 +132,15 @@ export class FormFieldComponent {
   get isKeywords() {
     return this.model === 'keywords'
   }
+  get isContactsForResource() {
+    return this.model === 'contactsForResource'
+  }
 
   get withoutWrapper() {
     return this.model === 'title' || this.model === 'abstract'
   }
+
+  get isOpenData() {
+    return this.model === 'licenses'
+  }
 }

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

@@ -14,7 +14,7 @@
           >
             <div
               *ngIf="section.labelKey"
-              class="text-2xl font-petrona text-secondary"
+              class="text-2xl font-title text-secondary"
               translate
             >
               {{ section.labelKey }}

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

@@ -24,7 +24,6 @@ export class RecordFormComponent {
     if (!model) {
       return
     }
-    console.log(newValue)
     this.facade.updateRecordField(model, newValue)
   }
 

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -83,6 +83,13 @@ export const RECORD_ABSTRACT_FIELD: EditorField = {
   },
 }
 
+export const CONTACTS_FOR_RESOURCE_FIELD: EditorField = {
+  model: 'contactsForResource',
+  formFieldConfig: {
+    labelKey: '',
+  },
+}
+
 export const RECORD_GRAPHICAL_OVERVIEW_FIELD: EditorField = {
   model: 'overviews',
   formFieldConfig: {
@@ -157,7 +164,7 @@ export const DATA_MANAGERS_SECTION: EditorSection = {
   labelKey: marker('editor.record.form.section.dataManagers.label'),
   descriptionKey: marker('editor.record.form.section.dataManagers.description'),
   hidden: false,
-  fields: [],
+  fields: [CONTACTS_FOR_RESOURCE_FIELD],
 }
 
 export const DATA_POINT_OF_CONTACT_SECTION: EditorSection = {
@@ -194,3 +201,15 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
     },
   ],
 }
+
+/************************************************************
+ ***************           LICENSES            *****************
+ ************************************************************
+ */
+export const OPEN_DATA_LICENSES: string[] = [
+  'etalab',
+  'etalab-v2',
+  'odbl',
+  'odc-by',
+  'pddl',
+]

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html

@@ -6,6 +6,6 @@
   (inputSubmitted)="handleInputSubmission($event)"
   (inputCleared)="handleInputCleared()"
   [value]="searchInputValue$ | async"
-  [clearOnSelection]="true"
+  [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
 ></gn-ui-autocomplete>

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -54,6 +54,18 @@ export class ResultsTableContainerComponent implements OnDestroy {
         next: () => {
           this.recordsRepository.clearRecordDraft(uniqueIdentifier)
           this.searchFacade.requestNewResults()
+          this.notificationsService.showNotification(
+            {
+              type: 'success',
+              title: this.translateService.instant(
+                'editor.record.deleteSuccess.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.deleteSuccess.body'
+              )}`,
+            },
+            2500
+          )
         },
         error: (error) => {
           this.notificationsService.showNotification({

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.ts

@@ -17,7 +17,7 @@ import {
 import { MatIconModule } from '@angular/material/icon'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 
-type DynamicElement = {
+export type DynamicElement = {
   component: Type<unknown>
   inputs: Record<string, unknown>
 }
@@ -40,7 +40,7 @@ type DynamicElement = {
 })
 export class SortableListComponent {
   @Input() elements: Array<DynamicElement>
-  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }>
+  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }> = []
   @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
   @Output() add = new EventEmitter<string>()
 

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts

@@ -61,6 +61,7 @@ export class AutocompleteComponent
   @Input() action: (value: string) => Observable<AutocompleteItem[]>
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
+  @Input() preventCompleteOnSelection = false
   @Input() autoFocus = false
   @Input() minCharacterCount? = 3
   @Input() allowSubmit = true
@@ -206,13 +207,24 @@ export class AutocompleteComponent
     this.inputSubmitted.emit(this.inputRef.nativeElement.value)
   }
 
+  /**
+   * This function is triggered when an item is selected in the list of displayed items.
+   * If preventCompleteOnSelection is true then the input will be left as entered by the user.
+   * If preventCompleteOnSelection is false (by default) then the input will be completed with the item selected by the user.
+   * If clearOnSelection is true then the input will be cleared upon selection.
+   * @param event
+   */
   handleSelection(event: MatAutocompleteSelectedEvent) {
     this.cancelEnter = true
     this.itemSelected.emit(event.option.value)
-    if (this.clearOnSelection) {
-      this.lastInputValue$.pipe(first()).subscribe((any) => {
-        this.inputRef.nativeElement.value = any
+    if (this.preventCompleteOnSelection) {
+      this.lastInputValue$.pipe(first()).subscribe((lastInputValue) => {
+        this.inputRef.nativeElement.value = lastInputValue
       })
+      return
+    }
+    if (this.clearOnSelection) {
+      this.inputRef.nativeElement.value = ''
     }
   }
 }

package/src/libs/ui/inputs/src/lib/image-input/image-input.component.html

@@ -51,7 +51,7 @@
   <div class="w-full h-full flex flex-col gap-2">
     <label
       gnUiFilesDrop
-      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4 hover:cursor-pointer"
+      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4"
       (dragFilesOver)="handleDragFilesOver($event)"
       (dropFiles)="handleDropFiles($event)"
     >