NAS-132300 / 25.04 / Create a configurable full-page form with glossary section and help

src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe } from '@angular/common';
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, input, Input,
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { MatButtonToggleChange, MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
@@ -41,6 +41,8 @@ export class IxButtonGroupComponent implements ControlValueAccessor {
   @HostBinding('class.inlineFields')
   @Input() inlineFields = false;
 
+  formControlName = input<string>();
+
   isDisabled = false;
   value: string;
 
@@ -51,6 +53,10 @@ export class IxButtonGroupComponent implements ControlValueAccessor {
     this.controlDirective.valueAccessor = this;
   }
 
+  @HostBinding('attr.id') get id(): string {
+    return this.formControlName() || '';
+  }
+
   onChange: (value: string) => void = (): void => {};
   onTouch: () => void = (): void => {};
 

src/app/modules/forms/ix-forms/components/ix-checkbox-list/ix-checkbox-list.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe } from '@angular/common';
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input,
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -36,6 +36,7 @@ export class IxCheckboxListComponent implements ControlValueAccessor {
   @Input() options: Observable<Option[]>;
   @Input() inlineFields: boolean;
   @Input() inlineFieldFlex: string;
+  @Input() formControlName: string;
 
   isDisabled = false;
   value: (string | number)[];
@@ -62,6 +63,10 @@ export class IxCheckboxListComponent implements ControlValueAccessor {
   onChange: (value: (string | number)[]) => void = (): void => {};
   onTouch: () => void = (): void => {};
 
+  @HostBinding('attr.id') get id(): string {
+    return this.formControlName || '';
+  }
+
   writeValue(value: (string | number)[]): void {
     this.value = value;
     this.cdr.markForCheck();

src/app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component.ts

@@ -1,6 +1,6 @@
 import {
   AfterViewInit,
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, OnDestroy,
 } from '@angular/core';
 import {
   ControlValueAccessor, NgControl,
@@ -36,6 +36,7 @@ export class IxCheckboxComponent implements ControlValueAccessor, AfterViewInit,
   @Input() tooltip: string;
   @Input() warning: string;
   @Input() required: boolean;
+  @Input() formControlName: string;
 
   isDisabled = false;
   value: boolean;
@@ -49,6 +50,10 @@ export class IxCheckboxComponent implements ControlValueAccessor, AfterViewInit,
     this.controlDirective.valueAccessor = this;
   }
 
+  @HostBinding('attr.id') get id(): string {
+    return this.formControlName || '';
+  }
+
   ngAfterViewInit(): void {
     this.formService.registerControl(this.controlDirective, this.elementRef);
   }

src/app/modules/forms/ix-forms/components/ix-chips/ix-chips.component.ts

@@ -5,6 +5,7 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  HostBinding,
   Input,
   OnChanges,
   ViewChild,
@@ -62,6 +63,7 @@ export class IxChipsComponent implements OnChanges, ControlValueAccessor {
   @Input() tooltip: string;
   @Input() required: boolean;
   @Input() allowNewEntries = true;
+  @Input() formControlName: string;
   /**
    * A function that provides the options for the autocomplete dropdown.
    * This function is called when the user types into the input field,
@@ -108,6 +110,10 @@ export class IxChipsComponent implements OnChanges, ControlValueAccessor {
 
   inputReset$ = new Subject<void>();
 
+  @HostBinding('attr.id') get id(): string {
+    return this.formControlName || '';
+  }
+
   onChange: (value: string[]) => void = (): void => {};
   onTouch: () => void = (): void => {};
 

src/app/modules/forms/ix-forms/components/ix-code-editor/ix-code-editor.component.ts

@@ -1,6 +1,15 @@
 import { AsyncPipe } from '@angular/common';
 import {
-  AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, ViewChild,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnInit,
+  ViewChild,
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { MatHint } from '@angular/material/form-field';
@@ -42,6 +51,7 @@ export class IxCodeEditorComponent implements OnChanges, OnInit, AfterViewInit,
   @Input() tooltip: string;
   @Input() language: CodeEditorLanguage;
   @Input() placeholder: string;
+  @Input() formControlName: string;
 
   afterViewInit$ = new BehaviorSubject<boolean>(false);
 
@@ -68,6 +78,10 @@ export class IxCodeEditorComponent implements OnChanges, OnInit, AfterViewInit,
     this.controlDirective.valueAccessor = this;
   }
 
+  @HostBinding('attr.id') get id(): string {
+    return this.formControlName || '';
+  }
+
   ngOnChanges(changes: IxSimpleChanges<this>): void {
     if (changes.language?.currentValue) {
       this.afterViewInit$.pipe(

src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   ElementRef,
+  HostBinding,
   Input,
   OnInit,
   ViewChild,
@@ -66,6 +67,8 @@ export class IxComboboxComponent implements ControlValueAccessor, OnInit {
     this.cdr.markForCheck();
   }
 
+  @Input() formControlName: string;
+
   private comboboxProviderHandler: IxComboboxProviderManager;
 
   @ViewChild('ixInput') inputElementRef: ElementRef<HTMLInputElement>;
@@ -95,6 +98,10 @@ export class IxComboboxComponent implements ControlValueAccessor, OnInit {
     this.controlDirective.valueAccessor = this;
   }
 
+  @HostBinding('attr.id') get id(): string {
+    return this.formControlName || '';
+  }
+
   writeValue(value: string | number): void {
     this.value = value;
     if (this.value && this.options?.length) {

src/app/modules/forms/ix-forms/components/ix-explorer/ix-explorer.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  HostBinding,
   Input,
   OnChanges,
   OnInit,
@@ -67,6 +68,7 @@ export class IxExplorerComponent implements OnInit, OnChanges, ControlValueAcces
   @Input() nodeProvider: TreeNodeProvider;
   @Input() canCreateDataset = false;
   @Input() createDatasetProps: Omit<DatasetCreate, 'name'> = {};
+  @Input() formControlName: string;
 
   @ViewChild('tree', { static: true }) tree: TreeComponent;
 
@@ -89,6 +91,10 @@ export class IxExplorerComponent implements OnInit, OnChanges, ControlValueAcces
       || this.isDisabled;
   }
 
+  @HostBinding('attr.id') get id(): string {
+    return this.formControlName || '';
+  }
+
   private readonly actionMapping: IActionMapping = {
     mouse: {
       dblClick: (tree, node, $event) => {

src/app/modules/forms/ix-forms/components/ix-file-input/ix-file-input.component.ts

@@ -1,5 +1,5 @@
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input,
 } from '@angular/core';
 import {
   ControlValueAccessor, NgControl,
@@ -37,6 +37,7 @@ export class IxFileInputComponent implements ControlValueAccessor {
   @Input() acceptedFiles = '*.*';
   @Input() multiple: boolean;
   @Input() required: boolean;
+  @Input() formControlName: string;
 
   value: FileList;
   isDisabled = false;
@@ -52,6 +53,10 @@ export class IxFileInputComponent implements ControlValueAccessor {
     this.controlDirective.valueAccessor = this;
   }
 
+  @HostBinding('attr.id') get id(): string {
+    return this.formControlName || '';
+  }
+
   onChanged(value: FileList): void {
     this.value = value;
     this.onChange([...value]);

src/app/modules/forms/ix-forms/components/ix-full-page-form/ix-full-page-form-section/ix-full-page-form-section.component.html

@@ -0,0 +1,15 @@
+<ix-fieldset
+  [id]="label"
+  [title]="label | translate"
+>
+  <mat-divider class="divider" inset></mat-divider>
+  <div class="section">
+    <div class="fieldset">
+      <ng-content></ng-content>
+    </div>
+    <div class="help" [hidden]="!help">
+      <div class="title">{{ 'Section Help' | translate }}</div>
+      <div class="value">{{ help }}</div>
+    </div>
+  </div>
+</ix-fieldset>

src/app/modules/forms/ix-forms/components/ix-full-page-form/ix-full-page-form-section/ix-full-page-form-section.component.scss

@@ -0,0 +1,69 @@
+@import 'scss-imports/variables';
+
+:host {
+  color: var(--fg1);
+  margin: 15px;
+}
+
+.divider {
+  margin: -12px 0 12px !important;
+}
+
+.section {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $breakpoint-sm) {
+    flex-direction: column;
+
+    .fieldset {
+      order: 2;
+      padding: 0;
+    }
+
+    .help {
+      order: 1;
+      padding: 0 !important;
+    }
+  }
+
+  .fieldset {
+    max-width: 425px;
+    width: 37%;
+
+    @media (max-width: $breakpoint-md) {
+      width: 50%;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      width: 100%;
+    }
+  }
+
+  .help {
+    padding: 0 20px;
+    width: 62%;
+
+    @media (max-width: $breakpoint-md) {
+      width: 50%;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      background-color: var(--contrast-darker);
+      margin-bottom: 16px;
+      padding: 16px;
+      width: 100%;
+    }
+
+    .title {
+      font-family: var(--font-family-body);
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .value {
+      font-size: 1rem;
+      white-space: pre-wrap;
+    }
+  }
+}

src/app/modules/forms/ix-forms/components/ix-full-page-form/ix-full-page-form-section/ix-full-page-form-section.component.ts

@@ -0,0 +1,26 @@
+import {
+  ChangeDetectionStrategy, Component, input, Input,
+} from '@angular/core';
+import { MatDivider } from '@angular/material/divider';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { TranslateModule } from '@ngx-translate/core';
+import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component';
+
+@UntilDestroy()
+@Component({
+  selector: 'ix-full-page-form-section',
+  styleUrls: ['./ix-full-page-form-section.component.scss'],
+  templateUrl: './ix-full-page-form-section.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IxFieldsetComponent,
+    MatDivider,
+    TranslateModule,
+  ],
+})
+export class IxFullPageFormSectionComponent {
+  @Input() help: string;
+  @Input() label: string;
+  valid = input.required<boolean>();
+}

src/app/modules/forms/ix-forms/components/ix-full-page-form/ix-full-page-form.component.html

@@ -0,0 +1,56 @@
+<ix-page-header [pageTitle]="pageTitle()">
+  @if (!(hasRequiredRoles$ | async)) {
+    <ix-readonly-badge></ix-readonly-badge>
+  }
+</ix-page-header>
+
+<div class="wrapper">
+  <div class="wizard-container">
+    <div class="mini-search-card">
+      <ix-input
+        [prefixIcon]="iconMarker('search')"
+        [formControl]="searchControl"
+        [placeholder]="'Search Input Fields' | translate"
+        [autocompleteOptions]="searchOptions()"
+      ></ix-input>
+    </div>
+    <form [formGroup]="formGroup()" (submit)="onSubmit.emit()">
+      <ng-content></ng-content>
+
+      <div class="actions">
+        <button
+          *ixRequiresRoles="requiredRoles()"
+          mat-button
+          type="submit"
+          color="primary"
+          ixTest="save"
+          [disabled]="formGroup().invalid || isLoading()"
+        >
+          {{ buttonText() | translate }}
+        </button>
+      </div>
+    </form>
+  </div>
+
+  <div class="search-container">
+    <div class="search-card">
+      @if (searchMap()) {
+        <ix-input
+          [prefixIcon]="iconMarker('search')"
+          [formControl]="searchControl"
+          [placeholder]="'Search Input Fields' | translate"
+          [autocompleteOptions]="searchOptions()"
+        ></ix-input>
+      }
+
+      @for (section of sections(); track section) {
+        <div class="section" (click)="onSectionClick(section.label)">
+          {{ section.label }}
+          @if (!section.valid()) {
+            <ix-icon name="warning"></ix-icon>
+          }
+        </div>
+      }
+    </div>
+  </div>
+</div>