How to Edit a todo task on same component in Ember

Question

I want to edit a todo task on same list style tag without affecting the other todo present.

Below is the an image of the todo

The second image below is when the edit button is clicked.

What I want to achieve is when the edit button is clicked on a particular todo, I want an input field with the data to appear in the text field and the todo itself to disappear. I want it to happen to one particular todo and not affect all of them.

The code below is what I have tried.

This code tell if it is in edit mode it should display the text input field esle display the todo

todo.hbs

<ul class="list-group">
        {{#each model as |todo|}}
          <li class="list-group-item {{if todo.done " isDone"}}">
            {{#if isEdit}}
              <div class="text-input">
                {{input type="text" name="todo" value=todo}}
                <span class="text-info right edit" {{action "cancelEdit" todo}}><i class="far fa-edit"></i></span>
              </div>
            {{else}}
              <span class="round">
                {{input type="checkbox" checked=todo.done click=(action 'toggleTodo' todo)}}
                <label for="checkbox"></label>
              </span>
              <span>
                {{todo.content}} - <span class="date {{if todo.done " isDone"}}">{{todo.createdAt}}</span>
              </span>
              <span class="text-danger right delete" {{action "deleteTodo" todo }}><i class="far fa-trash-alt"></i></span>
              <span class="text-info right edit" {{action 'editTodo'}}><i class="far fa-edit"></i></span>
            {{/if}}
          </li>
        {{/each}}
      </ul>

todo.js

export default Controller.extend({
  isEdit: false,
  actions: {
   editTodo: function(todo) {
     this.toggleProperty('isEdit');
   },
   cancelEdit: function () {
     this.toggleProperty('isEdit');
   }
 },
})

how can I do what i want to do without affecting other todos?

Answer 1

The better way to do it is to have a component for each todo, where each component will have an independent internal state (is_editing).

few tips before the real answer :
. give more informations about your versions (ember especially).
. "isDone" className should be 'is-done'.
. do not pass params if you dont use them (editTodo action)

I did not tested this code, but the idea is here:

todo.hbs

<ul class="list-group">
    {{#each model as |todo|}}
        {{to-do model=todo}}
    {{/each}}
</ul>

templates/components/todo-list-elem.hbs

{{#if is_editing}}
  <div class="text-input">
    {{input type="text" name="todo" value=model.content}}
    <span class="text-info right edit" {{action "cancelEdit" todo}}>
      <i class="far fa-edit"></i>
    </span>
  </div>
{{else}}
  <span class="round">
    {{input type="checkbox" checked=todo.done click=(action 'toggleTodo')}}
    <label for="checkbox"></label>
  </span>
  <span>
    {{todo.content}} - <span class="date {{if todo.done " isDone"}}">{{todo.createdAt}}</span>
  </span>
  <span class="text-danger right delete" {{action "deleteTodo" todo }}>
    <i class="far fa-trash-alt"></i>
  </span>
  <span class="text-info right edit" {{action 'editTodo'}}>
    <i class="far fa-edit"></i>
  </span>
{{/if}}

components/todo-list-elem.js

import Ember from 'ember';
const { computed: { alias } } = Ember;

export default Ember.Component.extend({
  tagName: 'li',
  classNames:['list-group-item'],
  classNameBindings: ['isDone'], // your class will be is-done id todo.done === true

  isDone: alias('model.done'),

  is_editing: false,

  actions: {

    editTodo() {
      this.set('is_editing', true);
    },

    cancelEdit() {
      this.set('is_editing', false);
    },

    toggleTodo() {
      this.toggleProperty('model.done');
    },

    deleteTodo() {
      this.get('model')
          .destroyRecord()
      ;
    },

  },

});