DECAF-139 Update RenderingEngine to handle nested models

src/app/models/DemoModel.ts

@@ -13,7 +13,7 @@ import {
   required,
   url,
 } from '@decaf-ts/decorator-validation';
-import { uielement, uimodel, uiprop } from '@decaf-ts/ui-decorators';
+import { uichild, uielement, uimodel } from '@decaf-ts/ui-decorators';
 import { CategoryModel } from './CategoryModel';
 import { UserModel } from './UserModel';
 
@@ -51,7 +51,7 @@ export class ForAngularModel extends Model {
   })
   gender!: string;
 
-  @uiprop(CategoryModel.name)
+  @uichild(CategoryModel.name, 'ngx-decaf-fieldset')
   category!: CategoryModel;
 
   @required()
@@ -73,11 +73,11 @@ export class ForAngularModel extends Model {
 
   @required()
   @password()
-  @eq("user.passwordRepeat")
+  @eq('user.secret')
   @uielement('ngx-decaf-crud-field', { label: 'demo.password.label' })
   password!: string;
 
-  @uiprop(UserModel.name)
+  @uichild(UserModel.name, 'ngx-decaf-fieldset')
   user!: UserModel;
 
   @required()

src/app/models/UserModel.ts

@@ -1,30 +1,23 @@
-import {
-  eq,
-  Model,
-  model,
-  ModelArg, password,
-  required,
-} from '@decaf-ts/decorator-validation';
-import {uielement, uilistitem, uimodel } from '@decaf-ts/ui-decorators';
+import { eq, Model, model, ModelArg, password, required } from '@decaf-ts/decorator-validation';
+import { uielement, uilistitem, uimodel } from '@decaf-ts/ui-decorators';
 
-@uilistitem('ngx-decaf-list-item', {icon: 'cafe-outline'})
+@uilistitem('ngx-decaf-list-item', { icon: 'cafe-outline' })
 @uimodel('ngx-decaf-crud-form')
 @model()
 export class UserModel extends Model {
 
-  @required()
-  @password()
-  @eq("../password")
-  @uielement('ngx-decaf-crud-field', { label: 'user.passwordRepeat.label' })
-  passwordRepeat!: string;
-
   @required()
   @uielement('ngx-decaf-crud-field', {
-    label: 'user.username.label',
-    placeholder: 'user.username.placeholder',
+    label: 'user.username.label'
   })
   username!: string;
 
+  @required()
+  @password()
+  @eq('../password')
+  @uielement('ngx-decaf-crud-field', { label: 'user.secret.label' })
+  secret!: string;
+
   constructor(args: ModelArg<UserModel> = {}) {
     super(args);
   }

src/assets/i18n/en.json

@@ -66,16 +66,30 @@
     }
   },
   "category": {
-    "name": {"label": "Category name"},
-    "description": {"label": "Category Description"}
+    "name": {
+      "label": "Category name",
+      "placeholder": "Type the category"
+    },
+    "description": {
+      "label": "Category Description",
+      "placeholder": "Describe the category (optional)"
+    }
   },
   "employee": {
-    "name": {"label": "Employee name"},
-    "occupation": {"label": "Employee occupation"}
+    "name": {
+      "label": "Employee name"
+    },
+    "occupation": {
+      "label": "Employee occupation"
+    }
   },
   "user": {
-    "passwordRepeat": {"label": "Repeat password"},
-    "username": {"label": "Username"}
+    "secret": {
+      "label": "Password"
+    },
+    "username": {
+      "label": "Username"
+    }
   },
   "component": {
     "list": {

src/lib/components/component-renderer/component-renderer.component.html

@@ -1 +1,22 @@
 <ng-template #componentViewContainer></ng-template>
+
+<ng-template #inner>
+  @if(parent?.children?.length) {
+    @for(child of parent.children; track child) {
+        @if(!child.children?.length) {
+          <ng-container
+                *ngComponentOutlet="
+                  child.component;
+                  injector: child.injector;
+                  inputs: child.inputs;
+                  content:child.content;
+                "
+          />
+        } @else {
+          <ngx-decaf-component-renderer [parent]="child"> </ngx-decaf-component-renderer>
+        }
+     }
+  }
+</ng-template>
+
+

src/lib/components/component-renderer/component-renderer.component.ts

@@ -13,16 +13,13 @@ import {
   Output,
   reflectComponentType,
   SimpleChanges,
+  TemplateRef,
   Type,
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
 import { NgxRenderingEngine2 } from 'src/lib/engine/NgxRenderingEngine2';
-import {
-  BaseCustomEvent,
-  KeyValue,
-  ModelRenderCustomEvent,
-} from '../../engine';
+import { BaseCustomEvent, KeyValue, ModelRenderCustomEvent } from '../../engine';
 import { ForAngularModule, getLogger } from 'src/lib/for-angular.module';
 import { Logger } from '@decaf-ts/logging';
 
@@ -73,8 +70,7 @@ import { Logger } from '@decaf-ts/logging';
   standalone: true,
 })
 export class ComponentRendererComponent
-  implements OnInit, OnChanges, OnDestroy
-{
+  implements OnInit, OnChanges, OnDestroy {
   /**
    * @description Reference to the container where the dynamic component will be rendered.
    * @summary This ViewContainerRef provides the container where the dynamically created
@@ -164,6 +160,12 @@ export class ComponentRendererComponent
    */
   logger!: Logger;
 
+  @Input()
+  parent: any = undefined;
+
+
+  @ViewChild('inner', { read: TemplateRef, static: true })
+  inner?: TemplateRef<any>;
 
   /**
    * @description Creates an instance of ComponentRendererComponent.
@@ -174,7 +176,7 @@ export class ComponentRendererComponent
    * @memberOf ComponentRendererComponent
    */
   constructor() {
-     this.logger = getLogger(this);
+    this.logger = getLogger(this);
   }
 
   /**
@@ -201,7 +203,9 @@ export class ComponentRendererComponent
    * @memberOf ComponentRendererComponent
    */
   ngOnInit(): void {
-    this.createComponent(this.tag, this.globals);
+    if (!this.parent)
+      this.createComponent(this.tag, this.globals);
+    this.createParentComponent();
   }
 
   /**
@@ -274,7 +278,7 @@ export class ComponentRendererComponent
     for (let input of inputKeys) {
       if (!inputKeys.length) break;
       const prop = componentInputs.find(
-        (item: { propName: string }) => item.propName === input
+        (item: { propName: string }) => item.propName === input,
       );
       if (!prop) {
         delete props[input];
@@ -291,7 +295,22 @@ export class ComponentRendererComponent
       metadata as ComponentMirror<unknown>,
       this.vcr,
       this.injector as Injector,
-      []
+      [],
+    );
+    this.subscribeEvents();
+  }
+
+  createParentComponent() {
+    const { component, inputs } = this.parent;
+    const metadata = reflectComponentType(component) as ComponentMirror<unknown>;
+    const template = this.vcr.createEmbeddedView(this.inner as TemplateRef<any>, this.injector).rootNodes;
+    this.component = NgxRenderingEngine2.createComponent(
+      component,
+      inputs,
+      metadata,
+      this.vcr,
+      this.injector,
+      template,
     );
     this.subscribeEvents();
   }
@@ -306,7 +325,8 @@ export class ComponentRendererComponent
    * @return {void}
    * @memberOf ComponentRendererComponent
    */
-  ngOnChanges(changes: SimpleChanges): void {}
+  ngOnChanges(changes: SimpleChanges): void {
+  }
 
   /**
    * @description Subscribes to events emitted by the dynamic component.
@@ -350,7 +370,7 @@ export class ComponentRendererComponent
                 name: key,
                 ...event,
               } as ModelRenderCustomEvent);
-            }
+            },
           );
       }
     }

src/lib/components/crud-field/crud-field.component.html

@@ -15,7 +15,7 @@
   </ng-container>
 } @else {
   <ng-container #component [formGroup]="formGroup">
-    <div [class]="'dcf-input-item ' + (operation || 'create')">
+    <div #container [class]="'dcf-input-item ' + (operation || 'create')">
         @if(type === 'textarea') {
           <ion-textarea
             [mode]="mode"
@@ -118,7 +118,7 @@
         }
         @if((!formControl.pristine || formControl.touched) && !formControl.valid) {
           <div class="error dcf-error dcf-flex dcf-flex-top">
-            @for(error of getErrors(); track error.key) {
+            @for(error of getErrors(container); track error.key) {
               * {{ sf(("errors." + error.message) | translate, this[error.key]) }}
             }
           </div>

src/lib/components/crud-form/crud-form.component.ts

@@ -193,6 +193,7 @@ export class CrudFormComponent implements OnInit, AfterViewInit, FormElement, On
       return false;
 
     const data = NgxFormService.getFormData(this.formGroup as FormGroup);
+    console.log("Submit=", data);
     this.submitEvent.emit({
       data,
       component:'FormReactiveComponent',

src/lib/components/fieldset/fieldset.component.html

@@ -0,0 +1,12 @@
+<fieldset class="dcf-fieldset" #component>
+  <ion-accordion-group (ionChange)="handleChange($event)">
+    <ion-accordion value="open">
+      <ion-item slot="header" color="light">
+        <legend>{{ name }}</legend>
+      </ion-item>
+      <div slot="content" [attr.aria-hidden]="!isOpen" decafCollapsable>
+        <ng-content></ng-content>
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
+</fieldset>

src/lib/components/fieldset/fieldset.component.scss

@@ -0,0 +1,34 @@
+.dcf-fieldset {
+  margin-bottom: 1.8rem;
+  padding-bottom: 0;
+  padding-top: 1rem;
+  border: 1px solid #d1d1d1;
+  border-radius: 8px;
+
+  ion-accordion {
+    &.accordion-collapsing,
+    &.accordion-collapsed {
+      margin-bottom: 1rem;
+    }
+
+    ion-item[slot="header"] {
+      --border-color: transparent;
+      --border-radius: 6px;
+      --inner-border-width: 0;
+      --padding-start: 12px;
+
+      legend {
+        font-weight: 600;
+        font-size: 1rem;
+        color: #333;
+        margin: 0;
+      }
+    }
+
+    [slot="content"] {
+      padding-top: 1rem !important;
+      padding-inline: 0.75rem;
+      background-color: #fff;
+    }
+  }
+}

src/lib/components/fieldset/fieldset.component.spec.ts

@@ -0,0 +1,58 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ForAngularModule } from 'src/lib/for-angular.module';
+import { FieldsetComponent } from './fieldset.component';
+import { NgxRenderingEngine2 } from 'src/lib/engine';
+import { Model, ModelBuilderFunction } from '@decaf-ts/decorator-validation';
+import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { OperationKeys } from '@decaf-ts/db-decorators';
+
+const imports = [
+  ForAngularModule,
+  FieldsetComponent,
+  TranslateModule.forRoot({
+    loader: {
+      provide: TranslateLoader,
+      useClass: TranslateFakeLoader
+    }
+  })
+];
+
+describe('FormReactiveComponent', () => {
+  let component: FieldsetComponent;
+  let fixture: ComponentFixture<FieldsetComponent>;
+  let engine;
+
+   beforeAll(() => {
+     try {
+       engine = new NgxRenderingEngine2();
+       Model.setBuilder(Model.fromModel as ModelBuilderFunction);
+     } catch (e: unknown) {
+       console.warn(`Engine already loaded`);
+     }
+   });
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports,
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FieldsetComponent);
+    component = fixture.componentInstance;
+    component.operation = OperationKeys.CREATE;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+     // If ngOnInit returns a promise, await it
+    if (component.ngOnInit instanceof Function)
+      component.ngOnInit();
+
+    // If ngAfterViewInit returns a promise, await it
+    if (component.ngAfterViewInit instanceof Function)
+      component.ngAfterViewInit();
+
+    // Force change detection after async operations
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+});