New Twiddle

components.joint-tenancy-section\.js

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

export default class extends Component {
  @tracked memberAmount = 0;
  
  @action
  init(){
    console.log(this.memberAmount)
    if (this.args.parentJointTenancy){
    	this.memberAmount = this.args.parentAmount * this.args.jointTenancy.percentage
    } else {
    	this.memberAmount = this.args.parentAmount;
    }
  };
  
	@action
  updateMemberAmount(){
    this.memberAmount = event.target.value;
  };
}

components.my-modal\.js

import Component from '@glimmer/component';

class Shareholder {
  constructor(name, type, jointTenancyMembers = []) {
    this.name = name;
    this.type = type;
    this.jointTenancyMembers = jointTenancyMembers;
    this.percentage = 0.5;
  }
  
  get isJointTenancy(){
  	return this.type == 'joint_tenancy';
  }
}

export default class extends Component {
  constructor() {
    super(...arguments);
    const jt1_member1 = new Shareholder("JT 1 - Member 1", 'shareholder');
    const jt1_member2_member1 = new Shareholder("JT 1 - Member 2 - Member 1", 'shareholder');
    const jt1_member2_member2_member_1 = new Shareholder("JT 1 - Member 2 - Member 2 - Member 1", 'sharheolder');
    const jt1_member2_member2_member_2 = new Shareholder("JT 1 - Member 2 - Member 2 - Member 2", 'sharheolder');
    const jt1_member2_member2 = new Shareholder("JT 1 - Member 2 - Member 2", 'joint_tenancy', [jt1_member2_member2_member_1, jt1_member2_member2_member_2]);
    const jt1_member2 = new Shareholder("JT 1 - Member 2", 'joint_tenancy', [jt1_member2_member1, jt1_member2_member2]);
    this.jt1 = new Shareholder("JT 1", 'joint_tenancy', [jt1_member1, jt1_member2]);
    this.jt1.percentage = null;

    this.firstMembers = [jt1_member1, jt1_member2]
  }
}

components.single-member-section\.js

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

export default class extends Component {
  @tracked memberAmount;
  
  @action
  init(){
    this.memberAmount = this.args.parentAmount * this.args.member.percentage
  };
  
	@action
  updateMemberAmount(){
    alert('single');
    this.memberAmount = event.target.value;
  };
}

controllers.application\.js

import Controller from '@ember/controller';



export default class ApplicationController extends Controller {
  appName = 'Joint Tenancy Secrets';
}

templates.application\.hbs

<h1>{{this.appName}}</h1>
<br>
<br>
<MyModal/>
<br>
<br>

templates.components.joint-tenancy-section\.hbs

<li {{did-insert this.init}}>
	{{@parentAmount}}€ - 
  {{#if @parentJointTenancy}}
  	Joint Tenancy <b>{{@jointTenancy.name}}</b> 
    <div class="form-group row">
      <label class="col-12 col-form-label"></label>
      <div class="col-8">
        <div class="input-group">
          <Input class="form-control mt-1 mr-1" @type="number" @value={{this.memberAmount}} {{on "input" this.updateMemberAmount}}/>
        </div>
      </div>
    </div>
  {{else}}
  	Joint Tenancy <b>{{@jointTenancy.name}}</b>:
  {{/if}}
  
  <br>
  <br>
  has <b>{{@jointTenancy.jointTenancyMembers.length}}</b> members:
  <ul>	
    {{#each @jointTenancy.jointTenancyMembers as |member|}}
      {{#if member.isJointTenancy}}
        <JointTenancySection @jointTenancy={{member}} @parentAmount={{this.memberAmount}} @parentJointTenancy={{@jointTenancy}} />
      {{else}}
        <SingleMemberSection @member={{member}} @parentAmount={{this.memberAmount}} @parentJointTenancy={{@jointTenancy}} />
      {{/if}}
    {{/each}}
  </ul>
</li>

templates.components.my-modal\.hbs

<JointTenancySection @jointTenancy={{this.jt1}} @parentAmount={{10000}}/>

templates.components.single-member-section\.hbs

<li {{did-insert this.init}}>
	{{@parentAmount}}€ - Shareholder <b>{{@member.name}}</b>
  <div class="form-group row">
    <label class="col-12 col-form-label"></label>
    <div class="col-8">
      <div class="input-group">
        <Input class="form-control mt-1 mr-1" @type="number" @value={{this.memberAmount}} {{on "input" this.updateMemberAmount}}/>
      </div>
    </div>
  </div>
</li>

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle\.json

{
  "version": "0.17.1",
  "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.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
  	"@ember/render-modifiers": "1.0.2",
    "@glimmer/component": "1.0.0"
  }
}