fix(platform): fix form generator radio button alignment

closes [#11003](#11003) - fixing segment button value conflict issue
SAP · Nov 4, 2024 · b5aeb7f · b5aeb7f
1 parent 9a2d547
commit b5aeb7f
Show file tree

Hide file tree

Showing 6 changed files with 406 additions and 413 deletions.
diff --git a/libs/docs/platform/form-generator/examples/platform-form-generator-example.component.html b/libs/docs/platform/form-generator/examples/platform-form-generator-example.component.html
@@ -7,9 +7,27 @@
 >
 </fdp-form-generator>
 @if (formCreated) {
-    <fdp-button (click)="submitForm()" type="submit" label="Submit form"></fdp-button>
+    <fdp-button (click)="openDialog(confirmationDialog)" type="submit" label="Submit form"></fdp-button>
 }
 <p>Form created: {{ formCreated }}</p>
 @if (formValue) {
     <p>Form value: {{ formValue | json }}</p>
 }
+<ng-template [fdDialogTemplate] let-dialog let-dialogConfig="dialogConfig" #confirmationDialog>
+    <fd-dialog [dialogConfig]="dialogConfig" [dialogRef]="dialog">
+        <fd-dialog-header>
+            <h1 id="fd-dialog-header-10" fd-title>The History of Pineapple</h1>
+        </fd-dialog-header>
+
+        <fd-dialog-body>
+            <fdp-form-generator
+                columnLayout="XL2-L2-M2-S1"
+                mainTitle="Default Form Generator example"
+                [formItems]="questions2"
+                (formSubmitted)="onFormSubmitted($event)"
+                (formCreated)="onFormCreated()"
+            >
+            </fdp-form-generator>
+        </fd-dialog-body>
+    </fd-dialog>
+</ng-template>
diff --git a/libs/docs/platform/form-generator/examples/platform-form-generator-example.component.ts b/libs/docs/platform/form-generator/examples/platform-form-generator-example.component.ts
@@ -1,7 +1,16 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, inject, TemplateRef, ViewChild } from '@angular/core';
 import { Validators } from '@angular/forms';
 
 import { JsonPipe } from '@angular/common';
+import {
+    ButtonBarComponent,
+    DialogBodyComponent,
+    DialogComponent,
+    DialogFooterComponent,
+    DialogHeaderComponent,
+    DialogService,
+    TitleComponent
+} from '@fundamental-ngx/core';
 import { FdDate, provideDateTimeFormats } from '@fundamental-ngx/core/datetime';
 import { PlatformButtonModule } from '@fundamental-ngx/platform/button';
 import {
@@ -18,6 +27,16 @@ export const dummyAwaitablePromise = (timeout = 200): Promise<boolean> =>
         }, timeout);
     });
 
+enum BuildTool {
+    Docker = 'Docker',
+    Golang = 'Golang',
+    Gradle = 'Gradle',
+    Maven = 'Maven',
+    Mta = 'Mta',
+    Npm = 'Npm',
+    Python = 'Python'
+}
+
 @Component({
     selector: 'fdp-platform-form-generator-example',
     templateUrl: './platform-form-generator-example.component.html',
@@ -27,10 +46,21 @@ export const dummyAwaitablePromise = (timeout = 200): Promise<boolean> =>
         provideDateTimeFormats()
     ],
     standalone: true,
-    imports: [PlatformFormGeneratorModule, PlatformButtonModule, JsonPipe]
+    imports: [
+        PlatformFormGeneratorModule,
+        PlatformButtonModule,
+        JsonPipe,
+        DialogComponent,
+        ButtonBarComponent,
+        TitleComponent,
+        DialogHeaderComponent,
+        DialogBodyComponent,
+        DialogFooterComponent
+    ]
 })
 export class PlatformFormGeneratorExampleComponent {
     @ViewChild(FormGeneratorComponent) formGenerator: FormGeneratorComponent;
+    private _dialogService = inject(DialogService);
 
     loading = false;
 
@@ -228,10 +258,54 @@ export class PlatformFormGeneratorExampleComponent {
         }
     ];
 
+    questions2: DynamicFormItem<{}, any>[] = [
+        {
+            type: 'header',
+            name: 'buildToolHeader',
+            message: '',
+            guiOptions: {
+                additionalData: {
+                    header: 'Which build tool do you currently use?',
+                    ignoreTopMargin: true
+                }
+            }
+        },
+        {
+            type: 'radio',
+            name: 'buildTool',
+            message: '',
+            guiOptions: {
+                inline: true
+            },
+            choices: [
+                BuildTool.Docker,
+                BuildTool.Golang,
+                BuildTool.Gradle,
+                BuildTool.Maven,
+                BuildTool.Mta,
+                BuildTool.Npm,
+                BuildTool.Python
+            ].map((tool) => ({
+                label: tool.charAt(0).toUpperCase() + tool.slice(1).toLocaleLowerCase(),
+                value: tool
+            })),
+            validators: [Validators.required]
+        }
+    ];
+
     onFormCreated(): void {
         this.formCreated = true;
     }
 
+    openDialog(dialog: TemplateRef<any>): void {
+        const dialogRef = this._dialogService.open(dialog, {
+            responsivePadding: true,
+            ariaLabelledBy: 'fd-dialog-header-10',
+            ariaDescribedBy: 'fd-dialog-body-10',
+            focusTrapped: true
+        });
+    }
+
     async onFormSubmitted(value: DynamicFormValue): Promise<void> {
         console.log(value);