chore: fix core and angular template

leanupjs · Aug 6, 2021 · b74b76b · b74b76b
1 parent 84971d4
commit b74b76b
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 33 deletions.
diff --git a/packages/cli/core/template/src/components/app/controller.ts b/packages/cli/core/template/src/components/app/controller.ts
@@ -1,4 +1,4 @@
-import { AbstractController, DI } from '@leanup/lib';
+import { AbstractController, DI, ViewControllerCouple } from '@leanup/lib';
 
 import IMG_LEANUP from '../../assets/logo.leanupjs.png';
 import { IVersion, VersionApi } from '../../assets/openapi/typescript-rxjs';
@@ -41,8 +41,8 @@ export class AppController extends AbstractController {
   public version: IVersion = { text: '1.0.0', major: 1, minor: 0, patch: 0 };
   public readonly stackImg: string = IMG_LEANUP as string;
 
-  public constructor() {
-    super();
+  public constructor(couple: ViewControllerCouple) {
+    super(couple);
     this.finishedRendering = Date.now() - STARTUP_TIMESTAMP;
     RouterService.navigate('series');
     const APP_METADATE = {

diff --git a/packages/cli/core/template/src/components/series/list/controller.ts b/packages/cli/core/template/src/components/series/list/controller.ts
@@ -1,4 +1,4 @@
-import { AbstractController, DI } from '@leanup/lib';
+import { AbstractController, DI, ViewControllerCouple } from '@leanup/lib';
 
 import { MeasuredSerieModel } from '../../../models/measured-series.model';
 import { MeasurementService } from '../../../services/measurements/service';
@@ -16,8 +16,8 @@ export class ListSerieController extends AbstractController {
   public duration = 0;
   public showPerformanceButton = true;
 
-  public constructor() {
-    super();
+  public constructor(couple: ViewControllerCouple) {
+    super(couple);
     this.measurementService.observe.subscribe(() => {
       this.update();
     });

diff --git a/packages/cli/frameworks/angular/template/src/components/app/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/app/component.angular.ts
@@ -1,4 +1,5 @@
 import { ApplicationRef, Component, Inject } from '@angular/core';
+import { GenericComponent } from '@leanup/lib';
 
 import IMG_FRAMEWORK from '../../assets/logo.angular.png';
 import { RouterService } from '../../services/router/service';
@@ -14,27 +15,35 @@ import { AppController, ResolvedRoute } from './controller';
         </a>
         <div class="text-center text-5xl text-gray-400 font-extrabold">+</div>
         <a href="https://leanupjs.org" target="leanupjs" class="text-center">
-          <img src="{{ stackImg }}" alt="Leanup Stack" class="m-auto h-24" />
+          <img src="{{ ctrl.stackImg }}" alt="Leanup Stack" class="m-auto h-24" />
         </a>
       </div>
-      <h1>{{ framework.name }} v{{ framework.version }}</h1>
-      <small>{{ finishedRendering }} ms upcomming time</small>
+      <h1>{{ ctrl.framework.name }} v{{ ctrl.framework.version }}</h1>
+      <small>{{ ctrl.finishedRendering }} ms upcomming time</small>
       <list-serie *ngIf="resolvedRoute.url === 'series'"></list-serie>
       <create-serie *ngIf="resolvedRoute.url === 'series/create'"></create-serie>
       <edit-serie *ngIf="resolvedRoute.url === 'series/:id/edit'" [resolvedRoute]="resolvedRoute"></edit-serie>
-      <small>Used filters: {{ filters.date(dummies.date) }} | {{ filters.currency(dummies.price) }} €</small><br />
-      <small>Build with: {{ cli.name }} v{{ cli.version }}</small>
+      <small
+        >Used filters: {{ ctrl.filters.date(ctrl.dummies.date) }} |
+        {{ ctrl.filters.currency(ctrl.dummies.price) }} €</small
+      ><br />
+      <small>Build with: {{ ctrl.cli.name }} v{{ ctrl.cli.version }}</small>
     </div>
   `,
 })
-export class AppComponent extends AppController {
+export class AppComponent implements GenericComponent {
+  public ctrl: AppController;
   public readonly frameworkImg: string = IMG_FRAMEWORK as string;
   public resolvedRoute: ResolvedRoute = {
     url: 'series',
   };
 
   public constructor(@Inject(ApplicationRef) appRef: ApplicationRef) {
-    super();
+    this.ctrl = new AppController({
+      hooks: {
+        doRender: appRef.tick.bind(this),
+      },
+    });
     RouterService.subscribe(
       (
         route: {

diff --git a/packages/cli/frameworks/angular/template/src/components/series/create/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/series/create/component.angular.ts
@@ -1,21 +1,27 @@
-import { Component } from '@angular/core';
+import { ApplicationRef, Component, Inject } from '@angular/core';
+import { GenericComponent } from '@leanup/lib';
 
 import { CreateSerieController } from './controller';
 
 @Component({
   selector: 'create-serie',
   template: `
-    <form (ngSubmit)="onSubmit()">
+    <form (ngSubmit)="ctrl.onSubmit()">
       <h2>Create a new measuring serie</h2>
-      <editor-serie [editorForm]="editorForm"></editor-serie>
+      <editor-serie [editorForm]="ctrl.editorForm"></editor-serie>
       <button class="primary" type="submit" id="submit">Add</button>
-      <button class="secondary" type="reset" id="cancel" (click)="onCancel()">Abbrechen</button>
+      <button class="secondary" type="reset" id="cancel" (click)="ctrl.onCancel()">Abbrechen</button>
     </form>
   `,
 })
-export class CreateSerieComponent extends CreateSerieController {
-  // Den Overhead braucht nur Angular?!
-  public constructor() {
-    super();
+export class CreateSerieComponent implements GenericComponent {
+  public readonly ctrl: CreateSerieController;
+
+  public constructor(@Inject(ApplicationRef) appRef: ApplicationRef) {
+    this.ctrl = new CreateSerieController({
+      hooks: {
+        doRender: appRef.tick.bind(this),
+      },
+    });
   }
 }
diff --git a/packages/cli/frameworks/angular/template/src/components/series/create/controller.ts b/packages/cli/frameworks/angular/template/src/components/series/create/controller.ts
@@ -0,0 +1,25 @@
+import { InputControl } from '@leanup/form';
+import { AbstractController, DI } from '@leanup/lib';
+
+import { MeasuredSerieModel } from '../../../models/measured-series.model';
+import { MeasurementService } from '../../../services/measurements/service';
+import { RouterService } from '../../../services/router/service';
+import { EditorForm } from '../editor/editor.form';
+
+export class CreateSerieController extends AbstractController {
+  private readonly measurementService: MeasurementService = DI.get('MeasurementService');
+  public editorForm: EditorForm = new EditorForm('new');
+
+  public onSubmit(): void {
+    const title = <InputControl>this.editorForm.getControl('title');
+    const unit = <InputControl>this.editorForm.getControl('unit');
+    this.measurementService.addSerie(new MeasuredSerieModel(<string>title.value, <string>unit.value));
+    this.measurementService.store();
+    this.editorForm = new EditorForm('new');
+    this.onCancel();
+  }
+
+  public onCancel(): void {
+    RouterService.navigate('series');
+  }
+}
diff --git a/packages/cli/frameworks/angular/template/src/components/series/edit/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/series/edit/component.angular.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { ApplicationRef, Component, Inject, Input, OnChanges } from '@angular/core';
 import { GenericComponent } from '@leanup/lib';
 
 import { ResolvedRoute } from '../../app/controller';
@@ -17,9 +17,18 @@ import { EditSerieController } from './controller';
   `,
 })
 export class EditSerieComponent implements OnChanges, GenericComponent {
-  public ctrl: EditSerieController = new EditSerieController();
+  public readonly ctrl: EditSerieController;
+
   @Input() public resolvedRoute!: ResolvedRoute;
 
+  public constructor(@Inject(ApplicationRef) appRef: ApplicationRef) {
+    this.ctrl = new EditSerieController({
+      hooks: {
+        doRender: appRef.tick.bind(this),
+      },
+    });
+  }
+
   public ngOnChanges(): void {
     this.ctrl.changeMeasuredSerie(parseInt(this.resolvedRoute.data?.id || '0'));
   }

diff --git a/packages/cli/frameworks/angular/template/src/components/series/editor/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/series/editor/component.angular.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { ApplicationRef, Component, Inject, Input, OnChanges } from '@angular/core';
 import { InputControl } from '@leanup/form';
 import { GenericComponent } from '@leanup/lib';
 
@@ -15,12 +15,20 @@ import { EditorForm } from './editor.form';
   `,
 })
 export class EditorSerieComponent implements GenericComponent, OnChanges {
-  public readonly ctrl: EditorSerieController = new EditorSerieController();
+  public readonly ctrl: EditorSerieController;
 
   @Input() public editorForm!: EditorForm;
   public titleInput: InputControl = new InputControl('title');
   public unitInput: InputControl = new InputControl('title');
 
+  public constructor(@Inject(ApplicationRef) appRef: ApplicationRef) {
+    this.ctrl = new EditorSerieController({
+      hooks: {
+        doRender: appRef.tick.bind(this),
+      },
+    });
+  }
+
   public ngOnChanges(): void {
     this.titleInput = <InputControl>this.editorForm.getControl('title');
     this.unitInput = <InputControl>this.editorForm.getControl('unit');

diff --git a/packages/cli/frameworks/angular/template/src/components/series/list/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/series/list/component.angular.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { ApplicationRef, Component, Inject } from '@angular/core';
+import { GenericComponent } from '@leanup/lib';
 
 import { ListSerieController } from './controller';
 
@@ -8,12 +9,12 @@ import { ListSerieController } from './controller';
     <div>
       <h2>List</h2>
       <div>
-        <button class="primary" id="add" type="button" (click)="add()">Add</button>
-        <button class="secondary" id="start" type="button" *ngIf="showPerformanceButton" (click)="onStart()">
+        <button class="primary" id="add" type="button" (click)="ctrl.add()">Add</button>
+        <button class="secondary" id="start" type="button" *ngIf="ctrl.showPerformanceButton" (click)="ctrl.onStart()">
           Performance
         </button>
       </div>
-      <table class="table" *ngFor="let element of elements; index as i">
+      <table class="table" *ngFor="let element of ctrl.elements; index as i">
         <thead>
           <tr>
             <th scope="col">#</th>
@@ -24,19 +25,29 @@ import { ListSerieController } from './controller';
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let serie of measuredSeries; index as i">
+          <tr *ngFor="let serie of ctrl.measuredSeries; index as i">
             <td>{{ i + 1 }}</td>
             <td>{{ serie.getId() }}</td>
             <td>{{ serie.getTitle() }}</td>
             <td>{{ serie.getUnit() }}</td>
             <td>
-              <button id="edit-{{ i }}" type="button" (click)="edit(serie)">Edit</button>
+              <button id="edit-{{ i }}" type="button" (click)="ctrl.edit(serie)">Edit</button>
             </td>
           </tr>
         </tbody>
       </table>
-      <small>Duration: {{ duration }} ms</small>
+      <small>Duration: {{ ctrl.duration }} ms</small>
     </div>
   `,
 })
-export class ListSerieComponent extends ListSerieController {}
+export class ListSerieComponent implements GenericComponent {
+  public readonly ctrl: ListSerieController;
+
+  public constructor(@Inject(ApplicationRef) appRef: ApplicationRef) {
+    this.ctrl = new ListSerieController({
+      hooks: {
+        doRender: appRef.tick.bind(this),
+      },
+    });
+  }
+}