chore: fin lit-element template

leanupjs · Dec 14, 2020 · bfe7bef · bfe7bef
1 parent 3749f56
commit bfe7bef
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 12 deletions.
diff --git a/packages/cli/frameworks/lit-element/template/src/components/app/component.lit-element.ts b/packages/cli/frameworks/lit-element/template/src/components/app/component.lit-element.ts
@@ -5,6 +5,7 @@ import '../series/list/component.lit-element';
 import { customElement, html, TemplateResult } from 'lit-element';
 
 import { RouterService } from '../../services/router/service';
+import { Filters } from '../../shares/filters';
 import { LitElementComponent } from '../component.lit-element';
 import { AppController, ResolvedRoute } from './controller';
 
@@ -29,13 +30,15 @@ export class AppComponent extends LitElementComponent {
 
   public render(): TemplateResult {
     return html`<div id="app">
-      <code>- is currently not full implemented -</code>
       <h4>${this.ctrl.framework.name} v${this.ctrl.framework.version}</h4>
       <small>${this.ctrl.finishedRendering} ms upcomming time</small>
-      ${this.resolvedRoute.url === 'series' ? html`<list-serie-component />` : ''}
-      ${this.resolvedRoute.url === 'series/create' ? html`<create-serie-component />` : ''}
+      ${this.resolvedRoute.url === 'series' ? html`<list-serie-component></list-serie-component>` : ''}
+      ${this.resolvedRoute.url === 'series/create' ? html`<create-serie-component></create-serie-component>` : ''}
       ${this.resolvedRoute.url === 'series/:id/edit'
-        ? html`<edit-serie-component isTrue resolvedRoute="${JSON.stringify(this.resolvedRoute)}" />`
+        ? html`<edit-serie-component
+            isTrue
+            resolvedRoute="${JSON.stringify(this.resolvedRoute)}"
+          ></edit-serie-component>`
         : ''}
       <small>
         Used filters: ${Filters.date(this.ctrl.dummies.date)} | ${Filters.currency(this.ctrl.dummies.price)} €

diff --git a/packages/cli/frameworks/lit-element/template/src/components/input/component.lit-element.ts b/packages/cli/frameworks/lit-element/template/src/components/input/component.lit-element.ts
@@ -0,0 +1,31 @@
+import { customElement, html, property, TemplateResult } from 'lit-element';
+
+import { InputControl } from '@leanup/form/controls/controls';
+
+import { LitElementComponent } from '../component.lit-element';
+
+@customElement('input-component')
+export class InputComponent extends LitElementComponent {
+  @property({ attribute: true, type: Object })
+  public control: InputControl;
+
+  public render(): TemplateResult {
+    return html`
+      <div class="form-group">
+        ${this.control
+          ? html`<label htmlFor="${this.control.id}">${this.control.label}</label>
+              <input
+                class="form-control"
+                id=${this.control.id}
+                name=${this.control.name}
+                value=${this.control.value as string}
+                @change=${(event: Event) => {
+                  this.control.value = event.target === null ? '' : event.target.value;
+                  this.update();
+                }}
+              />`
+          : ''}
+      </div>
+    `;
+  }
+}
diff --git a/...cli/frameworks/lit-element/template/src/components/series/create/component.lit-element.ts b/...cli/frameworks/lit-element/template/src/components/series/create/component.lit-element.ts
@@ -9,8 +9,14 @@ import { CreateSerieController } from './controller';
 export class CreateSerieComponent extends LitElementComponent {
   public ctrl: CreateSerieController = new CreateSerieController();
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    setTimeout(() => {
+      this.querySelector('editor-serie-component').editorForm = this.ctrl.editorForm;
+    }, 0);
+  }
+
   public render(): TemplateResult {
-    // <editor-serie-component editorForm=${JSON.stringify(this.ctrl.editorForm)} />
     return html`
       <form
         @submit=${(event: Event) => {
@@ -20,6 +26,7 @@ export class CreateSerieComponent extends LitElementComponent {
         }}
       >
         <h5>Create a new measuring serie</h5>
+        <editor-serie-component></editor-serie-component>
         <button class="btn btn-primary" type="submit" id="submit">Add</button>
         <button
           class="btn"

diff --git a/...s/cli/frameworks/lit-element/template/src/components/series/edit/component.lit-element.ts b/...s/cli/frameworks/lit-element/template/src/components/series/edit/component.lit-element.ts
@@ -13,17 +13,15 @@ export class EditSerieComponent extends LitElementComponent {
   @property({ attribute: true, type: Object })
   public resolvedRoute: ResolvedRoute;
 
-  public constructor() {
-    super();
-  }
-
   public connectedCallback(): void {
     super.connectedCallback();
     this.ctrl = new EditSerieController(this.resolvedRoute.params.id);
+    setTimeout(() => {
+      this.querySelector('editor-serie-component').editorForm = this.ctrl.editorForm;
+    }, 0);
   }
 
   public render(): TemplateResult {
-    // <editor-serie-component editorForm=${JSON.stringify(this.ctrl.editorForm)} />
     return html`
       <form
         @submit=${(event: Event) => {
@@ -33,6 +31,7 @@ export class EditSerieComponent extends LitElementComponent {
         }}
       >
         <h5>Edit a existing measuring serie</h5>
+        <editor-serie-component></editor-serie-component>
         <button class="btn btn-primary" type="submit" id="submit">Edit</button>
         <button
           class="btn btn-secondary"

diff --git a/...cli/frameworks/lit-element/template/src/components/series/editor/component.lit-element.ts b/...cli/frameworks/lit-element/template/src/components/series/editor/component.lit-element.ts
@@ -1,3 +1,5 @@
+import '../../input/component.lit-element';
+
 import { customElement, html, property, TemplateResult } from 'lit-element';
 
 import { LitElementComponent } from '../../component.lit-element';
@@ -11,11 +13,20 @@ export class EditorSerieComponent extends LitElementComponent {
   @property({ attribute: true, type: Object })
   public editorForm: EditorForm;
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    setTimeout(() => {
+      const inputs = this.querySelectorAll('input-component');
+      inputs[0].control = this.editorForm.getControl('title');
+      inputs[1].control = this.editorForm.getControl('unit');
+    }, 10);
+  }
+
   public render(): TemplateResult {
     return html`
       <div>
-        <InputComponent control=${JSON.stringify(this.editorForm.getControl('title') as InputControl)} />
-        <InputComponent control=${JSON.stringify(this.editorForm.getControl('unit') as InputControl)} />
+        <input-component></input-component>
+        <input-component></input-component>
       </div>
     `;
   }