@sumaris-net/ngx-components 18.13.0 → 18.14.0

package/src/app/core/services/testing/user-settings.config.ts

@@ -0,0 +1,77 @@
+import { FormFieldDefinition } from '../../../shared/form/field.model';
+
+// This test options should be visible in the account page
+export const TEST_USER_SETTINGS_OPTIONS = Object.freeze({
+  DUMMY_OPTION_1: <FormFieldDefinition>{
+    key: 'sumaris.option.dummy1',
+    label: 'ACCOUNT.SETTINGS.DUMMY_1',
+    type: 'boolean',
+    defaultValue: false,
+  },
+  DUMMY_OPTION_2: <FormFieldDefinition>{
+    key: 'sumaris.option.dummy2',
+    label: 'ACCOUNT.SETTINGS.DUMMY_2',
+    type: 'boolean',
+    defaultValue: false,
+  },
+  DUMMY_OPTION_3: <FormFieldDefinition>{
+    key: 'sumaris.option.dummy3',
+    label: 'ACCOUNT.SETTINGS.DUMMY_3',
+    type: 'boolean',
+    defaultValue: false,
+  },
+  DUMMY_OPTION_4: <FormFieldDefinition>{
+    key: 'sumaris.option.dummy4',
+    label: 'ACCOUNT.SETTINGS.DUMMY_4',
+    type: 'boolean',
+    defaultValue: false,
+  },
+  DUMMY_OPTION_5: <FormFieldDefinition>{
+    key: 'sumaris.option.dummy5',
+    label: 'ACCOUNT.SETTINGS.DUMMY_5',
+    type: 'boolean',
+    defaultValue: false,
+  },
+
+  DUMMY_OPTION_6: <FormFieldDefinition>{
+    key: 'sumaris.option.dummy6',
+    label: 'ACCOUNT.SETTINGS.DUMMY_6',
+    type: 'enum',
+    values: [
+      {
+        key: 'a',
+        value: 'Value A',
+      },
+      {
+        key: 'b',
+        value: 'Value B',
+      },
+      {
+        key: 'c',
+        value: 'Value C',
+      },
+    ],
+    defaultValue: null,
+  },
+
+  DUMMY_OPTION_7: <FormFieldDefinition>{
+    key: 'sumaris.option.dummy7',
+    label: 'ACCOUNT.SETTINGS.DUMMY_7',
+    type: 'enums',
+    values: [
+      {
+        key: 'a',
+        value: 'Value A',
+      },
+      {
+        key: 'b',
+        value: 'Value B',
+      },
+      {
+        key: 'c',
+        value: 'Value C',
+      },
+    ],
+    defaultValue: null,
+  },
+});

package/src/app/core/services/validator/account.validator.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { UntypedFormBuilder } from '@angular/forms';
+import { Account } from '../model/account.model';
+import { AccountService } from '../account.service';
+import { UserSettingsValidatorService } from './user-settings.validator';
+import { PersonValidatorOptions, PersonValidatorService } from '../../../admin/services/validator/person.validator';
+import { TranslateService } from '@ngx-translate/core';
+
+export interface AccountValidatorOptions extends PersonValidatorOptions {
+  withSettings?: boolean;
+  withTokens?: boolean;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AccountValidatorService<
+  T extends Account = Account,
+  O extends AccountValidatorOptions = AccountValidatorOptions,
+> extends PersonValidatorService<T, O> {
+  constructor(
+    protected formBuilder: UntypedFormBuilder,
+    protected translate: TranslateService,
+    protected accountService: AccountService,
+    protected userSettingsValidatorService: UserSettingsValidatorService
+  ) {
+    super(formBuilder, translate, accountService);
+  }
+
+  getFormGroupConfig(data?: T, opts?: O): { [key: string]: any[] } {
+    opts = this.fillDefaultOptions(opts);
+
+    const formConfig = super.getFormGroupConfig(data, opts);
+
+    if (opts.withSettings) {
+      formConfig.settings = this.userSettingsValidatorService.getFormGroup(data?.settings);
+    }
+    if (opts.withTokens) {
+      formConfig.tokens = [data?.tokens || null];
+    }
+
+    return formConfig;
+  }
+
+  protected fillDefaultOptions(opts?: O): O {
+    return {
+      withSettings: true,
+      withTokens: true,
+      ...super.fillDefaultOptions(opts),
+    };
+  }
+}

package/src/app/core/services/validator/base.validator.class.ts

@@ -0,0 +1,51 @@
+import { ValidatorService } from '@e-is/ngx-material-table';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { IValidatorService } from '../../../shared/services/validator-service.class';
+import { Directive } from '@angular/core';
+import { AppFormUtils } from '../../form/form.utils';
+import { changeCaseToUnderscore } from '../../../shared/functions';
+import { TranslateService } from '@ngx-translate/core';
+import { FormErrors } from '../../../shared/forms';
+
+@Directive()
+export abstract class AppValidatorService<T = any, O = any> extends ValidatorService implements IValidatorService<T> {
+  protected constructor(
+    protected formBuilder: UntypedFormBuilder,
+    protected translate?: TranslateService
+  ) {
+    super();
+  }
+
+  getRowValidator(): UntypedFormGroup {
+    return this.getFormGroup();
+  }
+
+  getFormGroup(data?: T, opts?: O): UntypedFormGroup {
+    return this.formBuilder.group(this.getFormGroupConfig(data));
+  }
+
+  getFormGroupConfig(data?: T, opts?: O): { [key: string]: any[] } {
+    return {};
+  }
+
+  getI18nFormErrors(control: AbstractControl): string[] {
+    const errors = AppFormUtils.getFormErrors(control);
+    return this.getI18nErrors(errors);
+  }
+
+  getI18nErrors(errors: FormErrors): string[] {
+    return Object.keys(errors || {}).map((errorKey) => this.getI18nError(errorKey, errors[errorKey]));
+  }
+
+  protected getI18nError(errorKey: string, errorContent?: any): string {
+    const i18nKey = 'ERROR.FIELD_' + changeCaseToUnderscore(errorKey).toUpperCase();
+    const i18nMessage = this.translate.instant(i18nKey, errorContent);
+    if (i18nKey !== i18nMessage) return i18nMessage;
+    if (typeof errorContent === 'string') return errorContent;
+
+    // Not translated: show error
+    console.error(`[validator] Cannot translate error key '${errorKey}'. Please override getI18nError() in your validator`);
+
+    return changeCaseToUnderscore(errorKey);
+  }
+}

package/src/app/core/services/validator/local-settings.validator.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, Validators } from '@angular/forms';
+import { LocalSettings } from '../model/settings.model';
+import { SharedValidators } from '../../../shared/validator/validators';
+import { NetworkService } from '../network.service';
+import { AppValidatorService } from './base.validator.class';
+import { toBoolean } from '../../../shared/functions';
+import { PropertyValidator } from '../../form/properties/property.validator';
+import { FormFieldDefinition } from '../../../shared/form/field.model';
+
+@Injectable({ providedIn: 'root' })
+export class LocalSettingsValidatorService extends AppValidatorService<LocalSettings> {
+  constructor(
+    formBuilder: UntypedFormBuilder,
+    private propertyValidator: PropertyValidator,
+    private networkService: NetworkService
+  ) {
+    super(formBuilder);
+  }
+
+  getFormGroup(data?: LocalSettings, opts?: { definitions?: FormFieldDefinition[] }): UntypedFormGroup {
+    return this.formBuilder.group(
+      {
+        accountInheritance: [toBoolean(data?.accountInheritance, true), Validators.required],
+        locale: [data?.locale || null, Validators.required],
+        darkMode: [toBoolean(data?.darkMode, null)],
+        autoDarkMode: [toBoolean(data?.autoDarkMode, true)],
+        latLongFormat: [data?.latLongFormat || null, Validators.required],
+        usageMode: [data?.usageMode || 'DESK', Validators.required],
+        peerUrl: [data?.peerUrl || null, Validators.required],
+        properties: this.propertyValidator.getFormArray(data?.properties, opts),
+      },
+      {
+        asyncValidators: (group: UntypedFormGroup) => this.peerAlive(group.get('peerUrl')),
+      }
+    );
+  }
+
+  /* -- protected methods -- */
+
+  protected async peerAlive(peerUrlControl: AbstractControl): Promise<ValidationErrors | null> {
+    if (this.networkService.online) {
+      const alive = await this.networkService.checkPeerAlive(peerUrlControl.value);
+      // KO: add a validation error
+      if (!alive) {
+        const errors: ValidationErrors = peerUrlControl.errors || {};
+        errors['peerAlive'] = true;
+        peerUrlControl.setErrors(errors);
+        peerUrlControl.markAsTouched({ onlySelf: true });
+        // Return the error (should be apply to the parent form)
+        return { peerAlive: true };
+      }
+    }
+
+    // OK: remove the existing error on control
+    SharedValidators.clearError(peerUrlControl, 'peerAlive');
+    return null;
+  }
+}

package/src/app/core/services/validator/user-settings.validator.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { AppValidatorService } from './base.validator.class';
+import { UserSettings } from '../model/account.model';
+
+@Injectable({ providedIn: 'root' })
+export class UserSettingsValidatorService extends AppValidatorService<UserSettings> {
+  constructor(formBuilder: UntypedFormBuilder) {
+    super(formBuilder);
+  }
+
+  getFormGroup(data?: UserSettings): UntypedFormGroup {
+    return this.formBuilder.group({
+      id: [data?.id || null],
+      updateDate: [data?.updateDate || null],
+      locale: [data?.locale || null, Validators.required],
+      latLongFormat: [data?.latLongFormat || null, Validators.required],
+      content: [data?.content || null],
+      nonce: [data?.nonce || null],
+    });
+  }
+}

package/src/app/core/services/validator/user-token.validator.ts

@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { AppValidatorService } from './base.validator.class';
+
+import { UserToken } from '../model/token.model';
+import { isEmptyArray, isNotNilOrBlank, toNumber } from '../../../shared/functions';
+
+@Injectable({ providedIn: 'root' })
+export class UserTokenValidatorService extends AppValidatorService<UserToken> {
+  constructor(formBuilder: UntypedFormBuilder) {
+    super(formBuilder);
+  }
+
+  getFormGroup(data?: UserToken): UntypedFormGroup {
+    return this.formBuilder.group({
+      id: [toNumber(data?.id, null)],
+      pubkey: [data?.pubkey || null, Validators.required],
+      token: [data?.token || null],
+      name: [data?.name || null, Validators.compose([Validators.required, Validators.maxLength(100)])],
+      flags: [data?.flags || null],
+      scopes: [data?.scopes || null, UserTokenValidatorService.notEmptyArray],
+      expirationDate: [data?.expirationDate || null],
+      lastUsedDate: [data?.lastUsedDate || null],
+      creationDate: [data?.creationDate || null],
+      updateDate: [data?.updateDate || null],
+    });
+  }
+
+  updateFormGroup(formGroup: UntypedFormGroup, existingNames: string[]) {
+    formGroup.controls.name.validator = Validators.compose([
+      Validators.required,
+      Validators.maxLength(100),
+      UserTokenValidatorService.notAlreadyExists(existingNames),
+    ]);
+  }
+
+  static notAlreadyExists(existingNames: string[]): ValidatorFn {
+    return (control) => {
+      const value = control.value;
+      if (isNotNilOrBlank(value) && existingNames?.includes(value)) {
+        return { notAlreadyExists: true };
+      }
+      return null;
+    };
+  }
+
+  static notEmptyArray(control: UntypedFormControl): ValidationErrors | null {
+    const value = control.value;
+    if (isEmptyArray(value)) {
+      return { notEmptyArray: true };
+    }
+    return null;
+  }
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { SettingsPage } from './settings.page';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppFormButtonsBarModule } from '../form/buttons/form-buttons-bar.module';
+import { AppPropertiesFormModule } from '../form/properties/properties.module';
+import { RxPush } from '@rx-angular/template/push';
+
+@NgModule({
+  imports: [SharedModule, AppFormButtonsBarModule, TranslateModule.forChild(), AppPropertiesFormModule, RxPush],
+
+  declarations: [SettingsPage],
+  exports: [TranslateModule, SettingsPage],
+})
+export class AppSettingsPageModule {}

package/src/app/core/settings/settings.page.html

@@ -0,0 +1,300 @@
+@let hasValidate = !loading && (dirty || saving);
+<app-toolbar
+  [title]="'SETTINGS.TITLE' | translate"
+  color="primary"
+  [hasValidate]="hasValidate"
+  [hasClose]="!hasValidate"
+  (onValidate)="save($event)"
+  (onClose)="close($event)"
+>
+  <ion-buttons slot="end">
+    <!-- options menu -->
+    <ion-button [matMenuTriggerFor]="optionsMenu" [disabled]="loading || saving">
+      <mat-icon slot="icon-only">more_vert</mat-icon>
+    </ion-button>
+  </ion-buttons>
+</app-toolbar>
+
+<!-- Options menu -->
+<mat-menu #optionsMenu="matMenu">
+  <!-- Clear cache -->
+  <button mat-menu-item [disabled]="saving" (click)="clearCache($event)">
+    <mat-icon><ion-icon name="trash-outline"></ion-icon></mat-icon>
+    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>
+  </button>
+
+  <!-- Reset -->
+  <button mat-menu-item [disabled]="saving || !dirty" (click)="cancel($event)">
+    <mat-icon><ion-icon name="refresh"></ion-icon></mat-icon>
+    <mat-label translate>COMMON.BTN_RESET</mat-label>
+  </button>
+
+  <!-- additional items -->
+  @if (!loading) {
+    @for (item of menuItems; track item) {
+      @if (item.path) {
+        <a mat-menu-item class="{{ item.cssClass }} {{ item.color }}" (click)="executeAction($event, item)">
+          <mat-icon *ngIf="item.icon"><ion-icon [name]="item.icon"></ion-icon></mat-icon>
+          <mat-icon *ngIf="item.matIcon">{{ item.matIcon }}</mat-icon>
+          <mat-label translate>{{ item.title }}</mat-label>
+        </a>
+      } @else if (!item.action) {
+        <!-- divider -->
+        <mat-divider class="{{ item.cssClass }} {{ item.color }}">
+          <mat-label translate>{{ item.title }}</mat-label>
+        </mat-divider>
+      }
+    }
+  }
+
+  <!-- debug -->
+  @if (isAdmin) {
+    <mat-divider></mat-divider>
+
+    <button
+      mat-menu-item
+      #menuTrigger="matMenuTrigger"
+      (mouseenter)="menuTrigger.openMenu()"
+      [matMenuTriggerFor]="debugMenu"
+    >
+      <mat-icon><ion-icon name="bug"></ion-icon></mat-icon>
+      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>
+    </button>
+
+    <mat-menu #debugMenu="matMenu">
+      <!-- enable debug -->
+      <button mat-menu-item (click)="devToggleDebug()">
+        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
+        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>
+      </button>
+
+      <!-- show option key-->
+      <button mat-menu-item (click)="toggleShowOptionKeys()">
+        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
+        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>
+      </button>
+    </mat-menu>
+  }
+</mat-menu>
+
+<ion-content>
+  <form [formGroup]="form" novalidate (ngSubmit)="save($event)" class="form-container">
+    <ion-grid class="ion-no-padding">
+      <ion-row>
+        <!-- left  margin -->
+        <ion-col size="0" size-lg="1" size-xl="2">&nbsp;</ion-col>
+
+        <ion-col class="ion-padding">
+          <!-- error -->
+          <ion-item *ngIf="errorSubject | async; let error" lines="none">
+            <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+            <ion-label color="danger" class="error" [innerHTML]="error | translate"></ion-label>
+          </ion-item>
+
+          <ion-list-header class="hidden-xs hidden-xxs" translate>SETTINGS.DESCRIPTION</ion-list-header>
+
+          <ion-list [inset]="mobile" [class.cdk-visually-hidden]="!isLogin">
+            <ion-item lines="none">
+              <!-- account inheritance (desktop) -->
+              @if (!mobile) {
+                <mat-form-field>
+                  <input matInput hidden formControlName="accountInheritance" type="text" />
+
+                  <!-- check box (if desktop) -->
+                  <mat-checkbox (change)="setAccountInheritance($event.checked)" [checked]="accountInheritance">
+                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>
+                  </mat-checkbox>
+
+                  <mat-error *ngIf="form.controls.accountInheritance.hasError('required')" translate>
+                    ERROR.FIELD_REQUIRED
+                  </mat-error>
+                </mat-form-field>
+              } @else {
+                <!-- account inheritance (if mobile) -->
+                <mat-form-field>
+                  <input matInput hidden formControlName="accountInheritance" type="text" />
+
+                  <!-- slide toggle  -->
+                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>
+                  <mat-slide-toggle
+                    matSuffix
+                    (change)="setAccountInheritance($event.checked)"
+                    [checked]="accountInheritance"
+                  ></mat-slide-toggle>
+                  <mat-error *ngIf="form.controls.accountInheritance.hasError('required')" translate>
+                    ERROR.FIELD_REQUIRED
+                  </mat-error>
+                </mat-form-field>
+              }
+            </ion-item>
+
+            <!-- help on account -->
+            @if (accountInheritance) {
+              <ion-item [button]="true" lines="none" (click)="openAccountPage()">
+                @if (!mobile) {
+                  <ion-icon slot="start" name="help-circle-outline"></ion-icon>
+                }
+                <ion-label>
+                  <small [innerHTML]="'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate"></small>
+                </ion-label>
+                <ion-text color="tertiary" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>
+                <ion-icon slot="end" color="tertiary" name="chevron-forward"></ion-icon>
+              </ion-item>
+            }
+          </ion-list>
+
+          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>
+
+          <ion-list [inset]="mobile">
+            <!-- locale -->
+            <ion-item lines="none">
+              <mat-form-field>
+                <ion-icon matPrefix name="language"></ion-icon>
+                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>
+                <mat-select formControlName="locale" required>
+                  <mat-option *ngFor="let item of locales" [value]="item.key">
+                    {{ item.value }}
+                  </mat-option>
+                </mat-select>
+                <mat-error *ngIf="form.controls.locale.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+              </mat-form-field>
+            </ion-item>
+
+            <!-- dark mode (if allow by the environment token) -->
+            @if (settings.allowDarkMode) {
+              <ion-item lines="none">
+                <mat-form-field>
+                  <ion-icon matPrefix name="moon"></ion-icon>
+
+                  <input matInput hidden formControlName="darkMode" type="text" />
+
+                  <!-- slide toggle  -->
+                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>
+                  <mat-slide-toggle
+                    matSuffix
+                    (change)="toggleDarkMode($event.checked)"
+                    [checked]="darkMode"
+                  ></mat-slide-toggle>
+                </mat-form-field>
+              </ion-item>
+            }
+          </ion-list>
+
+          <!-- Network entry -->
+          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>
+
+          <ion-list [inset]="mobile">
+            <!-- Peer address -->
+            <ion-item lines="none">
+              <mat-form-field>
+                <ion-icon matPrefix name="cloud"></ion-icon>
+
+                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>
+                <input matInput type="text" formControlName="peerUrl" required />
+
+                <button
+                  mat-icon-button
+                  type="button"
+                  matSuffix
+                  (click)="showSelectPeerModal()"
+                  tabindex="-1"
+                  [title]="'SETTINGS.BTN_CHANGE_PEER' | translate"
+                >
+                  <mat-icon>search</mat-icon>
+                </button>
+
+                <mat-error *ngIf="form.controls.peerUrl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+                <mat-error *ngIf="form.controls.peerUrl.hasError('peerAlive')" translate>
+                  SETTINGS.ERROR.PEER_NOT_REACHABLE
+                </mat-error>
+                <mat-error *ngIf="form.controls.peerUrl.hasError('peerNotCompatible')" translate>
+                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE
+                </mat-error>
+              </mat-form-field>
+            </ion-item>
+
+            <!-- Offline mode (if mobile) -->
+            @if (mobile) {
+              <ion-item lines="none">
+                <mat-form-field>
+                  <input matInput hidden formControlName="accountInheritance" type="text" />
+
+                  <!-- slide toggle  -->
+                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>
+                  <mat-slide-toggle
+                    matSuffix
+                    (change)="setForceOffline($event.checked)"
+                    [checked]="network.offline"
+                  ></mat-slide-toggle>
+                </mat-form-field>
+              </ion-item>
+            }
+          </ion-list>
+
+          <!-- Data entry -->
+          <ion-list-header>
+            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>
+          </ion-list-header>
+
+          <ion-list [inset]="mobile">
+            <!-- Usage mode -->
+            <ion-item lines="none">
+              <mat-form-field>
+                <ion-icon matPrefix name="id-card"></ion-icon>
+                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>
+                <mat-select formControlName="usageMode" required>
+                  <mat-option *ngFor="let item of usageModes" [value]="item">
+                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}
+                  </mat-option>
+                </mat-select>
+                <mat-error *ngIf="form.controls.usageMode.hasError('required')" translate>
+                  ERROR.FIELD_REQUIRED
+                </mat-error>
+              </mat-form-field>
+            </ion-item>
+
+            <!-- lat/long format-->
+            <ion-item lines="none">
+              <mat-form-field>
+                <ion-icon matPrefix name="locate"></ion-icon>
+                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>
+                <mat-select formControlName="latLongFormat" required>
+                  <mat-option *ngFor="let item of latLongFormats" [value]="item">
+                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}
+                  </mat-option>
+                </mat-select>
+                <mat-error *ngIf="form.controls.latLongFormat.hasError('required')" translate>
+                  ERROR.FIELD_REQUIRED
+                </mat-error>
+              </mat-form-field>
+            </ion-item>
+          </ion-list>
+
+          <!-- fields options -->
+          <app-properties-form
+            #propertiesForm
+            formArrayName="properties"
+            [definitions]="propertyDefinitions"
+            [options]="{ allowEmptyArray: true }"
+            [mobile]="mobile"
+            [showHintKey]="showOptionKeys"
+            addButtonText="COMMON.BTN_SHOW_MORE"
+            addButtonTitle="SETTINGS.BTN_SHOW_MORE_HELP"
+            [debug]="debug"
+          ></app-properties-form>
+        </ion-col>
+
+        <!-- right margin -->
+        <ion-col size="0" size-lg="1" size-xl="2">&nbsp;</ion-col>
+      </ion-row>
+    </ion-grid>
+  </form>
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+  <app-form-buttons-bar
+    (onCancel)="cancel()"
+    (onSave)="save($event)"
+    [disabled]="!form.dirty || saving"
+  ></app-form-buttons-bar>
+</ion-footer>