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

package/src/app/app.module.ts

@@ -0,0 +1,326 @@
+import {APP_BASE_HREF} from '@angular/common';
+import {BrowserModule, HAMMER_GESTURE_CONFIG, HammerModule} from '@angular/platform-browser';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule, SecurityContext} from '@angular/core';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
+import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
+import {MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter} from '@angular/material-moment-adapter';
+import {Network} from '@awesome-cordova-plugins/network/ngx';
+import {APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, LocalSettingsOptions} from './core/services/local-settings.service';
+import {APP_LOCALES, LocalSettings} from './core/services/model/settings.model';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {APP_CONFIG_OPTIONS} from './core/services/config.service';
+import {APP_HOME_BUTTONS} from './core/home/home';
+import {CORE_CONFIG_OPTIONS} from './core/services/config/core.config';
+import {IonicModule} from '@ionic/angular';
+import {CacheModule} from 'ionic-cache';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {SharedModule} from './shared/shared.module';
+import {MarkdownModule, MarkedOptions} from 'ngx-markdown';
+import {APP_LOCAL_STORAGE_TYPE_POLICIES} from './core/services/storage/entities-storage.service';
+import {AppGestureConfig} from './shared/gesture/gesture-config';
+import {APP_GRAPHQL_TYPE_POLICIES} from './core/graphql/graphql.service';
+import {DATE_ISO_PATTERN} from './shared/constants';
+import {JDENTICON_CONFIG} from 'ngx-jdenticon';
+import {APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS} from './core/about/about.modal';
+import {Department} from './core/services/model/department.model';
+import {CORE_TESTING_PAGES} from './core/core.testing.module';
+import {AppComponent} from './app.component';
+import {AppRoutingModule} from './app-routing.module';
+import {CoreModule} from './core/core.module';
+import {environment} from '../environments/environment';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {SHARED_TESTING_PAGES} from './shared/shared.testing.module';
+import {APP_TESTING_PAGES} from './shared/testing/tests.page';
+import {Environment} from '../environments/environment.class';
+import {SOCIAL_TESTING_PAGES} from './social/social.testing.module';
+import {APP_MENU_OPTIONS} from './core/menu/menu.component';
+import {MenuItem, MenuOptions} from './core/menu/menu.model';
+import {APP_USER_EVENT_SERVICE} from './social/user-event/user-event.service';
+import {UserEventTestService} from './social/user-event/testing/user-event.testing.service';
+import {UserEventModule} from './social/user-event/user-event.module';
+import {JobModule} from './social/job/job.module';
+import {APP_JOB_PROGRESSION_SERVICE} from './social/job/progression/job-progression.service';
+import {JobProgressionTestService} from './social/job/testing/job-progression.testing.service';
+import {IonicStorageModule} from '@ionic/storage-angular';
+import {ApolloModule} from 'apollo-angular';
+import {AudioManagement} from '@ionic-native/audio-management/ngx';
+import {StorageService} from './shared/storage/storage.service';
+import {APP_STORAGE} from './shared/storage/storage.utils';
+import {Downloader} from '@ionic-native/downloader/ngx';
+import {APP_PROGRESS_BAR_SERVICE, ProgressBarService} from './shared/services/progress-bar.service';
+import {ProgressInterceptor} from './shared/interceptors/progess.interceptor';
+import {APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, UserSettingsOptions} from './core/services/account.service';
+import {TEST_USER_SETTINGS_OPTIONS} from './core/services/config/account.config';
+import {TokenScope} from './core/services/model/token.model';
+import {APP_SETTINGS_MENU_ITEMS} from './core/settings/settings.page';
+import {APP_LOGGING_SERVICE, LoggingService} from './shared/logging/logging-service.class';
+import {isAndroid, isCapacitor, isIOS, isMobile} from './shared/platforms';
+
+const pkg = require('../../package.json');
+const ENV: Environment = {
+  ...environment,
+  // DEV ONLY - Override some values for testing
+  name: 'ngx-sumaris-components',
+  version: (pkg.version as string),
+  production: false,
+  checkAppVersionIntervalInSeconds: 10 // 10s
+};
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    ApolloModule,
+    IonicModule.forRoot({
+      innerHTMLTemplatesEnabled: true,
+      platform: {
+        mobile: isMobile,
+        capacitor: isCapacitor,
+        android: isAndroid,
+        ios: isIOS
+      }
+    }),
+    CacheModule.forRoot({
+      keyPrefix: '', // For compatibility
+      ...environment.cache
+    }),
+    IonicStorageModule.forRoot({
+        name: 'ngx-sumaris-components', // default
+        ...environment.storage
+    }),
+    TranslateModule.forRoot({
+        loader: {
+            provide: TranslateLoader,
+            useFactory: (httpClient) => new TranslateHttpLoader(httpClient, './assets/i18n/', `.json`),
+            deps: [HttpClient]
+        }
+    }),
+    MarkdownModule.forRoot({
+      loader: HttpClient, // Allow to load using [src]
+      sanitize: SecurityContext.NONE,
+      markedOptions: {
+        provide: MarkedOptions,
+        useValue: {
+          gfm: true,
+          breaks: false,
+          pedantic: false,
+          smartLists: true,
+          smartypants: false,
+        },
+      }
+    }),
+
+    // Need for tap event, in app-toolbar
+    HammerModule,
+
+    // functional modules
+    SharedModule.forRoot(ENV),
+    CoreModule.forRoot(),
+    AppRoutingModule,
+    UserEventModule,
+    JobModule
+  ],
+  providers: [
+    // Cordova plugins
+    Network,
+    AudioManagement,
+    Downloader,
+
+    //{provide: APP_BASE_HREF, useValue: (environment.baseUrl || '/')},
+    {provide: APP_BASE_HREF, useFactory: () => {
+        try {
+          return document.getElementsByTagName('base')[0].href;
+        }
+        catch (err) {
+          console.error(err);
+          return environment.baseUrl || '/';
+        }
+      }
+    },
+
+    {provide: APP_STORAGE, useExisting: StorageService},
+    //{ provide: ErrorHandler, useClass: IonicErrorHandler },
+    { provide: APP_PROGRESS_BAR_SERVICE, useClass: ProgressBarService },
+    { provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true, deps: [APP_PROGRESS_BAR_SERVICE] },
+
+    {
+      provide: APP_LOCALES, useValue:
+        [
+          {
+            key: 'fr',
+            value: 'Français',
+            country: 'fr'
+          },
+          {
+            key: 'en',
+            value: 'English (UK)',
+            country: 'gb'
+          },
+          {
+            key: 'en-US',
+            value: 'English (US)',
+            country: 'us'
+          }
+        ]
+    },
+
+    {provide: MAT_DATE_LOCALE, useValue: environment.defaultLocale || 'en'},
+    {
+      provide: MAT_DATE_FORMATS, useValue: {
+        parse: {
+          dateInput: DATE_ISO_PATTERN,
+        },
+        display: {
+          dateInput: 'L',
+          monthYearLabel: 'MMM YYYY',
+          dateA11yLabel: 'LL',
+          monthYearA11yLabel: 'MMMM YYYY',
+        }
+      }
+    },
+    {
+      provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
+      useValue: { strict: false }
+    },
+    {provide: MomentDateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]},
+    {provide: DateAdapter, useExisting: MomentDateAdapter},
+
+
+    // Configure hammer gesture
+    {provide: HAMMER_GESTURE_CONFIG, useClass: AppGestureConfig},
+
+    // Settings default values
+    {
+      provide: APP_LOCAL_SETTINGS, useValue: <Partial<LocalSettings>>{
+        pageHistoryMaxSize: 3
+      }
+    },
+
+    // Setting options
+    {
+      provide: APP_LOCAL_SETTINGS_OPTIONS, useValue: <Partial<LocalSettingsOptions>>{
+        serializeAsString: true,
+        options: {} // options definition
+      }
+    },
+
+    // User options (comment out to enable user properties in AccountPage)
+    // {
+    //   provide: APP_USER_SETTINGS_OPTIONS, useValue: <UserSettingsOptions>{
+    //     options: { ...TEST_USER_SETTINGS_OPTIONS }
+    //   }
+    // },
+
+    // Token Scopes
+    {
+      provide: APP_USER_TOKEN_SCOPES,
+      useValue: <TokenScope[]>[
+        {
+          id: 'read_api',
+          flag: 1 << 0,
+          name: 'ACCOUNT.TOKENS.SCOPES.READ'
+        },
+        {
+          id: 'write_api',
+          flag: 1 << 1,
+          name: 'ACCOUNT.TOKENS.SCOPES.WRITE'
+        },
+        {
+          id: 'admin_api',
+          flag: 1 << 2,
+          name: 'ACCOUNT.TOKENS.SCOPES.ADMIN'
+        },
+      ]
+    },
+
+    // Config options definition (Core + trip)
+    {provide: APP_CONFIG_OPTIONS, useValue: CORE_CONFIG_OPTIONS},
+
+    // Menu options
+    {provide: APP_MENU_OPTIONS, useValue: <MenuOptions>{}},
+
+    // Home buttons
+    {provide: APP_HOME_BUTTONS, useValue: []},
+
+    // Settings menu options
+    {provide: APP_SETTINGS_MENU_ITEMS, useValue: <MenuItem[]>[
+        {title: 'MENU.TESTING', path: '/testing', icon: 'code', color: 'danger', ifProperty: 'sumaris.testing.enable', profile: 'SUPERVISOR'},
+    ]},
+
+    // Entities Apollo cache options
+    {provide: APP_GRAPHQL_TYPE_POLICIES, useValue: {}},
+
+    // Entities storage options
+    {provide: APP_LOCAL_STORAGE_TYPE_POLICIES, useValue: {}},
+
+    // Logging service
+    {provide: APP_LOGGING_SERVICE, useClass: LoggingService},
+
+    // User event service (for test only - app defined their own service)
+    {provide: APP_USER_EVENT_SERVICE, useClass: UserEventTestService},
+
+    // Job progression service (test)
+    {provide: APP_JOB_PROGRESSION_SERVICE, useClass: JobProgressionTestService},
+
+    // About developers
+    {
+      provide: APP_ABOUT_DEVELOPERS, useValue: <Partial<Department>[]>[
+        {siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png', label: 'Environmental Information Systems'}
+      ]
+    },
+
+    // About partners
+    {
+      provide: APP_ABOUT_PARTNERS, useValue: <Partial<Department>[]>[
+        {siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png'},
+        {siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png'},
+        {siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png'},
+        {siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png'},
+        {siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png'},
+        {siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png'},
+        {siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png'},
+        {siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png'},
+        {siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png'},
+        {siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png'}
+      ]
+    },
+
+    // Testing pages
+    {
+      provide: APP_TESTING_PAGES, useValue: [
+        ...SHARED_TESTING_PAGES,
+        ...CORE_TESTING_PAGES,
+        ...SOCIAL_TESTING_PAGES
+      ]
+    },
+
+    // Custom identicon style
+    // https://jdenticon.com/icon-designer.html?config=4451860010ff320028501e5a
+    {
+      provide: JDENTICON_CONFIG,
+      useValue: {
+        lightness: {
+          color: [0.26, 0.80],
+          grayscale: [0.30, 0.90],
+        },
+        saturation: {
+          color: 0.50,
+          grayscale: 0.46,
+        },
+        backColor: '#0000'
+      }
+    }
+  ],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {
+
+  constructor() {
+    console.debug('[app] Creating module');
+  }
+}

package/src/app/core/about/about.modal.html

@@ -0,0 +1,140 @@
+<ion-header>
+  <ion-toolbar color="light">
+
+    <ion-title>
+      {{'ABOUT.TITLE'|translate}}
+    </ion-title>
+
+    <ion-buttons slot="end">
+      <ion-button (click)="close()" visible-xs visible-sm visible-mobile>
+        {{'COMMON.BTN_CLOSE'|translate}}
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <ion-list lines="none">
+
+    <!-- Peer info -->
+    <ion-item *ngIf="config$ | async; let config">
+      <span slot="start">&nbsp;</span>
+      <ion-label class="ion-text-wrap" >
+        <h2>
+          <b>{{config.label}}</b> - <span [innerHTML]="config.name"></span>
+        </h2>
+        <p *ngIf="config.description">
+          <markdown [data]="config.description"
+                    emoji>
+          </markdown>
+        </p>
+      </ion-label>
+    </ion-item>
+
+    <!-- Version info -->
+    <ion-item>
+      <span slot="start">&nbsp;</span>
+      <ion-label class="ion-text-wrap">
+        <h2>
+          <small *ngIf="name">{{'ABOUT.POWERED_BY'|translate}}</small> {{name}}
+          <span *ngIf="version" [innerHTML]="'ABOUT.VERSION'| translate: {version: version}"></span>
+        </h2>
+        <p [innerHTML]="'ABOUT.LICENSE'| translate"></p>
+      </ion-label>
+    </ion-item>
+
+    <!-- Help -->
+    <ion-item *ngIf="forumUrl || helpUrl">
+      <mat-icon slot="start">help_outline</mat-icon>
+      <ion-label>
+        <p>
+          {{'ABOUT.HELP'|translate}}
+        </p>
+        <p>
+          <ion-button fill="solid" color="accent" href="{{helpUrl}}" target="help" size="default">
+            <mat-icon slot="start">description</mat-icon>
+            <ion-text translate>ABOUT.USER_MANUAL</ion-text>
+          </ion-button>
+          <ion-button fill="solid" color="secondary" href="{{forumUrl}}" target="forum" size="default">
+            <ion-icon slot="start" name="chatbubbles"></ion-icon>
+            <ion-text translate>ABOUT.FORUM</ion-text>
+          </ion-button>
+        </p>
+      </ion-label>
+    </ion-item>
+
+    <!-- Report issue -->
+    <ion-item *ngIf="reportIssueUrl">
+      <ion-icon slot="start" name="bug" color="dark"></ion-icon>
+      <ion-label>
+        <p>
+          {{'ABOUT.REPORT_ISSUE'|translate}}
+        </p>
+        <p>
+          <a color="primary" href="{{reportIssueUrl}}" target="_system" translate>ABOUT.BTN_REPORT_ISSUE</a>
+        </p>
+      </ion-label>
+    </ion-item>
+
+
+    <!-- Source code -->
+    <ion-item *ngIf="sourceUrl">
+      <ion-icon slot="start" name="code" color="dark"></ion-icon>
+      <ion-label>
+        <p>
+          {{'ABOUT.SOURCE_CODE'|translate}}
+        </p>
+        <p>
+          <a color="primary" href="{{sourceUrl}}" target="_system">{{sourceUrl}}</a>
+        </p>
+      </ion-label>
+    </ion-item>
+
+    <!-- Developers -->
+    <ion-item *ngIf="developers | isNotEmptyArray">
+      <ion-icon slot="start" name="people" color="dark"></ion-icon>
+      <ion-label>
+        <p>
+          {{'ABOUT.DEVELOPED_BY'|translate}}
+        </p>
+        <ion-list lines="none">
+          <ion-item *ngFor="let item of developers"
+                    class="ion-no-padding">
+            <img slot="end" src="{{item.logo}}">
+            <ion-label>
+              <p>
+                <a color="primary" href="{{item.siteUrl}}" target="_system">{{item.name||item.label}}</a>
+              </p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-label>
+    </ion-item>
+
+    <!-- Partners -->
+    <ion-item class="item-partners" *ngIf="partners | isNotEmptyArray">
+      <ion-icon slot="start" name="megaphone" color="dark"></ion-icon>
+      <ion-text>
+        <p>{{'ABOUT.PARTNERS'|translate}}</p>
+        <p>
+          <a *ngFor="let item of partners" href="{{item.siteUrl}}" class="partners" target="_system">
+            <img src="{{item.logo}}">
+          </a>
+        </p>
+      </ion-text>
+    </ion-item>
+  </ion-list>
+
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+  <ion-toolbar>
+    <ion-row class="ion-no-padding" nowrap>
+      <ion-col></ion-col>
+      <ion-col size="auto">
+        <ion-button fill="solid" color="tertiary" (click)="close()">{{'COMMON.BTN_CLOSE'|translate}}</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

package/src/app/core/about/about.modal.scss

@@ -0,0 +1,23 @@
+.item-partners {
+  ion-text {
+    height: auto;
+
+    p:last-child {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      justify-content: space-between;
+
+      a {
+        padding: 2px;
+
+        img {
+          text-align: center;
+          display: inline-block;
+          max-height: 40px;
+        }
+      }
+    }
+  }
+
+}

package/src/app/core/about/about.modal.ts

@@ -0,0 +1,71 @@
+import {Component, Inject, InjectionToken, OnDestroy, Optional} from '@angular/core';
+import {ModalController} from '@ionic/angular';
+import {ENVIRONMENT} from '../../../environments/environment.class';
+import {capitalizeFirstLetter} from '../../shared/functions';
+import {Department} from '../services/model/department.model';
+import {TranslateService} from '@ngx-translate/core';
+import {ConfigService} from '../services/config.service';
+import {Configuration} from '../services/model/config.model';
+import {Observable, Subscription} from 'rxjs';
+import {CORE_CONFIG_OPTIONS} from '../services/config/core.config';
+
+export const APP_ABOUT_DEVELOPERS = new InjectionToken<Partial<Department>[]>('aboutDevelopers');
+export const APP_ABOUT_PARTNERS = new InjectionToken<Partial<Department>[]>('aboutPartners');
+
+@Component({
+  selector: 'app-about-modal',
+  templateUrl: './about.modal.html',
+  styleUrls: ['./about.modal.scss']
+})
+export class AboutModal implements OnDestroy {
+
+  readonly name: string;
+  readonly version: string;
+  readonly sourceUrl: string;
+  readonly reportIssueUrl: string;
+  readonly config$: Observable<Configuration>;
+  forumUrl: string;
+  helpUrl: string;
+
+  private readonly _subscription = new Subscription();
+
+  constructor(
+    protected translate: TranslateService,
+    protected modalController: ModalController,
+    protected configService: ConfigService,
+    @Optional() @Inject(ENVIRONMENT) protected environment,
+    @Optional() @Inject(APP_ABOUT_DEVELOPERS) public developers: Partial<Department>[],
+    @Optional() @Inject(APP_ABOUT_PARTNERS) public partners: Partial<Department>[]
+  ) {
+    this.name = translate.instant('APP_NAME');
+    if (this.name === 'APP_NAME') {
+      // Not translated: use name from the environnement
+      this.name = environment && environment.name && capitalizeFirstLetter(environment.name) || undefined;
+    }
+    this.version = environment && environment.version;
+    this.sourceUrl = environment && environment.sourceUrl;
+    this.reportIssueUrl = environment && environment.reportIssueUrl;
+    this.forumUrl = environment && environment.forumUrl;
+    this.helpUrl = environment && environment.helpUrl;
+    this.config$ = configService.config;
+
+    this._subscription.add(
+      this.config$.subscribe(config => this.setConfig(config))
+    );
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
+
+  async close() {
+      await this.modalController.dismiss();
+  }
+
+  /* -- protected functions -- */
+
+  protected setConfig(config?: Configuration) {
+    this.forumUrl = config?.getProperty(CORE_CONFIG_OPTIONS.FORUM_URL) || this.environment.forumUrl;
+    this.helpUrl = config?.getProperty(CORE_CONFIG_OPTIONS.HELP_URL) || this.environment.helpUrl;
+  }
+}

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

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../shared/shared.module';
+import {IonicModule} from '@ionic/angular';
+import {AboutModal} from './about.modal';
+import {TranslateModule} from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    IonicModule,
+    TranslateModule.forChild()
+  ],
+
+  declarations: [
+    AboutModal
+  ],
+  exports: [
+    TranslateModule,
+    AboutModal
+  ]
+})
+export class AppAboutModalModule {
+
+}

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

@@ -0,0 +1,38 @@
+import {NgModule} from '@angular/core';
+import {AccountPage} from './account.page';
+import {SharedModule} from '../../shared/shared.module';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+import {AppFormButtonsBarModule} from '../form/buttons/form-buttons-bar.module';
+import {AppPropertiesFormModule} from '../form/properties/properties.module';
+import {AppTableModule} from '../table/table.module';
+import {UserTokenTable} from './token.table';
+import {NewTokenModal} from './new-token.modal';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule.forChild(),
+
+    // App modules
+    AppFormButtonsBarModule,
+    AppPropertiesFormModule,
+    AppTableModule
+  ],
+  declarations: [
+    AccountPage,
+    UserTokenTable,
+    NewTokenModal
+  ],
+  exports: [
+    TranslateModule,
+    // Components
+    AccountPage,
+    UserTokenTable,
+    NewTokenModal
+  ]
+})
+export class AppAccountModule {
+
+}