fix: upgrade and selection through model working

Author: Gérard Collin

apps/xt-host/projects/host/src/app/entity-manager/entity-manager.component.html

@@ -79,7 +79,7 @@ <h1 class="entity-manager__title">{{ entName }}</h1>
               <xt-render
                 displayMode="LIST_VIEW"
                 [value]="store?.entities()"
-                (models)="listModelChanged($event)" [models]="listModel"
+                [models]="listModel"
                 [valueType]="entityName()">
               </xt-render>
             </div>

apps/xt-host/projects/host/src/app/entity-manager/entity-manager.component.spec.ts

@@ -82,10 +82,8 @@ describe('EntityManagerComponent', () => {
     btnNew.children[0].nativeElement.click();
     harness.fixture.detectChanges();
     // For some reasons, we have to wait multiple times for stability
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
+    for (let i=0;i<10;i++)
+      await harness.fixture.whenStable();
 
     //expect(newSpy).toHaveBeenCalledOnce();
     const form=component.editForm().get('editor') as FormGroup;
@@ -119,10 +117,8 @@ describe('EntityManagerComponent', () => {
     const btnSave = harness.fixture.debugElement.query(By.css("#btn-save"));
     btnSave.children[0].nativeElement.click();
     harness.fixture.detectChanges();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
+    for (let i=0;i<10;i++)
+      await harness.fixture.whenStable();
 
     //expect(saveSpy).toHaveBeenCalledOnce();
 
@@ -150,10 +146,8 @@ describe('EntityManagerComponent', () => {
     row.children[0].nativeElement.click();
     row.children[0].nativeElement.click();
     harness.fixture.detectChanges();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
+    for (let i=0;i<10;i++)
+      await harness.fixture.whenStable();
 
     //It should have switched to edit mode
     expect (component.viewMode()).toEqual("edit");
@@ -164,11 +158,8 @@ describe('EntityManagerComponent', () => {
 
     btnSave.children[0].nativeElement.click();
     harness.fixture.detectChanges();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
+    for (let i=0;i<10;i++)
+      await harness.fixture.whenStable();
 
 
     expect (component.selectedEntity()).toEqual({
@@ -190,9 +181,8 @@ describe('EntityManagerComponent', () => {
     const btnDelete = harness.fixture.debugElement.query(By.css("#btn-delete"));
     btnDelete.children[0].nativeElement.click();
     harness.fixture.detectChanges();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
-    await harness.fixture.whenStable();
+    for (let i=0;i<10;i++)
+      await harness.fixture.whenStable();
 
     //expect(deleteSpy).toHaveBeenCalledOnce();
     list = harness.fixture.debugElement.query(By.directive(Table));

apps/xt-host/projects/host/src/app/entity-manager/entity-manager.component.ts

@@ -1,17 +1,17 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  computed,
+  computed, effect,
   inject,
   input,
   linkedSignal,
+  model, ModelSignal,
   OnDestroy,
   signal
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { updateFormGroupWithValue,
-  XtBaseModel, XtComponentModel, XtComponentOutput, XtRenderComponent, XtResolverService } from 'xt-components';
+import { updateFormGroupWithValue, XtBaseModel, XtRenderComponent, XtResolverService } from 'xt-components';
 import { FormBuilder, FormGroup, PristineChangeEvent, ReactiveFormsModule } from '@angular/forms';
 import { ManagedData } from 'xt-type';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
@@ -20,7 +20,7 @@ import { Button } from 'primeng/button';
 import { Subscription } from 'rxjs';
 import { ErrorHandlerService } from '../error-handler/error-handler.service';
 import { ProgressSpinner } from 'primeng/progressspinner';
-import { XtStoreManagerService, XtSignalStore } from 'xt-store';
+import { XtSignalStore, XtStoreManagerService } from 'xt-store';
 
 @Component({
   selector: 'app-entity-manager',
@@ -50,8 +50,6 @@ export class EntityManagerComponent implements OnDestroy {
 
   editForm = signal<FormGroup>(this.formBuilder.group ({ editor: this.formBuilder.group({}) }));
 
-  selectedEntity = signal<ManagedData|null>(null);
-
   canEdit= computed(()=> {
     if (this.selectedEntity()!=null)
       return true;
@@ -72,11 +70,19 @@ export class EntityManagerComponent implements OnDestroy {
   deleting = signal (false);
   updating = signal (false);
 
-  listModel =new XtBaseModel<any>();
+  selectedEntity= model<any>();
+
+  listModel = new XtBaseModel<any>();
+
+  selectedEntityChanged= effect( ()=> {
+    const selected=this.selectedEntity();
+    this.updateEditForm();
+  });
 
   private subscriptions=new Subscription();
 
   constructor() {
+    this.listModel.valueSelected=this.selectedEntity;
     this.updateStore();
     this.route.paramMap.pipe(
       takeUntilDestroyed(),
@@ -106,16 +112,6 @@ export class EntityManagerComponent implements OnDestroy {
     }
   }
 
-  listModelChanged($event : any) {
-    const newValue=$event as XtComponentModel;
-    if (newValue?.valueSelected!=null) {
-      newValue?.valueSelected.subscribe (selected => {
-        this.selectedEntity.set(selected);
-        this.updateEditForm();
-      });
-    }
-  }
-
   updateEditForm () {
     const entity = this.selectedEntity();
     const form = this.formBuilder.group({}, {updateOn: 'change'});
@@ -136,7 +132,7 @@ export class EntityManagerComponent implements OnDestroy {
       this.saving.set(true);
       const savedValue = await this.safeStore().storeEntity (toSave);
       this.selectedEntity.set(savedValue);
-      this.updateEditForm();
+      //this.updateEditForm();
       this.canSave.set(false);
       this.viewMode.set("list");
     } catch (error) {
@@ -182,7 +178,7 @@ export class EntityManagerComponent implements OnDestroy {
     if (deleted) {
       this.selectedEntity.set(null);
       this.viewMode.set("list");
-      this.updateEditForm();
+      //this.updateEditForm();
     }
     }
 
@@ -191,7 +187,7 @@ export class EntityManagerComponent implements OnDestroy {
       this.newing.set(true);
       const newOne = await this.safeStore().storeEntity({} as ManagedData);
       this.selectedEntity.set(newOne);
-      this.updateEditForm();
+      //this.updateEditForm();
       this.viewMode.set("edit");
 
     } catch (error) {

libs/xt-components/projects/xt-components/src/lib/output/xt-base-model.ts

@@ -3,8 +3,8 @@ import { XtComponentModel } from '../xt-component';
 import { ISortBy, IStoreCriteria } from '../store/store-support';
 
 export class XtBaseModel<T> implements XtComponentModel {
-  valueSelected: ModelSignal<T|null> | undefined;
-  sortBy: ModelSignal<ISortBy<T>[]> | undefined;
-  filterBy: ModelSignal<IStoreCriteria<T>[]> | undefined;
+  valueSelected?: ModelSignal<T|null> | undefined;
+  sortBy?: ModelSignal<ISortBy<T>[]> | undefined;
+  filterBy?: ModelSignal<IStoreCriteria<T>[]> | undefined;
 
 }

libs/xt-components/projects/xt-components/src/lib/render/xt-render-sub.component.html

@@ -1,2 +1,2 @@
 {{componentType()}}
-<ng-container *ngComponentOutlet="type(); inputs: {context:realContext ()}" />
+<ng-container *ngComponentOutlet="type(); inputs: {context:realContext (), models:models()}" />

libs/xt-components/projects/xt-components/src/lib/render/xt-render-sub.component.ts

@@ -49,7 +49,7 @@ export class XtRenderSubComponent<T> implements AfterViewInit {
 
   inputs = input<XtBaseInput>();
   outputs = output<XtComponentOutput>();
-  models = model<XtComponentModel> (new XtBaseModel());
+  models = input<XtComponentModel> ();
 
   outlet = viewChild.required(NgComponentOutlet);
 
@@ -97,19 +97,6 @@ export class XtRenderSubComponent<T> implements AfterViewInit {
       }
     }
 
-    const instanceModels=instance?.models?instance?.models():null;
-    if ((instanceModels!=null) &&
-        (Object.keys(instanceModels).length>0) ) {
-      const models=this.models();
-
-      // Sets the model values defined as inputs
-      for (const key of Object.keys(instanceModels) as XtModelType[] ) {
-        instanceModels[key] = models[key];
-      }
-      // Bind the component model to this model
-      this.models.set(instanceModels);
-    }
-
     const inputs = this.inputs();
     if ((inputs!=null) && (instance?.inputsObject!=null)) {
       for (const key of Object.keys(inputs) as XtInputType[] ) {

libs/xt-components/projects/xt-components/src/lib/render/xt-render.component.html

@@ -1 +1 @@
-<ng-container *ngComponentOutlet="type(); inputs: {context:context ()}" />
+<ng-container *ngComponentOutlet="type(); inputs: {context:context (), models:models()}" />

libs/xt-components/projects/xt-components/src/lib/render/xt-render.component.ts

@@ -5,7 +5,7 @@ import {
   inject,
   input,
   model,
-  output,
+  output, signal,
   Signal,
   Type,
   viewChild
@@ -60,7 +60,7 @@ export class XtRenderComponent<T> implements AfterViewInit {
 
   inputs = input<XtBaseInput>();
   outputs = output<XtComponentOutput>();
-  models = model<XtComponentModel> (new XtBaseModel());
+  models = input<XtComponentModel> ();
 
   outlet = viewChild.required(NgComponentOutlet);
 
@@ -132,19 +132,6 @@ export class XtRenderComponent<T> implements AfterViewInit {
       }
     }
 
-    const instanceModels=instance?.models?instance?.models():null;
-    if ((instanceModels!=null) &&
-        (Object.keys(instanceModels).length>0) ) {
-      const models=this.models();
-
-        // Sets the model values defined as inputs
-      for (const key of Object.keys(instanceModels) as XtModelType[] ) {
-        instanceModels[key] = models[key];
-      }
-          // Bind the component model to this model
-      this.models.set(instanceModels);
-    }
-
     const inputs = this.inputs();
     if ((inputs!=null) && (instance?.inputsObject!=null)) {
       for (const key of Object.keys(inputs) as XtInputType[] ) {

libs/xt-components/projects/xt-components/src/lib/xt-component.ts

@@ -7,8 +7,9 @@ export type XtComponent<T=any> = {
 
     inputsObject?: XtComponentInput;
     outputsObject?: XtComponentOutput;
+    modelsObject?: XtComponentModel;
 
-    models?: ModelSignal<XtComponentModel|undefined>;
+    models?: InputSignal<XtComponentModel|undefined>;
     inputs?: InputSignal<XtComponentInput>;
     outputs?: OutputEmitterRef<XtComponentOutput>;
 
@@ -26,7 +27,7 @@ export type XtInputType = 'valueSelected';
 export type XtModelType = 'valueSelected' | 'sortBy' | 'filterBy';
 
 export type XtComponentModel = {
-  [key in XtModelType]: ModelSignal<any>|undefined;
+  [key in XtModelType]?: ModelSignal<any>|undefined;
 }
 
 export type XtComponentOutput = {

libs/xt-components/projects/xt-components/src/lib/xt-simple/xt-simple.component.ts

@@ -21,7 +21,7 @@ export class XtSimpleComponent<T = any> implements XtComponent<T>, OnInit{
   inputsObject = new XtBaseInput();
 
   outputs=output<XtComponentOutput>();
-  models=model<XtComponentModel>();
+  models=input<XtComponentModel>();
 
   isInForm = computed<boolean> ( () => {
     return this.context()?.isInForm()??false;