119602: Rework convertion & form format

src/app/accessibility/accessibility-settings.service.ts

@@ -32,6 +32,11 @@ export enum AccessibilitySetting {
 
 export type AccessibilitySettings = { [key in AccessibilitySetting]?: string };
 
+export interface AccessibilitySettingsFormValues {
+  notificationTimeOut: string,
+  liveRegionTimeOut: string,
+}
+
 /**
  * Service handling the retrieval and configuration of accessibility settings.
  *
@@ -210,20 +215,6 @@ export class AccessibilitySettingsService {
     }
   }
 
-  /**
-   * Returns the input type that a form should use for the provided {@link AccessibilitySetting}
-   */
-  getInputType(setting: AccessibilitySetting): string {
-    switch (setting) {
-      case AccessibilitySetting.NotificationTimeOut:
-        return 'number';
-      case AccessibilitySetting.LiveRegionTimeOut:
-        return 'number';
-      default:
-        return 'text';
-    }
-  }
-
   getPlaceholder(setting: AccessibilitySetting): string {
     switch (setting) {
       case AccessibilitySetting.NotificationTimeOut:
@@ -236,88 +227,23 @@ export class AccessibilitySettingsService {
   }
 
   /**
-   * Returns the converter method for the provided setting.
+   * Convert values in the provided accessibility settings object to values ready to be stored.
-   * The converter methods are used to convert the value entered by the user in the form to the format that is used
-   * to store the setting value.
    */
-  getFormValueToStoredValueConverterMethod(setting: AccessibilitySetting): (value: string) => string {
+  convertFormValuesToStoredValues(settings: AccessibilitySettingsFormValues): AccessibilitySettings {
-    switch (setting) {
+    return {
-      case AccessibilitySetting.NotificationTimeOut:
+      'notificationTimeOut': secondsToMilliseconds(settings.notificationTimeOut),
-        return secondsToMilliseconds;
+      'liveRegionTimeOut': secondsToMilliseconds(settings.liveRegionTimeOut),
-      case AccessibilitySetting.LiveRegionTimeOut:
+    };
-        return secondsToMilliseconds;
-      default:
-        return null;
-    }
   }
 
   /**
-   * Convert the user-configured value to the format used to store the setting value.
+   * Convert values in the provided accessibility settings object to values ready to show in the form.
-   * Returns the provided value without conversion if no converter is configured for the provided setting.
    */
-  convertFormValueToStoredValue(setting: AccessibilitySetting, value: string): string {
+  convertStoredValuesToFormValues(settings: AccessibilitySettings): AccessibilitySettingsFormValues {
-    const converterMethod = this.getFormValueToStoredValueConverterMethod(setting);
+    return {
-
+      notificationTimeOut: millisecondsToSeconds(settings.notificationTimeOut),
-    if (hasValue(converterMethod)) {
+      liveRegionTimeOut: millisecondsToSeconds(settings.liveRegionTimeOut),
-      return converterMethod(value);
+    };
-    } else {
-      return value;
-    }
-  }
-
-  /**
-   * Convert all values in the provided accessibility settings object to values ready to be stored.
-   */
-  convertAllFormValuesToStoredValues(settings: AccessibilitySettings): AccessibilitySettings {
-    const convertedSettings = {};
-
-    this.getAllAccessibilitySettingKeys().filter(setting => setting in settings).forEach(setting =>
-      convertedSettings[setting] = this.convertFormValueToStoredValue(setting, settings[setting])
-    );
-
-    return convertedSettings;
-  }
-
-  /**
-   * Returns the converter method for the provided setting.
-   * The converter methods are used to convert the value as it is stored to the format visible by the user in the form.
-   */
-  getStoredValueToFormValueConverterMethod(setting: AccessibilitySetting): (value: string) => string {
-    switch (setting) {
-      case AccessibilitySetting.NotificationTimeOut:
-        return millisecondsToSeconds;
-      case AccessibilitySetting.LiveRegionTimeOut:
-        return millisecondsToSeconds;
-      default:
-        return null;
-    }
-  }
-
-  /**
-   * Convert the stored value to the format used in the form.
-   * Returns the provided value without conversion if no converter is configured for the provided setting.
-   */
-  convertStoredValueToFormValue(setting: AccessibilitySetting, value: string): string {
-    const converterMethod = this.getStoredValueToFormValueConverterMethod(setting);
-
-    if (hasValue(converterMethod)) {
-      return converterMethod(value);
-    } else {
-      return value;
-    }
-  }
-
-  /**
-   * Convert all values in the provided accessibility settings object to values ready to show in the form.
-   */
-  convertAllStoredValuesToFormValues(settings: AccessibilitySettings): AccessibilitySettings {
-    const convertedSettings = {};
-
-    this.getAllAccessibilitySettingKeys().filter(setting => setting in settings).forEach(setting =>
-      convertedSettings[setting] = this.convertStoredValueToFormValue(setting, settings[setting])
-    );
-
-    return convertedSettings;
   }
 
 }

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -2,19 +2,36 @@
   <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
 
   <form>
-    <div *ngFor="let setting of accessibilitySettingsOptions" class="form-group row">
+    <div class="form-group row">
-      <label [for]="setting + 'Input'" class="col-sm-2 col-form-label">
+      <label [for]="'notificationTimeOutInput'" class="col-sm-2 col-form-label">
-        {{ 'info.accessibility-settings.' + setting + '.label' | translate }}
+        {{ 'info.accessibility-settings.notificationTimeOut.label' | translate }}
       </label>
 
       <div class="col-sm-10">
-        <input [type]="getInputType(setting)" [id]="setting + 'Input'" class="form-control"
+        <input [type]="'number'" [id]="'notificationTimeOutInput'" class="form-control"
-               [placeholder]="getPlaceholder(setting)"
+               [placeholder]="getPlaceholder(AccessibilitySetting.NotificationTimeOut)"
-               [(ngModel)]="formValues[setting]" [ngModelOptions]="{ standalone: true }"
+               [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
-               [attr.aria-describedby]="setting + 'Hint'">
+               [attr.aria-describedby]="'notificationTimeOutHint'">
 
-        <small [id]="setting + 'Hint'" class="form-text text-muted">
+        <small [id]="'notificationTimeOutHint'" class="form-text text-muted">
-          {{ 'info.accessibility-settings.' + setting + '.hint' | translate }}
+          {{ 'info.accessibility-settings.notificationTimeOut.hint' | translate }}
+        </small>
+      </div>
+    </div>
+
+    <div class="form-group row">
+      <label [for]="'liveRegionTimeOutInput'" class="col-sm-2 col-form-label">
+        {{ 'info.accessibility-settings.liveRegionTimeOut.label' | translate }}
+      </label>
+
+      <div class="col-sm-10">
+        <input [type]="'number'" [id]="'liveRegionTimeOutInput'" class="form-control"
+               [placeholder]="getPlaceholder(AccessibilitySetting.LiveRegionTimeOut)"
+               [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }"
+               [attr.aria-describedby]="'liveRegionTimeOutHint'">
+
+        <small [id]="'liveRegionTimeOutHint'" class="form-text text-muted">
+          {{ 'info.accessibility-settings.liveRegionTimeOut.hint' | translate }}
         </small>
       </div>
     </div>

src/app/info/accessibility-settings/accessibility-settings.component.ts

@@ -3,7 +3,7 @@ import { AuthService } from '../../core/auth/auth.service';
 import {
   AccessibilitySetting,
   AccessibilitySettingsService,
-  AccessibilitySettings
+  AccessibilitySettingsFormValues,
 } from '../../accessibility/accessibility-settings.service';
 import { take } from 'rxjs';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -15,9 +15,10 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class AccessibilitySettingsComponent implements OnInit {
 
-  protected accessibilitySettingsOptions: AccessibilitySetting[];
+  // Re-export for use in template
+  protected readonly AccessibilitySetting = AccessibilitySetting;
 
-  protected formValues: AccessibilitySettings = { };
+  protected formValues: AccessibilitySettingsFormValues;
 
   constructor(
     protected authService: AuthService,
@@ -28,14 +29,9 @@ export class AccessibilitySettingsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.accessibilitySettingsOptions = this.settingsService.getAllAccessibilitySettingKeys();
     this.updateFormValues();
   }
 
-  getInputType(setting: AccessibilitySetting): string {
-    return this.settingsService.getInputType(setting);
-  }
-
   getPlaceholder(setting: AccessibilitySetting): string {
     return this.settingsService.getPlaceholder(setting);
   }
@@ -45,7 +41,7 @@ export class AccessibilitySettingsComponent implements OnInit {
    */
   saveSettings() {
     const formValues = this.formValues;
-    const convertedValues = this.settingsService.convertAllFormValuesToStoredValues(formValues);
+    const convertedValues = this.settingsService.convertFormValuesToStoredValues(formValues);
     this.settingsService.setSettings(convertedValues).pipe(take(1)).subscribe(location => {
       this.notificationsService.success(null, this.translateService.instant('info.accessibility-settings.save-notification.' + location));
     });
@@ -58,7 +54,7 @@ export class AccessibilitySettingsComponent implements OnInit {
    */
   updateFormValues() {
     this.settingsService.getAll().pipe(take(1)).subscribe(storedSettings => {
-      this.formValues = this.settingsService.convertAllStoredValuesToFormValues(storedSettings);
+      this.formValues = this.settingsService.convertStoredValuesToFormValues(storedSettings);
     });
   }