@sumaris-net/ngx-components 18.12.0 → 18.12.1

package/src/app/admin/users/users.scss

@@ -1,80 +0,0 @@
-.mat-expansion-panel {
-  margin-bottom: 5px;
-
-  .form-container {
-    mat-form-field {
-      width: 100%;
-    }
-  }
-
-  mat-action-row {
-    ion-label {
-      line-height: 36px;
-    }
-  }
-}
-
-.table-container {
-  height: calc(100%);
-}
-
-.mat-mdc-table {
-  .mat-column-avatar {
-    --avatar-width: 40px;
-    --avatar-height: 40px;
-    width: calc(var(--avatar-width) + 10px);
-    ion-avatar {
-      --border-radius: 5px !important;
-      --border-width: 1px !important;
-      --border-color: rgba(var(--ion-color-secondary-rgb), 0.5) !important;
-
-      height: var(--avatar-height);
-      max-height: var(--avatar-height);
-      width: var(--avatar-width);
-      max-width: var(--avatar-width);
-      border: solid var(--border-width) var(--border-color);
-      margin: 0 2px;
-
-      svg {
-        max-height: calc(var(--avatar-height) - 1px);
-        max-width: calc(var(--avatar-width) - 1px);
-      }
-    }
-  }
-
-  &.compact {
-    --mat-row-height: 33px;
-
-    .mat-column-avatar {
-      --avatar-width: calc(var(--mat-row-height, 33px) - 4px);
-      --avatar-height: calc(var(--mat-row-height, 33px) - 4px);
-    }
-  }
-
-  .mat-column-id {
-    min-width: 50px;
-    max-width: 120px;
-    padding-right: var(--mat-cell-horizontal-padding, 4px);
-  }
-
-  .mat-column-lastName,
-  .mat-column-firstName {
-    min-width: 80px;
-  }
-  .mat-column-email,
-  .mat-column-pubkey,
-  .mat-column-department {
-    min-width: 180px;
-  }
-  .mat-column-profile {
-    min-width: 110px;
-  }
-  .mat-column-status {
-    min-width: 130px;
-  }
-
-  .mat-column-creationDate,
-  .mat-column-updateDate{
-    min-width: 130px;
-  }
-}

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

@@ -1,387 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, 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, FormFieldDefinitionUtils } from '../../shared/form/field.model';
-import { debounceTime, distinctUntilKeyChanged, filter, tap } from 'rxjs/operators';
-import { EntitiesTableDataSource } from '../../core/table/entities-table-datasource.class';
-import { getPropertyByPath, isNilOrBlank, isNotNil, isNotNilOrBlank, toBoolean } 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 { Message } from '../../social/message/message.model';
-import { MessageService } from '../../social/message/message.service';
-import { RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, TABLE_SETTINGS_ENUM } from '../../core/table/table.model';
-import { MenuService } from '../../core/menu/menu.service';
-import { CsvUtils } from '../../shared/file/csv.utils';
-import { fromDateISOString } from '../../shared/dates';
-
-@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;
-
-  protected additionalFields: FormFieldDefinition[];
-  protected filterCriteriaCount = 0;
-  protected defaultCompact = false;
-
-  set showUsernameColumn(value: boolean) {
-    this.setShowColumn('username', value);
-  }
-
-  get showUsernameColumn(): boolean {
-    return this.getShowColumn('username');
-  }
-
-  set showUsernameExtranetColumn(value: boolean) {
-    this.setShowColumn('usernameExtranet', value);
-  }
-
-  get showUsernameExtranetColumn(): boolean {
-    return this.getShowColumn('usernameExtranet');
-  }
-
-  @Input({ transform: booleanAttribute }) compact: boolean = null;
-  @Input({ transform: booleanAttribute }) usePageSettings = true;
-  @Input({ transform: booleanAttribute }) sticky = false;
-  @Input({ transform: booleanAttribute }) stickyEnd = false;
-  @Input({ transform: booleanAttribute }) canDownload = true;
-
-  constructor(
-    injector: Injector,
-    formBuilder: UntypedFormBuilder,
-    protected accountService: AccountService,
-    protected validatorService: ValidatorService,
-    protected configService: ConfigService,
-    protected dataService: PersonService,
-    protected messageService: MessageService,
-    protected menuService: MenuService,
-    @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(['creationDate', 'updateDate'])
-        .concat(RESERVED_END_COLUMNS),
-      new EntitiesTableDataSource(Person, dataService, validatorService, {
-        prependNewElements: false,
-        suppressErrors: environment.production,
-        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;
-      });
-
-    // Listen page action (e.g. from sub menu item)
-    this.registerSubscription(
-      this.route.queryParams.pipe(distinctUntilKeyChanged('action')).subscribe((queryParams) => {
-        const action = queryParams['action'] || 'none';
-        switch (action) {
-          case 'send':
-            this.openComposeMessageModal();
-            break;
-          case 'none':
-            break;
-          default:
-            console.warn('[users] Unknown action=' + action);
-            break;
-        }
-        // Mark as consumed
-        this.router.navigate(['.'], {
-          relativeTo: this.route,
-          queryParams: { ...queryParams, action: undefined },
-          replaceUrl: true,
-          state: { animated: false },
-        });
-      })
-    );
-
-    // 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;
-  }
-
-  async 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 });
-            this.setShowColumn('username', true, { emitEvent: false });
-            this.setShowColumn('usernameExtranet', true, { emitEvent: false });
-            break;
-          case 'basic-and-token':
-            this.setShowColumn('pubkey', true, { emitEvent: false });
-            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.emitRefresh();
-      })
-    );
-
-    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),
-          filter(() => isNotNilOrBlank(this.settingsId) && this.usePageSettings),
-          tap((json) => this.settings.savePageSetting(this.settingsId, json, TABLE_SETTINGS_ENUM.FILTER_KEY))
-        )
-        .subscribe()
-    );
-
-    if (this.canSendMessage && this.debug) {
-      await this.menuService.addSubMenuItems(
-        [
-          {
-            parentPath: '/admin/users',
-            path: '/admin/users',
-            pathParams: { action: 'expand' },
-            matIcon: 'expand_more',
-            title: 'USER.LIST.BTN_ACTIONS',
-            action: 'expand',
-          },
-          {
-            parentPath: '/admin/users?action=expand',
-            path: '/admin/users?action=send',
-            icon: 'mail',
-            title: 'USER.LIST.BTN_SEND_MESSAGE',
-            action: () => this.openComposeMessageModal(),
-          },
-        ],
-        { skipIfExists: false }
-      );
-    }
-
-    // Restore compact rows
-    this.restoreCompactMode();
-
-    // Restore filter from settings, or load all
-    this.restoreFilterOrLoad();
-  }
-
-  applyFilterAndClosePanel(event?: Event) {
-    this.emitRefresh(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, TABLE_SETTINGS_ENUM.FILTER_KEY) || {};
-    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> {
-    // Compute 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 recipientFilter = PersonFilter.fromObject(this.filter);
-    const canRecipientFilter = !recipientFilter.isEmpty() && (this.accountService.isAdmin() || this.accountService.isSupervisor());
-    return this.messageService.openComposeModal({
-      suggestFn: (value, filter, sortBy, sortDirection) => this.dataService.suggest(value, filter, sortBy, sortDirection),
-      canRecipientFilter,
-      recipientFilterCount: this.totalRowCount,
-      data: Message.fromObject({
-        recipients,
-        recipientFilter,
-      }),
-    });
-  }
-
-  async restoreCompactMode(opts?: { emitEvent?: boolean }) {
-    if (!this.usePageSettings || isNilOrBlank(this.settingsId) || isNotNil(this.compact)) return;
-
-    const compact = toBoolean(
-      this.settings.getPageSettings(this.settingsId, TABLE_SETTINGS_ENUM.COMPACT_ROWS_KEY),
-      toBoolean(this.compact, this.defaultCompact)
-    );
-    if (this.compact !== compact) {
-      this.compact = compact;
-
-      // Emit event
-      if (!opts || opts.emitEvent !== false) {
-        this.markForCheck();
-      }
-    }
-  }
-
-  async toggleCompactMode() {
-    this.compact = !this.compact;
-    // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
-    this.markForCheck();
-    if (this.usePageSettings && isNotNilOrBlank(this.settingsId)) {
-      await this.savePageSettings(this.compact, TABLE_SETTINGS_ENUM.COMPACT_ROWS_KEY);
-    }
-  }
-
-  async exportToCsv(event: Event) {
-    // Prepare CSV options
-    const separator = CsvUtils.getLocalizedSeparator(this.translate);
-    const encoding = CsvUtils.getLocalizedEncoding(this.translate);
-    const translations = this.translate.instant([
-      'COMMON.DATE_TIME_PATTERN',
-      'USER.LIST.TITLE',
-      'USER.EMAIL',
-      'USER.FIRST_NAME',
-      'USER.LAST_NAME',
-      'USER.USERNAME',
-      'USER.USERNAME_EXTRANET',
-      'USER.DEPARTMENT_LABEL',
-      'USER.DEPARTMENT_NAME',
-      'USER.PROFILE',
-      'USER.STATUS',
-      'USER.PUBKEY',
-      ...(this.additionalFields || []).map((field) => field.label),
-      'USER.CREATION_DATE',
-      'USER.UPDATE_DATE',
-      ...this.statusList.map((status) => status.label),
-    ]);
-    const dateTimePattern = translations['COMMON.DATE_TIME_PATTERN'];
-    const filename = translations['USER.LIST.TITLE'] + '.csv';
-    const headers = [
-      translations['USER.EMAIL'],
-      translations['USER.FIRST_NAME'],
-      translations['USER.LAST_NAME'],
-      ...(this.showUsernameColumn ? [translations['USER.USERNAME']] : []),
-      ...(this.showUsernameExtranetColumn ? [translations['USER.USERNAME_EXTRANET']] : []),
-      translations['USER.PROFILE'],
-      translations['USER.STATUS'],
-      translations['USER.PUBKEY'],
-      ...(this.additionalFields || []).map((field) => translations[field.label]),
-      translations['USER.CREATION_DATE'],
-      translations['USER.UPDATE_DATE'],
-    ];
-
-    const additionalFieldsFns = (this.additionalFields || []).map(FormFieldDefinitionUtils.getDisplayValueFn);
-
-    const rows = (this.selection.isEmpty() ? this.dataSource.getRows() : this.selection.selected)
-      .map((element) => element.currentData)
-      .map((person) => {
-        const status = this.statusById[person.statusId];
-        return [
-          person.lastName,
-          person.firstName,
-          person.email,
-          ...(this.showUsernameColumn ? [person.username] : []),
-          ...(this.showUsernameExtranetColumn ? [person.usernameExtranet] : []),
-          person.mainProfile,
-          status ? translations[status?.label] : null,
-          person.pubkey,
-          ...additionalFieldsFns.map((displayFn, index) => {
-            const value = getPropertyByPath(person, this.additionalFields[index].key);
-            console.debug('[users] Additional field displayFn', value);
-            return displayFn(value);
-          }),
-          fromDateISOString(person.creationDate).format(dateTimePattern),
-          fromDateISOString(person.updateDate).format(dateTimePattern),
-        ];
-      });
-
-    CsvUtils.exportToFile(rows, { filename, headers, separator, encoding });
-  }
-}

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

@@ -1,165 +0,0 @@
-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.service';
-import { IMenuItem } from './core/menu/menu.model';
-import { ComponentDirtyGuard } from './shared/guard/component-dirty.guard';
-import { AppAuthModule } from './core/auth/auth.module';
-import { AppChangePasswordPage } from './core/account/password/change-password.page';
-
-const routes: Routes = [
-  // Core path
-  {
-    path: '',
-    component: HomePage,
-  },
-  {
-    path: 'home',
-    component: HomePage,
-  },
-  {
-    path: 'home/:action',
-    component: HomePage,
-  },
-  {
-    path: 'confirm/:email/:code',
-    component: RegisterConfirmPage,
-  },
-  {
-    path: 'password/:email/:token',
-    component: AppChangePasswordPage,
-  },
-  {
-    path: 'account',
-    pathMatch: 'full',
-    component: AccountPage,
-    canActivate: [AuthGuardService],
-    canDeactivate: [ComponentDirtyGuard],
-  },
-  {
-    path: 'account/password',
-    pathMatch: 'full',
-    canActivate: [AuthGuardService],
-    component: AppChangePasswordPage,
-  },
-  {
-    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: IMenuItem[] = [
-  { title: 'MENU.HOME', path: '/', icon: 'home' },
-
-  // Data entry (FAKE route - used for menu testing)
-  { title: 'MENU.DATA_ENTRY_DIVIDER', profile: 'USER' },
-  {
-    title: 'MENU.TRIPS',
-    path: '/trips',
-    matIcon: 'explore',
-    profile: 'USER',
-    ifProperty: 'sumaris.trip.enable',
-    titleProperty: 'sumaris.trip.name',
-  },
-  {
-    title: 'MENU.OCCASIONS',
-    path: '/observations',
-    icon: 'location',
-    profile: 'USER',
-    ifProperty: 'sumaris.observedLocation.enable',
-    titleProperty: 'sumaris.observedLocation.name',
-  },
-
-  // Admin
-  { title: 'MENU.ADMINISTRATION_DIVIDER', profile: 'ADMIN' },
-  {
-    title: 'MENU.USERS',
-    path: '/admin/users',
-    icon: 'people',
-    profile: 'ADMIN',
-    // children: [
-    //   {title: 'USER.LIST.BTN_ACTIONS', matIcon: 'expand_more', profile: 'ADMIN', action: 'expand',
-    //     children: [
-    //       {
-    //         title: 'USER.LIST.BTN_SEND_MESSAGE', icon: 'mail',  action: 'send', static: false
-    //       },
-    //     ]
-    //   }
-    // ]
-  },
-
-  // 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

@@ -1,14 +0,0 @@
-<ion-app>
-  <!-- backdrop (e.g. during geo localization) -->
-  @let busy = platform.busySubject | push;
-  @if (busy) {
-    <ion-backdrop></ion-backdrop>
-  }
-
-  <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

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