fixed multiple and single autocomplete behavior
-removed unnecessary hidePlaceholder flag -fixed single-autocomplete clear value -fixed placeholder and label
This commit is contained in:
parent
749562ca72
commit
430004e931
|
@ -95,7 +95,6 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
|
|
||||||
@Input() minLength: number = 0;
|
@Input() minLength: number = 0;
|
||||||
@Input() showNoResultsLabel: boolean = true;
|
@Input() showNoResultsLabel: boolean = true;
|
||||||
@Input() hidePlaceholder: boolean = false;
|
|
||||||
|
|
||||||
@Input()
|
@Input()
|
||||||
get placeholder() {
|
get placeholder() {
|
||||||
|
|
|
@ -212,6 +212,14 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
|
||||||
this.optionActionClicked.emit(item);
|
this.optionActionClicked.emit(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private clearValue(): void {
|
||||||
|
this._setValue(null);
|
||||||
|
this.stateChanges.next();
|
||||||
|
this.optionSelected.emit(null);
|
||||||
|
this.inputValue = null;
|
||||||
|
this._items = null;
|
||||||
|
}
|
||||||
|
|
||||||
private optionSelectedInternal(item: any) {
|
private optionSelectedInternal(item: any) {
|
||||||
const newValue = this._valueToAssign(item);
|
const newValue = this._valueToAssign(item);
|
||||||
|
|
||||||
|
@ -229,7 +237,9 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
|
||||||
// prevent filtering results if arrow were pressed
|
// prevent filtering results if arrow were pressed
|
||||||
if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40)) {
|
if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40)) {
|
||||||
if (this.inputValue.length === 0 && this.value != null) {
|
if (this.inputValue.length === 0 && this.value != null) {
|
||||||
|
this.clearValue();
|
||||||
this._onInputFocus();
|
this._onInputFocus();
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
this._inputSubject.next(this.inputValue);
|
this._inputSubject.next(this.inputValue);
|
||||||
}
|
}
|
||||||
|
|
|
@ -123,7 +123,7 @@
|
||||||
|
|
||||||
<mat-form-field class="col-6">
|
<mat-form-field class="col-6">
|
||||||
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}</mat-label>
|
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}</mat-label>
|
||||||
<app-multiple-auto-complete placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="this.form.get('schematics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
|
<app-multiple-auto-complete placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="this.form.get('schematics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
|
||||||
</app-multiple-auto-complete>
|
</app-multiple-auto-complete>
|
||||||
<mat-error *ngIf="form.get('schematics').hasError('backendError')">{{form.get('schematics').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="form.get('schematics').hasError('backendError')">{{form.get('schematics').getError('backendError').message}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
|
@ -173,7 +173,7 @@
|
||||||
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
|
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null">
|
||||||
<mat-form-field class="mt-3 w-100">
|
<mat-form-field class="mt-3 w-100">
|
||||||
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
|
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
|
||||||
<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
|
<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
|
||||||
</app-multiple-auto-complete>
|
</app-multiple-auto-complete>
|
||||||
<mat-error *ngIf="field.get('semantics').hasError('backendError')">{{field.get('semantics').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="field.get('semantics').hasError('backendError')">{{field.get('semantics').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
|
@ -257,7 +257,7 @@
|
||||||
<div class="col-12 col-lg-6 col-xl-3">
|
<div class="col-12 col-lg-6 col-xl-3">
|
||||||
<mat-form-field class="w-100 mt-3">
|
<mat-form-field class="w-100 mt-3">
|
||||||
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
|
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
|
||||||
<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [hidePlaceholder]="true" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, sectionIndex, descriptionTemplateIndex)"></app-single-auto-complete>
|
<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, sectionIndex, descriptionTemplateIndex)"></app-single-auto-complete>
|
||||||
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<mat-label>{{'LOCK-LISTING.FILTER.USERS' | translate}}</mat-label>
|
<mat-label>{{'LOCK-LISTING.FILTER.USERS' | translate}}</mat-label>
|
||||||
<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [hidePlaceholder]="true" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userService.multipleAutocompleteConfiguration">
|
<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userService.multipleAutocompleteConfiguration">
|
||||||
</app-multiple-auto-complete>
|
</app-multiple-auto-complete>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,10 +17,10 @@
|
||||||
|
|
||||||
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.REFERENCE_TYPES" class="col-12">
|
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.REFERENCE_TYPES" class="col-12">
|
||||||
<ng-container *ngIf="field.data.multipleSelect">
|
<ng-container *ngIf="field.data.multipleSelect">
|
||||||
<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.data.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="field.data.referenceType" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
|
<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="(field.data.label | translate) + (isRequired ? ' *': '')" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="field.data.referenceType" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="!(field.data.multipleSelect)">
|
<ng-container *ngIf="!(field.data.multipleSelect)">
|
||||||
<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.data.label" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="field.data.referenceType" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
|
<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="(field.data.label | translate) + (isRequired ? ' *': '')" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="field.data.referenceType" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12">
|
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12">
|
||||||
|
|
|
@ -201,7 +201,7 @@
|
||||||
<div class="col d-flex" *ngIf="contact.get('contactType').value == dmpContactTypeEnum.Internal">
|
<div class="col d-flex" *ngIf="contact.get('contactType').value == dmpContactTypeEnum.Internal">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<mat-label>{{'DMP-EDITOR.FIELDS.USER' | translate}}</mat-label>
|
<mat-label>{{'DMP-EDITOR.FIELDS.USER' | translate}}</mat-label>
|
||||||
<app-single-auto-complete [formControl]="contact.get('userId')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
|
<app-single-auto-complete [formControl]="contact.get('userId')" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
|
||||||
<mat-error *ngIf="contact.get('userId').hasError('backendError')">{{contact.get('userId').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="contact.get('userId').hasError('backendError')">{{contact.get('userId').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="contact.get('userId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="contact.get('userId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
@ -319,7 +319,7 @@
|
||||||
<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</div>
|
<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</div>
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<mat-label>{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}</mat-label>
|
<mat-label>{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}</mat-label>
|
||||||
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="getDescriptionTemplateMultipleAutoCompleteConfiguration(section.id)" (optionActionClicked)="onPreviewDescriptionTemplate($event, section.id)" (optionRemoved)="onRemoveDescriptionTemplate($event, section.id)">
|
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="getDescriptionTemplateMultipleAutoCompleteConfiguration(section.id)" (optionActionClicked)="onPreviewDescriptionTemplate($event, section.id)" (optionRemoved)="onRemoveDescriptionTemplate($event, section.id)">
|
||||||
</app-multiple-auto-complete>
|
</app-multiple-auto-complete>
|
||||||
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('backendError')">{{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('backendError')">{{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
<div class="col-12 col-xl mt-3" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
|
<div class="col-12 col-xl mt-3" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<mat-label>{{'DMP-EDITOR.FIELDS.USER' | translate}}</mat-label>
|
<mat-label>{{'DMP-EDITOR.FIELDS.USER' | translate}}</mat-label>
|
||||||
<app-single-auto-complete [formControl]="user.get('user')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
|
<app-single-auto-complete [formControl]="user.get('user')" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
|
||||||
<mat-error *ngIf="user.get('user').hasError('backendError')">{{user.get('user').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="user.get('user').hasError('backendError')">{{user.get('user').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<div class="profile-form">
|
<div class="profile-form">
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
|
<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
|
||||||
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)" (optionSelected)="onOptionSelected()">
|
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)" (optionSelected)="onOptionSelected()">
|
||||||
</app-multiple-auto-complete>
|
</app-multiple-auto-complete>
|
||||||
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
|
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
|
||||||
{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
|
{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
<mat-form-field class="w-100" *ngIf="multipleAutoCompleteSearchConfiguration">
|
<mat-form-field class="w-100" *ngIf="multipleAutoCompleteSearchConfiguration">
|
||||||
<mat-label>{{label ?? referenceType?.name}}</mat-label>
|
<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
|
||||||
<app-multiple-auto-complete placeholder="{{ placeholder ?? referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration" [required]="required">
|
<app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration" [required]="required">
|
||||||
</app-multiple-auto-complete>
|
</app-multiple-auto-complete>
|
||||||
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
<mat-hint *ngIf="hint">{{hint}}</mat-hint>
|
<mat-hint *ngIf="hint">{{hint}}</mat-hint>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field class="w-100" *ngIf="singleAutoCompleteSearchConfiguration">
|
<mat-form-field class="w-100" *ngIf="singleAutoCompleteSearchConfiguration">
|
||||||
<mat-label>{{label ?? referenceType?.name}}</mat-label>
|
<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
|
||||||
<app-single-auto-complete placeholder="{{ placeholder ?? referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration" [required]="required">
|
<app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration" [required]="required">
|
||||||
</app-single-auto-complete>
|
</app-single-auto-complete>
|
||||||
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.USERS' | translate}}</mat-label>
|
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.USERS' | translate}}</mat-label>
|
||||||
<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [hidePlaceholder]="true" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userAutoCompleteConfiguration">
|
<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userAutoCompleteConfiguration">
|
||||||
</app-multiple-auto-complete>
|
</app-multiple-auto-complete>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue