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-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">
</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>
</auto-complete>
<td-chips color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
(inputChange)="filterProfiles($event)" requireMatch required>
@ -45,8 +41,11 @@
<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
<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>
<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>
@ -58,11 +57,12 @@
</div>
</ng-template>
<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">
<td-chips style="margin-bottom:25px; display:inline-block; width:90%" color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
(inputChange)="filterResearchers($event)" requireMatch>
<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}}" (inputChange)="filterResearchers($event)"
requireMatch>
<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>
{{chip.name}}
@ -75,7 +75,7 @@
<mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
</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>
</button>
</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 { AvailableProfilesComponent } from "@app/available-profiles/available-profiles.component";
import { AutoCompleteChipConfiguration } from "@app/shared/components/autocompleteChips/AutoCompleteChipConfiguration";
import { BaseCriteria } from "@app/models/criteria/BaseCriteria";
@Component({
selector: 'app-dmp-editor-component',
@ -48,7 +49,7 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
filteredProfiles: DatasetProfileModel[];
projectAutoCompleteConfiguration: AutoCompleteConfiguration;
projectAutoCompleteConfigurationTest: AutoCompleteChipConfiguration;
organisationsAutoCompleteConfiguration: AutoCompleteChipConfiguration;
createNewVersion;
associatedUsers: Array<DmpUsersModel>
@ -74,8 +75,10 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
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.projectAutoCompleteConfigurationTest = new AutoCompleteChipConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem);
this.organisationsAutoCompleteConfiguration = new AutoCompleteChipConfiguration(this.externalSourcesService.searchDMPOrganizations.bind(this.externalSourcesService), organisationRequestItem);
if (itemId != null) {
this.isNew = false;
@ -145,24 +148,24 @@ export class DataManagementPlanEditorComponent implements AfterViewInit {
this.router.navigate(['/invite/' + this.dataManagementPlan.id]);
}
filterOrganisations(value: string): void {
// filterOrganisations(value: string): void {
this.filteredOrganisations = undefined;
if (value) {
this.filteringOrganisationsAsync = true;
// this.filteredOrganisations = undefined;
// if (value) {
// this.filteringOrganisationsAsync = true;
this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
this.filteredOrganisations = items;
this.filteringOrganisationsAsync = false;
// this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
// this.filteredOrganisations = items;
// this.filteringOrganisationsAsync = false;
// this.filteredOrganisations = items.filter((filteredObj: any) => {
// return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
// });
// // this.filteredOrganisations = items.filter((filteredObj: any) => {
// // return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
// // });
});
// });
}
}
// }
// }
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>
</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>
<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>
@ -47,7 +50,7 @@
</div>
</ng-template>
<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}}"
(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 { Observable } from "rxjs/Observable";
import { FormGroup } from '@angular/forms';
import { AutoCompleteChipConfiguration } from "@app/shared/components/autocompleteChips/AutoCompleteChipConfiguration";
import { BaseCriteria } from '@app/models/criteria/BaseCriteria';
@Component({
@ -42,6 +44,7 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
filteredProfiles: DatasetProfileModel[];
projectAutoCompleteConfiguration: AutoCompleteConfiguration;
organisationsAutoCompleteConfiguration: AutoCompleteChipConfiguration;
createNewVersion;
associatedUsers: Array<DmpUsersModel>
@ -63,6 +66,11 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
projectRequestItem.criteria = new ProjectCriteria();
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 {
@ -109,20 +117,20 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
filterOrganisations(value: string): void {
this.filteredOrganisations = undefined;
if (value) {
this.filteringOrganisationsAsync = true;
// if (value) {
// this.filteringOrganisationsAsync = true;
this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
this.filteredOrganisations = items;
this.filteringOrganisationsAsync = false;
// this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
// this.filteredOrganisations = items;
// this.filteringOrganisationsAsync = false;
// this.filteredOrganisations = items.filter((filteredObj: any) => {
// return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
// });
// // this.filteredOrganisations = items.filter((filteredObj: any) => {
// // return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
// // });
});
// });
}
// }
}
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],
organisations: [{ value: this.organisations, disabled: disabled }, context.getValidation('organisations').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]
});
@ -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: 'description', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'description')] });
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: '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')] });
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 { Observable } from 'rxjs/Observable';
import { ExternalSourcesItemModel } from '../../models/external-sources/ExternalSourcesItemModel';
import { BaseCriteria } from '@app/models/criteria/BaseCriteria';
import { RequestItem } from '@app/models/criteria/RequestItem';
@Injectable()
@ -42,8 +44,8 @@ export class ExternalSourcesService {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "researchers" + "?query=" + like, { headers: this.headers });
}
public searchDMPOrganizations(like: string): Observable<ExternalSourcesItemModel[]> {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers });
public searchDMPOrganizations(organizationscriteria: RequestItem<BaseCriteria>): Observable<ExternalSourcesItemModel[]> {
return this.http.get<ExternalSourcesItemModel[]>(this.actionUrl + "organisations" + "?query=" + organizationscriteria.criteria.like, { headers: this.headers });
}
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-chip-list #chipList>
<mat-chip *ngFor="let item of selectedItems" (remove)="remove(item)">
{{item.label}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input matInput [matAutocomplete]="auto" [matChipInputFor]="chipList" [formControl]="control" placeholder="{{placeholder}}" [required]="required">
</mat-chip-list>
<mat-chip-list #chipList [required]="required">
<mat-chip *ngFor="let item of selectedItems" (remove)="remove(item)">
{{item.name}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input matInput [matChipInputFor]="chipList" [matAutocomplete]="auto" [formControl]="control"
placeholder="{{placeholder}}" [required]="required" #chipInput>
</mat-chip-list>
<mat-error *ngIf="control.errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="validationErrorString">{{errorString}}</mat-error>
<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">
<span>{{'GENERAL.AUTOCOMPLETE.NO-ITEMS' | translate}}</span>
</mat-option> -->
</mat-autocomplete>
</mat-autocomplete>
</mat-form-field>

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

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