DDAU

components.p-row.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  _provider: Ember.computed('provider', function() {
    console.log('changed provider');
    return this.get('provider')
  }),

  _extension: Ember.computed('extension.state', function() {
    console.log('changed extension');
    const extension = this.get('extension');
    return {
      ...extension,
      isSubmitting: extension.state === 'requesting',
      isPending: extension.state === 'requested',
      isNotPending: ['enabled', 'requesting'].includes(extension.state),
    };
  }),

});

components.possible-extensions.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  providersWithExtensions: Ember.computed('providers', 'extensions', function() {

    return this.get('providers').map((p) => {
      const extension = this.get('extensions').find(e => e.providerId === p.id)
      
      return {
        ...p,
        extension,
        isSubmitting: extension.state === 'requesting',
        isPending: extension.state === 'requested',
        isNotPending: ['enabled', 'requesting'].includes(extension.state),
      };
    });
  }).readOnly(),
  
  /*
  actions: {
    onCancelClick() {
      Ember.tryInvoke(this, 'onCancelClick', arguments);
    },
  },
  */
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  extensions: Ember.A([
    new Ember.Object(
      { name: 'extension 1', providerId: 'p2', status: 'enabled' }
    ),
    new Ember.Object(
      { name: 'extension 2', providerId: 'p1', status: 'requested' }
    ),
    new Ember.Object(
      { name: 'extension 3', providerId: 'p3', status: 'enabled' }
    ),
  ]),
  
  _extensions: Ember.computed('extensions', function() {
    console.log('clone happening')
    return this.get('extensions').map((e) => {
      return new Ember.Object({
        ...e,
        state: e.status
      })
    })
  }),
  
  providers: [
    { id: 'p1', name: 'provider 1' },
    { id: 'p2', name: 'provider 2' },
  ],  
  
  actions: {
    requestAuthorization() {
      console.log('requesting authorization info to server');
    },
    
    cancelAuthorization(extension) {
      console.log(this.extensions);
      console.log(extension);

      /*
      this.set('_extensions', this.extensions.map((e) => {
        if (e === extension) {
          return new Ember.Object({
            ...e,
            state: 'requesting',
          });
        }
        
        return e;
      });
      */
      
      extension.set('state', 'requesting');
          
      console.log('cancel that shit on the server, please');
      
      setTimeout(() => {
        
        // This is fishy, but api is giving us 204... so we decide...
        extension.set('state', 'enabled');
        console.log('done!');
      }, 2000);
    },
    
    add() {
      
      this.set('providers', this.get('providers').concat({
        id: 'p3',
        name: 'provider 3',
      }));
    },
  },
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

{{possible-extensions
  providers=providers
  extensions=_extensions
  onAuthorizeClick=(action 'requestAuthorization')
  onCancelClick=(action 'cancelAuthorization')
}}

{{log providers}}

<button onclick={{action 'add'}}>Add more</button>

{{outlet}}
<br>
<br>

templates.components.p-row.hbs

<h3>{{_provider.name}}</h3>
<p>This is info in row</p>

{{#if _extension.isNotPending}}
  <button
    disabled={{_extension.isSubmitting}}
    onClick={{action onAuthorize}}
  >
    Authorize
  </button>
{{/if}}
{{#if _extension.isPending}}
  <button
    disabled={{_extension.isSubmitting}}
    onClick={{action onCancel}}
  >
    Cancel
  </button>
{{/if}}

templates.components.possible-extensions.hbs

<p>Some info here</p>
{{#each providersWithExtensions as |provider|}}
  <h3>{{provider.name}}</h3>
  <p>And more info goes here</p>

  {{#if provider.isNotPending}}
    <button
      disabled={{provider.isSubmitting}}
      onClick={{action onAuthorizeClick provider.extension}}
    >
      Authorize
    </button>
  {{/if}}
  {{#if provider.isPending}}
    <button
      disabled={{provider.isSubmitting}}
      onClick={{action onCancelClick provider.extension}}
    >
      Cancel
    </button>
  {{/if}}

{{/each}}
<p>Some info here</p>
<h2>This is with Rows</h2>
{{#each providersWithExtensions as |provider|}}
  {{p-row
    provider=provider
    extension=provider.extension
    onAuthorize=(action onAuthorizeClick provider.extension)
    onCancel=(action onCancelClick provider.extension)
  }}
{{/each}}

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"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}