97075: Edit-metadata redesign messages + JSDocs

src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts

@@ -12,14 +12,14 @@ import {
 import { switchMap, debounceTime, distinctUntilChanged, map, tap, take } from 'rxjs/operators';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
 import {
-  getAllSucceededRemoteData, getFirstCompletedRemoteData, getFirstSucceededRemoteData,
+  getAllSucceededRemoteData, getFirstSucceededRemoteData,
   metadataFieldsToString
 } from '../../../core/shared/operators';
 import { Observable } from 'rxjs/internal/Observable';
 import { RegistryService } from '../../../core/registry/registry.service';
 import { FormControl } from '@angular/forms';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
-import { hasValue, isNotEmpty } from '../../../shared/empty.util';
+import { hasValue } from '../../../shared/empty.util';
 import { Subscription } from 'rxjs/internal/Subscription';
 
 @Component({
@@ -27,25 +27,83 @@ import { Subscription } from 'rxjs/internal/Subscription';
   styleUrls: ['./metadata-field-selector.component.scss'],
   templateUrl: './metadata-field-selector.component.html'
 })
+/**
+ * Component displaying a searchable input for metadata-fields
+ */
 export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterViewInit {
+  /**
+   * Type of the DSpaceObject
+   * Used to resolve i18n messages
+   */
+  @Input() dsoType: string;
+
+  /**
+   * The currently entered metadata field
+   */
   @Input() mdField: string;
+
+  /**
+   * If true, the input will be automatically focussed upon when the component is first loaded
+   */
   @Input() autofocus = false;
+
+  /**
+   * Emit any changes made to the metadata field
+   * This will only emit after a debounce takes place to avoid constant emits when the user is typing
+   */
   @Output() mdFieldChange = new EventEmitter<string>();
+
+  /**
+   * Reference to the metadata-field's input
+   */
   @ViewChild('mdFieldInput', { static: true }) mdFieldInput: ElementRef;
+
+  /**
+   * List of available metadata field options to choose from, dependent on the current query the user entered
+   * Shows up in a dropdown below the input
+   */
   mdFieldOptions$: Observable<string[]>;
 
+  /**
+   * FormControl for the input
+   */
   public input: FormControl = new FormControl();
 
+  /**
+   * The current query to update mdFieldOptions$ for
+   * This is controlled by a debounce, to avoid too many requests
+   */
   query$: BehaviorSubject<string> = new BehaviorSubject<string>(null);
+
+  /**
+   * The amount of time to debounce the query for (in ms)
+   */
   debounceTime = 300;
+
+  /**
+   * Whether or not the the user just selected a value
+   * This flag avoids the metadata field from updating twice, which would result in the dropdown opening again right after selecting a value
+   */
   selectedValueLoading = false;
+
+  /**
+   * Whether or not to show the invalid feedback
+   * True when validate() is called and the mdField isn't present in the available metadata fields retrieved from the server
+   */
   showInvalid = false;
 
+  /**
+   * Subscriptions to unsubscribe from on destroy
+   */
   subs: Subscription[] = [];
 
   constructor(protected registryService: RegistryService) {
   }
 
+  /**
+   * Subscribe to any changes made to the input, with a debounce and fire a query, as well as emit the change from this component
+   * Update the mdFieldOptions$ depending on the query$ fired by querying the server
+   */
   ngOnInit(): void {
     this.subs.push(
       this.input.valueChanges.pipe(
@@ -75,10 +133,19 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV
     );
   }
 
+  /**
+   * Focus the input if autofocus is enabled
+   */
   ngAfterViewInit(): void {
-    this.mdFieldInput.nativeElement.focus();
+    if (this.autofocus) {
+      this.mdFieldInput.nativeElement.focus();
+    }
   }
 
+  /**
+   * Validate the metadata field to check if it exists on the server and return an observable boolean for success/error
+   * Upon subscribing to the returned observable, the showInvalid flag is updated accordingly to show the feedback under the input
+   */
   validate(): Observable<boolean> {
     return this.registryService.queryMetadataFields(this.mdField, null, true, false, followLink('schema')).pipe(
       getFirstSucceededRemoteData(),
@@ -89,11 +156,18 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV
     );
   }
 
+  /**
+   * Select a metadata field from the dropdown optipons
+   * @param mdFieldOption
+   */
   select(mdFieldOption: string) {
     this.selectedValueLoading = true;
     this.input.setValue(mdFieldOption);
   }
 
+  /**
+   * Unsubscribe from any open subscriptions
+   */
   ngOnDestroy(): void {
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }