@sumaris-net/ngx-components 18.13.0 → 18.14.0

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

@@ -0,0 +1,80 @@
+.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

@@ -0,0 +1,387 @@
+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

@@ -0,0 +1,165 @@
+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

@@ -0,0 +1,18 @@
+<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">
+    @if (enableNotificationIcons) {
+      <div headerBottomRight>
+        <app-job-progression-icon [autoHide]="true"></app-job-progression-icon>
+        <app-user-event-notification-icon [unreadColor]="'tertiary'"></app-user-event-notification-icon>
+      </div>
+    }
+
+    <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;
+}