menu: refactor switch library entry

The switch library was only displayed on the root page of the
professional interface. This commit change this behavior and now this
menu is displayed on all pages (if user has required rights).
However, the menu is disabled on all pages except on the homepage. This
implementation avoid problems if user should edit some resource link to
the current library.

This commit also removes the top panel containing the current library
name. The current library code is now used as label of the switch
library menu instead of "Switch library" string.

This commit also fix the dynamic population problem of the switch
library menu : When a new library was added, this library was not
dynamically added to the switch library menu. This commit fixes this
problem.

- Closes rero/rero-ils#821
- Closes rero/rero-ils#822

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
Co-Authored-by: Renaud Michotte <renaud.michotte@gmail.com>

package.json

@@ -82,6 +82,7 @@
     "lodash-es": "4.17.14",
     "moment": "^2.24.0",
     "ngx-bootstrap": "^5.6.2",
+    "ngx-bootstrap-slider": "^1.8.0",
     "ngx-toastr": "^10.2.0",
     "ngx-toggle-switch": "^2.0.5",
     "rxjs": "^6.4.0",

projects/admin/src/app/app.component.spec.ts

@@ -27,7 +27,6 @@ import { RecordModule } from '@rero/ng-core';
 import { HttpClientModule } from '@angular/common/http';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
-import { InterfaceInfoComponent } from './interface-info/interface-info.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -45,8 +44,7 @@ describe('AppComponent', () => {
       ],
       declarations: [
         AppComponent,
-        MenuComponent,
-        InterfaceInfoComponent
+        MenuComponent
       ]
     }).compileComponents();
   }));

projects/admin/src/app/app.component.ts

@@ -142,11 +142,10 @@ export class AppComponent implements OnInit, OnDestroy {
             this.localStorageService.updateDate(User.STORAGE_KEY);
           }
         }
-
-        // Library Switch menu show only on homepage
-        this.librarySwitchService.show(
-          (event.url === '/') ? true : false
-        );
+        // Library Switch menu is enabled only on homepage
+        //   We use this restriction to avoid problems if user is on page using the current library value (my library, some forms, ...)
+        //   To avoid all potential problem, the simplest way is to enable the menu only on the homepage.
+        this.librarySwitchService.enable( event.url === '/');
       })
     );
   }

projects/admin/src/app/app.module.ts

@@ -30,7 +30,6 @@ import { ErrorPageComponent } from './error/error-page/error-page.component';
 import { FrontpageBoardComponent } from './frontpage/frontpage-board/frontpage-board.component';
 import { FrontpageComponent } from './frontpage/frontpage.component';
 import { NoCacheHeaderInterceptor } from './interceptor/no-cache-header.interceptor';
-import { InterfaceInfoComponent } from './interface-info/interface-info.component';
 import { MenuComponent } from './menu/menu.component';
 import { BioInformationsPipe } from './pipe/bio-informations.pipe';
 import { BirthDatePipe } from './pipe/birth-date.pipe';
@@ -151,10 +150,8 @@ import { OrderLineComponent } from './record/detail-view/acquisition-order-detai
     ItemTransactionComponent,
     ItemTransactionsComponent,
     PatronDetailViewComponent,
-    InterfaceInfoComponent,
     RefComponent,
     RemoteAutocompleteInputTypeComponent,
-    InterfaceInfoComponent,
     VendorDetailViewComponent,
     VendorBriefViewComponent,
     AddressTypeComponent,

projects/admin/src/app/menu/menu.component.html

@@ -14,7 +14,6 @@
    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<admin-interface-info></admin-interface-info>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex">
   <div class="container">
     <a [routerLink]="['/']" class="navbar-brand pr-2 text-sm">
@@ -39,12 +38,24 @@
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent" [collapse]="isCollapsed" [isAnimated]="true">
       <ng-core-menu class="mr-auto" [menu]="linksMenu"></ng-core-menu>
-      <ng-core-menu
-        class="userMenu"
-        [menu]="librariesSwitchMenu"
-        (clickItem)="changeLibrary($event)"
-        *ngIf="isVisibleLibrarySwitchMenu && isVisible"
-      ></ng-core-menu>
+
+      <ng-container *ngIf="isVisibleLibrarySwitchMenu && isVisible; else switchLibraryOff">
+        <ng-core-menu
+          class="userMenu"
+          [menu]="librariesSwitchMenu"
+          (clickItem)="changeLibrary($event)"
+        ></ng-core-menu>
+      </ng-container>
+      <ng-template #switchLibraryOff>
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <div class="nav-link">
+              <i class="fa fa-random"></i> {{ librariesSwitchMenu.entries[0].name }}
+            </div>
+          </li>
+        </ul>
+      </ng-template>
+
       <ng-core-menu [menu]="languagesMenu" (clickItem)="changeLang($event)"></ng-core-menu>
       <ng-core-menu [menu]="userMenu"></ng-core-menu>
     </div>

projects/admin/src/app/menu/menu.component.spec.ts

@@ -33,9 +33,9 @@ describe('MenuComponent', () => {
 
   const libraryTestingSwitchService = jasmine.createSpyObj(
     'LibrarySwitchService', ['generateMenu']);
-  libraryTestingSwitchService.onVisibleMenu$ = of(false);
   libraryTestingSwitchService.entries = [{ entries: [] }];
   libraryTestingSwitchService.onGenerate$ = of([]);
+  libraryTestingSwitchService.currentLibraryRecord$ = of({code: 1});
 
   const userTestingService = jasmine.createSpyObj(
     'UserService', ['getCurrentUser', 'hasRole']

projects/admin/src/app/menu/menu.component.ts

@@ -45,9 +45,10 @@ export class MenuComponent implements OnInit {
   autocompleteQueryParams: any = { page: '1', size: '10' };
 
   librariesSwitchMenu = {
-    navCssClass: 'navbar-nav',
+    navCssClass: 'navbar-nav rero-ils-nav-select-box',
+    dropdownMenuCssClass: 'dropdown-menu-right',
     entries: [{
-      name: this._translateService.instant('Switch library'),
+      name: '',  // start with empty value, it will be changed when menu is generated
       iconCssClass: 'fa fa-random',
       entries: []
     }]
@@ -58,7 +59,6 @@ export class MenuComponent implements OnInit {
   userMenu = {
     navCssClass: 'navbar-nav',
     dropdownMenuCssClass: 'dropdown-menu-right',
-    iconCssClass: 'fa fa-user',
     entries: []
   };
 
@@ -86,6 +86,7 @@ export class MenuComponent implements OnInit {
 
     this.userMenu.entries.push({
       name: `${currentUser.first_name[0]}${currentUser.last_name[0]}`,
+      iconCssClass: 'fa fa-user',
       entries: [
         {
           name: this._translateService.instant('Public interface'),
@@ -117,19 +118,10 @@ export class MenuComponent implements OnInit {
         this.userMenu.entries[0].entries[0].href = `/${organisation.metadata.code}/`;
       });
 
-    this._librarySwitchService.onVisibleMenu$.subscribe((visible) => {
-      if (
-        visible
-        && this._userService.hasRole('system_librarian')
-        && this._librarySwitchService.entries.length === 0) {
-        this._librarySwitchService.generateMenu();
-      }
-    });
-
-    this._librarySwitchService.onGenerate$.subscribe((entries: any) => {
-      this.librariesSwitchMenu.entries[0].entries = entries;
-    });
-
+    // SWITCH LIBRARY MENU ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    this._librarySwitchService.generateMenu();
+    this._librarySwitchService.onGenerate$.subscribe((entries: any) => this.librariesSwitchMenu.entries[0].entries = entries);
+    this._librarySwitchService.currentLibraryRecord$.subscribe((library: any) => this.librariesSwitchMenu.entries[0].name = library.code);
   }
 
   /**

projects/admin/src/app/scss/styles.scss

@@ -63,6 +63,16 @@ header {
   overflow: auto;
 }
 
+.rero-ils-nav-select-box {
+  border: 1px solid $secondary;
+  border-radius: 0.3em;
+  background-color: #FFF;
+
+  .nav-link {
+    padding: 0.25em;
+  }
+}
+
 .list-group-item:last-child {     //TODO: understand why it's needed, it shouldn't
   border-bottom: 0;
 }

projects/admin/src/app/service/library-switch.service.spec.ts

@@ -14,15 +14,16 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { HttpClientModule } from '@angular/common/http';
 import { TestBed } from '@angular/core/testing';
-
+import { TranslateModule } from '@ngx-translate/core';
 import { LibrarySwitchService } from './library-switch.service';
-import { HttpClientModule } from '@angular/common/http';
 
 describe('LibrarySwitchService', () => {
   beforeEach(() => TestBed.configureTestingModule({
     imports: [
-      HttpClientModule
+      HttpClientModule,
+      TranslateModule.forRoot()
     ]
   }));