autocomplete: fix suggestions list

package.json

@@ -33,14 +33,13 @@
     "font-awesome": "^4.7.0",
     "handlebars": "^4.7.3",
     "lodash-es": "4.17.14",
+    "minimist": ">=0.2.1",
     "moment": "^2.24.0",
-    "ngx-bootstrap": "~5.5.0",
+    "ngx-bootstrap": "^5.6.2",
     "ngx-toastr": "^10.2.0",
     "rxjs": "^6.5.4",
     "tslib": "^1.9.0",
-    "zone.js": "~0.9.1",
-    "acorn": ">=6.4.1",
-    "minimist": ">=0.2.1"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.803.8",

projects/ng-core-tester/src/app/app.component.ts

@@ -17,7 +17,7 @@
 import { Component, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreConfigService, RecordEvent, RecordService, TitleMetaService } from '@rero/ng-core';
-import { BsLocaleService } from 'ngx-bootstrap';
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { ToastrService } from 'ngx-toastr';
 
 /**

projects/ng-core-tester/src/app/app.module.ts

@@ -20,7 +20,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CoreConfigService, RecordModule, TranslateLoader } from '@rero/ng-core';
-import { BsLocaleService, CollapseModule, TypeaheadModule } from 'ngx-bootstrap';
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';
+import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { defineLocale } from 'ngx-bootstrap/chronos';
 import { deLocale, enGbLocale, frLocale, itLocale } from 'ngx-bootstrap/locale';
 import { AppConfigService } from './app-config.service';

projects/ng-core-tester/src/app/search-bar/search-bar.component.spec.ts

@@ -20,7 +20,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { AutocompleteComponent, CoreModule } from '@rero/ng-core';
-import { TypeaheadModule } from 'ngx-bootstrap';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { SearchBarComponent } from './search-bar.component';
 
 describe('SearchBarComponent', () => {

projects/rero/ng-core/src/lib/core.module.ts

@@ -18,7 +18,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { BsDropdownModule, ModalModule } from 'ngx-bootstrap';
+import {  ModalModule } from 'ngx-bootstrap/modal';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ToastrModule } from 'ngx-toastr';
 import { DialogComponent } from './dialog/dialog.component';
 import { CallbackArrayFilterPipe } from './pipe/callback-array-filter.pipe';

projects/rero/ng-core/src/lib/dialog/dialog.component.spec.ts

@@ -16,7 +16,7 @@
  */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { BsModalRef, ModalModule } from 'ngx-bootstrap';
+import { BsModalRef, ModalModule } from 'ngx-bootstrap/modal';
 import { Nl2brPipe } from '../pipe/nl2br.pipe';
 import { DialogComponent } from './dialog.component';
 

projects/rero/ng-core/src/lib/dialog/dialog.service.spec.ts

@@ -17,7 +17,7 @@
 import { TestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { BsModalService, ModalModule } from 'ngx-bootstrap';
+import { BsModalService, ModalModule } from 'ngx-bootstrap/modal';
 import { CoreConfigService } from '../core-config.service';
 import { Nl2brPipe } from '../pipe/nl2br.pipe';
 import { DialogComponent } from './dialog.component';

projects/rero/ng-core/src/lib/dialog/dialog.service.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Injectable } from '@angular/core';
-import { BsModalService } from 'ngx-bootstrap';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { DialogComponent } from './dialog.component';
 
 /**

projects/rero/ng-core/src/lib/record/autocomplete/autocomplete.component.spec.ts

@@ -19,7 +19,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { TypeaheadModule } from 'ngx-bootstrap';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { CoreModule } from '../../core.module';
 import { AutocompleteComponent } from './autocomplete.component';
 

projects/rero/ng-core/src/lib/record/autocomplete/autocomplete.component.ts

@@ -16,7 +16,7 @@
  */
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { TypeaheadMatch } from 'ngx-bootstrap';
+import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';
 import { combineLatest, Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { RecordService } from '../record.service';
@@ -58,7 +58,7 @@ export class AutocompleteComponent implements OnInit {
   @Input()
   typeaheadWaitMs = 300;
 
-  // The maximum length of options items list. The default value is 20.
+  // The maximum length of the total number of suggestions in the list. The default value is 10.
   @Input() typeaheadOptionsLimit = 10;
 
   // Additional query parameters
@@ -79,9 +79,6 @@ export class AutocompleteComponent implements OnInit {
   // The remote suggestions list.
   dataSource: Observable<any>;
 
-  // store a current URL redirection
-  private _redirect = false;
-
   // The current form object from the template.
   @ViewChild('form', { static: false })
   form: any;
@@ -136,17 +133,15 @@ export class AutocompleteComponent implements OnInit {
     if (event != null) {
       event.preventDefault();
     }
-    if (!this._redirect) {
-      if (this.internalRouting) {
-        this._router.navigate([this.action], {
-          queryParams: {
-            ...this.extraQueryParams,
-            q: this.asyncSelected.query
-          }
-        });
-      } else {
-        this.form.nativeElement.submit();
-      }
+    if (this.internalRouting) {
+      this._router.navigate([this.action], {
+        queryParams: {
+          ...this.extraQueryParams,
+          q: this.asyncSelected.query
+        }
+      });
+    } else {
+      this.form.nativeElement.submit();
     }
   }
 
@@ -211,7 +206,6 @@ export class AutocompleteComponent implements OnInit {
       } else {
         window.location.href = e.item.href;
       }
-      this._redirect = true;
     } else {
       this.doSearch();
     }

projects/rero/ng-core/src/lib/record/detail/detail.component.spec.ts

@@ -21,7 +21,7 @@ import { ActivatedRoute, convertToParamMap } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { ActionStatus } from '@rero/ng-core/public-api';
-import { ModalModule } from 'ngx-bootstrap';
+import { ModalModule } from 'ngx-bootstrap/modal';
 import { ToastrModule } from 'ngx-toastr';
 import { Observable, of, throwError } from 'rxjs';
 import { RecordService } from '../record.service';
@@ -44,6 +44,9 @@ describe('RecordDetailComponent', () => {
   const loc = jasmine.createSpyObj('Location', ['back']);
 
   const route = {
+    paramMap: of(convertToParamMap({
+      type: 'documents', pid: '1'
+    })),
     snapshot: {
       paramMap: convertToParamMap({
         type: 'documents', pid: '1'

projects/rero/ng-core/src/lib/record/detail/detail.component.ts

@@ -15,11 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Location } from '@angular/common';
-import { Component, ComponentFactoryResolver, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ComponentFactoryResolver, Input, OnInit, ViewChild, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { ToastrService } from 'ngx-toastr';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { ActionStatus } from '../action-status';
 import { RecordUiService } from '../record-ui.service';
 import { RecordService } from '../record.service';
@@ -30,7 +30,7 @@ import { JsonComponent } from './view/json.component';
   selector: 'ng-core-record-detail',
   templateUrl: './detail.component.html'
 })
-export class DetailComponent implements OnInit {
+export class DetailComponent implements OnInit, OnDestroy {
   /**
    * Object for checking record deletion permission.
    */
@@ -76,6 +76,11 @@ export class DetailComponent implements OnInit {
   @Input()
   viewComponent: any = null;
 
+  /**
+   * Subscription to route parameters observables
+   */
+  private _routeParametersSubscription: Subscription;
+
   /**
    * Directive for displaying record
    */
@@ -97,47 +102,58 @@ export class DetailComponent implements OnInit {
    * On init hook
    */
   ngOnInit() {
-    this.loadViewComponentRef();
-
-    const pid = this._route.snapshot.paramMap.get('pid');
-    const type = this._route.snapshot.paramMap.get('type');
-
-    this._recordUiService.types = this._route.snapshot.data.types;
-    const config = this._recordUiService.getResourceConfig(type);
-
-    this.record$ = this._recordService.getRecord(type, pid, 1, config.itemHeaders || null);
-    this.record$.subscribe(
-      (record) => {
-        this.record = record;
-
-        this._recordUiService.canReadRecord$(this.record, type).subscribe(result => {
-          if (result.can === false) {
-            this._toastrService.error(
-              this._translate.instant('You cannot read this record'),
-              this._translate.instant(type)
-            );
-            this._location.back();
+    this._routeParametersSubscription = this._route.paramMap.subscribe(() => {
+      this.loadViewComponentRef();
+
+      const pid = this._route.snapshot.paramMap.get('pid');
+      const type = this._route.snapshot.paramMap.get('type');
+
+      this._recordUiService.types = this._route.snapshot.data.types;
+      const config = this._recordUiService.getResourceConfig(type);
+
+      this.record$ = this._recordService.getRecord(type, pid, 1, config.itemHeaders || null);
+      this.record$.subscribe(
+        (record) => {
+          this.record = record;
+
+          this._recordUiService.canReadRecord$(this.record, type).subscribe(result => {
+            if (result.can === false) {
+              this._toastrService.error(
+                this._translate.instant('You cannot read this record'),
+                this._translate.instant(type)
+              );
+              this._location.back();
+            }
+          });
+
+          this._recordUiService.canDeleteRecord$(this.record, type).subscribe(result => {
+            this.deleteStatus = result;
+          });
+
+          this._recordUiService.canUpdateRecord$(this.record, type).subscribe(result => {
+            this.updateStatus = result;
+          });
+
+          if (this._route.snapshot.data.adminMode) {
+            this._route.snapshot.data.adminMode().subscribe((am: ActionStatus) => this.adminMode = am);
           }
-        });
-
-        this._recordUiService.canDeleteRecord$(this.record, type).subscribe(result => {
-          this.deleteStatus = result;
-        });
-
-        this._recordUiService.canUpdateRecord$(this.record, type).subscribe(result => {
-          this.updateStatus = result;
-        });
-
-        if (this._route.snapshot.data.adminMode) {
-          this._route.snapshot.data.adminMode().subscribe((am: ActionStatus) => this.adminMode = am);
+        },
+        (error) => {
+          this.error = error;
         }
-      },
-      (error) => {
-        this.error = error;
-      }
-    );
+      );
 
-    this.loadRecordView();
+      this.loadRecordView();
+    });
+  }
+
+  /**
+   * Component destruction.
+   *
+   * Unsubscribes from the observables of the route parameters.
+   */
+  ngOnDestroy() {
+    this._routeParametersSubscription.unsubscribe();
   }
 
   /**
@@ -155,7 +171,7 @@ export class DetailComponent implements OnInit {
   deleteRecord(pid: string) {
     this._recordUiService.deleteRecord(this._route.snapshot.paramMap.get('type'), pid).subscribe((result: any) => {
       if (result === true) {
-        this._router.navigate(['../..'], {relativeTo: this._route});
+        this._router.navigate(['../..'], { relativeTo: this._route });
       }
     });
   }

projects/rero/ng-core/src/lib/record/editor/add-field-editor/add-field-editor.component.spec.ts

@@ -16,7 +16,7 @@
  */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { TypeaheadModule } from 'ngx-bootstrap';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { AddFieldEditorComponent } from './add-field-editor.component';
 
 describe('AddFieldEditorComponent', () => {

projects/rero/ng-core/src/lib/record/record-ui.service.spec.ts

@@ -18,7 +18,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { ModalModule } from 'ngx-bootstrap';
+import { ModalModule } from 'ngx-bootstrap/modal';
 import { ToastrModule } from 'ngx-toastr';
 import { RecordUiService } from './record-ui.service';
 

projects/rero/ng-core/src/lib/record/record.module.ts

@@ -19,7 +19,11 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
 import { FormlyModule } from '@ngx-formly/core';
-import { BsDatepickerModule, CollapseModule, PaginationModule, TooltipModule, TypeaheadModule } from 'ngx-bootstrap';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { CoreModule } from '../core.module';
 import { GetRecordPipe } from '../pipe/get-record.pipe';
 import { AutocompleteComponent } from './autocomplete/autocomplete.component';

projects/rero/ng-core/src/lib/record/search/record-search-page.component.spec.ts

@@ -22,7 +22,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { ModalModule, PaginationModule } from 'ngx-bootstrap';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { ModalModule } from 'ngx-bootstrap/modal';
 import { ToastrModule } from 'ngx-toastr';
 import { Observable, of } from 'rxjs';
 import { DialogComponent } from '../../dialog/dialog.component';

projects/rero/ng-core/src/lib/record/search/record-search.component.spec.ts

@@ -21,7 +21,8 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { ModalModule, PaginationModule } from 'ngx-bootstrap';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { ModalModule } from 'ngx-bootstrap/modal';
 import { ToastrModule } from 'ngx-toastr';
 import { Observable, of } from 'rxjs';
 import { DialogComponent } from '../../dialog/dialog.component';