@sumaris-net/ngx-components 18.11.0 → 18.12.0

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

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

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

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

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

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

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

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

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