Small fixes

1. Set translations on next tick
2. Prompt value- any
3. Allow setting data in auto complete
4. Cache auto complete data by URL

docs/auto-complete.md

@@ -23,7 +23,7 @@ import { AutoCompleteModule } from 'eca-components';
 ## Usage
 
 ### Eager Loading
-In eager-loading mode, the component fetches all the data when loaded. If the ID attribute is provided, the data is cached as long as the app is loaded.
+In eager-loading mode, the component fetches all the data when loaded. The data is cached as long as the app is loaded (if an `id` is provided or if using the built-in loading method).
 
 ![Auto-Complete](./screenshots/auto-complete-data.png)
 
@@ -33,7 +33,6 @@ To use the **built-in** method, simply provide the URL of the relevant Alma API:
 ```html
 <eca-auto-complete
  [data]='{ request: "/conf/libraries" }'
- id='libraries'
 ></eca-auto-complete>
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "eca-components",
- "version": "1.3.3",
+ "version": "1.3.4",
  "description": "Components to be used in Ex Libris Cloud Apps",
  "license": "BSD-3-Clause",
  "keywords": [
@@ -37,8 +37,8 @@
  "@angular/core": "^9.0.7",
  "@angular/material": "^9.2.0",
  "@angular/forms": "^9.1.0",
- "@exlibris/exl-cloudapp-angular-lib": "0.5.0",
- "@ngx-translate/core": "12.1.2",
- "lodash": "^4.17.21"
+ "@exlibris/exl-cloudapp-angular-lib": "^0.5.0",
+ "@ngx-translate/core": "^12.1.2",
+ "lodash": "^4.17.0"
  }
 }

src/auto-complete/components/auto-complete.component.ts

@@ -18,7 +18,9 @@ export class AutoCompleteComponent implements OnInit {
  @Output() onOptionSelected = new EventEmitter();
  @Input() control = new FormControl();
  @Input() lazy: (val: string) => Observable<Array<Option>>;
- @Input() data: (() => Observable<Array<Option>>) | GetAllOptionsSettings;
+ @Input() set data(data: (() => Observable<Array<Option>>) | GetAllOptionsSettings) {
+ this.loadData(data);
+ }
  @Input() label = 'AutoComplete.Select';
  @Input() placeholder = 'AutoComplete.Type';
  @Input() id: string;
@@ -32,25 +34,38 @@ export class AutoCompleteComponent implements OnInit {
  ) { }
 
  ngOnInit() {
+ if (this.lazy) this.loadLazy();
+ }
+
+ ngAfterViewInit() {
  /* Once app translations are loaded, merge with component strings */
  this.translate.getTranslation('en').pipe(take(1)).subscribe(() => {
- Object.entries(i18n).forEach(([k, v]) => this.translate.setTranslation(k, v, true));
+ /* On the next tick otherwise template won't update */
+ setTimeout(() => Object.entries(i18n).forEach(([k, v]) => this.translate.setTranslation(k, v, true)));
  });
- if (this.data) this.loadData();
- else if (this.lazy) this.loadLazy();
  }
 
- loadData() {
+ loadData(data: (() => Observable<Array<Option>>) | GetAllOptionsSettings) {
+ const requestUrl = isGetAllOptions(data) && 
+ (
+ typeof data.request == 'string'
+ ? data.request
+ : data.request.url
+ );
  if (this.id && this.service.options[this.id]) {
  this.options = this.service.options[this.id];
  this.subscribeData();
+ } else if (requestUrl && this.service.options[requestUrl]) {
+ this.options = this.service.options[requestUrl];
+ this.subscribeData();
  } else {
- const get = isGetAllOptions(this.data)
- ? this.service.getAllOptions(this.data)
- : this.data();
+ const get = isGetAllOptions(data)
+ ? this.service.getAllOptions(data)
+ : data();
  get.pipe(
  tap(results => {
  if (this.id) this.service.options[this.id] = results;
+ else if (requestUrl) this.service.options[requestUrl] = results;
  })
  ).subscribe(results => {
  this.options = results;
@@ -79,7 +94,7 @@ export class AutoCompleteComponent implements OnInit {
 
  displayFn = (value?: any): string => {
  const option = this.filteredOptions && this.filteredOptions.find(o => isEqual(o.value, value) );
- return option ? option.name : '';
+ return option ? option.name : value;
  }
 
  private _filterOptions(value: string): Option[] {

src/dialogs/components/prompt.component.ts

@@ -7,7 +7,7 @@ import { DEFAULT_DIALOG_OPTIONS, DialogData } from "../dialog";
 
 export interface PromptDialogData extends DialogData {
  prompt?: string;
- val?: string;
+ val?: any;
 }
 
 @Component({

src/select-entities/components/select-entities/select-entities.component.ts

@@ -48,7 +48,8 @@ export class SelectEntitiesComponent implements OnInit, OnDestroy {
  this.subscription$ = this.entities$.subscribe(this.entitiesUpdated);
  /* Once app translations are loaded, merge with component strings */
  this.translate.getTranslation('en').pipe(take(1)).subscribe(() => {
- Object.entries(i18n).forEach(([k, v]) => this.translate.setTranslation(k, v, true));
+ /* On the next tick otherwise template won't update */
+ setTimeout(() => Object.entries(i18n).forEach(([k, v]) => this.translate.setTranslation(k, v, true)));
  });
  this.masterChecked = false;
  this.count.emit(0);