Entity Actions

components.entity-actions\.js

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @service
  configuration;
  
  @tracked
  showEditForm = false;
  @tracked
  showConfirmDelete = false;
  
  @action
  deleteEntity(evt) {
    this.args.onDeleteEntity(this.args.entity);
    this.showConfirmDelete = false;
    evt.preventDefault();
  }
  
  @action
  updateEntity(evt) {
    this.args.onUpdateEntity(this.args.entity, {
      name: this.newEntityName
    });
    this.showEditForm = false;
    this.newEntityName = '';
    evt.preventDefault();
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { A } from '@ember/array';
import Entity from '../utils/entity';



export default class ApplicationController extends Controller {
  @service
  configuration;
  
  entities = A([
      this.configuration.currentEntity,
      new Entity('Foo')
    ]);

  @action
  updateEntity(entity, update) {
    entity.name = update.name;
  }

  @action
  deleteEntity(entity) {
    this.entities.removeObject(entity);
  }
}

services.configuration\.js

import Service from '@ember/service';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import Entity from '../utils/entity';

export default class ConfigurationService extends Service{
  currentEntity = new Entity('Bar');

  @action
  updateCurrentEntity(entity) {
    this.currentEntity = entity;
  }
}

templates.application\.hbs

{{#each this.entities as |entity|}}
<article>
  <h3>{{entity.name}}</h3>
  <ul>
    <EntityActions @onUpdateEntity={{this.updateEntity}} @onDeleteEntity={{this.deleteEntity}} @entity={{entity}} as |action|>
      <li>
        <button {{on "click" action.action}}>{{action.label}}</button>
      </li>
    </EntityActions>
  </ul>
</article>
{{/each}}

templates.components.entity-actions\.hbs

{{yield (hash action=(fn (mut this.showEditForm) true) label="Edit")}}
{{#if (not-eq @entity this.configuration.currentEntity)}}
  {{yield (hash action=(fn (mut this.showConfirmDelete) true) label="Delete")}}
{{/if}}


{{#if this.showEditForm}}
  <form onsubmit={{this.updateEntity}}>
    <label>Name</label>
    <Input @value={{this.newEntityName}}/>
    <button type="button" {{on "click" (fn (mut this.showEditForm) false)}}>Cancel</button>
    <button>Submit</button>
  </form>
{{/if}}


{{#if this.showConfirmDelete}}
  <form onsubmit={{this.deleteEntity}}>
    <p>Are you sure you want to delete {{entity.name}}?</p>
    <button type="button" {{on "click" (fn (mut this.showConfirmDelete) false)}}>Cancel</button>
    <button>Confirm</button>
  </form>
{{/if}}

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-truth-helpers": "2.1.0"
  }
}

utils.entity\.js

import { tracked } from '@glimmer/tracking';

export default class Entity {
  @tracked
  name;
  
  constructor(name) {
    this.name = name;
  }
}