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

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

@@ -0,0 +1,175 @@
+<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,39 @@
+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,292 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken, Input, OnInit, Optional, ViewChild} from '@angular/core';
+import {AlertController, IonModal, Platform, 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 {Clipboard} from '@capacitor/clipboard';
+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';
+
+type 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: Platform,
+    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);
+
+      await Clipboard.write({
+        string: text,
+      });
+
+      await Toasts.show(this.toastController, this.translate, {
+        type: 'info', 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,44 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {StorageExplorerComponent} from './storage-explorer.component';
+import {RouterModule, Routes} from '@angular/router';
+import {TranslateModule} from '@ngx-translate/core';
+import {ForModule} from '@rx-angular/template/for';
+import {IonicModule} from '@ionic/angular';
+import {SharedPipesModule} from '../pipes/pipes.module';
+import {TestingPage} from '../testing/tests.page';
+import {SharedMaterialModule} from '../material/material.module';
+
+export const SHARED_STORAGE_TESTING_PAGES: TestingPage[] = [
+  {label: 'Storage explorer', page: '/testing/shared/storage'}
+];
+
+const routes: Routes = [
+  {
+    path: 'storage',
+    pathMatch: 'full',
+    component: StorageExplorerComponent,
+  }
+];
+
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    TranslateModule.forChild(),
+    RouterModule.forChild(routes),
+    ForModule,
+
+    // Other shared modules
+    SharedPipesModule,
+    SharedMaterialModule
+  ],
+  declarations: [
+    StorageExplorerComponent,
+  ],
+  exports: [
+    StorageExplorerComponent,
+  ]
+})
+export class StorageExplorerModule { }