From bff6cf57febba1749b2875b5655ae95d03db7f28 Mon Sep 17 00:00:00 2001 From: annampak Date: Fri, 16 Feb 2018 18:48:23 +0200 Subject: [PATCH 1/2] autocopmlete with chips --- .../app/dmps/editor/dmp-editor.component.html | 24 +++++++------- .../app/dmps/editor/dmp-editor.component.ts | 33 ++++++++++--------- .../editor/dmp-wizard-editor.component.html | 7 ++-- .../editor/dmp-wizard-editor.component.ts | 28 ++++++++++------ .../DataManagementPlanModel.ts | 6 ++-- .../external-sources.service.ts | 6 ++-- .../autocompleteChips.component.html | 17 +++++----- .../autocompleteChips.component.scss | 2 +- .../autocompleteChips.component.ts | 19 ++++++----- 9 files changed, 80 insertions(+), 62 deletions(-) diff --git a/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html b/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html index dbb7ba9ef..569ed52c2 100644 --- a/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html +++ b/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html @@ -18,13 +18,9 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - - - + @@ -45,8 +41,11 @@ View All + + -
{{chip.name.substring(0, 1).toUpperCase()}}
@@ -58,11 +57,12 @@ - + --> -
- +
+
{{chip.name.substring(0, 1).toUpperCase()}}
{{chip.name}} @@ -75,7 +75,7 @@ -
diff --git a/dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts b/dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts index 4cd93e46b..3cb61f321 100644 --- a/dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts +++ b/dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts @@ -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 @@ -74,8 +75,10 @@ export class DataManagementPlanEditorComponent implements AfterViewInit { let projectRequestItem: RequestItem = new RequestItem(); projectRequestItem.criteria = new ProjectCriteria(); + let organisationRequestItem: RequestItem = 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 { diff --git a/dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.html b/dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.html index 53742965e..4dc57c4fc 100644 --- a/dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.html +++ b/dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.html @@ -34,8 +34,11 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + -
{{chip.name.substring(0, 1).toUpperCase()}}
@@ -47,7 +50,7 @@
- + --> diff --git a/dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.ts b/dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.ts index 00135a0ee..3211bf4b4 100644 --- a/dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.ts +++ b/dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.ts @@ -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 @@ -63,6 +66,11 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit { let projectRequestItem: RequestItem = new RequestItem(); projectRequestItem.criteria = new ProjectCriteria(); this.projectAutoCompleteConfiguration = new AutoCompleteConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem); + + let organisationRequestItem: RequestItem = 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 { diff --git a/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts b/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts index 1297752f1..b7f8c75f6 100644 --- a/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts +++ b/dmp-frontend/src/app/models/data-managemnt-plans/DataManagementPlanModel.ts @@ -56,7 +56,7 @@ export class DataManagementPlanModel implements Serializable(this.actionUrl + "researchers" + "?query=" + like, { headers: this.headers }); } - public searchDMPOrganizations(like: string): Observable { - return this.http.get(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers }); + public searchDMPOrganizations(organizationscriteria: RequestItem): Observable { + return this.http.get(this.actionUrl + "organisations" + "?query=" + organizationscriteria.criteria.like, { headers: this.headers }); } public searchDMPProfiles(like: string): Observable { diff --git a/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.html b/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.html index f2ce8c9d9..8803aa35e 100644 --- a/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.html +++ b/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.html @@ -1,11 +1,12 @@ - - - {{item.label}} - cancel - - - + + + {{item.name}} + cancel + + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} {{errorString}} @@ -17,5 +18,5 @@ - + \ No newline at end of file diff --git a/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.scss b/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.scss index 6e7ec5cf9..c54755d5e 100644 --- a/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.scss +++ b/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.scss @@ -27,4 +27,4 @@ .full-width { width: 100%; -} +} \ No newline at end of file diff --git a/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.ts b/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.ts index fea6b4219..b8fb6e0c9 100644 --- a/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.ts +++ b/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component.ts @@ -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(); From 8b7df4d3248a2cfdb41a1be264b5fcdc297dbef3 Mon Sep 17 00:00:00 2001 From: annampak Date: Fri, 16 Feb 2018 18:49:04 +0200 Subject: [PATCH 2/2] no message --- dmp-frontend/src/app/app.constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dmp-frontend/src/app/app.constants.ts b/dmp-frontend/src/app/app.constants.ts index 285e6ab15..0f539ee1c 100644 --- a/dmp-frontend/src/app/app.constants.ts +++ b/dmp-frontend/src/app/app.constants.ts @@ -1,4 +1,4 @@ -import { environment } from '../environments/environment.prod'; +import { environment } from '../environments/environment'; export const HostConfiguration = { Server: environment.Server, App: environment.App