Added autocomplete field component
This commit is contained in:
parent
675c3bbd6c
commit
54d67293db
|
@ -219,6 +219,23 @@
|
|||
"source-map": "0.5.7"
|
||||
}
|
||||
},
|
||||
"@ngui/auto-complete": {
|
||||
"version": "0.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@ngui/auto-complete/-/auto-complete-0.16.0.tgz",
|
||||
"integrity": "sha1-s02xfjG4DlhKx5uqc45AWsurEsc=",
|
||||
"requires": {
|
||||
"@ngui/utils": "0.8.1"
|
||||
}
|
||||
},
|
||||
"@ngui/utils": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngui/utils/-/utils-0.8.1.tgz",
|
||||
"integrity": "sha1-jxq5qCbjXrC68XQd2UOOgoT8Tvg=",
|
||||
"requires": {
|
||||
"@types/js-beautify": "0.0.28",
|
||||
"js-beautify": "1.7.4"
|
||||
}
|
||||
},
|
||||
"@types/gapi": {
|
||||
"version": "0.0.35",
|
||||
"resolved": "https://registry.npmjs.org/@types/gapi/-/gapi-0.0.35.tgz",
|
||||
|
@ -247,6 +264,11 @@
|
|||
"@types/jasmine": "2.5.54"
|
||||
}
|
||||
},
|
||||
"@types/js-beautify": {
|
||||
"version": "0.0.28",
|
||||
"resolved": "https://registry.npmjs.org/@types/js-beautify/-/js-beautify-0.0.28.tgz",
|
||||
"integrity": "sha1-MiC7vZL8DnKLpTBr+kSwBIghYS0="
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "6.0.90",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.90.tgz",
|
||||
|
@ -267,8 +289,7 @@
|
|||
"abbrev": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
|
||||
"integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=",
|
||||
"dev": true
|
||||
"integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8="
|
||||
},
|
||||
"accepts": {
|
||||
"version": "1.3.4",
|
||||
|
@ -1193,8 +1214,7 @@
|
|||
"bluebird": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.0.tgz",
|
||||
"integrity": "sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw=",
|
||||
"dev": true
|
||||
"integrity": "sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw="
|
||||
},
|
||||
"bn.js": {
|
||||
"version": "4.11.8",
|
||||
|
@ -1805,8 +1825,7 @@
|
|||
"commander": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
|
||||
"integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
|
||||
},
|
||||
"common-tags": {
|
||||
"version": "1.4.0",
|
||||
|
@ -1865,6 +1884,15 @@
|
|||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true
|
||||
},
|
||||
"config-chain": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.11.tgz",
|
||||
"integrity": "sha1-q6CXR9++TD5w52am5BWG4YWfxvI=",
|
||||
"requires": {
|
||||
"ini": "1.3.4",
|
||||
"proto-list": "1.2.4"
|
||||
}
|
||||
},
|
||||
"connect": {
|
||||
"version": "3.6.3",
|
||||
"resolved": "https://registry.npmjs.org/connect/-/connect-3.6.3.tgz",
|
||||
|
@ -2557,6 +2585,28 @@
|
|||
"jsbn": "0.1.1"
|
||||
}
|
||||
},
|
||||
"editorconfig": {
|
||||
"version": "0.13.3",
|
||||
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.13.3.tgz",
|
||||
"integrity": "sha512-WkjsUNVCu+ITKDj73QDvi0trvpdDWdkDyHybDGSXPfekLCqwmpD7CP7iPbvBgosNuLcI96XTDwNa75JyFl7tEQ==",
|
||||
"requires": {
|
||||
"bluebird": "3.5.0",
|
||||
"commander": "2.11.0",
|
||||
"lru-cache": "3.2.0",
|
||||
"semver": "5.4.1",
|
||||
"sigmund": "1.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"lru-cache": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-3.2.0.tgz",
|
||||
"integrity": "sha1-cXibO39Tmb7IVl3aOKow0qCX7+4=",
|
||||
"requires": {
|
||||
"pseudomap": "1.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||
|
@ -4062,8 +4112,7 @@
|
|||
"ini": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
|
||||
"integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
|
||||
"dev": true
|
||||
"integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4="
|
||||
},
|
||||
"inquirer": {
|
||||
"version": "3.2.2",
|
||||
|
@ -4643,6 +4692,27 @@
|
|||
"integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
|
||||
"dev": true
|
||||
},
|
||||
"js-beautify": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.7.4.tgz",
|
||||
"integrity": "sha512-6YX1g+lIl0/JDxjFFbgj7fz6i0bWFa2Hdc7PfGqFhynaEiYe1NJ3R1nda0VGaRiGU82OllR+EGDoWFpGr3k5Kg==",
|
||||
"requires": {
|
||||
"config-chain": "1.1.11",
|
||||
"editorconfig": "0.13.3",
|
||||
"mkdirp": "0.5.1",
|
||||
"nopt": "3.0.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"nopt": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
|
||||
"integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
|
||||
"requires": {
|
||||
"abbrev": "1.1.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
|
||||
|
@ -6774,6 +6844,11 @@
|
|||
"asap": "2.0.6"
|
||||
}
|
||||
},
|
||||
"proto-list": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
|
||||
"integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk="
|
||||
},
|
||||
"protractor": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/protractor/-/protractor-5.1.2.tgz",
|
||||
|
@ -6909,8 +6984,7 @@
|
|||
"pseudomap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
|
||||
"integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
|
||||
"dev": true
|
||||
"integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
|
||||
},
|
||||
"public-encrypt": {
|
||||
"version": "4.0.0",
|
||||
|
@ -7577,8 +7651,7 @@
|
|||
"semver": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
|
||||
"integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
|
||||
},
|
||||
"semver-dsl": {
|
||||
"version": "1.0.1",
|
||||
|
@ -7716,6 +7789,11 @@
|
|||
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
|
||||
"dev": true
|
||||
},
|
||||
"sigmund": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
|
||||
"integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA="
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
"@angular/platform-browser": "^4.3.6",
|
||||
"@angular/platform-browser-dynamic": "^4.3.6",
|
||||
"@angular/router": "^4.3.6",
|
||||
"@ngui/auto-complete": "^0.16.0",
|
||||
"angular-2-data-table": "^0.1.2",
|
||||
"angular-4-data-table-bootstrap-4": "^0.2.0",
|
||||
"angular-google-signin": "^0.1.5",
|
||||
|
|
|
@ -66,6 +66,9 @@
|
|||
<!--
|
||||
-->
|
||||
|
||||
|
||||
<autocomplete-remote [id]="'test-autocomplete'" [label]="'Please select smth'" [url]="'https://eestore.paas2.uninett.no/api/datarepo/'" ></autocomplete-remote>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
|
@ -6,6 +6,9 @@ import { TokenService, TokenProvider } from './services/login/token.service';
|
|||
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
|
||||
import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
|
||||
|
||||
import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
|
||||
|
||||
|
||||
declare var $ :any;
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
|
|
|
@ -38,7 +38,7 @@ import { AngularDraggableModule } from 'angular2-draggable';
|
|||
import { NativeLoginService } from './services/login/native-login.service';
|
||||
import { GooggleSignInComponent } from './login/googgle-sign-in/googgle-sign-in.component';
|
||||
import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
|
||||
|
||||
import { NguiAutoCompleteModule } from '@ngui/auto-complete';
|
||||
|
||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
|
||||
|
@ -118,6 +118,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
|
|||
DataTableModule,
|
||||
NgDatepickerModule,
|
||||
Ng4LoadingSpinnerModule,
|
||||
NguiAutoCompleteModule,
|
||||
SidebarModule.forRoot()
|
||||
|
||||
],
|
||||
|
|
|
@ -1,9 +1,18 @@
|
|||
<!--
|
||||
<div class="form-group">
|
||||
selectedValue: {{selectedValue}} <br>
|
||||
query: {{query}} <br>
|
||||
<label for="{{id}}">{{label}}</label>
|
||||
<select id="{{id}}">
|
||||
<option>Alfa Romeo</option>
|
||||
<option>Audi</option>
|
||||
<option>BMW</option>
|
||||
<option>Citroen</option>
|
||||
<select class="form-control" id="{{id}}" [ngModel]="selectedValue" (ngModelChange)="updateByQuery($event)" (change)="changed($event)">
|
||||
<option *ngFor="let value of values; let i = index">{{value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="form-group">
|
||||
selectedValue: {{selectedValue}} <br>
|
||||
query: {{query}} <br>
|
||||
<label for="{{id}}">{{label}}</label>
|
||||
<input auto-complete class="form-control" id="{{id}}" [ngModel]="selectedValue" (ngModelChange)="updateByQuery($event)" [source]="values" />
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
import { Component, OnInit,Input, Output } from '@angular/core';
|
||||
import { Component, OnInit,Input, Output, EventEmitter} from '@angular/core';
|
||||
import { ServerService } from '../../../services/server.service';
|
||||
|
||||
import { NguiAutoCompleteModule } from '@ngui/auto-complete';
|
||||
|
||||
declare var $: any;
|
||||
|
||||
|
@ -11,28 +14,40 @@ declare var $: any;
|
|||
|
||||
export class AutocompleteRemoteComponent implements OnInit {
|
||||
|
||||
constructor() {
|
||||
constructor(private serverService :ServerService) {
|
||||
|
||||
}
|
||||
|
||||
@Input() id : string = "test-field-123";
|
||||
@Input() label : string = "Test";
|
||||
@Input() url : string = "Test";
|
||||
@Output() selectedValue : string;
|
||||
@Input() id : string;
|
||||
@Input() label : string;
|
||||
@Input() url : string;
|
||||
|
||||
allValues : string[];
|
||||
selectedValue : string;
|
||||
//@Output() selectedValueEmitter: EventEmitter<string> = new EventEmitter<string>();
|
||||
|
||||
query : string = null;
|
||||
values : any[] = new Array();
|
||||
|
||||
query : string = "";
|
||||
|
||||
ngOnInit() {
|
||||
$('#'+this.id).editableSelect();
|
||||
|
||||
this.updateByQuery(this.query); //just to trigger the first call
|
||||
}
|
||||
|
||||
updateByQuery(query){
|
||||
if(query){
|
||||
|
||||
}
|
||||
|
||||
|
||||
updateByQuery(query : string){
|
||||
//this.selectedValueEmitter.next(this.selectedValue);
|
||||
this.serverService.getThroughProxy(this.url, query).subscribe(
|
||||
response => {
|
||||
this.values.length = 0; //clear array; -- this is quite a fast and memory efficient way
|
||||
response.data.forEach(element => {
|
||||
this.values.push(element.attributes.name);
|
||||
});
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -39,11 +39,18 @@ export class RestBase {
|
|||
restPath: string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/rest/";
|
||||
|
||||
|
||||
|
||||
|
||||
public proxy_get(path : string, params? : any){
|
||||
var options = this.createOptions(params);
|
||||
return this.http.get<any>(this.proxyPath +"proxy?url="+ path, options);
|
||||
}
|
||||
|
||||
public proxy_get_wQuery(path : string, query: string, params? : any){
|
||||
var options = this.createOptions(params);
|
||||
return this.http.get<any>(this.proxyPath +"proxy?url="+ path+"?search="+query, options);
|
||||
}
|
||||
|
||||
public login(path : string, data : any){
|
||||
let options = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
|
||||
return this.http.post<any>(this.loginPath + path, JSON.stringify(data), options);
|
||||
|
|
|
@ -147,8 +147,8 @@ public deleteDataset(dataset: any){
|
|||
}
|
||||
*/
|
||||
|
||||
getThroughProxy(url : string){
|
||||
|
||||
getThroughProxy(url : string, query: string){
|
||||
return this.restBase.proxy_get_wQuery(url, query);
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue