@sumaris-net/ngx-components 18.14.0 → 18.14.2

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

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

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

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

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

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

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

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

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

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

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

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

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