97075: Edit metadata redesign

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

@@ -0,0 +1,68 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { startWith, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { followLink } from '../../../shared/utils/follow-link-config.model';
+import {
+  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 } from '../../../shared/empty.util';
+import { Subscription } from 'rxjs/internal/Subscription';
+
+@Component({
+  selector: 'ds-metadata-field-selector',
+  styleUrls: ['./metadata-field-selector.component.scss'],
+  templateUrl: './metadata-field-selector.component.html'
+})
+export class MetadataFieldSelectorComponent implements OnInit, OnDestroy {
+  @Input() mdField: string;
+  @Output() mdFieldChange = new EventEmitter<string>();
+  mdFieldOptions$: Observable<string[]>;
+
+  public input: FormControl = new FormControl();
+
+  query$: BehaviorSubject<string> = new BehaviorSubject<string>(null);
+  debounceTime = 500;
+
+  subs: Subscription[] = [];
+
+  constructor(protected registryService: RegistryService) {
+  }
+
+  ngOnInit(): void {
+    this.subs.push(
+      this.input.valueChanges.pipe(
+        debounceTime(this.debounceTime),
+      ).subscribe((valueChange) => {
+        this.query$.next(valueChange);
+        this.mdField = valueChange;
+        this.mdFieldChange.emit(this.mdField);
+      }),
+    );
+    this.mdFieldOptions$ = this.query$.pipe(
+      distinctUntilChanged(),
+      switchMap((query) => {
+        if (query !== null) {
+          return this.registryService.queryMetadataFields(query, null, true, false, followLink('schema')).pipe(
+            getAllSucceededRemoteData(),
+            metadataFieldsToString(),
+          );
+        } else {
+          return [[]];
+        }
+      }),
+    );
+  }
+
+  select(mdFieldOption: string) {
+    this.mdField = mdFieldOption;
+  }
+
+  ngOnDestroy(): void {
+    this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
+  }
+}