Skip to content

Commit

Permalink
library switch: fix switch on mobile
Browse files Browse the repository at this point in the history
Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
  • Loading branch information
Garfield-fr committed Oct 10, 2023
1 parent b628e68 commit 365ec91
Show file tree
Hide file tree
Showing 7 changed files with 148 additions and 81 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!--
RERO ILS UI
Copyright (C) 2020 RERO
Copyright (C) 2020-2023 RERO
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
Expand All @@ -18,7 +18,9 @@
<admin-sub-menu [menu]="menuApp"></admin-sub-menu>
<admin-sub-menu
[class]="{'d-block': librariesSwitchIsVisible, 'd-none': !librariesSwitchIsVisible}"
[menu]="menuLibrariesSwitch"></admin-sub-menu>
[menu]="menuLibrariesSwitch"
(clickItem)="eventLibrarySwitchMenuClick($event)"
></admin-sub-menu>
<admin-sub-menu [menu]="menuLanguages"></admin-sub-menu>
<div class="card mb-2">
<div class="card-body">
Expand Down
17 changes: 14 additions & 3 deletions projects/admin/src/app/menu/menu-mobile/menu-mobile.component.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
* RERO ILS UI
* Copyright (C) 2020-2022 RERO
* Copyright (C) 2020-2023 RERO
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
Expand All @@ -15,9 +15,10 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { Component, OnInit } from '@angular/core';
import { MenuItemInterface } from '@rero/ng-core';
import { MenuItem, MenuItemInterface } from '@rero/ng-core';
import { LibrarySwitchMenuService } from '../service/library-switch-menu.service';
import { MenuService } from '../service/menu.service';
import { LibrarySwitchMenuEventService } from '../service/library-switch-menu-event.service';

@Component({
selector: 'admin-menu-mobile',
Expand Down Expand Up @@ -49,10 +50,12 @@ export class MenuMobileComponent implements OnInit {
* Constructor
* @param _menuService - MenuService
* @param _librarySwitchMenuService - LibrarySwitchMenuService
* @param _librarySwitchMenuEventService - LibrarySwitchMenuEventService
*/
constructor(
private _menuService: MenuService,
private _librarySwitchMenuService: LibrarySwitchMenuService
private _librarySwitchMenuService: LibrarySwitchMenuService,
private _librarySwitchMenuEventService: LibrarySwitchMenuEventService
) { }

/** OnInit hook */
Expand All @@ -73,4 +76,12 @@ export class MenuMobileComponent implements OnInit {
this._menuService.generateLanguageMenu();
}
}

/**
* Event on library switch menu click
* @param event - MenuItem
*/
eventLibrarySwitchMenuClick(event: MenuItem): void {
this._librarySwitchMenuEventService.eventMenuClick(event);
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!--
RERO ILS UI
Copyright (C) 2020 RERO
Copyright (C) 2020-2023 RERO
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
Expand Down Expand Up @@ -30,6 +30,7 @@ <h5 class="card-title">
[attr.target]="subItem.getAttribute('target')"
[routerLink]="subItem.getRouterLink()"
[queryParams]="subItem.getQueryParams() ? subItem.getQueryParams() : {}"
(click)="doClick(subItem)"
>
<i *ngIf="subItem.hasExtra('iconClass')" [ngClass]="subItem.getExtra('iconClass')"></i>
{{ subItem.getName() }}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
* RERO ILS UI
* Copyright (C) 2020 RERO
* Copyright (C) 2020-2023 RERO
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
Expand All @@ -15,8 +15,8 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import { Component, Input } from '@angular/core';
import { MenuItemInterface } from '@rero/ng-core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MenuItem, MenuItemInterface } from '@rero/ng-core';

@Component({
selector: 'admin-sub-menu',
Expand All @@ -25,4 +25,15 @@ import { MenuItemInterface } from '@rero/ng-core';
export class SubMenuComponent {
/** menu */
@Input() menu: MenuItemInterface;

/** Event */
@Output() clickItem = new EventEmitter();

/**
* Emit a event on click item menu
* @param item - MenuItem
*/
doClick(item: MenuItem | MenuItemInterface) {
this.clickItem.emit(item);
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
* RERO ILS UI
* Copyright (C) 2020 RERO
* Copyright (C) 2020-2023 RERO
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
Expand All @@ -16,14 +16,9 @@
*/

import { Component } from '@angular/core';
import { PRIMARY_OUTLET, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { DialogService, MenuItem, MenuItemInterface } from '@rero/ng-core';
import { UserService } from '@rero/shared';
import { Observable } from 'rxjs';
import { AppConfigService } from '../../service/app-config.service';
import { MenuItem, MenuItemInterface } from '@rero/ng-core';
import { LibrarySwitchMenuEventService } from '../service/library-switch-menu-event.service';
import { LibrarySwitchMenuService } from '../service/library-switch-menu.service';
import { LibrarySwitchService } from '../service/library-switch.service';

@Component({
selector: 'admin-menu-switch-library',
Expand All @@ -43,78 +38,19 @@ export class MenuSwitchLibraryComponent {

/**
* Constructor
* @param _appConfigService - AppConfigService
* @param _librarySwitchMenuService - LibrarySwitchMenuService
* @param _librarySwitchService - LibrarySwitchService
* @param _dialogService - DialogService
* @param _translateService - TranslateService
* @param _router - Router
* @param _userService - UserService
* @param _librarySwitchMenuEventService - LibrarySwitchMenuEventService
*/
constructor(
private _appConfigService: AppConfigService,
private _librarySwitchMenuService: LibrarySwitchMenuService,
private _librarySwitchService: LibrarySwitchService,
private _dialogService: DialogService,
private _translateService: TranslateService,
private _router: Router,
private _userService: UserService
private _librarySwitchMenuEventService: LibrarySwitchMenuEventService
) { }

/**
* Event on menu click
* @param event - MenuItem
*/
eventMenuClick(event: MenuItem): void {
if (this._userService.user.currentLibrary !== event.getExtra('id')) {
const url = this._router.url;
const urlTree = this._router.parseUrl(url);
const children = urlTree.root.children[PRIMARY_OUTLET];
if (children) {
const urlParams = children.segments.map(segment => segment.path);
if (
this._appConfigService.librarySwitchCheckParamsUrl
.some(param => urlParams.includes(param))
) {
this._dialog().subscribe((confirmation: boolean) => {
if (confirmation) {
this._switchAndNavigate(event.getExtra('id'));
}
});
} else {
this._switchAndNavigate(event.getExtra('id'));
}
} else {
this._switchAndNavigate(event.getExtra('id'));
}
}
}

/**
* Dialog configuration
* @return Observable
*/
private _dialog(): Observable<boolean> {
return this._dialogService.show({
ignoreBackdropClick: false,
initialState: {
title: this._translateService.instant('Quit the page'),
body: this._translateService.instant(
'Do you want to quit the page? The changes made so far will be lost.'
),
confirmButton: true,
confirmTitleButton: this._translateService.instant('Quit'),
cancelTitleButton: this._translateService.instant('Stay')
}
});
}

/**
* Switch and navigate
* @param id - string, library pid
*/
private _switchAndNavigate(id: string): void {
this._librarySwitchService.switch(id);
this._router.navigate(['/']);
this._librarySwitchMenuEventService.eventMenuClick(event);
}
}
4 changes: 2 additions & 2 deletions projects/admin/src/app/menu/menu.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,11 @@
</div>
</div>

<button type="button" class="navbar-toggler d-block d-sm-none" (click)="isCollapsed = !isCollapsed"
<button type="button" class="navbar-toggler d-block d-lg-none" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-block d-sm-none navbar-collapse" id="navbarSupportedContent">
<div class="d-block d-lg-none navbar-collapse" id="navbarSupportedContent">
<admin-menu-mobile class="mt-2" [class]="{'d-none': isCollapsed, 'd-block': !isCollapsed}"></admin-menu-mobile>
</div>
</nav>
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
/*
* RERO ILS UI
* Copyright (C) 2020-2023 RERO
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, version 3 of the License.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* 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 { Injectable } from '@angular/core';
import { PRIMARY_OUTLET, Router } from '@angular/router';
import { AppConfigService } from '@app/admin/service/app-config.service';
import { TranslateService } from '@ngx-translate/core';
import { DialogService, MenuItem } from '@rero/ng-core';
import { UserService } from '@rero/shared';
import { Observable } from 'rxjs';
import { LibrarySwitchService } from './library-switch.service';

@Injectable({
providedIn: 'root'
})
export class LibrarySwitchMenuEventService {

/**
* Constructor
* @param _userService - UserService
* @param _router - Router
* @param _appConfigService - AppConfigService
* @param _dialogService - DialogService
* @param _translateService - TranslateService
* @param _librarySwitchService - LibrarySwitchService
*/
constructor(
private _userService: UserService,
private _router: Router,
private _appConfigService: AppConfigService,
private _dialogService: DialogService,
private _translateService: TranslateService,
private _librarySwitchService: LibrarySwitchService,
) {}

/**
* Event on menu click
* @param event - MenuItem
*/
eventMenuClick(event: MenuItem): void {
console.log(event, event.getExtra('id'));
if (this._userService.user.currentLibrary !== event.getExtra('id')) {
const url = this._router.url;
const urlTree = this._router.parseUrl(url);
const children = urlTree.root.children[PRIMARY_OUTLET];
if (children) {
const urlParams = children.segments.map(segment => segment.path);
if (
this._appConfigService.librarySwitchCheckParamsUrl
.some(param => urlParams.includes(param))
) {
this._dialog().subscribe((confirmation: boolean) => {
if (confirmation) {
this._switchAndNavigate(event.getExtra('id'));
}
});
} else {
this._switchAndNavigate(event.getExtra('id'));
}
} else {
this._switchAndNavigate(event.getExtra('id'));
}
}
}

/**
* Dialog configuration
* @return Observable
*/
private _dialog(): Observable<boolean> {
return this._dialogService.show({
ignoreBackdropClick: false,
initialState: {
title: this._translateService.instant('Quit the page'),
body: this._translateService.instant(
'Do you want to quit the page? The changes made so far will be lost.'
),
confirmButton: true,
confirmTitleButton: this._translateService.instant('Quit'),
cancelTitleButton: this._translateService.instant('Stay')
}
});
}

/**
* Switch and navigate
* @param id - string, library pid
*/
private _switchAndNavigate(id: string): void {
this._librarySwitchService.switch(id);
this._router.navigate(['/']);
}
}

0 comments on commit 365ec91

Please sign in to comment.