MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

autocopmlete with chips

This commit is contained in:
annampak 2018-02-16 18:48:23 +02:00
parent eb62c65272
commit bff6cf57fe
9 changed files with 80 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dmp-frontend/src/app/dmps/editor/dmp-editor.component.html
View File

@ -18,13 +18,9 @@
<mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<!-- <auto-complete class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration" <auto-complete class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration"
titleKey="label" [control]="formGroup.get('project')" [required]="true"> titleKey="label" [control]="formGroup.get('project')" [required]="true">
</auto-complete> --> </auto-complete>
<auto-complete-chip class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration"
titleKey="label" [control]="formGroup.get('project')" [required]="true">
</auto-complete-chip>
<td-chips color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}" <td-chips color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
(inputChange)="filterProfiles($event)" requireMatch required> (inputChange)="filterProfiles($event)" requireMatch required>
@ -45,8 +41,11 @@
<!-- <button mat-button (click)="availableProfiles()">View All</button> --> <!-- <button mat-button (click)="availableProfiles()">View All</button> -->
<a style="float:right" href="#" (click)="availableProfiles()">View All</a> <a style="float:right" href="#" (click)="availableProfiles()">View All</a>
<auto-complete-chip class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration"
titleKey="name" [control]="formGroup.get('organisations')" [required]="true">
</auto-complete-chip>
<td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" <!-- <td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
(inputChange)="filterOrganisations($event)" requireMatch> (inputChange)="filterOrganisations($event)" requireMatch>
<ng-template td-chip let-chip="chip"> <ng-template td-chip let-chip="chip">
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div> <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
@ -58,11 +57,12 @@
</div> </div>
</ng-template> </ng-template>
<mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar> <mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
</td-chips> </td-chips> -->
<div layout="row" layout-align="start center"> <div layout="row" layout-align="start center">
<td-chips style="margin-bottom:25px; display:inline-block; width:90%" color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" <td-chips style="margin-bottom:25px; display:inline-block; width:90%" color="accent" [items]="filteredResearchers" formControlName="researchers"
(inputChange)="filterResearchers($event)" requireMatch> placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" (inputChange)="filterResearchers($event)"
requireMatch>
<ng-template td-chip let-chip="chip"> <ng-template td-chip let-chip="chip">
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div> <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
{{chip.name}} {{chip.name}}
@ -75,7 +75,7 @@
<mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar> <mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
</td-chips> </td-chips>
<button style="display:inline-block;" mat-icon-button (click) ="addResearcher()"> <button style="display:inline-block;" mat-icon-button (click)="addResearcher()">
<mat-icon aria-label="Example icon-button with a heart icon">add_circle</mat-icon> <mat-icon aria-label="Example icon-button with a heart icon">add_circle</mat-icon>
</button> </button>
</div> </div>

33
dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts
View File

@ -25,6 +25,7 @@ import { ViewContainerRef } from '@angular/core';
import { TdDialogService } from '@covalent/core'; import { TdDialogService } from '@covalent/core';
import { AvailableProfilesComponent } from "@app/available-profiles/available-profiles.component"; import { AvailableProfilesComponent } from "@app/available-profiles/available-profiles.component";
import { AutoCompleteChipConfiguration } from "@app/shared/components/autocompleteChips/AutoCompleteChipConfiguration"; import { AutoCompleteChipConfiguration } from "@app/shared/components/autocompleteChips/AutoCompleteChipConfiguration";
import { BaseCriteria } from "@app/models/criteria/BaseCriteria";
@Component({ @Component({
selector: 'app-dmp-editor-component', selector: 'app-dmp-editor-component',
@ -48,7 +49,7 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
filteredProfiles: DatasetProfileModel[]; filteredProfiles: DatasetProfileModel[];
projectAutoCompleteConfiguration: AutoCompleteConfiguration; projectAutoCompleteConfiguration: AutoCompleteConfiguration;
projectAutoCompleteConfigurationTest: AutoCompleteChipConfiguration; organisationsAutoCompleteConfiguration: AutoCompleteChipConfiguration;
createNewVersion; createNewVersion;
associatedUsers: Array<DmpUsersModel> associatedUsers: Array<DmpUsersModel>
@ -74,8 +75,10 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem(); let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
projectRequestItem.criteria = new ProjectCriteria(); projectRequestItem.criteria = new ProjectCriteria();
let organisationRequestItem: RequestItem<BaseCriteria> = new RequestItem();
organisationRequestItem.criteria = new BaseCriteria();
this.projectAutoCompleteConfiguration = new AutoCompleteConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem); this.projectAutoCompleteConfiguration = new AutoCompleteConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem);
this.projectAutoCompleteConfigurationTest = new AutoCompleteChipConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem); this.organisationsAutoCompleteConfiguration = new AutoCompleteChipConfiguration(this.externalSourcesService.searchDMPOrganizations.bind(this.externalSourcesService), organisationRequestItem);
if (itemId != null) { if (itemId != null) {
this.isNew = false; this.isNew = false;
@ -145,24 +148,24 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
this.router.navigate(['/invite/' + this.dataManagementPlan.id]); this.router.navigate(['/invite/' + this.dataManagementPlan.id]);
} }
filterOrganisations(value: string): void { // filterOrganisations(value: string): void {
this.filteredOrganisations = undefined; // this.filteredOrganisations = undefined;
if (value) { // if (value) {
this.filteringOrganisationsAsync = true; // this.filteringOrganisationsAsync = true;
this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => { // this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
this.filteredOrganisations = items; // this.filteredOrganisations = items;
this.filteringOrganisationsAsync = false; // this.filteringOrganisationsAsync = false;
// this.filteredOrganisations = items.filter((filteredObj: any) => { // // this.filteredOrganisations = items.filter((filteredObj: any) => {
// return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true; // // return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
// }); // // });
}); // });
} // }
} // }
filterResearchers(value: string): void { filterResearchers(value: string): void {

7
dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.html
View File

@ -34,8 +34,11 @@
<mat-error style="font-size:10.5px" *ngIf="formGroup.get('profiles').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error style="font-size:10.5px" *ngIf="formGroup.get('profiles').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</td-chips> </td-chips>
<auto-complete-chip class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration"
titleKey="name" [control]="formGroup.get('organisations')" [required]="true">
</auto-complete-chip>
<td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" <!-- <td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
(inputChange)="filterOrganisations($event)" requireMatch> (inputChange)="filterOrganisations($event)" requireMatch>
<ng-template td-chip let-chip="chip"> <ng-template td-chip let-chip="chip">
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div> <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
@ -47,7 +50,7 @@
</div> </div>
</ng-template> </ng-template>
<mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar> <mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
</td-chips> </td-chips> -->
<td-chips style="margin-bottom:25px;" color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" <td-chips style="margin-bottom:25px;" color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
(inputChange)="filterResearchers($event)" requireMatch> (inputChange)="filterResearchers($event)" requireMatch>

28
dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.ts
View File

@ -19,6 +19,8 @@ import { TranslateService } from "@ngx-translate/core";
import { DataSource } from "@angular/cdk/table"; import { DataSource } from "@angular/cdk/table";
import { Observable } from "rxjs/Observable"; import { Observable } from "rxjs/Observable";
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { AutoCompleteChipConfiguration } from "@app/shared/components/autocompleteChips/AutoCompleteChipConfiguration";
import { BaseCriteria } from '@app/models/criteria/BaseCriteria';
@Component({ @Component({
@ -42,6 +44,7 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
filteredProfiles: DatasetProfileModel[]; filteredProfiles: DatasetProfileModel[];
projectAutoCompleteConfiguration: AutoCompleteConfiguration; projectAutoCompleteConfiguration: AutoCompleteConfiguration;
organisationsAutoCompleteConfiguration: AutoCompleteChipConfiguration;
createNewVersion; createNewVersion;
associatedUsers: Array<DmpUsersModel> associatedUsers: Array<DmpUsersModel>
@ -63,6 +66,11 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem(); let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
projectRequestItem.criteria = new ProjectCriteria(); projectRequestItem.criteria = new ProjectCriteria();
this.projectAutoCompleteConfiguration = new AutoCompleteConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem); this.projectAutoCompleteConfiguration = new AutoCompleteConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem);
let organisationRequestItem: RequestItem<BaseCriteria> = new RequestItem();
organisationRequestItem.criteria = new BaseCriteria();
this.organisationsAutoCompleteConfiguration = new AutoCompleteChipConfiguration(this.externalSourcesService.searchDMPOrganizations.bind(this.externalSourcesService), organisationRequestItem);
} }
formSubmit(): void { formSubmit(): void {
@ -109,20 +117,20 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
filterOrganisations(value: string): void { filterOrganisations(value: string): void {
this.filteredOrganisations = undefined; this.filteredOrganisations = undefined;
if (value) { // if (value) {
this.filteringOrganisationsAsync = true; // this.filteringOrganisationsAsync = true;
this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => { // this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
this.filteredOrganisations = items; // this.filteredOrganisations = items;
this.filteringOrganisationsAsync = false; // this.filteringOrganisationsAsync = false;
// this.filteredOrganisations = items.filter((filteredObj: any) => { // // this.filteredOrganisations = items.filter((filteredObj: any) => {
// return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true; // // return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
// }); // // });
}); // });
} // }
} }
filterResearchers(value: string): void { filterResearchers(value: string): void {

6
dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts
View File

@ -56,7 +56,7 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
project: [{ value: this.project, disabled: disabled }, context.getValidation('project').validators], project: [{ value: this.project, disabled: disabled }, context.getValidation('project').validators],
organisations: [{ value: this.organisations, disabled: disabled }, context.getValidation('organisations').validators], organisations: [{ value: this.organisations, disabled: disabled }, context.getValidation('organisations').validators],
researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators], researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators],
profiles: [{ value: this.profiles, disabled: disabled },{validators:Validators.required}, context.getValidation('profiles').validators], profiles: [{ value: this.profiles, disabled: disabled }, context.getValidation('profiles').validators],
associatedUsers: [{ value: this.associatedUsers, disabled: disabled }, context.getValidation('associatedUsers').validators] associatedUsers: [{ value: this.associatedUsers, disabled: disabled }, context.getValidation('associatedUsers').validators]
}); });
@ -72,9 +72,9 @@ export class DataManagementPlanModel implements Serializable<DataManagementPlanM
baseContext.validation.push({ key: 'status', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'status')] }); baseContext.validation.push({ key: 'status', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'status')] });
baseContext.validation.push({ key: 'description', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'description')] }); baseContext.validation.push({ key: 'description', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'description')] });
baseContext.validation.push({ key: 'project', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'project')] }); baseContext.validation.push({ key: 'project', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'project')] });
baseContext.validation.push({ key: 'organisations', validators: [BackendErrorValidator(this.errorModel, 'organisations')] }); baseContext.validation.push({ key: 'organisations', validators: [Validators.required,BackendErrorValidator(this.errorModel, 'organisations')] });
baseContext.validation.push({ key: 'researchers', validators: [BackendErrorValidator(this.errorModel, 'researchers')] }); baseContext.validation.push({ key: 'researchers', validators: [BackendErrorValidator(this.errorModel, 'researchers')] });
baseContext.validation.push({ key: 'profiles', validators: [BackendErrorValidator(this.errorModel, 'profiles')] }); baseContext.validation.push({ key: 'profiles', validators: [Validators.required,BackendErrorValidator(this.errorModel, 'profiles')] });
baseContext.validation.push({ key: 'associatedUsers', validators: [BackendErrorValidator(this.errorModel, 'associatedUsers')] }); baseContext.validation.push({ key: 'associatedUsers', validators: [BackendErrorValidator(this.errorModel, 'associatedUsers')] });
return baseContext; return baseContext;

6
dmp-frontend/src/app/services/external-sources/external-sources.service.ts
View File

@ -5,6 +5,8 @@ import { HostConfiguration } from './../../app.constants';
import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service'; import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { ExternalSourcesItemModel } from '../../models/external-sources/ExternalSourcesItemModel'; import { ExternalSourcesItemModel } from '../../models/external-sources/ExternalSourcesItemModel';
import { BaseCriteria } from '@app/models/criteria/BaseCriteria';
import { RequestItem } from '@app/models/criteria/RequestItem';
@Injectable() @Injectable()
@ -42,8 +44,8 @@ export class ExternalSourcesService {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "researchers" + "?query=" + like, { headers: this.headers }); return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "researchers" + "?query=" + like, { headers: this.headers });
} }
public searchDMPOrganizations(like: string): Observable<ExternalSourcesItemModel[]> { public searchDMPOrganizations(organizationscriteria: RequestItem<BaseCriteria>): Observable<ExternalSourcesItemModel[]> {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers }); return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "organisations" + "?query=" + organizationscriteria.criteria.like, { headers: this.headers });
} }
public searchDMPProfiles(like: string): Observable<ExternalSourcesItemModel[]> { public searchDMPProfiles(like: string): Observable<ExternalSourcesItemModel[]> {

17
dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.html
View File

@ -1,11 +1,12 @@
<mat-form-field> <mat-form-field>
<mat-chip-list #chipList> <mat-chip-list #chipList [required]="required">
<mat-chip *ngFor="let item of selectedItems" (remove)="remove(item)"> <mat-chip *ngFor="let item of selectedItems" (remove)="remove(item)">
{{item.label}} {{item.name}}
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
<input matInput [matAutocomplete]="auto" [matChipInputFor]="chipList" [formControl]="control" placeholder="{{placeholder}}" [required]="required"> <input matInput [matChipInputFor]="chipList" [matAutocomplete]="auto" [formControl]="control"
</mat-chip-list> placeholder="{{placeholder}}" [required]="required" #chipInput>
</mat-chip-list>
<mat-error *ngIf="control.errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="control.errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="validationErrorString">{{errorString}}</mat-error> <mat-error *ngIf="validationErrorString">{{errorString}}</mat-error>
<mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner> <mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
@ -17,5 +18,5 @@
<!-- <mat-option *ngIf="filteredItems.length == 0" value="das"> <!-- <mat-option *ngIf="filteredItems.length == 0" value="das">
<span>{{'GENERAL.AUTOCOMPLETE.NO-ITEMS' | translate}}</span> <span>{{'GENERAL.AUTOCOMPLETE.NO-ITEMS' | translate}}</span>
</mat-option> --> </mat-option> -->
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </mat-form-field>

2
dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.scss
View File

@ -27,4 +27,4 @@
.full-width { .full-width {
width: 100%; width: 100%;
} }

19
dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.ts
View File

@ -49,7 +49,7 @@ export class AutocompleteChipComponent implements OnInit {
// //term = new FormControl(); // //term = new FormControl();
// @Input() // @Input()
// ClickFunctionCall: Function; // ClickFunctionCall: Function;
@ViewChild('chipInput') chipInput: MatInput;
loading = false; loading = false;
hasSelectedItem = false; hasSelectedItem = false;
@ -58,12 +58,12 @@ export class AutocompleteChipComponent implements OnInit {
constructor() { constructor() {
} }
ngOnInit() { ngOnInit() {
const valueChanges = this.control.valueChanges.share(); const valueChanges = this.control.valueChanges.share();
valueChanges.subscribe(searchTerm => { valueChanges.subscribe(searchTerm => {
if (this.hasSelectedItem) { //proswrina epeidh ta projects den eixan ids...gia test!!! if (this.hasSelectedItem) {
this.resetFormControlValue(); this.resetFormControlValue();
} else { } else {
this.loading = true; this.loading = true;
@ -73,9 +73,9 @@ export class AutocompleteChipComponent implements OnInit {
.debounceTime(this.delay) .debounceTime(this.delay)
.distinctUntilChanged() .distinctUntilChanged()
.switchMap(val => { .switchMap(val => {
if (this.hasSelectedItem) { if (this.hasSelectedItem || typeof(val) !== "string") {
this.loading = false; this.loading = false;
return []; return this.filteredItems = [];
} else if (typeof(val)== "string") { } else if (typeof(val)== "string") {
this.configuration.requestItem.criteria.like = val; this.configuration.requestItem.criteria.like = val;
return this.configuration.callback(this.configuration.requestItem).map(result => { return this.configuration.callback(this.configuration.requestItem).map(result => {
@ -84,7 +84,8 @@ export class AutocompleteChipComponent implements OnInit {
}) })
} }
}).subscribe() }).subscribe()
} }
resetFormControlValue() { resetFormControlValue() {
@ -95,12 +96,12 @@ export class AutocompleteChipComponent implements OnInit {
// // listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem { // // listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem {
// // return (item as DropdownListingItem).toDropdownList(); // // return (item as DropdownListingItem).toDropdownList();
// // } // // }
optionSelected(event: any) { optionSelected(event: any) {
this.hasSelectedItem = true; this.hasSelectedItem = true;
this.selectedItems.push(event.option.value) this.selectedItems.push(event.option.value)
this.control.setValue(this.selectedItems, { emitEvent: false }); this.chipInput['nativeElement'].value = '';
this.filteredItems = this.selectedItems; this.control.setValue(this.selectedItems, { emitEvent: false });
//this.filteredItems = this.selectedItems;
//this.selectedDropdownItemChange.emit(event.option.value); //this.selectedDropdownItemChange.emit(event.option.value);
//this.form.updateValueAndValidity(); //this.form.updateValueAndValidity();