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

package/src/app/core/graphql/graphql.utils.ts

@@ -1,167 +0,0 @@
-import {ApolloClient, ApolloLink, NextLink, Operation} from '@apollo/client/core';
-import {EventEmitter} from '@angular/core';
-import {debounceTime, filter, switchMap} from 'rxjs/operators';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {getMainDefinition} from '@apollo/client/utilities';
-import {PersistentStorage} from 'apollo3-cache-persist';
-import {ConnectionType} from '../services/network.types';
-import {v4 as uuidv4} from 'uuid';
-import {StorageService} from '../../shared/storage/storage.service';
-
-declare let window: any;
-const _global = typeof global !== 'undefined' ? global : (typeof window !== 'undefined' ? window : {});
-export const NativeWebSocket = _global.WebSocket || _global.MozWebSocket;
-
-export type EmptyObject = {
-  [key: string]: any;
-};
-
-/**
- * AppWebSocket class.
- * With a hack on default Websocket, to avoid the use of protocol
- */
-export const AppWebSocket = function(url: string, protocols?: string | string[]) {
-  return new NativeWebSocket(url/*no protocols*/);
-} as any;
-AppWebSocket.CLOSED = NativeWebSocket.CLOSED;
-AppWebSocket.CLOSING = NativeWebSocket.CLOSING;
-AppWebSocket.CONNECTING = NativeWebSocket.CONNECTING;
-AppWebSocket.OPEN = NativeWebSocket.OPEN;
-
-export function isMutationOperation(operation: Operation) {
-  const def = getMainDefinition(operation.query);
-  return def.kind === 'OperationDefinition' && def.operation === 'mutation';
-}
-
-export function isSubscriptionOperation(operation: Operation) {
-  const def = getMainDefinition(operation.query);
-  return def.kind === 'OperationDefinition' && def.operation === 'subscription';
-}
-
-
-export interface TrackedQuery {
-  id: string;
-  name: string;
-  queryJSON: string;
-  variablesJSON: string;
-  contextJSON: string;
-}
-
-export const TRACKED_QUERIES_STORAGE_KEY = 'apollo-tracker-persist';
-
-export function createTrackerLink(opts: {
-  storage?: PersistentStorage<string>;
-  onNetworkStatusChange: Observable<ConnectionType>;
-  debounce?: number;
-  debug?: boolean;
-  }): ApolloLink {
-
-  const trackedQueriesUpdated = new EventEmitter();
-  const trackedQueriesById: {[id: string]: TrackedQuery} = {};
-
-  const networkStatusSubject = new BehaviorSubject<string>('none');
-  opts.onNetworkStatusChange.subscribe(type => networkStatusSubject.next(type));
-
-  // Save pending and tracked queries in storage
-  trackedQueriesUpdated.pipe(
-    debounceTime(opts.debounce || 1000),
-    switchMap(() => networkStatusSubject),
-    // Continue if offline
-    filter((type) => type === 'none' && !!opts.storage)
-  ).subscribe(() => {
-      const trackedQueries = Object.getOwnPropertyNames(trackedQueriesById)
-        .map(key => trackedQueriesById[key])
-        .filter(value => value !== undefined);
-      if (opts.debug) console.debug('[apollo-tracker-link] Saving tracked queries to storage', trackedQueries);
-      return opts.storage.setItem(TRACKED_QUERIES_STORAGE_KEY, JSON.stringify(trackedQueries));
-    });
-
-  return new ApolloLink((operation: Operation, forward: NextLink) => {
-    const context = operation.getContext();
-
-    // Skip if not tracked
-    if (!context || !context.tracked) return forward(operation);
-
-    const id = context.serializationKey || uuidv4();
-    console.debug(`[apollo-tracker-link] Watching tracked query {${operation.operationName}#${id}}`);
-
-    // Clean context, before calling JSON.stringify (remove unused attributes)
-    const cleanContext = { ...context, ...{optimisticResponse: null, cache: null} };
-
-    const trackedQuery: TrackedQuery = {
-      id,
-      name: operation.operationName,
-      queryJSON: JSON.stringify(operation.query),
-      variablesJSON: JSON.stringify(operation.variables),
-      contextJSON: JSON.stringify(cleanContext)
-    };
-
-    // Add to map
-    trackedQueriesById[id] = trackedQuery;
-    trackedQueriesUpdated.emit();
-
-    const nextOperation = forward(operation)
-      .map(data => {
-        console.debug(`[apollo-tracker-link] Query {${operation.operationName}#${id}} succeed!`, data);
-        delete trackedQueriesById[id];
-        trackedQueriesUpdated.emit(trackedQueriesById); // update
-
-        return data;
-      });
-
-    // If offline, return the optimistic response
-    if (networkStatusSubject.getValue() === 'none') {
-      if (context.optimisticResponse) {
-        console.debug(`[apollo-tracker-link] Query {${operation.operationName}#${id}} has optimistic response: `, context.optimisticResponse);
-      }
-      else {
-        console.warn(`[apollo-tracker-link] Query {${operation.operationName}#${id}} missing 'context.optimisticResponse': waiting network UP before to continue...`);
-      }
-    }
-
-    return nextOperation;
-  });
-}
-
-export async function restoreTrackedQueries(opts: {
-  apolloClient: ApolloClient<any>;
-  storage: PersistentStorage<any>;
-  debug?: boolean;
-}) {
-
-  const list = JSON.parse(await opts.storage.getItem(TRACKED_QUERIES_STORAGE_KEY)) as TrackedQuery[];
-
-  if (!list) return;
-  if (opts.debug) console.debug('[apollo-tracker-link] Restoring tracked queries', list);
-
-  const promises = (list || []).map(trackedQuery => {
-    const context = JSON.parse(trackedQuery.contextJSON);
-    const query = JSON.parse(trackedQuery.queryJSON);
-    const variables = JSON.parse(trackedQuery.variablesJSON);
-    return opts.apolloClient.mutate({
-      context,
-      mutation: query,
-      optimisticResponse: context.optimisticResponse,
-      //update: updateHandlerByName[trackedQuery.name],
-      variables,
-    });
-  });
-
-  return Promise.all(promises);
-}
-
-
-export class StorageServiceWrapper implements PersistentStorage<string> {
-  constructor(private storage: StorageService) {
-  }
-
-  getItem(key) {
-    return this.storage.get(key);
-  }
-  removeItem(key) {
-    return this.storage.remove(key);
-  }
-  setItem(key, value) {
-    return this.storage.set(key, value);
-  }
-}

package/src/app/core/home/home.html

@@ -1,211 +0,0 @@
-<app-toolbar [canGoBack]="false"
-             visible-xs visible-sm visible-mobile>
-
-  <!-- change locale button -->
-  <ion-button slot="end" *ngIf="currentLocaleCode; let code"
-              [matMenuTriggerFor]="localeMenu">
-    <ion-label class="ion-text-uppercase">&nbsp;{{ code }}</ion-label>
-    <mat-icon slot="end">arrow_drop_down</mat-icon>
-  </ion-button>
-</app-toolbar>
-
-<!-- change locale menu -->
-<mat-menu #localeMenu="matMenu">
-  <button *ngFor="let item of locales"
-          mat-menu-item
-          (click)="changeLanguage(item.key)">
-    <ion-label>{{item.value}}</ion-label>
-  </button>
-</mat-menu>
-
-<ion-content [ngStyle]="contentStyle" no-padding-xs>
-
-  <!-- loading spinner -->
-  <div class="loading-page" [class.cdk-visually-hidden]="!loading">
-    <div class="spinner" *ngIf="loading && showSpinner">
-      <p [innerHTML]="'COMMON.LOADING_DOTS'|translate"></p>
-      <div class="sk-cube1 sk-cube"></div>
-      <div class="sk-cube2 sk-cube"></div>
-      <div class="sk-cube4 sk-cube"></div>
-      <div class="sk-cube3 sk-cube"></div>
-    </div>
-  </div>
-
-  <!-- Desktop: translucent top toolbar -->
-  <div hidden-xs hidden-sm hidden-mobile>
-    <ion-toolbar translucent>
-      <ion-buttons slot="start">
-        <ion-menu-toggle>
-          <ion-button color="light" fill="clear">
-            <ion-icon slot="icon-only" name="menu"></ion-icon>
-          </ion-button>
-        </ion-menu-toggle>
-      </ion-buttons>
-
-      <ion-buttons slot="end">
-        <!-- change locale button -->
-        <ion-button color="secondary" fill="solid"
-                    *ngIf="currentLocaleCode; let code"
-                    [matMenuTriggerFor]="localeMenu">
-          <ion-label class="ion-text-uppercase">&nbsp;{{ code }}</ion-label>
-          <mat-icon slot="end">arrow_drop_down</mat-icon>
-        </ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </div>
-
-  <!-- Install (and upgrade) card -->
-  <app-install-upgrade-card [isLogin]="isLogin"
-                            [showInstallButton]="true">
-  </app-install-upgrade-card>
-
-  <!-- Welcome card -->
-  <ion-card *ngIf="!loading"
-            class="main welcome ion-padding ion-text-center ion-align-self-center"
-            @fadeInAnimation>
-    <ion-card-header>
-      <ion-card-title class="ion-text-center">
-        <span *ngIf="isWeb" [innerHTML]="'HOME.WELCOME_WEB'|translate: {appName: appName}"></span>
-        <span *ngIf="!isWeb" [innerHTML]="'HOME.WELCOME_APP'|translate: {appName: appName}"></span>
-      </ion-card-title>
-      <ion-card-subtitle [innerHTML]="description">
-      </ion-card-subtitle>
-    </ion-card-header>
-    <ion-card-content class="ion-no-padding">
-      <ion-text color="primary">
-        <img class="logo" *ngIf="logo" src="{{ logo }}">
-      </ion-text>
-      <!-- register help text -->
-      <ion-text *ngIf="!isLogin && canRegister">
-        <br/>
-        <span translate>HOME.REGISTER_HELP</span>
-      </ion-text>
-      <div class="ion-padding-top">
-
-        <!-- If NOT login -->
-        <ng-container *ngIf="!isLogin; else loginButtons;">
-
-          <ion-button *ngIf="canRegister" expand="block" color="tertiary" (click)="register()">
-            <span translate>HOME.BTN_REGISTER</span>
-          </ion-button>
-          <ion-button expand="block" color="light" [routerLink]="['/']" (click)="login()">
-            <span translate>AUTH.BTN_LOGIN</span>
-          </ion-button>
-
-        </ng-container>
-
-        <!-- If user login -->
-        <ng-template #loginButtons>
-
-          <!-- Feature buttons -->
-          <ng-container *ngIf="$filteredButtons | async as buttons">
-            <ng-container *ngFor="let item of buttons">
-              <ion-button *ngIf="item.path"
-                          expand="block" color="tertiary"
-                          [class]="item.cssClass"
-                          [routerLink]="item.path"
-                          routerDirection="root">
-                <ion-icon slot="start" class="ion-float-start" *ngIf="item.icon" [name]="item.icon"></ion-icon>
-                <mat-icon slot="start" class="ion-float-start" *ngIf="item.matIcon">{{item.matIcon}}</mat-icon>
-                <ion-text>{{'HOME.BTN_DATA_ENTRY'|translate: {name: (item.title | translate) } }}</ion-text>
-              </ion-button>
-
-              <!-- divider -->
-              <div *ngIf="!item.path && !item.action" [class]="item.cssClass">
-                <ion-label translate>{{item.title}}&nbsp;</ion-label>
-              </div>
-            </ng-container>
-
-            <!--<p *ngIf="buttons.length" class="visible-mobile">&nbsp;</p>-->
-          </ng-container>
-
-          <ion-button *ngIf="showAccountButton" expand="block" color="secondary" [routerLink]="['/account']">
-            <ion-icon slot="start" class="ion-float-start" name="person-circle"></ion-icon>
-            <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>
-          </ion-button>
-
-          <p hidden-xs hidden-sm hidden-mobile>
-            <ion-text [innerHTML]="'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }"></ion-text>
-            <br/>
-            <ion-text>
-              <a href="#" (click)="logout($event)">
-                <span translate>HOME.BTN_DISCONNECT</span>
-              </a>
-            </ion-text>
-          </p>
-
-
-        </ng-template>
-
-      </div>
-    </ion-card-content>
-  </ion-card>
-
-  <!-- Page history -->
-  <ion-grid *ngIf="!loading && isLogin && pageHistory.length; else bottomBanner"
-            class="history-container ion-align-self-center">
-    <ion-row>
-      <ion-col size="12" size-xl="" *ngFor="let page of pageHistory; trackBy: getPagePath"
-               class="ion-text-center">
-        <ion-card class="ion-align-self-start ion-text-start" @fadeInAnimation>
-          <ion-card-header class="ion-no-padding">
-            <!-- top bar -->
-            <ion-card-subtitle>
-              <button type="button" tabindex="-1"
-                      (click)="settings.removePageHistory(page.path)"
-                      mat-icon-button class="ion-float-start ion-no-margin">
-                <mat-icon>close</mat-icon>
-              </button>
-              <ion-label [innerHTML]="page.subtitle|translate"></ion-label>
-              <ion-text class="ion-float-end" [title]="page.time|dateFormat:{time: true}">
-                <small><ion-icon name="time-outline"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&nbsp;
-              </ion-text>
-            </ion-card-subtitle>
-
-            <!-- main page -->
-            <ion-card-title class="ion-no-margin ion-no-padding">
-              <ion-item  detail="true"
-                         tappable class="text-1x"
-                         [routerLink]="page.path"
-                         routerDirection="root" lines="none">
-                <!-- page icon-->
-                <ion-icon *ngIf="page.icon"    slot="start" [name]="page.icon"></ion-icon>
-                <mat-icon *ngIf="page.matIcon" slot="start">{{page.matIcon}}</mat-icon>
-
-                <ion-label color="primary" [innerHTML]="page.title"></ion-label>
-              </ion-item>
-            </ion-card-title>
-          </ion-card-header>
-
-          <!-- children pages -->
-          <ion-card-content class="ion-no-padding ion-padding-start" *ngIf="page.children?.length">
-            <ion-list class="ion-no-padding">
-              <ion-item  detail="true"
-                         *ngFor="let childPage of page.children"
-                         tappable class="text-1x"
-                        [routerLink]="childPage.path"
-                        routerDirection="root">
-                <!-- page icon-->
-                <ion-icon *ngIf="childPage.icon"    slot="start" color="dark" [name]="childPage.icon"></ion-icon>
-                <mat-icon *ngIf="childPage.matIcon" slot="start" color="dark">{{childPage.matIcon}}</mat-icon>
-
-                <ion-label color="dark" [innerHTML]="childPage.title"></ion-label>
-              </ion-item>
-            </ion-list>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-
-  <!-- Display configured Departments logos -->
-  <ng-template #bottomBanner>
-    <div class="bottom-banner ion-text-center ion-padding" *ngIf="!loadingBanner" @fadeInAnimation>
-      <a href="{{ item.siteUrl }}" *ngFor="let item of $partners | async ">
-        <img class="logo" src="{{ item.logo }}" alt="{{item.label}}"  [title]="item.label" />
-      </a>
-    </div>
-  </ng-template>
-
-
-</ion-content>

package/src/app/core/home/home.module.ts

@@ -1,32 +0,0 @@
-import {NgModule} from '@angular/core';
-import {SharedModule} from '../../shared/shared.module';
-import {HomePage} from './home';
-import {AppAuthModule} from '../auth/auth.module';
-import {TranslateModule} from '@ngx-translate/core';
-import {RouterModule} from '@angular/router';
-import {AppInstallUpgradeCardModule} from '../install/install-upgrade-card.module';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    RouterModule,
-    TranslateModule.forChild(),
-
-    // App modules
-    AppAuthModule,
-    AppInstallUpgradeCardModule
-  ],
-
-  declarations: [
-    HomePage
-  ],
-  exports: [
-    RouterModule,
-    TranslateModule,
-
-    HomePage
-  ]
-})
-export class AppHomePageModule {
-
-}

package/src/app/core/home/home.scss

@@ -1,242 +0,0 @@
-@import 'ionic.globals';
-
-$card-background: rgba(255, 255, 255, .7) !default;
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  white-space: normal;
-}
-
-.center {
-  text-align: center;
-  display: inline-block;
-}
-
-ion-content {
-  --background: transparent;
-  background-size: cover;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  display: inline-block;
-  padding: 15px;
-  background-color: var(--ion-color-primary);
-
-  .loading-page {
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    background-color: var(--ion-color-primary);
-    z-index: 5;
-    transition: background 0.5s linear;
-    -webkit-transition: background 1.5s linear;
-  }
-
-  .loading-page.hidden {
-    background-color: rgba(var(--ion-color-primary), 0);
-  }
-
-  ion-card {
-    z-index: 9;
-    ion-card-header {
-      display: block;
-
-      ion-card-subtitle,
-      ion-card-title {
-        display: block;
-        width: 100%;
-      }
-    }
-  }
-
-  ion-card.main {
-    min-width: 240px;
-    max-width: 400px;
-    margin-left: auto;
-    margin-right: auto;
-
-  }
-  ion-card.welcome {
-    background-color: $card-background;
-
-    button {
-      margin-top: 16px;
-    }
-
-    img {
-      @extend .center;
-      max-width: 250px;
-    }
-  }
-
-  .history-container {
-    margin-left: auto;
-    margin-right: auto;
-
-    ion-card {
-      display: inline-block;
-      box-sizing: border-box;
-      z-index: 8;
-      min-width: 240px;
-      max-width: 400px;
-      width: 100%;
-      margin-left: auto;
-      margin-right: auto;
-      background-color: $card-background;
-
-      ion-card-header {
-
-        ion-card-subtitle {
-          height: 40px;
-
-          button[float-start] {
-            z-index: 99;
-            margin: 0;
-          }
-          ion-label{
-            line-height: 40px;
-          }
-          ion-label[float-end] {
-            padding-right: 16px;
-            font-weight: normal;
-          }
-        }
-
-        ion-card-title {
-          ion-item {
-            --ion-item-background: $transparent;
-            --ion-item-icon-color: var(--ion-color-primary);
-            --ion-item-text-color: var(--ion-color-primary);
-
-            ion-icon[slot="start"],
-            mat-icon[slot="start"] {
-              margin-right: unset;
-              margin-inline-end: 16px !important;
-              color: var(--ion-item-icon-color) !important;
-              fill: currentColor;
-              stroke: currentColor;
-            }
-
-            ion-text,
-            ion-label {
-              color: var(--ion-item-text-color) !important;
-              // Maximize the font size
-              -webkit-text-size-adjust: 100%;
-              -moz-text-size-adjust: 100%;
-              -ms-text-size-adjust: 100%;
-              text-size-adjust: 100%;
-            }
-          }
-        }
-      }
-
-      ion-card-content {
-        ion-list {
-          --ion-item-background: var(--ion-color-transparent);
-          ion-item {
-            --ion-item-icon-color: var(--ion-color-dark);
-            --ion-item-text-color: var(--ion-color-dark);
-
-            ion-icon[slot="start"],
-            mat-icon[slot="start"] {
-              color: var(--ion-item-icon-color) !important;
-              fill: currentColor;
-              stroke: currentColor;
-
-              // Reduce space after icon
-              margin-right: unset;
-              margin-inline-end: 16px !important;
-            }
-
-            ion-text,
-            ion-label {
-              color: var(--ion-item-text-color) !important;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .bottom-banner {
-    background-color: $card-background;
-    min-width: 240px;
-    z-index: 0;
-    position: absolute;
-    left: 16px;
-    right: 16px;
-    bottom: 16px;
-
-    img.logo {
-      max-height: 50px;
-      margin-left: 8px;
-    }
-  }
-
-  ion-text {
-    text-align: center;
-  }
-}
-
-
-
-// Extra small device: Phones (<767px)
-@media screen and (max-width: $screen-xs-max) {
-  ion-content {
-
-    ion-card {
-      min-width: 160px;
-      width: calc(100% - 20px);
-      max-width: 100%;
-      margin-left: 10px;
-      margin-right: 10px;
-
-      h1 {
-        margin-top: 0;
-        font-size: 20px;
-      }
-
-      ion-card-content ion-button {
-        margin-top: 8px;
-      }
-    }
-
-    .bottom-banner {
-      display: block;
-      position: unset;
-
-      img.logo {
-        max-height: 30px;
-      }
-    }
-  }
-}
-
-// Small devices: Tablets (≥768px)
-@media screen and (max-width: $screen-sm-max) and (min-width: $screen-sm) {
-  ion-content {
-    // Avoid bottom-banner to override main-content
-    min-height: 555px;
-
-    .bottom-banner {
-      img.logo {
-        max-height: 40px;
-      }
-    }
-  }
-}
-
-// Desktop or wide screen
-@media screen and (min-width: $screen-md) {
-  ion-content {
-    // Avoid bottom-banner to override main-content
-    min-height: calc(100% - 100px);
-
-  }
-}
-
-