DECAF-139 Update RenderingEngine to handle nested models

.github/workflows/codeql-analysis.yml

@@ -72,3 +72,5 @@ jobs:
 
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v3
+#        with:
+#          tools: https://github.com/github/codeql-action/releases/download/codeql-bundle-v2.22.0/codeql-bundle-linux64.tar.gz

karma.conf.js

@@ -25,9 +25,13 @@ module.exports = function (config) {
       suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require("path").join(__dirname, "./workdocs/reports/coverage"),
+      dir: require("path").join(__dirname, "workdocs", "reports", "coverage"),
       subdir: ".",
-      reporters: [{ type: "html" }, { type: "text-summary" }],
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' },
+        { type: 'lcovonly' }
+      ],
     },
     reporters: ["progress", "kjhtml"],
     colors: true,

package.json

@@ -25,7 +25,7 @@
     "test:services": "ng test --include='./src/lib/services/*.service.spec.ts' --no-watch --browsers=ChromeHeadlessCI",
     "lint": "ng lint for-angular",
     "lint-fix": "ng lint --fix for-angular",
-    "coverage": "rimraf ./workdocs/reports/data/*.json && npm run test:all -- --coverage --config=./workdocs/reports/jest.coverage.config.ts",
+    "coverage": "rimraf ./workdocs/reports/data/*.json && npm run test:all -- --code-coverage",
     "prepare-release": "npm run lint-fix && npm run build:prod && npm run coverage && npm run docs",
     "release": "./bin/tag-release.sh",
     "clean-publish": "npx clean-publish",

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>