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

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

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

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