Merge pull request #2900 from toniprieto/edit-item-authorities-bug-model

Error loading the initial value when editing an authority field in edit item page

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html

@@ -9,12 +9,12 @@
     <ds-dynamic-scrollable-dropdown *ngIf="mdValue.editing && (isScrollableVocabulary() | async)"
                                     [bindId]="mdField"
                                     [group]="group"
-                                    [model]="getModel() | async"
+                                    [model]="getModel()"
                                     (change)="onChangeAuthorityField($event)">
     </ds-dynamic-scrollable-dropdown>
     <ds-dynamic-onebox *ngIf="mdValue.editing && ((isHierarchicalVocabulary() | async) || (isSuggesterVocabulary() | async))"
                       [group]="group"
-                      [model]="getModel() | async"
+                      [model]="getModel()"
                       (change)="onChangeAuthorityField($event)">
     </ds-dynamic-onebox>
     <div *ngIf="!isVirtual && !mdValue.editing && mdValue.newValue.authority && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_UNSET && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_NOVALUE">

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts

@@ -10,10 +10,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import {
+import { of } from 'rxjs';
-  Observable,
-  of,
-} from 'rxjs';
 import { MetadataField } from 'src/app/core/metadata/metadata-field.model';
 import { MetadataSchema } from 'src/app/core/metadata/metadata-schema.model';
 import { RegistryService } from 'src/app/core/registry/registry.service';
@@ -346,14 +343,11 @@ describe('DsoEditMetadataValueComponent', () => {
     });
 
     it('getModel should return a DynamicScrollableDropdownModel', () => {
-      const result = component.getModel();
+      const model = component.getModel();
 
-      expect(result instanceof Observable).toBe(true);
+      expect(model instanceof DynamicScrollableDropdownModel).toBe(true);
+      expect(model.vocabularyOptions.name).toBe(mockVocabularyScrollable.name);
 
-      result.subscribe((model) => {
-        expect(model instanceof DynamicScrollableDropdownModel).toBe(true);
-        expect(model.vocabularyOptions.name).toBe(mockVocabularyScrollable.name);
-      });
     });
   });
 
@@ -380,14 +374,10 @@ describe('DsoEditMetadataValueComponent', () => {
     });
 
     it('getModel should return a DynamicOneboxModel', () => {
-      const result = component.getModel();
+      const model = component.getModel();
 
-      expect(result instanceof Observable).toBe(true);
+      expect(model instanceof DynamicOneboxModel).toBe(true);
-
+      expect(model.vocabularyOptions.name).toBe(mockVocabularyHierarchical.name);
-      result.subscribe((model) => {
-        expect(model instanceof DynamicOneboxModel).toBe(true);
-        expect(model.vocabularyOptions.name).toBe(mockVocabularyHierarchical.name);
-      });
     });
   });
 
@@ -416,14 +406,10 @@ describe('DsoEditMetadataValueComponent', () => {
     });
 
     it('getModel should return a DynamicOneboxModel', () => {
-      const result = component.getModel();
+      const model = component.getModel();
 
-      expect(result instanceof Observable).toBe(true);
+      expect(model instanceof DynamicOneboxModel).toBe(true);
-
+      expect(model.vocabularyOptions.name).toBe(mockVocabularySuggester.name);
-      result.subscribe((model) => {
-        expect(model instanceof DynamicOneboxModel).toBe(true);
-        expect(model.vocabularyOptions.name).toBe(mockVocabularySuggester.name);
-      });
     });
 
     describe('authority key edition', () => {

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts

@@ -29,6 +29,7 @@ import {
   TranslateService,
 } from '@ngx-translate/core';
 import {
+  BehaviorSubject,
   EMPTY,
   Observable,
   of as observableOf,
@@ -37,6 +38,7 @@ import {
   map,
   switchMap,
   take,
+  tap,
 } from 'rxjs/operators';
 import { RegistryService } from 'src/app/core/registry/registry.service';
 import { VocabularyService } from 'src/app/core/submission/vocabularies/vocabulary.service';
@@ -196,9 +198,9 @@ export class DsoEditMetadataValueComponent implements OnInit, OnChanges {
   group = new UntypedFormGroup({ authorityField : new UntypedFormControl() });
 
   /**
-   * Observable property of the model to use for editinf authorities values
+   * Model to use for editing authorities values
    */
-  private model$: Observable<DynamicOneboxModel | DynamicScrollableDropdownModel>;
+  private model$: BehaviorSubject<DynamicOneboxModel | DynamicScrollableDropdownModel> = new BehaviorSubject(null);
 
   /**
    * Observable with information about the authority vocabulary used
@@ -278,6 +280,8 @@ export class DsoEditMetadataValueComponent implements OnInit, OnChanges {
     }
 
     this.isAuthorityControlled$ = this.vocabulary$.pipe(
+      // Create the model used by the authority fields to ensure its existence when the field is initialized
+      tap((v: Vocabulary) => this.model$.next(this.createModel(v))),
       map((result: Vocabulary) => isNotEmpty(result)),
     );
 
@@ -293,54 +297,62 @@ export class DsoEditMetadataValueComponent implements OnInit, OnChanges {
       map((result: Vocabulary) => isNotEmpty(result) && !result.hierarchical && !result.scrollable),
     );
 
-    this.model$ = this.vocabulary$.pipe(
+  }
-      map((vocabulary: Vocabulary) => {
-        let formFieldValue;
-        if (isNotEmpty(this.mdValue.newValue.value)) {
-          formFieldValue = new FormFieldMetadataValueObject();
-          formFieldValue.value = this.mdValue.newValue.value;
-          formFieldValue.display = this.mdValue.newValue.value;
-          if (this.mdValue.newValue.authority) {
-            formFieldValue.authority = this.mdValue.newValue.authority;
-            formFieldValue.confidence = this.mdValue.newValue.confidence;
-          }
-        } else {
-          formFieldValue = this.mdValue.newValue.value;
-        }
 
-        const vocabularyOptions = vocabulary ? {
+  /**
-          closed: false,
+   * Returns a {@link DynamicOneboxModel} or {@link DynamicScrollableDropdownModel} model based on the
-          name: vocabulary.name,
+   * vocabulary used.
-        } as VocabularyOptions : null;
+   */
-
+  private createModel(vocabulary: Vocabulary): DynamicOneboxModel | DynamicScrollableDropdownModel {
-        if (!vocabulary.scrollable) {
+    if (isNotEmpty(vocabulary)) {
-          const model: DsDynamicOneboxModelConfig = {
+      let formFieldValue;
-            id: 'authorityField',
+      if (isNotEmpty(this.mdValue.newValue.value)) {
-            label: `${this.dsoType}.edit.metadata.edit.value`,
+        formFieldValue = new FormFieldMetadataValueObject();
-            vocabularyOptions: vocabularyOptions,
+        formFieldValue.value = this.mdValue.newValue.value;
-            metadataFields: [this.mdField],
+        formFieldValue.display = this.mdValue.newValue.value;
-            value: formFieldValue,
+        if (this.mdValue.newValue.authority) {
-            repeatable: false,
+          formFieldValue.authority = this.mdValue.newValue.authority;
-            submissionId: 'edit-metadata',
+          formFieldValue.confidence = this.mdValue.newValue.confidence;
-            hasSelectableMetadata: false,
-          };
-          return new DynamicOneboxModel(model);
-        } else {
-          const model: DynamicScrollableDropdownModelConfig = {
-            id: 'authorityField',
-            label: `${this.dsoType}.edit.metadata.edit.value`,
-            placeholder: `${this.dsoType}.edit.metadata.edit.value`,
-            vocabularyOptions: vocabularyOptions,
-            metadataFields: [this.mdField],
-            value: formFieldValue,
-            repeatable: false,
-            submissionId: 'edit-metadata',
-            hasSelectableMetadata: false,
-            maxOptions: 10,
-          };
-          return new DynamicScrollableDropdownModel(model);
         }
-      }));
+      } else {
+        formFieldValue = this.mdValue.newValue.value;
+      }
+
+      const vocabularyOptions = vocabulary ? {
+        closed: false,
+        name: vocabulary.name,
+      } as VocabularyOptions : null;
+
+      if (!vocabulary.scrollable) {
+        const model: DsDynamicOneboxModelConfig = {
+          id: 'authorityField',
+          label: `${this.dsoType}.edit.metadata.edit.value`,
+          vocabularyOptions: vocabularyOptions,
+          metadataFields: [this.mdField],
+          value: formFieldValue,
+          repeatable: false,
+          submissionId: 'edit-metadata',
+          hasSelectableMetadata: false,
+        };
+        return new DynamicOneboxModel(model);
+      } else {
+        const model: DynamicScrollableDropdownModelConfig = {
+          id: 'authorityField',
+          label: `${this.dsoType}.edit.metadata.edit.value`,
+          placeholder: `${this.dsoType}.edit.metadata.edit.value`,
+          vocabularyOptions: vocabularyOptions,
+          metadataFields: [this.mdField],
+          value: formFieldValue,
+          repeatable: false,
+          submissionId: 'edit-metadata',
+          hasSelectableMetadata: false,
+          maxOptions: 10,
+        };
+        return new DynamicScrollableDropdownModel(model);
+      }
+    } else {
+      return null;
+    }
   }
 
   /**
@@ -438,11 +450,11 @@ export class DsoEditMetadataValueComponent implements OnInit, OnChanges {
   }
 
   /**
-   * Returns an observable with the {@link DynamicOneboxModel} or {@link DynamicScrollableDropdownModel} model used
+   * Returns the {@link DynamicOneboxModel} or {@link DynamicScrollableDropdownModel} model used
    * for the authority field
    */
-  getModel(): Observable<DynamicOneboxModel | DynamicScrollableDropdownModel> {
+  getModel(): DynamicOneboxModel | DynamicScrollableDropdownModel {
-    return this.model$;
+    return this.model$.value;
   }
 
   /**