denzo

// app/components/action-details/template.hbs

<h5>Change action status</h5>
{{#sc-select
  options=STATUSES
  selected=model.status
  onChange=(action "setStatus") as |status|}}
  {{status.label}}
{{/sc-select}}

denzo

// app/constants/actions.js

const STATUS_TO_DO = { value: 0 };
const STATUS_IN_PROGRESS = { value: 10 };
const STATUS_DONE = { value: 50 };
const STATUS_CANT_DO = { value: 60 };
const STATUS_OVERDUE = { value: -1 };

const STATUSES = [STATUS_TO_DO, STATUS_IN_PROGRESS, STATUS_DONE, STATUS_CANT_DO];

denzo

...

{{#if (eq model.status STATUS_TO_DO)}}
  {{#sc-button onClick=(action "startAction")}}Mark As In Progress{{/sc-button}}
{{else if (eq model.status STATUS_IN_PROGRESS)}}
  {{#sc-button onClick=(action "setStatus" STATUS_DONE)}}Mark As Done{{/sc-button}}
{{/if}}

...

denzo

// app/transforms/action-status.js

import Transform from 'ember-data/transform';
import { STATUSES } from '../constants/actions';
export default Transform.extend({
  deserialize(serialized) {
    return STATUSES.findBy('value', serialized);
  },
  serialize(deserialized = {}) {
    return deserialized.value;

denzo

// app/models/action.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
export default Model.extend({
  label: attr('string'),
  status: attr('action-status') // before it was attr('number')
});

denzo

// app/constants/actions.js

const STATUS_TO_DO = { value: 0 };
const STATUS_IN_PROGRESS = { value: 10 };
const STATUS_DONE = { value: 50 };
const STATUS_CANT_DO = { value: 60 };
const STATUS_OVERDUE = { value: -1 };

export {
  STATUS_TO_DO, STATUS_IN_PROGRESS, STATUS_DONE, STATUS_CANT_DO, STATUS_OVERDUE

denzo

// app/componets/action-details/component.js

setStatus(newStatus) {
  const model = get(this, 'model');
  
  if ([0, 10].includes(get(model, 'status')) && [50, 60].includes(newStatus)) {
    set(model, 'completedAt', new Date());
  }
  
  set(model, 'status', newStatus);

denzo

...

{{#if (eq model.status 0)}}
  {{#sc-button onClick=(action "startAction")}}Mark As In Progress{{/sc-button}}
{{else if (eq model.status 10)}}
  {{#sc-button onClick=(action "setStatus" 50)}}Mark As Done{{/sc-button}}
{{/if}}

denzo

// app/components/action-details/template.hbs

<h5>Change action status</h5>
{{#sc-select
  options=STATUSES
  selected=model.status
  onChange=(action "setStatus") as |status|}}
  {{status.label}}
{{/sc-select}}

denzo

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  pretendSaveModel() {
    return Ember.RSVP.resolve();
  },
  
  init() {