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

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

@@ -1,225 +0,0 @@
-@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

@@ -1,352 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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 {
-
-}