97075: Margin fixes + metadata field autofocus and validation

This commit is contained in:
Kristof De Langhe
2022-12-01 13:07:19 +01:00
parent 105f6cb954
commit 6be343cccf
4 changed files with 69 additions and 23 deletions

View File

@@ -1,15 +1,25 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
import {
AfterViewInit,
Component,
ElementRef,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
ViewChild
} from '@angular/core';
import { switchMap, debounceTime, distinctUntilChanged, map, tap, take } from 'rxjs/operators';
import { followLink } from '../../../shared/utils/follow-link-config.model';
import {
getAllSucceededRemoteData,
getAllSucceededRemoteData, getFirstCompletedRemoteData, 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 { hasValue, isNotEmpty } from '../../../shared/empty.util';
import { Subscription } from 'rxjs/internal/Subscription';
@Component({
@@ -17,9 +27,11 @@ import { Subscription } from 'rxjs/internal/Subscription';
styleUrls: ['./metadata-field-selector.component.scss'],
templateUrl: './metadata-field-selector.component.html'
})
export class MetadataFieldSelectorComponent implements OnInit, OnDestroy {
export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterViewInit {
@Input() mdField: string;
@Input() autofocus = false;
@Output() mdFieldChange = new EventEmitter<string>();
@ViewChild('mdFieldInput', { static: true }) mdFieldInput: ElementRef;
mdFieldOptions$: Observable<string[]>;
public input: FormControl = new FormControl();
@@ -27,6 +39,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy {
query$: BehaviorSubject<string> = new BehaviorSubject<string>(null);
debounceTime = 300;
selectedValueLoading = false;
showInvalid = false;
subs: Subscription[] = [];
@@ -49,6 +62,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy {
this.mdFieldOptions$ = this.query$.pipe(
distinctUntilChanged(),
switchMap((query) => {
this.showInvalid = false;
if (query !== null) {
return this.registryService.queryMetadataFields(query, null, true, false, followLink('schema')).pipe(
getAllSucceededRemoteData(),
@@ -61,6 +75,20 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy {
);
}
ngAfterViewInit(): void {
this.mdFieldInput.nativeElement.focus();
}
validate(): Observable<boolean> {
return this.registryService.queryMetadataFields(this.mdField, null, true, false, followLink('schema')).pipe(
getFirstSucceededRemoteData(),
metadataFieldsToString(),
take(1),
map((fields: string[]) => fields.indexOf(this.mdField) > -1),
tap((exists) => this.showInvalid = !exists),
);
}
select(mdFieldOption: string) {
this.selectedValueLoading = true;
this.input.setValue(mdFieldOption);