@sumaris-net/ngx-components 2.6.4-alpha3 → 2.6.4-alpha5

package/src/app/core/menu/menu.component.scss

@@ -0,0 +1,225 @@
+@import 'ionic.globals';
+
+ion-menu {
+
+  --ion-item-background: transparent;
+  --ion-item-divider-background: transparent;
+  --ion-item-icon-color: var(--ion-color-primary-tint);
+  --ion-item-text-color: var(--ion-color-primary-tint);
+
+  --ion-item-background-selected: var(--ion-color-secondary100);
+  --ion-item-text-color-selected: var(--ion-color-primary);
+  --ion-item-icon-color-selected: var(--ion-color-primary);
+
+  --ion-item-text-color-disable: var(--ion-color-medium);
+  --ion-item-icon-color-disable: var(--ion-color-medium);
+
+  ion-header {
+
+    ion-text {
+      color: var(--ion-color-primary);
+    }
+
+    .user-avatar {
+      -webkit-background-size: cover;
+      -moz-background-size: cover;
+      -o-background-size: cover;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-color: var(--ion-color-secondary);
+      border: solid 1px rgba(var(--ion-color-secondary-rgb), 0.5);
+      overflow: hidden !important;
+      font-size: var(--avatar-size, 60px) !important;
+      line-height: var(--avatar-size, 60px);
+      height: var(--avatar-size, 60px) !important;
+      width: var(--avatar-size, 60px) !important;
+      border-radius: 50%;
+      display: inline-block;
+
+      &:hover {
+        background-color: var(--ion-color-secondary-shade);
+        border: solid 2px var(--ion-color-secondary-shade);
+      }
+    }
+
+    .user-logo {
+      text-align: right;
+
+      img {
+        max-width: 120px;
+        max-height: var(--avatar-size, 60px);
+        width: auto;
+      }
+    }
+
+    .username {
+      padding-top: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    button[mat-button] {
+      padding: 0;
+      text-align: start !important;
+      width: 100%;
+    }
+  }
+
+  .scroll-content {
+    margin-top: 79px !important;
+  }
+
+  .has-user-header .scroll-content {
+    margin-top: 188px !important;
+  }
+
+  ion-content {
+    &.has-profile-header {
+      --offset-top: 188px;
+    }
+
+    &.no-profile-header {
+      --offset-top: 79px;
+    }
+
+    ion-list {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+
+      ion-menu-toggle.flex-spacer {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+
+      ion-item {
+
+        &.primary {
+          --ion-item-icon-color: var(--ion-color-primary-tint);
+          --ion-item-text-color: var(--ion-color-primary-tint);
+        }
+        &.secondary {
+          --ion-item-icon-color: var(--ion-color-secondary-tint);
+          --ion-item-text-color: var(--ion-color-secondary-tint);
+        }
+        &.tertiary {
+          --ion-item-icon-color: var(--ion-color-tertiary-tint);
+          --ion-item-text-color: var(--ion-color-tertiary-tint);
+        }
+        &.danger {
+          --ion-item-icon-color: var(--ion-color-danger-tint);
+          --ion-item-text-color: var(--ion-color-danger-tint);
+        }
+        &.medium {
+          --ion-item-icon-color: var(--ion-color-medium-shade);
+          --ion-item-text-color: var(--ion-color-medium-shade);
+        }
+        &.dark {
+          --ion-item-icon-color: var(--ion-color-dark-tint);
+          --ion-item-text-color: var(--ion-color-dark-tint);
+        }
+        mat-icon,
+        ion-icon {
+          color: var(--ion-item-icon-color) !important;
+          fill: currentColor;
+          stroke: currentColor;
+        }
+
+        ion-text,
+        ion-label {
+          color: var(--ion-item-text-color) !important;
+        }
+      }
+
+      ion-item.selected {
+        background-color: var(--ion-item-background-selected) !important;
+        --color-hover:  var(--ion-item-background-selected) !important;
+
+        mat-icon,
+        ion-icon {
+          color: var(--ion-item-icon-color-selected) !important;
+          fill: currentColor;
+          stroke: currentColor;
+        }
+
+        ion-text,
+        ion-label {
+          color: var(--ion-item-text-color-selected) !important;
+        }
+
+        &:hover {
+          --color-hover:  var(--ion-item-background-selected) !important;
+          --ion-item-icon-color-selected: var(--ion-item-icon-color) !important;
+          --ion-item-text-color-selected: var(--ion-item-text-color) !important;
+        }
+      }
+    }
+  }
+
+  ion-footer {
+    // Avoid top border to be hide by 'hidden-xs' and 'hidden-sm'
+    display: block !important;
+
+    ion-toolbar {
+
+      ion-title {
+        cursor: pointer;
+        font-size: 12pt;
+        font-weight: normal;
+        text-align: center;
+        padding: 0px 8px;
+      }
+
+      ion-button {
+        --width: 40px;
+      }
+    }
+  }
+}
+
+// Small screen: hide the footer
+@media screen and (max-width: $screen-sm-max) {
+  ion-menu {
+    ion-footer {
+      display: none !important;
+      visibility: hidden !important;
+    }
+  }
+}
+
+// Medium screen: larger avatar size
+@media screen and (min-width: $screen-md) {
+
+  ion-menu {
+    ion-scroll {
+      overflow-y: auto !important;
+    }
+
+    //
+    .user-avatar {
+      font-size: var(--avatar-size, 80px) !important;
+      line-height: var(--avatar-size, 80px);
+      height: var(--avatar-size, 80px) !important;
+      width: var(--avatar-size, 80px) !important;
+    }
+
+    .user-logo {
+      img {
+        max-height: var(--avatar-size, 80px);
+      }
+    }
+  }
+}
+
+// Large screen
+@media screen and (min-width: $screen-lg) {
+
+}

package/src/app/core/menu/menu.component.ts

@@ -0,0 +1,352 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken, Input, OnInit, Optional, ViewChild} from '@angular/core';
+import {AlertController, IonSplitPane, MenuController, ModalController, NavController} from '@ionic/angular';
+
+import {Account} from '../services/model/account.model';
+import {Configuration} from '../services/model/config.model';
+import {AccountService} from '../services/account.service';
+import {AboutModal} from '../about/about.modal';
+
+import {fadeInAnimation} from '../../shared/material/material.animations';
+import {TranslateService} from '@ngx-translate/core';
+import {isNotNilOrBlank} from '../../shared/functions';
+import {BehaviorSubject, merge, Subscription} from 'rxjs';
+import {ConfigService} from '../services/config.service';
+import {debounceTime, distinctUntilChanged, filter, map, mapTo, mergeMap, tap} from 'rxjs/operators';
+import {PlatformService} from '../services/platform.service';
+import {ENVIRONMENT} from '../../../environments/environment.class';
+import {DEFAULT_MENU_SHOW_WHEN, MenuService, SplitPaneShowWhen} from './menu.service';
+import {MenuItem, MenuItems, MenuOptions} from './menu.model';
+import {CORE_CONFIG_OPTIONS} from '../services/config/core.config';
+import {firstNotNilPromise} from '../../shared/observables';
+import {DateUtils} from '../../shared/dates';
+import {Moment} from 'moment';
+
+export const APP_MENU_ITEMS = new InjectionToken<MenuItem[]>('menuItems');
+export const APP_MENU_OPTIONS = new InjectionToken<MenuOptions>('menuOptions');
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: 'menu.component.html',
+  styleUrls: ['./menu.component.scss'],
+  animations: [fadeInAnimation],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MenuComponent implements OnInit {
+
+  private readonly _debug: boolean;
+  private _subscription = new Subscription();
+  private _config: Configuration;
+
+  public loading = true;
+  public isLogin = false;
+  accountName: string;
+  accountAvatar: string;
+  accountEmail: string;
+
+  $items = new BehaviorSubject<MenuItem[]>(undefined);
+
+  @Input() id = 'menu';
+  @Input() menuId = 'left';
+  @Input() side = 'left';
+  @Input() contentId = 'menu-content';
+  @Input() logo: string;
+  @Input() appName: string;
+  @Input() appVersion: string = this.environment.version;
+
+  @ViewChild('splitPane', {static: true}) splitPane: IonSplitPane;
+
+  constructor(
+    protected platformService: PlatformService,
+    protected accountService: AccountService,
+    protected navController: NavController,
+    protected menu: MenuController,
+    protected modalCtrl: ModalController,
+    protected alertController: AlertController,
+    protected translate: TranslateService,
+    protected configService: ConfigService,
+    protected cd: ChangeDetectorRef,
+    protected menuService: MenuService,
+    @Inject(ENVIRONMENT) protected environment,
+    @Optional() @Inject(APP_MENU_OPTIONS) protected options: MenuOptions,
+    @Optional() @Inject(APP_MENU_ITEMS) protected items: MenuItem[]
+  ) {
+
+    this._debug = !environment.production;
+  }
+
+  async ngOnInit() {
+
+    this.splitPane.when = await firstNotNilPromise(this.menuService.splitPaneWhen);
+
+    // Wait platform started
+    await this.platformService.ready();
+
+    // Listen to menu service event
+    this.menuService.splitPaneWhen
+      .subscribe((value) => this.setSplitPaneWhen(value));
+    this.menuService.enabled
+      .subscribe((value) => this.enable(value));
+    this.menuService.opened
+      // Avoid duplicated events
+      .pipe(distinctUntilChanged())
+      .subscribe((value) => value ? this.open() : this.close());
+
+    // Update component when refresh is need (=login events or config changed)
+    let lastAccountUpdateDate: Moment | string;
+    this._subscription.add(
+      merge(
+        merge(
+          this.accountService.onLogin
+            .pipe(
+              // Filter on account changes
+              filter(account => !DateUtils.isSame(account?.updateDate, lastAccountUpdateDate))
+            )
+          ,
+          this.configService.config
+            .pipe(
+              // Store the config
+              tap(config => this._config = config)
+            )
+        )
+          .pipe(
+            // Add debounce to avoid to trigger twice, at startup
+            debounceTime(250),
+            // Wait account service ready (can be restarted)
+            mergeMap(() => this.accountService.ready()),
+            map(() => this.accountService.account)
+          ),
+        // Logout
+        this.accountService.onLogout.pipe(mapTo(null))
+      )
+        .subscribe(account => {
+          if (account?.updateDate) {
+            lastAccountUpdateDate = account.updateDate;
+            this.onLogin(account);
+          } else {
+            lastAccountUpdateDate = null;
+            this.onLogout(true);
+          }
+        }));
+  }
+
+  async onLogin(account: Account) {
+    console.info('[menu] Update (on login)');
+    this.accountAvatar = account.avatar;
+    this.accountName = account.displayName;
+    this.accountEmail = account.email;
+    this.isLogin = true;
+    await this.refreshMenuItems();
+
+    setTimeout(() => {
+      this.loading = false;
+      this.detectChanges();
+    }, 500);
+  }
+
+  async onLogout(skipRedirect?: boolean) {
+    if (!skipRedirect) {
+      console.debug('[menu] Logout');
+    } else {
+      console.debug('[menu] Update (on logout)');
+    }
+    this.isLogin = false;
+    this.accountAvatar = null;
+    this.accountEmail = null;
+    this.accountName = null;
+    await this.refreshMenuItems();
+
+    // Wait the end of fadeout, to reset the account
+    if (!skipRedirect) {
+      await this.navController.navigateRoot('/');
+    }
+
+    this.loading = false;
+    this.detectChanges();
+  }
+
+  async logout() {
+
+    const translations = await this.translate.get([
+      'AUTH.LOGOUT.CONFIRM_TITLE',
+      'AUTH.LOGOUT.CONFIRM_MESSAGE',
+      'COMMON.BTN_CANCEL',
+      'AUTH.LOGOUT.BTN_CONFIRM'
+    ]).toPromise();
+    const alert = await this.alertController.create({
+      header: translations['AUTH.LOGOUT.CONFIRM_TITLE'],
+      message: translations['AUTH.LOGOUT.CONFIRM_MESSAGE'],
+      buttons: [
+        {
+          text: translations['COMMON.BTN_CANCEL'],
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: translations['AUTH.LOGOUT.BTN_CONFIRM'],
+          cssClass: 'ion-color-primary',
+          handler: () => {
+            this.accountService.logout();
+
+            // Back to home
+            setTimeout(() =>this.navController.navigateRoot('/'), 100);
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async enable(value: boolean): Promise<void> {
+    const enabled = await this.menu.isEnabled(this.menuId);
+    if (enabled !== value) {
+      await this.menu.enable(value, this.menuId);
+      if (!value) await this.close();
+    }
+  }
+
+  async open(): Promise<boolean> {
+    console.debug('[menu] Checking open event...');
+    const opened = await this.menu.isOpen(this.menuId);
+    if (!opened) {
+      console.debug('[menu] Opening menu');
+      await this.menu.open(this.menuId);
+      // Propage to service
+      this.menuService._markAsOpened();
+    }
+    return true;
+  }
+
+  async close(): Promise<boolean> {
+    console.debug('[menu] Checking close event...');
+    const opened = await this.menu.isOpen(this.menuId);
+    if (opened) {
+      console.debug('[menu] Closing menu');
+      await this.menu.close(this.menuId);
+      // Propage to service
+      this.menuService._markAsClosed();
+    }
+    return true;
+  }
+
+  async openAboutModal(event?: Event) {
+    const modal = await this.modalCtrl.create({component: AboutModal});
+    return modal.present();
+  }
+
+  async setSplitPaneWhen(value: SplitPaneShowWhen) {
+    console.debug('[menu] Checking splitPane when...');
+    if (this.splitPane.when !== value) {
+      console.debug('[menu] Set splitPane when to ' + value);
+      this.splitPane.when = value;
+      this.detectChanges();
+
+      // Propagate to the menu service
+      setTimeout(() => this.menuService.setSplitPaneShowWhen(value), 200);
+    }
+  }
+
+  toggleSplitPaneShow(event?: Event) {
+    if (event && event.defaultPrevented) return;
+    if (event) event.preventDefault();
+
+    if (this.splitPane.when === false) {
+      return this.setSplitPaneWhen(DEFAULT_MENU_SHOW_WHEN);
+    } else {
+      return this.setSplitPaneWhen(false);
+    }
+  }
+
+  async doAction(action: string, event: Event) {
+    this.close();
+
+    switch (action) {
+      case 'logout':
+        await this.logout();
+        break;
+      case 'about':
+        await this.openAboutModal(event);
+        break;
+      default:
+        throw new Error('Unknown action: ' + action);
+    }
+  }
+
+  onSwipeRight(event) {
+    // Skip, if not a valid swipe event
+    if (!event || event.pointerType !== 'touch' || event.velocity < 0.4) {
+      //event.preventDefault();
+      return false;
+    }
+
+    // Will open the left menu, so cancelled this swipe event
+    const startX = event.center.x - event.distance;
+    if (startX <= 50) {
+      // DEBUG
+      //console.debug("[menu] Cancel swipe right, because near the left menu {x: " + startX + ", velocity: " + event.velocity + "}");
+      event.preventDefault();
+      return false;
+    }
+
+    // OK: continue
+
+    // DEBUG
+    //console.debug("[menu] Received swipe right {x: " + startX + ", velocity: " + event.velocity + "}");
+  }
+
+  /* -- protected methods -- */
+
+  protected refreshMenuItems() {
+    if (this._debug) console.debug('[menu] Refreshing menu items...');
+
+    let items = this.items || [];
+
+    // Insert menu items, from the config
+    const configValue: string = this._config && this._config.getProperty(CORE_CONFIG_OPTIONS.MENU_ITEMS);
+    if (isNotNilOrBlank(configValue)) {
+      try {
+        const configItems = JSON.parse(configValue);
+        items = (configItems || []).reduce((res, item) => {
+          if (item.after) {
+            const index = res.findIndex(i => i.title === item.after);
+            if (index !== -1) {
+              return res.slice(0, index + 1)
+                .concat(item)
+                .concat(res.slice(index + 1))
+            }
+          }
+          if (item.before) {
+            const index = res.findIndex(i => i.title === item.before);
+            if (index !== -1) {
+              return res.slice(0, index)
+                .concat(item)
+                .concat(res.slice(index))
+            }
+          }
+          return res.concat(item);
+        }, items)
+      } catch (err) {
+        console.error(`[menu] Invalid value for option '${CORE_CONFIG_OPTIONS.MENU_ITEMS.key}'. Expected an array of menu item`, err);
+      }
+    }
+
+    const opts = {isLogin: this.isLogin, debug: this._debug};
+    const filteredItems = items
+      .filter(item => MenuItems.checkIfVisible(item, this.accountService, this._config, opts))
+      .map(item => {
+        // Replace title using properties
+        if (isNotNilOrBlank(item.titleProperty) && this._config) {
+          const title = this._config.properties[item.titleProperty];
+          if (title) return {...item, title}; // Create a copy, to keep the original item.title
+        }
+        return item;
+      });
+
+    this.$items.next(filteredItems);
+  }
+
+  protected detectChanges() {
+    this.cd.detectChanges();
+  }
+}
+

package/src/app/core/menu/menu.model.ts

@@ -0,0 +1,64 @@
+import {UserProfileLabel} from '../services/model/person.model';
+import {Configuration} from '../services/model/config.model';
+import {AccountService} from '../services/account.service';
+import {IconRef} from '../../shared/types';
+
+export interface MenuItem extends IconRef {
+  title: string;
+  path?: string;
+  action?: string | any;
+  profile?: UserProfileLabel;
+  exactProfile?: UserProfileLabel;
+  color?: string;
+  cssClass?: string;
+  // A config property, to enable the menu item
+  ifProperty?: string;
+  // A config property, to override the title
+  titleProperty?: string;
+  titleArgs?: {[key: string]: string};
+  children?: MenuItem[];
+}
+
+export class MenuItems {
+  static checkIfVisible(item: MenuItem,
+                        accountService: AccountService,
+                        config: Configuration,
+                        opts?: {
+                          isLogin?: boolean;
+                          debug?: boolean;
+                          logPrefix?: string;
+                        }): boolean {
+    opts = opts || {};
+    if (item.profile) {
+      const hasProfile = accountService.isLogin() && accountService.hasMinProfile(item.profile);
+      if (!hasProfile) {
+        if (opts.debug) console.debug(`${opts && opts.logPrefix || '[menu]'} Hide item '${item.title}': need the min profile '${item.profile}' to access path '${item.path}'`);
+        return false;
+      }
+    }
+
+    else if (item.exactProfile) {
+      const hasExactProfile =  accountService.hasExactProfile(item.exactProfile);
+      if (!hasExactProfile) {
+        if (opts.debug) console.debug(`${opts && opts.logPrefix || '[menu]'} Hide item '${item.title}': need exact profile '${item.exactProfile}' to access path '${item.path}'`);
+        return false;
+      }
+    }
+
+    // If enable by config
+    if (item.ifProperty) {
+      //console.debug("[menu] Checking if property enable ? " + item.ifProperty, config && config.properties);
+      const isEnableByConfig = config && config.properties[item.ifProperty] === 'true';
+      if (!isEnableByConfig) {
+        if (opts.debug) console.debug('[menu] Config property \'' + item.ifProperty + '\' not \'true\' for ', item.path);
+        return false;
+      }
+    }
+
+    return true;
+  }
+}
+
+export class MenuOptions {
+  // TODO add options, when need specific behavior on projects
+}

package/src/app/core/menu/menu.module.ts

@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../shared/shared.module';
+import {MenuComponent} from './menu.component';
+import {TranslateModule} from '@ngx-translate/core';
+import {RouterModule} from '@angular/router';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    RouterModule,
+    TranslateModule.forChild()
+  ],
+
+  declarations: [
+    // Components
+    MenuComponent
+  ],
+  exports: [
+    // Modules
+    TranslateModule,
+    // Components
+    MenuComponent
+  ]
+})
+export class AppMenuModule {
+
+}