Add button to enable free-text editing in dropdown fields during item edition and fix error when clicking "Clear selection" option

Author: toniprieto

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

@@ -3,15 +3,21 @@
      [ngClass]="{ 'ds-warning': mdValue.reordered || mdValue.change === DsoEditMetadataChangeTypeEnum.UPDATE, 'ds-danger': mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE, 'ds-success': mdValue.change === DsoEditMetadataChangeTypeEnum.ADD, 'h-100': isOnlyValue }">
   <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex flex-column" *ngVar="(mdRepresentation$ | async) as mdRepresentation" role="cell">
     <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing && !mdRepresentation">{{ mdValue.newValue.value }}</div>
-    <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation && (isAuthorityControlled() | async) !== true" [(ngModel)]="mdValue.newValue.value"
+    <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation && ((isAuthorityControlled() | async) !== true || enabledFreeTextEditing)" [(ngModel)]="mdValue.newValue.value"
               [attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate"
               [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
-    <ds-dynamic-scrollable-dropdown *ngIf="mdValue.editing && (isScrollableVocabulary() | async)"
+    <ds-dynamic-scrollable-dropdown *ngIf="mdValue.editing && (isScrollableVocabulary() | async) && !enabledFreeTextEditing"
                                     [bindId]="mdField"
                                     [group]="group"
                                     [model]="getModel()"
                                     (change)="onChangeAuthorityField($event)">
     </ds-dynamic-scrollable-dropdown>
+    <button class="btn btn-secondary mt-2" *ngIf="mdValue.editing && (isScrollableVocabulary() | async)"
+        [title]="enabledFreeTextEditing ? dsoType + '.edit.metadata.edit.buttons.disable-free-text-editing' : dsoType + '.edit.metadata.edit.buttons.enable-free-text-editing' | translate"
+        (click)="toggleFreeTextEdition()">
+    <i class="fas fa-fw" [ngClass]="enabledFreeTextEditing ? 'fa-lock' : 'fa-unlock'"></i>
+    {{ (enabledFreeTextEditing ? dsoType + '.edit.metadata.edit.buttons.disable-free-text-editing' : dsoType + '.edit.metadata.edit.buttons.enable-free-text-editing') | translate }}
+    </button>
     <ds-dynamic-onebox *ngIf="mdValue.editing && ((isHierarchicalVocabulary() | async) || (isSuggesterVocabulary() | async))"
                       [group]="group"
                       [model]="getModel()"

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

@@ -191,6 +191,12 @@ export class DsoEditMetadataValueComponent implements OnInit, OnChanges {
    */
   public editingAuthority = false;
 
+
+  /**
+   * Whether or not the free-text editing is enabled when scrollable dropdown vocabulary is used
+   */
+  public enabledFreeTextEditing = false;
+
   /**
    * Field group used by authority field
    * @type {UntypedFormGroup}
@@ -438,15 +444,23 @@ export class DsoEditMetadataValueComponent implements OnInit, OnChanges {
    * Process the change of authority field value updating the authority key and confidence as necessary
    */
   onChangeAuthorityField(event): void {
-    this.mdValue.newValue.value = event.value;
-    if (event.authority) {
-      this.mdValue.newValue.authority = event.authority;
-      this.mdValue.newValue.confidence = ConfidenceType.CF_ACCEPTED;
+    if (event) {
+      this.mdValue.newValue.value = event.value;
+      if (event.authority) {
+        this.mdValue.newValue.authority = event.authority;
+        this.mdValue.newValue.confidence = ConfidenceType.CF_ACCEPTED;
+      } else {
+        this.mdValue.newValue.authority = null;
+        this.mdValue.newValue.confidence = ConfidenceType.CF_UNSET;
+      }
+      this.confirm.emit(false);
     } else {
+      // The event is undefined when the user clears the selection in scrollable dropdown
+      this.mdValue.newValue.value = '';
       this.mdValue.newValue.authority = null;
       this.mdValue.newValue.confidence = ConfidenceType.CF_UNSET;
+      this.confirm.emit(false);
     }
-    this.confirm.emit(false);
   }
 
   /**
@@ -480,4 +494,17 @@ export class DsoEditMetadataValueComponent implements OnInit, OnChanges {
     }
   }
 
+  /**
+   * Toggles the free-text ediitng mode
+   */
+  toggleFreeTextEdition() {
+    if (this.enabledFreeTextEditing) {
+      if (this.getModel().value !== this.mdValue.newValue.value) {
+        // Reload the model to adapt it to the new possible value modified during free text editing
+        this.initAuthorityProperties();
+      }
+    }
+    this.enabledFreeTextEditing = !this.enabledFreeTextEditing;
+  }
+
 }

src/assets/i18n/en.json5

@@ -2392,6 +2392,10 @@
 
   "item.edit.metadata.edit.authority.key": "Edit authority key",
 
+  "item.edit.metadata.edit.buttons.enable-free-text-editing": "Enable free-text editing",
+
+  "item.edit.metadata.edit.buttons.disable-free-text-editing": "Disable free-text editing",
+
   "item.edit.metadata.edit.buttons.confirm": "Confirm",
 
   "item.edit.metadata.edit.buttons.drag": "Drag to reorder",