Add custom text input to add lines

src/app.js

@@ -2,6 +2,7 @@ import './components/main-window.js';
 import './components/custom-button.js';
 import './components/item-list.js';
 import './components/custom-modal.js';
+import './components/custom-text.js';
 
 import Store from './modules/store.js';
 import text from './modules/text.js';
@@ -110,7 +111,7 @@ class AppBase extends HTMLElement {
     </main-window>
     <custom-modal active="${this.store.state.modalActive}">
       <p>${text.modal.description}</p>
-      <input type="text"/>
+      <input is="custom-text"/>
       <span class="button-bar">
         <custom-button class="right-button" action="${Store.actions.ADD_LINE}" width="138px" color="${this.properties.color}">Add</custom-button>
         <custom-button action="${Store.actions.CLOSE_MODAL}" outline width="124px" color="${this.properties.color}">Cancel</custom-button>

src/components/custom-text.js

@@ -0,0 +1,19 @@
+import Store from '../modules/store.js';
+
+class CustomText extends HTMLInputElement {
+  constructor() {
+    super();
+    this.type = 'text';
+  }
+
+  connectedCallback() {
+    this.addEventListener('input', this.onInput.bind(this));
+  }
+
+  onInput() {
+    Store.publish(Store.actions.INPUT_TEXT, this.value);
+  }
+
+}
+
+customElements.define('custom-text', CustomText, { extends: 'input' });

src/modules/store.js

@@ -6,12 +6,14 @@ export default class Store {
     SELECT: 'SELECT',
     OPEN_MODAL: 'OPEN_MODAL',
     CLOSE_MODAL: 'CLOSE_MODAL',
+    INPUT_TEXT: 'INPUT_TEXT',
   }
 
   constructor() {
     this.state = {
       records: [],
       selected: [],
+      input: "",
       modalActive: false,
     };
     this.callbacks = [() => console.log(this.state)];
@@ -45,9 +47,11 @@ export default class Store {
           ...this.state,
           records: this.state.records.concat({
             id: this.state.records.length,
-            text: 'asdf',
+            text: this.state.input,
             action: 'add',
           }),
+          input: "",
+          modalActive: false,
         };
         break;
       case this.constructor.actions.REMOVE_LINE:
@@ -89,6 +93,12 @@ export default class Store {
           modalActive: false,
         }
         break;
+      case this.constructor.actions.INPUT_TEXT:
+        this.state = {
+          ...this.state,
+          input: event.detail,
+        }
+        break;
       default:
         console.error(`Action "${event.type}" not implemented in eventHandler`);
         return;