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

package/src/app/admin/users/users.ts

@@ -0,0 +1,257 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Injector, Input, OnInit, ViewChild } from '@angular/core';
+import { Person, PRIORITIZED_AUTHORITIES } from '../../core/services/model/person.model';
+import { StatusById, StatusList } from '../../core/services/model/referential.model';
+import { PersonService } from '../services/person.service';
+import { PersonValidatorService } from '../services/validator/person.validator';
+import { AccountService } from '../../core/services/account.service';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { AppTable } from '../../core/table/table.class';
+import { ValidatorService } from '@e-is/ngx-material-table';
+import { FormFieldDefinition } from '../../shared/form/field.model';
+import { debounceTime, filter, tap } from 'rxjs/operators';
+import { EntitiesTableDataSource } from '../../core/table/entities-table-datasource.class';
+import { isNotNil } from '../../shared/functions';
+import { ENVIRONMENT } from '../../../environments/environment.class';
+import { PersonFilter } from '../services/filter/person.filter';
+import { ConfigService } from '../../core/services/config.service';
+import { CORE_CONFIG_OPTIONS } from '../../core/services/config/core.config';
+import { AuthTokenType } from '../../core/services/network.types';
+import { MatExpansionPanel } from '@angular/material/expansion';
+import { slideUpDownAnimation } from '../../shared/material/material.animations';
+import { MessageModal, MessageModalOptions } from '../../social/message/message.modal';
+import { Message } from '../../social/message/message.model';
+import { MessageService } from '../../social/message/message.service';
+import { RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, SETTINGS_FILTER } from '../../core/table/table.model';
+
+@Component({
+  selector: 'app-users-table',
+  templateUrl: 'users.html',
+  styleUrls: ['./users.scss'],
+  providers: [
+    {provide: ValidatorService, useExisting: PersonValidatorService}
+  ],
+  animations: [slideUpDownAnimation],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UsersPage extends AppTable<Person, PersonFilter> implements OnInit {
+
+  readonly canEdit: boolean;
+  readonly canSendMessage: boolean;
+  readonly filterForm: UntypedFormGroup;
+  readonly profiles = [...PRIORITIZED_AUTHORITIES].reverse();
+  readonly statusList = StatusList;
+  readonly statusById = StatusById;
+
+  additionalFields: FormFieldDefinition[];
+  filterCriteriaCount = 0;
+
+  set showUsernameColumn(value: boolean) {
+    this.setShowColumn('username', value);
+  }
+
+  set showUsernameExtranetColumn(value: boolean) {
+    this.setShowColumn('usernameExtranet', value);
+  }
+
+  @Input() useSticky = false;
+
+  constructor(
+    injector: Injector,
+    formBuilder: UntypedFormBuilder,
+    protected accountService: AccountService,
+    protected validatorService: ValidatorService,
+    protected configService: ConfigService,
+    protected dataService: PersonService,
+    protected messageService: MessageService,
+    protected cd: ChangeDetectorRef,
+    @Inject(ENVIRONMENT) environment
+  ) {
+    super(injector,
+      RESERVED_START_COLUMNS
+        .concat([
+          'avatar',
+          'lastName',
+          'firstName',
+          'email',
+          'profile',
+          'status',
+          'username',
+          'usernameExtranet',
+          'pubkey'
+        ])
+        .concat(accountService.additionalFields.map(field => field.key))
+        .concat(RESERVED_END_COLUMNS),
+      new EntitiesTableDataSource(Person, dataService, validatorService, {
+        prependNewElements: false,
+        suppressErrors: environment.production,
+        dataServiceOptions: {
+          saveOnlyDirtyRows: true
+        }
+      }),
+      null
+    );
+
+
+    this.canEdit = accountService.isAdmin();
+    this.canSendMessage = this.canEdit;
+    this.inlineEdition = this.canEdit;
+    this.confirmBeforeDelete = true;
+    this.autoLoad = false; // Wait config loading
+    this.i18nColumnPrefix = 'USER.';
+    this.defaultSortBy = 'lastName';
+    this.defaultSortDirection = 'asc';
+
+    this.filterForm = formBuilder.group({
+      searchText: [null],
+      statusId: [null]
+    });
+
+    this.additionalFields = (this.accountService.additionalFields || [])
+      .filter(field => isNotNil(field.autocomplete))
+      .map(field => {
+        // Make sure to get the final autocomplete config (e.g. with a suggestFn function)
+        field.autocomplete = this.registerAutocompleteField(field.key, {
+          ...field.autocomplete // Copy, to be sure the original config is unchanged
+        });
+        return field;
+      });
+
+    // For DEV only --
+    this.debug = !environment.production;
+  }
+
+  @ViewChild(MatExpansionPanel, {static: true}) filterExpansionPanel: MatExpansionPanel;
+
+  get firstUserColumn(): string {
+    const columnName = this.displayedColumns[RESERVED_START_COLUMNS.length];
+    // Skip avatar column, if present
+    return columnName === 'avatar' && this.displayedColumns[RESERVED_START_COLUMNS.length+1] || columnName;
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.registerSubscription(
+      this.configService.config.subscribe(config => {
+        const authTokenType = config.getProperty(CORE_CONFIG_OPTIONS.AUTH_TOKEN_TYPE) as AuthTokenType;
+        console.debug('[users] AuthTokenType=' + authTokenType)
+        switch (authTokenType) {
+          case "basic":
+            this.setShowColumn('pubkey', false, {emitEvent: false});
+          case "basic-and-token":
+            this.setShowColumn('username', true, {emitEvent: false});
+            this.setShowColumn('usernameExtranet', true, {emitEvent: false});
+            break;
+          case "token":
+            this.setShowColumn('pubkey', true, {emitEvent: false});
+            this.setShowColumn('username', false, {emitEvent: false});
+            this.setShowColumn('usernameExtranet', false, {emitEvent: false});
+        }
+        this.updateColumns();
+        this.onRefresh.emit();
+      })
+    )
+
+    this.registerSubscription(
+      this.onRefresh.subscribe(() => {
+        this.filterForm.markAsUntouched();
+        this.filterForm.markAsPristine();
+      }));
+
+    // Update filter when changes
+    this.registerSubscription(
+      this.filterForm.valueChanges
+        .pipe(
+          debounceTime(250),
+          filter(() => this.filterForm.valid),
+          tap(json => {
+            const filter = PersonFilter.fromObject(json);
+            this.filterCriteriaCount = filter.countNotEmptyCriteria();
+            this.markForCheck();
+            // Update the filter, without reloading the content
+            this.setFilter(filter, {emitEvent: false});
+          }),
+          // Save filter in settings (after a debounce time)
+          debounceTime(500),
+          tap(json => this.settings.savePageSetting(this.settingsId, json, SETTINGS_FILTER))
+        )
+        .subscribe());
+
+    // Restore filter from settings, or load all
+    this.restoreFilterOrLoad();
+  }
+
+  applyFilterAndClosePanel(event?: Event) {
+    this.onRefresh.emit(event);
+    this.filterExpansionPanel.close();
+  }
+
+  resetFilter(event?: Event) {
+    this.totalRowCount = undefined;
+    this.filterCriteriaCount = 0;
+    this.markAsLoading();
+    this.filterForm.reset();
+    this.setFilter(null);
+  }
+
+  protected async restoreFilterOrLoad() {
+    this.markAsLoading();
+
+    console.debug("[users] Restoring filter from settings...");
+
+    const json = this.settings.getPageSettings(this.settingsId, SETTINGS_FILTER) || {};
+    const filter = PersonFilter.fromObject(json);
+
+    this.filterForm.patchValue(json);
+    this.setFilter(filter, {emitEvent: true});
+  }
+
+  clearControlValue(event: Event, formControl: AbstractControl): boolean {
+    if (event) event.stopPropagation(); // Avoid to enter input the field
+    formControl.setValue(null);
+    return false;
+  }
+
+  async openComposeMessageModal(event?: Event): Promise<any> {
+
+    // Get recipients
+    const recipients = (this.selection.selected || [])
+      .map(row => row.currentData)
+      .map(Person.fromObject)
+      .map(p => {
+        const target = p.asObject({minify: true});
+        target.department = p.department?.asObject();
+        return target;
+      });
+
+    const hasTopModal = !!(await this.modalCtrl.getTop());
+    const modal = await this.modalCtrl.create({
+      component: MessageModal,
+      componentProps: <MessageModalOptions>{
+        suggestFn: (value, filter, sortBy, sortDirection) => this.dataService.suggest(value, filter, sortBy, sortDirection),
+        data: <Message>{
+          recipients
+        }
+      },
+      cssClass: hasTopModal && 'stack-modal'
+    });
+
+    // Open the modal
+    await modal.present();
+
+    // On dismiss
+    const {data} = await modal.onDidDismiss();
+    if (!data || !(data instanceof Message)) return; // CANCELLED
+
+    console.info('[users] received message to send: ', data);
+    await this.messageService.send(data);
+  }
+
+  /* -- protected methods -- */
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+
+}
+

package/src/app/app-routing.module.ts

@@ -0,0 +1,126 @@
+import { NgModule } from '@angular/core';
+import { ExtraOptions, RouterModule, Routes } from '@angular/router';
+import { HomePage } from './core/home/home';
+import { RegisterConfirmPage } from './core/register/register-confirm.page';
+import { AccountPage } from './core/account/account.page';
+import { SettingsPage } from './core/settings/settings.page';
+import { AuthGuardService } from './core/services/auth-guard.service';
+import { SharedRoutingModule } from './shared/shared-routing.module';
+import { APP_MENU_ITEMS } from './core/menu/menu.component';
+import { MenuItem } from './core/menu/menu.model';
+import { ComponentDirtyGuard } from './shared/guard/component-dirty.guard';
+import {AppAuthModule} from './core/auth/auth.module';
+
+const routes: Routes = [
+  // Core path
+  {
+    path: '',
+    component: HomePage
+  },
+
+  {
+    path: 'home/:action',
+    component: HomePage
+  },
+  {
+    path: 'confirm/:email/:code',
+    component: RegisterConfirmPage
+  },
+  {
+    path: 'account',
+    pathMatch: 'full',
+    component: AccountPage,
+    canActivate: [AuthGuardService],
+    canDeactivate: [ComponentDirtyGuard]
+  },
+  {
+    path: 'settings',
+    pathMatch: 'full',
+    component: SettingsPage,
+    canDeactivate: [ComponentDirtyGuard]
+  },
+
+  // Admin
+  {
+    path: 'admin',
+    canActivate: [AuthGuardService],
+    loadChildren: () => import('./admin/admin-routing.module').then(m => m.AdminRoutingModule)
+  },
+
+  // Test module (disable in menu, by default - can be enabled by the Pod configuration page)
+  {
+    path: 'testing',
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'shared',
+      },
+      // Shared module
+      {
+        path: 'shared',
+        loadChildren: () => import('./shared/shared.testing.module').then(m => m.SharedTestingModule)
+      },
+      // Core module
+      {
+        path: 'core',
+        loadChildren: () => import('./core/core.testing.module').then(m => m.CoreTestingModule)
+      },
+      // Social module
+      {
+        path: 'social',
+        loadChildren: () => import('./social/social.testing.module').then(m => m.SocialTestingModule)
+      }
+    ]
+  },
+
+  // Other route redirection (should at the end of the array)
+  {
+    path: '**',
+    redirectTo: '/'
+  }
+];
+
+// Menu items
+const MENU_ITEMS: MenuItem[] = [
+  {title: 'MENU.HOME', path: '/', icon: 'home'},
+
+  // Admin
+  {title: 'MENU.ADMINISTRATION_DIVIDER', profile: 'ADMIN'},
+  {title: 'MENU.USERS', path: '/admin/users', icon: 'people', profile: 'ADMIN'},
+
+  // Settings
+  {title: '' /*empty divider*/, cssClass: 'flex-spacer'},
+  {title: 'MENU.TESTING', path: '/testing', icon: 'code', color: 'danger'},
+  {title: 'MENU.LOCAL_SETTINGS', path: '/settings', icon: 'settings', color: 'medium'},
+  {title: 'MENU.ABOUT', action: 'about', matIcon: 'help_outline', color: 'medium', cssClass: 'visible-mobile'},
+
+  // Logout
+  {title: 'MENU.LOGOUT', action: 'logout', icon: 'log-out', profile: 'GUEST', color: 'medium hidden-mobile'},
+  {title: 'MENU.LOGOUT', action: 'logout', icon: 'log-out', profile: 'GUEST', color: 'danger visible-mobile'}
+
+];
+
+export const ROUTE_OPTIONS: ExtraOptions = {
+  enableTracing: false,
+  //enableTracing: !environment.production,
+  useHash: false,
+  onSameUrlNavigation: 'reload'
+};
+
+@NgModule({
+  imports: [
+    SharedRoutingModule,
+    RouterModule.forRoot(routes, ROUTE_OPTIONS),
+    AppAuthModule
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    {provide: APP_MENU_ITEMS, useValue: MENU_ITEMS},
+    {provide: ComponentDirtyGuard, useClass: ComponentDirtyGuard}
+  ]
+})
+export class AppRoutingModule {
+}

package/src/app/app.component.html

@@ -0,0 +1,12 @@
+<ion-app>
+
+  <app-menu [logo]="logo" [appName]="appName">
+
+    <app-job-progression-icon headerBottomRight [autoHide]="true"></app-job-progression-icon>
+    <app-user-event-notification-icon headerBottomRight [autoHide]="true"></app-user-event-notification-icon>
+
+    <ion-router-outlet id="menu-content"></ion-router-outlet>
+
+  </app-menu>
+
+</ion-app>

package/src/app/app.component.scss

@@ -0,0 +1,4 @@
+ion-content .fixed-content,
+ion-content .scroll-content {
+  margin-top: 56px;
+}

package/src/app/app.component.ts

@@ -0,0 +1,205 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject} from '@angular/core';
+import {ConfigService} from './core/services/config.service';
+import {DOCUMENT} from '@angular/common';
+import {Configuration} from './core/services/model/config.model';
+import {PlatformService} from './core/services/platform.service';
+import {throttleTime} from 'rxjs/operators';
+import {FormFieldDefinition} from './shared/form/field.model';
+import {getColorContrast, getColorShade, getColorTint, hexToRgbArray, mixHex} from './shared/graph/colors.utils';
+import {AccountService} from './core/services/account.service';
+import {LocalSettingsService} from './core/services/local-settings.service';
+import {MatIconRegistry} from '@angular/material/icon';
+import {DomSanitizer} from '@angular/platform-browser';
+import {isNotNil, joinPropertiesPath} from './shared/functions';
+import {Department} from './core/services/model/department.model';
+
+import {CORE_CONFIG_OPTIONS} from './core/services/config/core.config';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppComponent {
+
+  logo: string;
+  appName: string;
+
+  constructor(
+    @Inject(DOCUMENT) private _document: Document,
+    private platform: PlatformService,
+    private accountService: AccountService,
+    private configService: ConfigService,
+    private settings: LocalSettingsService,
+    private matIconRegistry: MatIconRegistry,
+    private domSanitizer: DomSanitizer,
+    private cd: ChangeDetectorRef
+  ) {
+    this.start();
+  }
+
+  async start() {
+    console.info('[app] Starting...');
+    await this.platform.start();
+
+    // Listen for config changed
+    this.configService.config.subscribe(config => this.onConfigChanged(config));
+
+    // Add additional account fields
+    this.addAccountFields();
+
+    // Add custom icons
+    this.addCustomSVGIcons();
+
+    console.info('[app] Starting [OK]');
+  }
+
+  onActivate(event) {
+    // Make sure to scroll on top before changing state
+    // See https://stackoverflow.com/questions/48048299/angular-5-scroll-to-top-on-every-route-click
+    const scrollToTop = window.setInterval(() => {
+      const pos = window.scrollY;
+      if (pos > 0) {
+        window.scrollTo(0, pos - 20); // how far to scroll on each step
+      } else {
+        window.clearInterval(scrollToTop);
+      }
+    }, 16);
+  }
+
+  protected onConfigChanged(config: Configuration) {
+
+    this.logo = config.smallLogo || config.largeLogo;
+    this.appName = config.label;
+
+    // Set document title
+    const title = isNotNil(config.name) ? `${config.label} - ${config.name}` : config.label;
+    this._document.getElementById('appTitle').textContent = title;
+
+    if (config.properties) {
+      // Set document favicon
+      const favicon = config.getProperty(CORE_CONFIG_OPTIONS.FAVICON);
+      if (isNotNil(favicon)) {
+        this._document.getElementById('appFavicon').setAttribute('href', favicon);
+      }
+
+      this.updateTheme({
+        colors: {
+          primary: config.properties['sumaris.color.primary'],
+          secondary: config.properties['sumaris.color.secondary'],
+          tertiary: config.properties['sumaris.color.tertiary'],
+          success: config.properties['sumaris.color.success'],
+          warning: config.properties['sumaris.color.warning'],
+          accent: config.properties['sumaris.color.accent'],
+          danger: config.properties['sumaris.color.danger']
+        }
+      });
+
+      this.cd.markForCheck();
+    }
+  }
+
+  protected updateTheme(options: { colors?: { [color: string]: string; } }) {
+    if (!options) return;
+
+    // Setting colors
+    if (options.colors) {
+      console.info('[app] Changing theme colors ', options);
+
+      const style = document.documentElement.style;
+
+      // Add 100 & 900 color for primary and secondary color
+      ['primary', 'secondary'].forEach(colorName => {
+        const color = options.colors[colorName];
+        options.colors[colorName + '100'] = color && mixHex('#ffffff', color, 10) || undefined;
+        options.colors[colorName + '900'] = color && mixHex('#000000', color, 12) || undefined;
+      });
+
+      Object.getOwnPropertyNames(options.colors)
+        .forEach(colorName => {
+
+        // Remove existing value
+        style.removeProperty(`--ion-color-${colorName}`);
+        style.removeProperty(`--ion-color-${colorName}-rgb`);
+        style.removeProperty(`--ion-color-${colorName}-contrast`);
+        style.removeProperty(`--ion-color-${colorName}-contrast-rgb`);
+        style.removeProperty(`--ion-color-${colorName}-shade`);
+        style.removeProperty(`--ion-color-${colorName}-tint`);
+
+        // Set new value, if any
+        const color = options.colors[colorName];
+        if (isNotNil(color)) {
+          // Base color
+          style.setProperty(`--ion-color-${colorName}`, color);
+          style.setProperty(`--ion-color-${colorName}-rgb`, hexToRgbArray(color).join(', '));
+
+          // Contrast color
+          const contrastColor = getColorContrast(color, true);
+          style.setProperty(`--ion-color-${colorName}-contrast`, contrastColor);
+          style.setProperty(`--ion-color-${colorName}-contrast-rgb`, hexToRgbArray(contrastColor).join(', '));
+
+          // Shade color
+          style.setProperty(`--ion-color-${colorName}-shade`, getColorShade(color));
+
+          // Tint color
+          style.setProperty(`--ion-color-${colorName}-tint`, getColorTint(color));
+        }
+      });
+
+    }
+  }
+
+  protected addAccountFields() {
+
+    console.debug('[app] Add additional account fields...');
+
+    const attributes = this.settings.getFieldDisplayAttributes('department');
+    const departmentDefinition = <FormFieldDefinition>{
+      key: 'department',
+      label: 'USER.DEPARTMENT.TITLE',
+      type: 'entity',
+      autocomplete: {
+        items: [
+          Department.fromObject({id: 1, label: 'E-IS', name: 'Environmental Information Systems'}),
+          Department.fromObject({id: 2, label: 'UNK', name: 'Other'})
+        ],
+        filter: {entityName: 'Department'},
+        displayWith: (value) => value && joinPropertiesPath(value, attributes),
+        attributes
+      },
+      extra: {
+        registration: {
+          required: true
+        },
+        account: {
+          required: true,
+          disabled: true
+        }
+      }
+    };
+
+    // Add account field: department
+    this.accountService.registerAdditionalField(departmentDefinition);
+
+    // When settings changed
+    this.settings.onChange
+      .pipe(throttleTime(400))
+      .subscribe(() => {
+        // Update the display fn
+        const attributes = this.settings.getFieldDisplayAttributes('department');
+        departmentDefinition.autocomplete.attributes = attributes;
+        departmentDefinition.autocomplete.displayWith = (value) => value && joinPropertiesPath(value, attributes) || undefined;
+      });
+  }
+
+  protected addCustomSVGIcons() {
+      ['fish'] // Example
+      .forEach(filename => this.matIconRegistry.addSvgIcon(filename,
+        this.domSanitizer.bypassSecurityTrustResourceUrl(`../assets/icons/${filename}.svg`)
+        )
+      );
+  }
+}
+