fix(platform): update settings generator docs and component to update…

… theme/language automatically, add readonly property to form generator (#12739) * fix(platform): update settings generator docs and component to update theme/language automatically, add readonly property to form generator * fix: do not use autocomplete="off" for all inputs * fix: simplify readonly function
SAP · Dec 3, 2024 · d00d5d2 · d00d5d2
1 parent 1337c31
commit d00d5d2
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 60 deletions.
diff --git a/...tform/settings-generator/examples/default/settings-generator-default-example.component.ts b/...tform/settings-generator/examples/default/settings-generator-default-example.component.ts
@@ -1,16 +1,9 @@
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Injectable,
-    TemplateRef,
-    ViewChild
-} from '@angular/core';
+import { AfterViewInit, Component, Inject, Injectable, TemplateRef, ViewChild } from '@angular/core';
 import { Validators } from '@angular/forms';
 import { BarModule } from '@fundamental-ngx/core/bar';
 import { ThemingService } from '@fundamental-ngx/core/theming';
 import { TitleComponent } from '@fundamental-ngx/core/title';
+import { FD_LANGUAGE, FD_LANGUAGE_ENGLISH, FD_LANGUAGE_GERMAN, FdLanguage } from '@fundamental-ngx/i18n';
 import { ListAvatarConfig } from '@fundamental-ngx/platform/list';
 import {
     SettingsGeneratorComponent,
@@ -74,7 +67,6 @@ class ExampleUserService {
 @Component({
     selector: 'fdp-settings-generator-default-example',
     templateUrl: './settings-generator-default-example.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [ExampleUserService],
     standalone: true,
     imports: [TitleComponent, SettingsGeneratorModule, BarModule]
@@ -96,8 +88,8 @@ export class SettingsGeneratorDefaultExampleComponent implements AfterViewInit {
 
     constructor(
         private readonly _theming: ThemingService,
-        private readonly _cdr: ChangeDetectorRef,
-        private readonly _userService: ExampleUserService
+        private readonly _userService: ExampleUserService,
+        @Inject(FD_LANGUAGE) private _langSubject$: BehaviorSubject<FdLanguage>
     ) {}
 
     ngAfterViewInit(): void {
@@ -165,6 +157,7 @@ export class SettingsGeneratorDefaultExampleComponent implements AfterViewInit {
                                     message: 'Email',
                                     type: 'input',
                                     controlType: 'email',
+                                    readonly: true,
                                     default: this._userService.getUser().pipe(map((res) => res.email)),
                                     validators: [Validators.required, Validators.email],
                                     guiOptions: {
@@ -182,6 +175,7 @@ export class SettingsGeneratorDefaultExampleComponent implements AfterViewInit {
                                     name: 'name',
                                     message: 'Full name',
                                     type: 'input',
+                                    placeholder: 'Enter your Full Name',
                                     controlType: 'text',
                                     default: this._userService.getUser().pipe(map((res) => res.name)),
                                     guiOptions: {
@@ -254,7 +248,17 @@ export class SettingsGeneratorDefaultExampleComponent implements AfterViewInit {
                                     name: 'language',
                                     message: 'Language',
                                     choices: this._userService.getLanguages(),
-                                    default: this._userService.getUser().pipe(map((res) => res.language))
+                                    default: this._userService.getUser().pipe(map((res) => res.language)),
+                                    onchange: (fieldValue: FdLanguage) => {
+                                        switch (fieldValue.toString()) {
+                                            case 'en':
+                                                this._langSubject$.next(FD_LANGUAGE_ENGLISH);
+                                                break;
+                                            case 'de':
+                                                this._langSubject$.next(FD_LANGUAGE_GERMAN);
+                                                break;
+                                        }
+                                    }
                                 }
                             ]
                         }
@@ -302,7 +306,6 @@ export class SettingsGeneratorDefaultExampleComponent implements AfterViewInit {
                 }
             ]
         };
-        this._cdr.detectChanges();
     }
 
     submit(): void {

diff --git a/libs/docs/platform/settings-generator/settings-generator-docs.component.ts b/libs/docs/platform/settings-generator/settings-generator-docs.component.ts
@@ -39,7 +39,7 @@ import { SettingsGeneratorMessagePopoverExampleComponent } from './examples/mess
     ]
 })
 export class SettingsGeneratorDocsComponent {
-    defaultConfigExample = getAssetFromModuleAssets('default-config.ts');
+    defaultConfigExample = getAssetFromModuleAssets('default/default-config.ts');
     settingsGeneratorDefaultExample: ExampleFile[] = [
         getExampleFile('default/settings-generator-default-example.component.html'),
         getExampleFile('default/settings-generator-default-example.component.ts', {

diff --git a/libs/i18n/src/lib/models/fd-language-key-identifier.ts b/libs/i18n/src/lib/models/fd-language-key-identifier.ts
@@ -282,6 +282,8 @@ export type FdLanguageKeyIdentifier =
     | 'platformSearchField.synchronizeButtonTitle'
     | 'platformSearchField.searchSuggestionMessage'
     | 'platformSearchField.searchSuggestionNavigateMessage'
+    | 'platformSettingsGenerator.settingsLabel'
+    | 'platformSettingsGenerator.searchLabel'
     | 'platformSwitch.ariaLabel'
     | 'platformSmartFilterBar.searchPlaceholder'
     | 'platformSmartFilterBar.submitButtonLabel'

diff --git a/libs/i18n/src/lib/translations/translations.properties b/libs/i18n/src/lib/translations/translations.properties
@@ -556,6 +556,10 @@ platformSearchField.synchronizeButtonTitle = Synchronize
 platformSearchField.searchSuggestionMessage = {count} suggestions found.
 #XMSG: Message with keyboard instructions for navigation
 platformSearchField.searchSuggestionNavigateMessage = use up and down arrows to navigate
+#XFLD: Text above the search input on the settings generator page
+platformSettingsGenerator.settingsLabel = Settings
+#XFLD: Text for the search input placeholder
+platformSettingsGenerator.searchLabel = Search
 #XACT: Text for the ARIA label attribute of Platform Switch
 platformSwitch.ariaLabel = Switch input
 #XFLD: Text for the placeholder of Platform Smart Filter Bar input field

diff --git a/libs/i18n/src/lib/translations/translations.ts b/libs/i18n/src/lib/translations/translations.ts
@@ -364,6 +364,10 @@ export default {
         searchSuggestionMessage: '{count} suggestions found.',
         searchSuggestionNavigateMessage: 'use up and down arrows to navigate'
     },
+    platformSettingsGenerator: {
+        settingsLabel: 'Settings',
+        searchLabel: 'Search'
+    },
     platformSwitch: {
         ariaLabel: 'Switch input'
     },

diff --git a/libs/platform/form/form-generator/base-dynamic-form-generator-control.ts b/libs/platform/form/form-generator/base-dynamic-form-generator-control.ts
@@ -65,4 +65,9 @@ export abstract class BaseDynamicFormGeneratorControl<T extends BaseDynamicFormF
         }
         return (this.formItem?.useMessageAsPlaceholder && this.formItem?.message) || '';
     }
+
+    /** @hidden */
+    get readonly(): boolean {
+        return this.formItem?.readonly ?? false;
+    }
 }
diff --git a/...nerator/controls/dynamic-form-generator-input/dynamic-form-generator-input.component.html b/...nerator/controls/dynamic-form-generator-input/dynamic-form-generator-input.component.html
@@ -7,6 +7,7 @@
                 [name]="name"
                 [type]="formItem.controlType || 'text'"
                 [formControlName]="name"
+                [readonly]="readonly"
             ></fdp-input>
         </ng-container>
     </ng-container>

diff --git a/libs/platform/form/form-generator/interfaces/dynamic-form-item.ts b/libs/platform/form/form-generator/interfaces/dynamic-form-item.ts
@@ -131,6 +131,12 @@ export interface BaseDynamicFormFieldItem<T = any> {
      */
     placeholder?: FdkAsyncProperty<string> | ((formValue?: DynamicFormValue) => FdkAsyncProperty<string>);
 
+    /**
+     * @description
+     * If true, the form item will be displayed as readonly.
+     */
+    readonly?: boolean;
+
     /**
      * @description
      * If true, will fall back to `message` property if `placeholder` was not provided.
@@ -339,6 +345,7 @@ type PreparedDynamicFormFieldItemFields = {
     default: any;
     placeholder?: string;
     choices?: SelectItem[];
+    readonly?: boolean;
 };
 
 /**

diff --git a/...platform/settings-generator/controls/theme-selector-list/theme-selector-list.component.ts b/...platform/settings-generator/controls/theme-selector-list/theme-selector-list.component.ts
@@ -1,7 +1,16 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation, forwardRef } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Input,
+    OnInit,
+    ViewEncapsulation,
+    forwardRef,
+    inject
+} from '@angular/core';
 import { ClickedDirective } from '@fundamental-ngx/cdk/utils';
 import { ListModule } from '@fundamental-ngx/core/list';
+import { ThemingService } from '@fundamental-ngx/core/theming';
 import {
     BaseDynamicFormGeneratorControl,
     dynamicFormFieldProvider,
@@ -22,6 +31,11 @@ export class ThemeSelectorListComponent extends BaseDynamicFormGeneratorControl
     /** @hidden */
     currentTheme: string;
 
+    /** @hidden */
+    private readonly _themingService = inject(ThemingService, {
+        optional: true
+    });
+
     /** @hidden */
     ngOnInit(): void {
         this.currentTheme = this.formItem.default;
@@ -32,6 +46,7 @@ export class ThemeSelectorListComponent extends BaseDynamicFormGeneratorControl
         const control = this.form.get([this.formGroupName, this.name]);
         this.currentTheme = value;
         control?.setValue(value);
+        this._themingService?.setTheme(value);
     }
 }
 

diff --git a/...ayouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.html b/...ayouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.html
@@ -5,50 +5,72 @@
     [style.min-width]="_mobileSidebarVisible ? null : _sidebarWidth.minWidth"
     [style.max-width]="_mobileSidebarVisible ? null : _sidebarWidth.maxWidth"
 >
-    <ul fd-list [byline]="true" [navigationIndicator]="true">
-        @for (item of settings?.items; track item; let i = $index) {
-            <li (click)="_setSelectedIndex(i)" fd-list-item [selected]="i === _selectedIndex" [id]="item.id">
-                <a fd-list-link [navigated]="i === _selectedIndex">
-                    @if (item.thumbnail) {
-                        <span fd-list-thumbnail>
-                            <fdp-settings-generator-sidebar-icon
-                                [thumbnail]="item.thumbnail"
-                            ></fdp-settings-generator-sidebar-icon>
-                        </span>
-                    }
-                    <div fd-list-content>
-                        @if (item.title | fdkAsyncOrSync; as titleValue) {
-                            <div fd-list-title>{{ titleValue }}</div>
-                        } @else {
-                            <div fd-list-title>
-                                <fd-skeleton
-                                    height="16px"
-                                    type="rectangle"
-                                    width="40%"
-                                    textLines="1"
-                                    [style.margin]="'auto 0'"
-                                ></fd-skeleton>
-                            </div>
+    <div class="fdp-settings-generator__search-header">
+        <h3 fd-title class="fdp-settings-generator__title">
+            {{ 'platformSettingsGenerator.settingsLabel' | fdTranslate }}
+        </h3>
+        <!-- TODO: implement search input
+        @if (_displaySettingsSearchInput()) {
+            <fd-input-group
+                type="search"
+                glyph="search"
+                [glyphAriaLabel]="'platformSettingsGenerator.searchLabel' | fdTranslate"
+                [attr.placeholder]="'platformSettingsGenerator.searchLabel' | fdTranslate"
+                [button]="true"
+                [disabled]="false"
+                [(ngModel)]="searchTerm"
+                class="fdp-settings-generator__search-input"
+            >
+            </fd-input-group>
+        }
+        -->
+    </div>
+    <div class="fdp-settings-generator__list-container" #listElement>
+        <ul fd-list [byline]="true" [navigationIndicator]="true">
+            @for (item of settings?.items; track item; let i = $index) {
+                <li (click)="_setSelectedIndex(i)" fd-list-item [selected]="i === _selectedIndex" [id]="item.id">
+                    <a fd-list-link [navigated]="i === _selectedIndex">
+                        @if (item.thumbnail) {
+                            <span fd-list-thumbnail>
+                                <fdp-settings-generator-sidebar-icon
+                                    [thumbnail]="item.thumbnail"
+                                ></fdp-settings-generator-sidebar-icon>
+                            </span>
                         }
-                        @if (item.description) {
-                            <div fd-list-byline>
-                                @if (item.description | fdkAsyncOrSync; as descriptionValue) {
-                                    {{ descriptionValue }}
-                                } @else {
+                        <div fd-list-content>
+                            @if (item.title | fdkAsyncOrSync; as titleValue) {
+                                <div fd-list-title>{{ titleValue }}</div>
+                            } @else {
+                                <div fd-list-title>
                                     <fd-skeleton
-                                        type="text"
-                                        width="60%"
+                                        height="16px"
+                                        type="rectangle"
+                                        width="40%"
                                         textLines="1"
                                         [style.margin]="'auto 0'"
                                     ></fd-skeleton>
-                                }
-                            </div>
-                        }
-                    </div>
-                </a>
-            </li>
-        }
-    </ul>
+                                </div>
+                            }
+                            @if (item.description) {
+                                <div fd-list-byline>
+                                    @if (item.description | fdkAsyncOrSync; as descriptionValue) {
+                                        {{ descriptionValue }}
+                                    } @else {
+                                        <fd-skeleton
+                                            type="text"
+                                            width="60%"
+                                            textLines="1"
+                                            [style.margin]="'auto 0'"
+                                        ></fd-skeleton>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    </a>
+                </li>
+            }
+        </ul>
+    </div>
 </div>
 <div
     class="fdp-settings-generator__content"

diff --git a/.../layouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.ts b/.../layouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.ts
@@ -11,9 +11,13 @@ import {
     inject
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
 import { AsyncOrSyncPipe, Nullable, resizeObservable } from '@fundamental-ngx/cdk/utils';
+import { InputGroupComponent } from '@fundamental-ngx/core/input-group';
 import { ListModule } from '@fundamental-ngx/core/list';
 import { SkeletonComponent } from '@fundamental-ngx/core/skeleton';
+import { TitleComponent } from '@fundamental-ngx/core/title';
+import { FdTranslatePipe } from '@fundamental-ngx/i18n';
 import { debounceTime, distinctUntilChanged, startWith } from 'rxjs';
 import { SidebarSettingsGeneratorConfig } from '../../models/settings-config.model';
 import {
@@ -39,7 +43,11 @@ import { SettingsGeneratorSidebarIconComponent } from './settings-generator-side
         SettingsGeneratorSidebarIconComponent,
         SkeletonComponent,
         SettingsGeneratorContentComponent,
-        AsyncOrSyncPipe
+        AsyncOrSyncPipe,
+        TitleComponent,
+        FdTranslatePipe,
+        InputGroupComponent,
+        FormsModule
     ]
 })
 export class SettingsGeneratorSidebarLayoutComponent
@@ -58,6 +66,13 @@ export class SettingsGeneratorSidebarLayoutComponent
     @ViewChild('settingsGeneratorContent')
     private readonly _settingsGeneratorContent: SettingsGeneratorContentComponent;
 
+    /** @hidden */
+    @ViewChild('listElement', { read: ElementRef })
+    private _listElement: ElementRef;
+
+    /** @hidden */
+    searchTerm: string;
+
     /**
      * Selected settings section.
      */
@@ -155,6 +170,16 @@ export class SettingsGeneratorSidebarLayoutComponent
         }
     }
 
+    /** @hidden */
+    _displaySettingsSearchInput(): boolean {
+        const listEl = this._listElement;
+        if (!listEl) {
+            return false;
+        } else {
+            return !!this.searchTerm || listEl.nativeElement.scrollHeight > listEl.nativeElement.clientHeight;
+        }
+    }
+
     /** @hidden */
     _setSelectedIndex(index: number): void {
         this._selectedIndex = index;