to-do app

components.todo-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  itemindex: null,
  inputValue:"qwerty",
  actions:{
  	addItem: function(){
      if(this.get('todoItem')){
        this.addItem(this.get('todoItem'), this.get('itemindex'));
      	this.set('todoItem','');
      	this.set('itemindex',null);
      } else {
      	alert("cannot be empty");
      }
    },
    deleteItem: function(index){
      this.deleteItem(index);
    },
    editItem: function(index, todoItem){
      this.set('todoItem',todoItem.name);
      this.set('itemindex', index);
      this.editItem(index);
      document.getElementById("addItem").focus();
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  todoList : [{"name":"Item qwerty"}, {"name":"Item abcde"}, {"name":"Item 12345"}],
  actions:{
  	addItem: function(todoItem,itemindex){
      let todoList = this.get('todoList');
      if(itemindex) {
      	todoList.insertAt(itemindex, {"name":todoItem});
      } else {
      	todoList.addObject({"name":todoItem});
      }
    },
    deleteItem: function(index){
      let todoList = this.get('todoList');
      todoList.removeAt(index);
    },
    editItem: function(index){
      let todoList = this.get('todoList');
      todoList.removeAt(index);
    }
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
  	let someObject = {};
    
    /**someObject.todoList = [{"name":"Item qwerty"}, {"name":"Item abcde"}, {"name":"Item 12345"}];**/
    
    return someObject;
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.fa:hover, .fas:hover {
	color: red;
  cursor: pointer;
  font-size: 15px;
}

input:hover, input:focus{
	height: 20px;
}

templates.application.hbs

{{outlet}}

templates.components.todo-item.hbs

<form>
<fieldset>
<legend></legend>
<label for="addItem">Add item</label><br>
{{input id="addItem" value=todoItem}}
<button aria-controls="item-list" aria-label="Save Item" type="submit" tabindex=0 {{action "addItem"}}><i alt="Add" class="fa-icon fa fa-plus"></i></button>
</fieldset>
</form>

<ul id="item-list" role="region" aria-live="assertive" aria-atomic="false" aria-relevant="additions removals">
	{{#each todoList as |todoItem index|}}
		<li tabindex=0>{{todoItem.name}}<br>
    <button tabindex=0 aria-label="Edit" {{action "editItem" index todoItem}}><i alt="Edit" class="fa-icon fa fa-edit" ></i></button>
		<button tabindex=0 aria-label="Delete" {{action "deleteItem" index}}><i alt="Delete" class="fas fa-trash-alt"></i></button>
    </li>
   {{/each}}
</ul>

templates.index.hbs

{{todo-item todoList=todoList addItem=(action "addItem") deleteItem=(action "deleteItem") editItem=(action "editItem")}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3",
    "ember-font-awesome": "https://use.fontawesome.com/releases/v5.7.2/css/all.css"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}