@sumaris-net/ngx-components 18.12.0 → 18.12.2

package/src/app/shared/shared.testing.module.ts

@@ -1,61 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MaterialTestingModule, SHARED_MATERIAL_TESTING_PAGES } from './material/material.testing.module';
-import { TranslateModule } from '@ngx-translate/core';
-import { ToastTestingModule } from './toast/toast.testing.module';
-import { UploadFileTestingModule } from './upload-file/testing/upload-file.testing.module';
-import { TestingPage } from './testing/tests.page';
-import { ImageGalleryTestingModule } from './image/gallery/testing/gallery.testing.module';
-import { IonicModule } from '@ionic/angular';
-import { AudioTestingModule } from './audio/audio.testing.module';
-import { SHARED_STORAGE_TESTING_PAGES, StorageExplorerTestingModule } from './storage/storage-explorer.testing.module';
-import { MenuTestingModule } from '../core/menu/testing/menu.testing.module';
-import { NamedFilterSelectorTestingModule } from './named-filter/testing/named-filter.testing.module';
-import { MarkdownTestingModule } from './markdown/testing/markdown.testing.module';
-
-export const SHARED_TESTING_PAGES: TestingPage[] = [
-  ...SHARED_MATERIAL_TESTING_PAGES,
-
-  { label: 'Shared other components', divider: true },
-  { label: 'Image gallery', page: '/testing/shared/gallery' },
-  { label: 'Toast', page: '/testing/shared/toast' },
-  { label: 'File upload', page: '/testing/shared/upload-file' },
-  { label: 'Sound & Vibration', page: '/testing/shared/audio' },
-  { label: 'Menu', page: '/testing/shared/menu' },
-  { label: 'NamedFilterSelector', page: '/testing/shared/name-filter-selector' },
-  { label: 'Markdown', page: '/testing/shared/markdown' },
-
-  ...SHARED_STORAGE_TESTING_PAGES,
-];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    TranslateModule.forChild(),
-
-    // Testing sub-modules
-    MaterialTestingModule,
-    ToastTestingModule,
-    UploadFileTestingModule,
-    ImageGalleryTestingModule,
-    AudioTestingModule,
-    StorageExplorerTestingModule,
-    MenuTestingModule,
-    NamedFilterSelectorTestingModule,
-    MarkdownTestingModule,
-  ],
-  exports: [
-    // Testing sub-modules
-    MaterialTestingModule,
-    ToastTestingModule,
-    UploadFileTestingModule,
-    ImageGalleryTestingModule,
-    AudioTestingModule,
-    StorageExplorerTestingModule,
-    MenuTestingModule,
-    NamedFilterSelectorTestingModule,
-    MarkdownTestingModule,
-  ],
-})
-export class SharedTestingModule {}

package/src/app/shared/storage/storage-explorer.component.html

@@ -1,160 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-    <ion-title>Storage Explorer</ion-title>
-
-    <ion-buttons slot="end">
-      <!-- Refresh -->
-      <button mat-icon-button [title]="'COMMON.BTN_REFRESH' | translate" (click)="refresh()">
-        <mat-icon>refresh</mat-icon>
-      </button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-no-padding">
-  <ion-grid class="ion-padding list-istorage">
-    <ion-row>
-      <ion-col size="12" size-lg="6" class="mat-header-cell">
-        <ion-label translate>REFERENTIAL.LABEL</ion-label>
-      </ion-col>
-      <ion-col class="mat-header-cell">
-        <ion-label translate>REFERENTIAL.TYPE</ion-label>
-      </ion-col>
-      <ion-col class="mat-header-cell ion-text-start">
-        <ion-label>Nb</ion-label>
-      </ion-col>
-      <ion-col class="mat-header-cell" size="auto"></ion-col>
-    </ion-row>
-
-    <ion-row class="mat-row" *rxFor="let item of $items; trackBy: trackByFn; odd as odd" [class.odd]="odd">
-      <ion-col size="12" size-lg="6">
-        <ion-label class="ion-text-wrap mat-cell">
-          <b>{{ item.key }}</b>
-        </ion-label>
-      </ion-col>
-      <ion-col class="mat-cell">
-        <ion-label>{{ item.type }}</ion-label>
-      </ion-col>
-      <ion-col class="mat-cell">
-        <ion-label>{{ item.total }}</ion-label>
-      </ion-col>
-      <ion-col size="auto mat-cell">
-        <ion-buttons>
-          <ion-button
-            color="primary"
-            (click)="viewDataClick($event, item.key)"
-            [title]="'COMMON.BTN_PREVIEW' | translate"
-          >
-            <mat-icon slot="icon-only" [attr.aria-label]="'COMMON.BTN_PREVIEW' | translate">remove_red_eye</mat-icon>
-          </ion-button>
-          <ion-button
-            *ngIf="showSendButton"
-            color="primary"
-            (click)="sendDataClick($event, item.key)"
-            [title]="'COMMON.BTN_SEND' | translate"
-          >
-            <mat-icon slot="icon-only" [attr.aria-label]="'COMMON.BTN_SEND' | translate">send</mat-icon>
-          </ion-button>
-        </ion-buttons>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-
-  <ng-container *ngIf="$loading | async; else noResult">
-    <ion-item>
-      <ion-skeleton-text animated></ion-skeleton-text>
-    </ion-item>
-  </ng-container>
-
-  <ng-template #noResult>
-    <ion-item *ngIf="$items | async | isEmptyArray">
-      <ion-text color="danger" class="text-italic" [innerHTML]="'COMMON.NO_RESULT' | translate"></ion-text>
-    </ion-item>
-  </ng-template>
-</ion-content>
-
-<ion-modal #sendDataModal>
-  <ng-template>
-    <ion-content class="ion-padding">
-      <ion-item lines="none" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>
-    </ion-content>
-    <ion-footer>
-      <ion-toolbar>
-        <ion-row class="ion-no-padding" nowrap>
-          <ion-col></ion-col>
-
-          <!-- buttons -->
-          <ion-col size="auto">
-            <ion-button fill="clear" color="dark" (click)="sendDataModal.dismiss()">
-              <ion-label translate>COMMON.BTN_CANCEL</ion-label>
-            </ion-button>
-
-            <ion-button fill="solid" (click)="sendDataModal.dismiss(null, 'send')" color="tertiary">
-              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
-            </ion-button>
-          </ion-col>
-        </ion-row>
-      </ion-toolbar>
-    </ion-footer>
-  </ng-template>
-</ion-modal>
-
-<ion-modal #viewDataModal class="modal-large view-modal">
-  <ng-template>
-    <ion-content class="ion-no-padding" scroll-y="true">
-      <!-- display logs-->
-      <ng-container *ngIf="logs; else otherKey">
-        <ion-grid>
-          <ion-row *ngFor="let log of logs" [style.color]="levelToColor(log.level)">
-            <ion-col size="2" class="ion-text-start">
-              {{ log.date | dateFormat: { time: true } }}
-            </ion-col>
-            <ion-col size="2" class="ion-text-start">
-              {{ levelToString(log.level) }}
-            </ion-col>
-            <ion-col size="2" class="ion-text-start">
-              {{ log.loggerName }}
-            </ion-col>
-            <ion-col size="12" size-lg="6" class="ion-text-wrap">
-              {{ log.message }}
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ng-container>
-      <ng-template #otherKey>
-        <div class="ion-padding">
-          <pre>{{ data }}</pre>
-        </div>
-      </ng-template>
-    </ion-content>
-
-    <ion-footer>
-      <ion-toolbar>
-        <ion-row class="ion-no-padding" nowrap>
-          <ion-col></ion-col>
-
-          <!-- buttons -->
-          <ion-col size="auto">
-            <ion-button fill="clear" color="danger" (click)="clear(key)">
-              <mat-icon slot="start">delete</mat-icon>
-              <ion-label translate>COMMON.BTN_CLEAR</ion-label>
-            </ion-button>
-            <ion-button fill="clear" (click)="copyToClipboard(key)">
-              <mat-icon slot="start">content_copy</mat-icon>
-              <ion-label translate>COMMON.BTN_COPY</ion-label>
-            </ion-button>
-
-            <ion-button fill="clear" *ngIf="!mobile" (click)="downloadAsJson(key)">
-              <mat-icon slot="start">download</mat-icon>
-              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>
-            </ion-button>
-
-            <ion-button fill="solid" color="tertiary" (click)="viewDataModal.dismiss()">
-              <ion-label translate>COMMON.BTN_CLOSE</ion-label>
-            </ion-button>
-          </ion-col>
-        </ion-row>
-      </ion-toolbar>
-    </ion-footer>
-  </ng-template>
-</ion-modal>

package/src/app/shared/storage/storage-explorer.component.scss

@@ -1,37 +0,0 @@
-ion-grid.list-istorage {
-  --ion-grid-column-padding: 5px;
-
-  ion-row {
-    align-items: center;
-
-    &.mat-header-row {
-      height: 40px;
-      ion-col {
-        vertical-align: center;
-      }
-    }
-    &.computed ion-col ion-label,
-    ion-label.computed {
-      color: var(--ion-color-primary-tint) !important;
-      font-style: italic !important;
-    }
-    &.odd {
-      background-color: var(--ion-color-light);
-    }
-
-    ion-col {
-      padding: var(--ion-grid-column-padding);
-      ion-label {
-        vertical-align: center;
-      }
-    }
-  }
-}
-
-.view-modal {
-  pre {
-    overflow-x: auto;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
-}

package/src/app/shared/storage/storage-explorer.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { StorageExplorerComponent } from './storage-explorer.component';
-
-describe('EntitiesStorageExplorerComponent', () => {
-  let component: StorageExplorerComponent;
-  let fixture: ComponentFixture<StorageExplorerComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [StorageExplorerComponent],
-      imports: [IonicModule.forRoot()],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(StorageExplorerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/app/shared/storage/storage-explorer.component.ts

@@ -1,268 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken, Input, OnInit, Optional, ViewChild } from '@angular/core';
-import { AlertController, IonModal, ToastController } from '@ionic/angular';
-import { BehaviorSubject } from 'rxjs';
-import { isNotNilOrBlank, removeDuplicatesFromArray, sleep, toBoolean } from '../functions';
-import { APP_STORAGE, IStorage } from './storage.utils';
-import { APP_DEBUG_DATA_SERVICE, IDebugDataService } from '../debug/debug-service.class';
-import { TranslateService } from '@ngx-translate/core';
-import { Toasts } from '../toast/toasts';
-import { JsonUtils } from '../file/json.utils';
-import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
-import { Log, LogUtils } from '../logging/logger.model';
-import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import { DATE_ISO_PATTERN } from '../constants';
-import { LogLevel } from '../logging/log-level.model';
-import { DateUtils } from '../dates';
-import { Alerts } from '../alerts';
-import { FilesUtils } from '../file/file.utils';
-import { PlatformService } from '../../core/services/platform.service';
-
-interface StorageItemInfo {
-  key: string;
-  type: 'array' | 'object' | 'string' | 'number';
-  total: number;
-}
-
-export const APP_STORAGE_EXPLORER_PROTECTED_KEYS = new InjectionToken<string[]>('StorageExplorerProtectedKeys');
-
-@Component({
-  selector: 'app-storage-explorer',
-  templateUrl: './storage-explorer.component.html',
-  styleUrls: ['./storage-explorer.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class StorageExplorerComponent implements OnInit {
-  private _logPrefix = '[storage-explorer] ';
-  protected $loading = new BehaviorSubject<boolean>(true);
-  protected $items = new BehaviorSubject<StorageItemInfo[]>([]);
-  protected _logKey: string;
-
-  protected data: any;
-  protected logs: Log[];
-  protected key: string;
-
-  @Input() mobile: boolean;
-  @Input() showSendButton: boolean;
-
-  @ViewChild('sendDataModal') sendDataModal: IonModal;
-  @ViewChild('viewDataModal') viewDataModal: IonModal;
-
-  constructor(
-    protected platform: PlatformService,
-    protected toastController: ToastController,
-    protected alertCtrl: AlertController,
-    protected translate: TranslateService,
-    protected dateAdapter: MomentDateAdapter,
-    protected cd: ChangeDetectorRef,
-    @Inject(APP_STORAGE) protected readonly storage: IStorage,
-    @Inject(ENVIRONMENT) protected readonly environment: Environment,
-    @Optional() @Inject(APP_DEBUG_DATA_SERVICE) protected readonly debugDataService: IDebugDataService,
-    @Optional() @Inject(APP_STORAGE_EXPLORER_PROTECTED_KEYS) private readonly _protectedKeys: string[]
-  ) {
-    this._protectedKeys = removeDuplicatesFromArray([...(this._protectedKeys || []), 'seckey', 'token']);
-    this._logKey = environment.logging?.localStorageAppender?.localStorageKey || 'log';
-  }
-
-  ngOnInit() {
-    this.showSendButton = toBoolean(this.showSendButton, true) && !!this.debugDataService;
-    this.mobile = toBoolean(this.mobile, this.platform.is('mobile'));
-
-    this.storage.ready().then(() => this.start());
-  }
-
-  async sendDataClick(event: Event, key: string) {
-    if (!this.debugDataService) {
-      console.warn(`${this._logPrefix}Cannot send debug data: missing provider for 'APP_DEBUG_DATA_SERVICE'`);
-      return;
-    }
-    this.sendDataModal.present();
-
-    const { data, role } = await this.sendDataModal.onDidDismiss();
-    if (role === 'send') {
-      this.sendData(key);
-    }
-  }
-
-  async viewDataClick(event: Event, key: string) {
-    if (!key) return; // skip
-
-    try {
-      this.key = key;
-      const data = await this.storage.get(key);
-      if (this._logKey === key) {
-        const logs = Array.isArray(data) ? data : JSON.parse(data);
-        this.logs = LogUtils.fromObjects(logs);
-      } else {
-        this.data = this.toString(key, data);
-      }
-
-      this.viewDataModal.present();
-
-      await this.viewDataModal.onWillDismiss();
-    } finally {
-      // Forget the data
-      this.data = null;
-      this.logs = null;
-      this.key = null;
-    }
-  }
-
-  async sendData(key: string) {
-    if (!key || !this.debugDataService) return; // Skip
-
-    const rawValue = await this.storage.get(key);
-    try {
-      await this.debugDataService.sendDebugData(rawValue);
-    } catch (e) {
-      await Toasts.show(this.toastController, this.translate, {
-        type: 'error',
-        message: e.message,
-      });
-      return;
-    }
-
-    // Confirm message was sent
-    await Toasts.show(this.toastController, this.translate, {
-      type: 'info',
-      message: this.translate.instant('SOCIAL.INFO.MESSAGE_SENT'),
-    });
-  }
-
-  async downloadAsJson(key: string) {
-    if (!key) return; // skip
-    const data = await this.storage.get(key);
-    const content = this.toString(key, data);
-
-    if (key === this._logKey) {
-      FilesUtils.writeTextToFile(content, { filename: `${key}.txt` });
-    } else {
-      JsonUtils.exportToFile(content, { filename: `${key}.json` });
-    }
-  }
-
-  async copyToClipboard(key: string) {
-    if (!key) return; // skip
-    const data = await this.storage.get(key);
-
-    try {
-      const text = this.toString(key, data);
-
-      // Copy to clipboard
-      await this.platform.copyToClipboard(text, {message: 'INFO.COPY_SUCCEED'});
-
-    } catch (error) {
-      console.error('Error copying text to clipboard', error);
-    }
-  }
-
-  protected async start() {
-    const items = [];
-    this.storage.forEach((value, key) => {
-      if (this._protectedKeys.includes(key)) return; // Skip protected keys
-
-      if (Array.isArray(value)) {
-        items.push({
-          key,
-          type: 'array',
-          total: value.length,
-        });
-      } else if (typeof value === 'object') {
-        let total;
-        if (value?.type && value?.type === 'object') {
-          const nestedValue = JSON.parse(value.value);
-          total = Array.isArray(nestedValue) ? nestedValue.length : Object.keys(nestedValue).length > 0 ? 1 : 0;
-        } else {
-          total = Object.keys(value).length > 0 ? 1 : 0;
-        }
-        items.push({
-          key,
-          type: 'object',
-          total,
-        });
-      } else {
-        const type = typeof value === 'number' ? 'number' : 'string';
-        items.push({
-          key,
-          type,
-          total: isNotNilOrBlank(value) ? 1 : 0,
-        });
-      }
-
-      this.$items.next(items);
-    });
-
-    this.$loading.next(false);
-  }
-
-  protected async refresh() {
-    if (this.$loading.value) return; // SKip if loading
-
-    this.$loading.next(true);
-    await this.start();
-  }
-
-  protected toString(key: string, data: any, html?: boolean): string {
-    if (key === this._logKey) {
-      let dateTimePattern = this.translate.instant('COMMON.DATE_TIME_SECONDS_PATTERN');
-      if (dateTimePattern === 'COMMON.DATE_TIME_SECONDS_PATTERN') {
-        dateTimePattern = DATE_ISO_PATTERN;
-      }
-      const logs = Array.isArray(data) ? data : JSON.parse(data);
-      return this.toLogs(data)
-        .map((log) =>
-          [this.dateAdapter.format(log.date, dateTimePattern), LogUtils.levelToString(log.level), log.loggerName + '\t', log.message].join('\t')
-        )
-        .join('\n');
-    }
-
-    // Force settings to be indent
-    if (key === 'settings') {
-      data = typeof data === 'object' ? data : JSON.parse(data);
-    }
-
-    // Default case
-    return typeof data === 'string' ? data : JSON.stringify(data, null, 2);
-  }
-
-  protected toLogs(data: any): Log[] {
-    try {
-      const logs = Array.isArray(data) ? data : data ? JSON.parse(data) : [];
-      return LogUtils.fromObjects(logs);
-    } catch (err) {
-      console.error(err);
-      return [
-        {
-          loggerName: 'storage-explorer',
-          level: LogLevel.FATAL,
-          message: err?.message || JSON.stringify(err),
-          date: DateUtils.moment(),
-        },
-      ];
-    }
-  }
-
-  protected async clear(key: string) {
-    const confirmed = await Alerts.askActionConfirmation(this.alertCtrl, this.translate, true);
-    if (!confirmed) return;
-
-    this.logs = [];
-    this.cd.markForCheck();
-
-    await sleep(650);
-
-    await this.storage.remove(key);
-
-    this.viewDataModal.dismiss();
-
-    this.refresh();
-  }
-
-  protected trackByFn(index: number, item: StorageItemInfo): any {
-    return item.key;
-  }
-
-  protected levelToColor(level: LogLevel): string {
-    return `var(--ion-color-${LogUtils.levelToColor(level)})`;
-  }
-  protected levelToString = LogUtils.levelToString;
-}

package/src/app/shared/storage/storage-explorer.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { StorageExplorerComponent } from './storage-explorer.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { IonicModule } from '@ionic/angular';
-import { SharedPipesModule } from '../pipes/pipes.module';
-import { SharedMaterialModule } from '../material/material.module';
-import { RxStateModule } from '../rx-state/rx-state.module';
-
-@NgModule({
-  imports: [
-    IonicModule,
-    CommonModule,
-    TranslateModule.forChild(),
-    RxStateModule,
-
-    // Other shared modules
-    SharedPipesModule,
-    SharedMaterialModule,
-  ],
-  declarations: [StorageExplorerComponent],
-  exports: [StorageExplorerComponent],
-})
-export class StorageExplorerModule {}

package/src/app/shared/storage/storage-explorer.testing-routing.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
-import { StorageExplorerModule } from './storage-explorer.module';
-import { StorageExplorerComponent } from './storage-explorer.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    pathMatch: 'full',
-    component: StorageExplorerComponent,
-  },
-];
-
-@NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), StorageExplorerModule],
-  exports: [RouterModule],
-})
-export class StorageExplorerTestingRoutingModule {}

package/src/app/shared/storage/storage-explorer.testing.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
-import { TestingPage } from '../testing/tests.page';
-
-export const SHARED_STORAGE_TESTING_PAGES: TestingPage[] = [{ label: 'Storage explorer', page: '/testing/shared/storage' }];
-
-const routes: Routes = [
-  {
-    path: 'storage',
-    loadChildren: () => import('./storage-explorer.testing-routing.module').then((m) => m.StorageExplorerTestingRoutingModule),
-  },
-];
-
-@NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class StorageExplorerTestingModule {}