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,5 +1,5 @@
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input,
 } from '@angular/core';
 import {
   ControlValueAccessor, NgControl,
@@ -34,6 +34,7 @@ export class IxCheckboxComponent implements ControlValueAccessor {
   @Input() tooltip: string;
   @Input() warning: string;
   @Input() required: boolean;
+  @Input() formControlName: string;
 
   isDisabled = false;
   value: boolean;
@@ -45,6 +46,10 @@ export class IxCheckboxComponent implements ControlValueAccessor {
     this.controlDirective.valueAccessor = this;
   }
 
+  @HostBinding('attr.id') get id(): string {
+    return this.formControlName || '';
+  }
+
   onChange: (value: boolean) => void = (): void => {};
   onTouch: () => void = (): void => {};
 

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,
@@ -69,6 +70,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;
 
@@ -91,6 +93,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,
@@ -39,6 +39,7 @@ export class IxFileInputComponent implements ControlValueAccessor {
   @Input() acceptedFiles = '*.*';
   @Input() multiple: boolean;
   @Input() required: boolean;
+  @Input() formControlName: string;
 
   value: FileList;
   isDisabled = false;
@@ -54,6 +55,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-form-with-glossary/ix-form-with-glossary.component.html

@@ -0,0 +1,33 @@
+<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>
+    <ng-container #contentContainer></ng-container>
+  </div>
+
+  <div class="search-container">
+    <div class="search-card">
+      <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>

src/app/modules/forms/ix-forms/components/ix-form-with-glossary/ix-form-with-glossary.component.scss

@@ -0,0 +1,83 @@
+@import 'scss-imports/variables';
+
+:host {
+  width: 100%;
+}
+
+.wrapper {
+  display: flex;
+}
+
+.wizard-container {
+  width: 80%;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+  }
+
+  .actions {
+    padding: 0 10px;
+
+    @media (max-width: $breakpoint-xs) {
+      margin: 0 10px;
+      padding: 0;
+
+      button {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.search-container {
+  margin-left: 16px;
+  min-width: 250px;
+  width: 20%;
+
+  @media (max-width: $breakpoint-xs) {
+    display: none;
+  }
+
+  .search-card {
+    background-color: var(--bg2);
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 0 14px 14px;
+    position: sticky;
+    top: 10px;
+
+    .section {
+      color: var(--fg1);
+      display: flex;
+      font-family: var(--font-family-body);
+      font-size: 15px;
+      gap: 5px;
+      padding: 10px;
+
+      ix-icon {
+        color: var(--red);
+      }
+    }
+
+    .section:hover {
+      background-color: var(--contrast-lighter);
+      cursor: pointer;
+    }
+  }
+}
+
+.mini-search-card {
+  background-color: var(--bg2);
+  display: none;
+  padding: 2px 14px;
+  position: sticky;
+  top: -16px;
+  z-index: 99;
+
+  @media (max-width: $breakpoint-xs) {
+    display: block;
+    margin: 0 9px;
+    top: 0;
+  }
+}