@sumaris-net/ngx-components 18.10.29 → 18.12.0

package/src/app/core/menu/sub-menu-tab.directive.ts

@@ -0,0 +1,99 @@
+import { AfterViewInit, Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { MatTab, MatTabGroup } from '@angular/material/tabs';
+import { Router } from '@angular/router';
+import { MenuService } from './menu.service';
+import { MenuItem, MenuItems } from './menu.model';
+import { isNotNil } from '../../shared/functions';
+import { IconRef } from '../../shared/types';
+
+@Directive({
+  selector: '[appSubMenuTab]',
+})
+export class SubMenuTabDirective implements OnChanges, AfterViewInit {
+  @Input() label: string;
+  @Input() disabled: boolean;
+  @Input() parentPath: string;
+  @Input() path: string;
+  @Input() subMenuTitle: string;
+  @Input() subMenuIcon: IconRef = null; // { icon: 'none' };
+
+  private _menuItem: MenuItem;
+  private readonly _enable: boolean;
+
+  constructor(
+    private menuService: MenuService,
+    private tabGroup: MatTabGroup,
+    private tab: MatTab,
+    private router: Router
+  ) {
+    this.path = MenuItems.parsePathWithQuery(this.router.routerState.snapshot.url).path;
+  }
+
+  ngAfterViewInit() {
+    if (!this.tab.disabled) this._addToMenu();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.disabled || changes.label || changes.subMenuTitle || changes.parentPath || changes.path) {
+      if (this.disabled) {
+        this._removeToMenu();
+      } else {
+        this._addToMenu();
+      }
+    }
+  }
+
+  private async _removeToMenu() {
+    const menuItem = this.menuItem;
+    if (menuItem) {
+      await this.menuService.removeSubMenuItem(menuItem);
+    }
+  }
+
+  private async _addToMenu() {
+    const menuItem = this.menuItem;
+    if (!menuItem?.parentPath) return;
+
+    // DEBUG
+    //if (this._debug) console.debug(`[sub-menu-tab] Refreshing sub menu {${menuItem.path}?tab=${menuItem.pathParams?.tab || 0} on parent {${menuItem.parentPath}}`);
+
+    this._menuItem = await this.menuService.addSubMenuItem(menuItem, { skipIfExists: false });
+  }
+
+  private get menuItem(): MenuItem {
+    const index = this.tabGroup.selectedIndex + this.tab.position;
+    const parentPath = index === 0 ? this.parentPath : this.path;
+    if (!parentPath) return null;
+    const tabParams = index === 0 ? {} : { tab: index.toString() };
+
+    // Create or load
+    if (!this._menuItem) {
+      this._menuItem = this.menuService.createSubMenu({
+        path: this.path,
+        pathParams: tabParams,
+        parentPath,
+      });
+    }
+
+    // Update existing
+    else {
+      const { path, params } = MenuItems.parsePathWithQuery(this.path);
+      this._menuItem.path = path;
+      this._menuItem.pathParams = { ...params, ...tabParams };
+    }
+
+    // Update item (title and icon)
+    if (this._menuItem) {
+      this._menuItem.title = this.title;
+      if (this.subMenuIcon) {
+        Object.assign(this._menuItem, this.subMenuIcon);
+      }
+    }
+
+    return this._menuItem;
+  }
+
+  private get title(): string {
+    return isNotNil(this.subMenuTitle) ? this.subMenuTitle : this.label;
+  }
+}

package/src/app/core/menu/testing/menu-other.testing.ts

@@ -0,0 +1,57 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {AlertController, NavController} from '@ionic/angular';
+import {TranslateService} from '@ngx-translate/core';
+import {sleep} from '../../../shared/functions';
+import {MenuService} from '../menu.service';
+import {MenuTestingPage} from './menu.testing';
+
+@Component({
+  selector: 'app-testing-menu-other',
+  templateUrl: './menu.testing.html',
+  styleUrls: ['./menu.testing.scss'],
+})
+export class OtherMenuTestingPage extends MenuTestingPage {
+  constructor(
+    route: ActivatedRoute, // Modal editor give 'null'
+    router: Router,
+
+    navController: NavController,
+    alertCtrl: AlertController,
+    translate: TranslateService,
+    menuService: MenuService
+  ) {
+    super(route, router, navController, alertCtrl, translate, menuService);
+    this.logPrefix = '[menu-testing-other] ';
+    this.showOtherLinks = false;
+    this.showThirdTab = true;
+    this.subTabCount = 2;
+  }
+
+  async initSubMenu() {
+    this.secondTabTitle = 'Second';
+    this.parentPath = '/testing/shared/menu?tab=1';
+    this.childPath = '';
+    this.path = '/testing/shared/menu/others/' + this.route.snapshot.paramMap.get('otherId');
+    console.debug(`${this.logPrefix} Setup with`, { path: this.path, parentPath: this.parentPath });
+    this.thirdTabTitle = 'Third';
+    this.markForCheck();
+
+    this.title = await this.computeTitle();
+    this.markForCheck();
+  }
+
+  protected getDefaultTitle(): string {
+    return 'Other';
+  }
+
+  protected async computeTitle(): Promise<string> {
+    // Load title (with a delay (e.g. when loading data)
+    await sleep(2000);
+
+    const otherId = this.route.snapshot.paramMap.get('otherId');
+
+    return this.getDefaultTitle() + ' ' + otherId;
+  }
+
+}

package/src/app/core/menu/testing/menu.testing.html

@@ -0,0 +1,143 @@
+<app-toolbar [defaultBackHref]="parentPath">
+  <ion-title [innerHTML]="$title | async"></ion-title>
+</app-toolbar>
+
+<ion-content>
+  <mat-tab-group
+    #tabGroup
+    [(selectedIndex)]="selectedTabIndex"
+    (selectedTabChange)="onTabChange($event)"
+    class="mat-mdc-tab-disabled-hidden"
+    dynamicHeight
+    [mat-stretch-tabs]="toggleStretchTab.checked"
+  >
+    <!-- TAB: 1 -->
+    <mat-tab
+      label="Details"
+      class="ion-padding"
+      appSubMenuTab
+      [subMenuTitle]="($title | async) || ''"
+      [parentPath]="parentPath"
+    >
+      <ng-template mat-tab-label>
+        <ion-label>Details</ion-label>
+      </ng-template>
+
+      <div class="ion-padding">
+        <p>A first tab</p>
+
+        <p [class.cdk-visually-hidden]="showThirdTab">
+          <ion-toggle #toggleThird>Toggle Third Tab</ion-toggle>
+        </p>
+
+        <p>
+          <ion-toggle #toggleStretchTab>Stretch Tabs</ion-toggle>
+        </p>
+
+        <p>
+          <ion-button (click)="changeTitle($event)">Change page title</ion-button>
+
+          <ion-button (click)="addSubMenuItem($event)">Add sub menu other 3</ion-button>
+
+          <ion-button (click)="addOutsideRouteSubMenuItem($event, true)">
+            Add sub menu (outside route) - pinned
+          </ion-button>
+
+          <ion-button (click)="addOutsideRouteSubMenuItem($event, false)">
+            Add sub menu (outside route) - not pinned
+          </ion-button>
+        </p>
+
+        <p>
+          &nbsp;&nbsp;
+          <ion-button (click)="enableMenu(false)" *ngIf="menuService.enabled | async">Disable menu</ion-button>
+          <ion-button (click)="enableMenu(true)" *ngIf="(menuService.enabled | async) !== true">Enable menu</ion-button>
+          <ion-button (click)="toggleSplitPaneWhen()" [disabled]="(menuService.enabled | async) !== true">
+            Toggle split pane
+          </ion-button>
+        </p>
+      </div>
+    </mat-tab>
+
+    <!-- TAB: 2 -->
+    <mat-tab
+      label="Second"
+      class="ion-padding"
+      appSubMenuTab
+      [subMenuIcon]="{ icon: 'settings' }"
+      [subMenuTitle]="$secondTabTitle | async"
+    >
+      <ng-template mat-tab-label>
+        <ion-label [innerHTML]="$secondTabTitle | async"></ion-label>
+      </ng-template>
+
+      <div class="ion-padding">
+        <p>A second tab</p>
+
+        <p *ngIf="showOtherLinks">
+          Navigate to :
+          <a [routerLink]="childPath + '/1'">{{ childPath }}/1</a>
+          <br />
+          Navigate to :
+          <a [routerLink]="childPath + '/2'">{{ childPath }}/2</a>
+        </p>
+
+        <p>
+          <ion-button (click)="changeSecondTabTitle($event)">Change tab label</ion-button>
+        </p>
+      </div>
+    </mat-tab>
+
+    <!-- TAB: 3 -->
+    <mat-tab
+      [label]="thirdTabTitle"
+      class="ion-padding"
+      [disabled]="!showThirdTab && !toggleThird.checked"
+      appSubMenuTab
+      [subMenuIcon]="{ icon: 'none' }"
+    >
+      <ng-template mat-tab-label>
+        <ion-label matBadge="1" matBadgeColor="primary" matBadgeOverlap="false" matBadgeSize="small">
+          {{ thirdTabTitle }}
+        </ion-label>
+      </ng-template>
+
+      <div class="ion-padding">A third tab</div>
+    </mat-tab>
+
+    <!-- TAB: 4 -->
+    <mat-tab appSubMenuTab [subMenuIcon]="{ icon: 'person' }" label="Sub Tab" class="ion-padding">
+      <ng-template mat-tab-label>
+        <ion-label>Sub Tab</ion-label>
+      </ng-template>
+
+      <mat-tab-group
+        #subTabGroup
+        [(selectedIndex)]="subSelectedTabIndex"
+        (selectedTabChange)="onTabChange($event, 'subtab')"
+        class="mat-mdc-tab-disabled-hidden"
+        dynamicHeight
+      >
+        <mat-tab label="Sub1" class="ion-padding">
+          <ng-template mat-tab-label>
+            <ion-label>Sub1</ion-label>
+          </ng-template>
+
+          <div class="ion-padding">
+            <p>First SubTab</p>
+          </div>
+        </mat-tab>
+
+        <mat-tab label="Sub2" class="ion-padding">
+          <ng-template mat-tab-label>
+            <ion-label>Sub2</ion-label>
+          </ng-template>
+
+          <div class="ion-padding">
+            <p>Second SubTab</p>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
+    </mat-tab>
+  </mat-tab-group>
+</ion-content>

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

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { MenuTestingPage } from './menu.testing';
+import { AppMenuModule } from '../menu.module';
+import { SharedModule } from '../../../shared/shared.module';
+import { OtherMenuTestingPage } from './menu-other.testing';
+import { AuthGuardService } from '../../services/auth-guard.service';
+
+const routes: Routes = [
+  {
+    path: 'menu',
+    data: {
+      test: 'menu',
+    },
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        component: MenuTestingPage,
+        data: {
+          test: 'empty',
+        },
+      },
+      {
+        path: 'others',
+        canActivate: [AuthGuardService],
+        data: {
+          profile: 'USER',
+        },
+        children: [
+          {
+            path: ':otherId',
+            pathMatch: 'full',
+            component: OtherMenuTestingPage,
+            canActivate: [AuthGuardService],
+            data: {
+              profile: 'ADMIN',
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild(routes), AppMenuModule, SharedModule],
+  declarations: [MenuTestingPage, OtherMenuTestingPage],
+  exports: [RouterModule, MenuTestingPage, OtherMenuTestingPage],
+})
+export class MenuTestingModule {}

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

@@ -0,0 +1,5 @@
+$menu-item-level: 0;
+
+.menu-item {
+  padding-left: calc($menu-item-level * 15) px;
+}

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

@@ -0,0 +1,175 @@
+import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { MenuService } from '../menu.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AlertController, NavController } from '@ionic/angular';
+import { TranslateService } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+import { DateUtils } from '../../../shared/dates';
+import { toBoolean } from '../../../shared/functions';
+import { MatTabGroup } from '@angular/material/tabs';
+import { AppTabEditor } from '../../form/entity/tab-editor.class';
+
+@Component({
+  selector: 'app-testing-menu',
+  templateUrl: './menu.testing.html',
+  styleUrls: ['./menu.testing.scss'],
+})
+export class MenuTestingPage extends AppTabEditor implements OnInit, OnDestroy, AfterViewInit {
+  protected logPrefix = '[menu-testing] ';
+  protected childPath = '';
+  protected thirdTabTitle = '';
+  protected parentPath: string = null;
+  protected path: string = null;
+  protected showOtherLinks = true;
+  protected showThirdTab = false;
+
+  protected $title = new Subject<string>();
+  protected $secondTabTitle = new Subject<string>();
+  protected _subSelectedTabIndex = 0;
+
+  subTabCount: number;
+
+  @Input() set subSelectedTabIndex(value: number) {
+    this.setSubSelectedTabIndex(value);
+  }
+  get subSelectedTabIndex(): number {
+    return this._subSelectedTabIndex;
+  }
+
+  @Output() readonly subSelectedTabIndexChange = new EventEmitter<number>();
+
+  @ViewChild('subTabGroup', { static: true }) subTabGroup: MatTabGroup;
+
+  protected set title(value: string) {
+    this.$title.next(value);
+  }
+
+  protected set secondTabTitle(value: string) {
+    this.$secondTabTitle.next(value);
+  }
+
+  constructor(
+    route: ActivatedRoute, // Modal editor give 'null'
+    router: Router,
+    navController: NavController,
+    alertCtrl: AlertController,
+    translate: TranslateService,
+    protected menuService: MenuService
+  ) {
+    super(route, router, navController, alertCtrl, translate, {
+      tabCount: 4,
+    });
+  }
+
+  ngOnInit() {
+    console.debug(`${this.logPrefix} Init page...`);
+
+    super.ngOnInit();
+  }
+
+  ngAfterViewInit() {
+    super.ngAfterViewInit();
+    this.initSubMenu();
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    console.debug(`${this.logPrefix}Destroying...`);
+  }
+
+  load(id?: number, options?: any): Promise<void> {
+    return Promise.resolve(undefined);
+  }
+
+  get isNewData(): boolean {
+    return false;
+  }
+
+  reload(): Promise<void> {
+    return Promise.resolve(undefined);
+  }
+
+  save(event: Event | undefined, options: any): Promise<boolean> {
+    return Promise.resolve(false);
+  }
+
+  changeTitle(event?: UIEvent) {
+    this.title = '';
+    setTimeout(() => {
+      const time = DateUtils.moment().format('HH:mm:ss');
+      this.title = `${this.getDefaultTitle()} <b>${time}</b>`;
+    }, 2000);
+  }
+
+  changeSecondTabTitle(event?: UIEvent) {
+    const time = DateUtils.moment().format('HH:mm:ss');
+    this.secondTabTitle = `<small>${time}<br/></small>Second`;
+  }
+
+  addSubMenuItem(event?: UIEvent) {
+    this.menuService.addSubMenuItem({
+      title: 'Fake',
+      parentPath: this.path,
+      path: this.path + '/fake',
+      //pinned: true
+    });
+  }
+
+  addOutsideRouteSubMenuItem(event?: UIEvent, pinned?: boolean) {
+    this.menuService.addSubMenuItem({
+      title: 'Fake',
+      parentPath: '/admin/users',
+      path: '/admin/users/fake',
+      pinned: toBoolean(pinned, false),
+    });
+  }
+
+  protected enableMenu(value: boolean) {
+    this.menuService.enable(value);
+  }
+  protected toggleSplitPaneWhen() {
+    this.menuService.toggleSplitPaneWhen();
+  }
+  protected async initSubMenu() {
+    this.title = await this.computeTitle();
+    this.secondTabTitle = 'Others';
+    this.thirdTabTitle = 'Third';
+    this.parentPath = '/testing';
+    this.path = this.parentPath + '/shared/menu';
+    this.childPath = this.path + '/others';
+    console.debug(`${this.logPrefix} Setup with`, { path: this.path, parentPath: this.parentPath });
+    this.markForCheck();
+  }
+
+  protected getFirstInvalidTabIndex(): number {
+    return 0;
+  }
+
+  protected getDefaultTitle() {
+    return 'Menu';
+  }
+
+  protected async computeTitle() {
+    return this.getDefaultTitle();
+  }
+
+  setSubSelectedTabIndex(value: number) {
+    // Fix value
+    if (value < 0) {
+      value = 0;
+    } else if (value > this.tabCount - 1) {
+      console.warn(`[menu-other] Invalid tab index ${value}. Max value is ${this.subTabCount - 1}`);
+      value = this._subSelectedTabIndex;
+    }
+
+    this._subSelectedTabIndex = value;
+    this.subSelectedTabIndexChange.next(value);
+
+    if (this.subTabGroup) {
+      this.subTabGroup.selectedIndex = value;
+      this.markForCheck();
+      // Wait tab change in UI, before realign ink tab
+      setTimeout(() => this.subTabGroup.realignInkBar(), 200);
+    }
+  }
+}

package/src/app/core/offline/update-offline-mode-card.component.html

@@ -0,0 +1,39 @@
+<!-- Update offline feature card-->
+<ion-card color="accent" class="main ion-no-margin" @slideUpDownAnimation>
+  <ion-card-content class="ion-no-padding">
+    <ion-grid>
+      <ion-row *ngIf="!progressionValue; else progression">
+        <ion-col>
+          <ion-text class="ion-text-wrap">
+            <h4>
+              <b [innerHTML]="'NETWORK.INFO.UPDATE_OFFLINE_MODE' | translate"></b>
+            </h4>
+            <h3>
+              <small [innerHTML]="'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP' | translate"></small>
+            </h3>
+          </ion-text>
+        </ion-col>
+
+        <!-- Update button -->
+        <ion-col size="auto">
+          <ion-button color="tertiary" class="ion-float-end" (click)="onUpdateClick.emit($event)">
+            <span translate>NETWORK.BTN_UPDATE</span>
+          </ion-button>
+        </ion-col>
+      </ion-row>
+
+      <ng-template #progression>
+        <ion-row>
+          <ion-col>
+            <ion-text class="ion-text-wrap" [innerHTML]="progressionMessage"></ion-text>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
+            <ion-progress-bar [value]="progressionValue / 100"></ion-progress-bar>
+          </ion-col>
+        </ion-row>
+      </ng-template>
+    </ion-grid>
+  </ion-card-content>
+</ion-card>

package/src/app/core/offline/update-offline-mode-card.component.scss

@@ -0,0 +1,3 @@
+ion-text small {
+  font-size: 85%;
+}

package/src/app/core/offline/update-offline-mode-card.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import { slideUpDownAnimation } from '../../shared/material/material.animations';
+
+@Component({
+  selector: 'app-update-offline-mode-card',
+  templateUrl: 'update-offline-mode-card.component.html',
+  styleUrls: ['./update-offline-mode-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [slideUpDownAnimation],
+})
+export class AppUpdateOfflineModeCard implements OnDestroy {
+  @Input() progressionMessage: string;
+  @Input() progressionValue: number;
+  @Output() onUpdateClick = new EventEmitter<Event>();
+
+  constructor() {}
+
+  ngOnDestroy() {
+    this.onUpdateClick.complete();
+  }
+
+  /* -- private method  -- */
+}

package/src/app/core/offline/update-offline-mode-card.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { AppUpdateOfflineModeCard } from './update-offline-mode-card.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  imports: [SharedModule, TranslateModule.forChild()],
+
+  declarations: [
+    // Network
+    AppUpdateOfflineModeCard,
+  ],
+  exports: [
+    TranslateModule,
+
+    // Components
+    AppUpdateOfflineModeCard,
+  ],
+})
+export class AppUpdateOfflineModeCardModule {}