New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

models.my-model.js

export default Ember.Object.extend({
  str2float: function(str, negative, precision = 2) {
    if (typeof str === 'number') {
      return str;
    }

    str = (str || '').trim();
    var parts, sign = 1;

    if (negative && str.charAt(0) === '-') {
      str = str.substr(1);
      sign = -1;
    }

    parts = str.split(/\D/);
    if (parts.length === 1) {
      return sign * parseFloat(parts[0]);
    } else {
      var end = parts[parts.length - 1];
      // max length after coma
      if (end.length <= precision) {
        // Assume the last part is a decimal separator
        str = parts.slice(0, parts.length - 1).join('')+'.'+end;
      } else {
        // Assume this is a thousands separator
        str = parts.join('');
      }

      return sign * parseFloat(str);
    }
  },

 serializers: {
    none: function(val) { return val; },
    string: function(val) { return typeof val === 'string' ? val : ''; },
    string_null: function(val) {return typeof val === 'string' ? (val.trim() === '' ? null : val.trim()) : null;},
    trimmed: function(val) { return typeof val === 'string' ? val.trim() : val; },
    float: function(val) { return str2float(val); },
    array: function(val) { return val.slice(); },
    int: function(val) { return Ember.isNone(val) ? null : parseInt(val); },
    bool: function(val) { return !!val; },
    constant: function(val, options) { return options.constant; }
},

  Ember.ComputedProperty.prototype.saveAs = function(type, options) {
    // console.log("saveas vanilla")
      options = options || {};
      options.isArray = type === "array";

      var meta = {
          type: type,
          options: options,
          isAttribute: true
      };

      this.meta(meta);
      return this;
  };
  Function.prototype.saveAs = function(type, options) {
      return Ember.computed({
        get: this,
        set: this
      }).saveAs(type, options);
  },

	didDefineProperty: function(proto, key, value) {
		if (value && value.meta) {
			var meta = value.meta(),
				options = meta.options,
				constructor = this.constructor;

			if (meta.isRelation === 'belongsTo') {
				// Add a related ID property
				let property = Ember.computed(key, {
				  get: function() {
            // Getter - return related property's ID-field
            // We ignore "not initialized" here as we can safely delegate
            // that to the relation method.
            // We have to beware that the related object is a promise and
            // not actually the model itself - if the promise is not yet
            // resolved its ID might not be available directly, even though
            // it is known. We therefore fetch the ID from the meta attribute,
            // which is available as soon as the promise is created.
            return this.get(key + '._meta.id');
          },
          set: function(k, v) {
            return v || null;
          }
        });

				if (meta.foreignKeyAttribute) {
					property.saveAs('int');
				}

				Ember.defineProperty(proto, options.foreignKey, property);
			}

			if (meta.isAttribute) {
				// Some observers might request a postfix to their dirty checker
				// (such as .[] for arrays).
        Ember.addObserver(proto, key, null, 'attributeDidChange');

				if (meta.options.isArray) {
					// Add .[] observer for nested fields
					Ember.addObserver(proto, key+'.[]', null, 'arrayAttributeDidChange');
				}

				constructor._attributes = constructor._attributes || {};
				constructor._attributes[key] = meta;
			}
		}
	},
});

models.receipt.js

import Model from './my-model.js';

export default Model.extend({
  amounts: Ember.computed({
    get: function() {
      // A receipt without an amount is useless in the websystem -
      // make sure it always has at least one.
      return [Webapp.__container__.lookup('service:store').getModel('Amount').create()];
    },

    set: function(k, v) {
      if (!v || v.length === 0) {
        // A receipt without an amount is useless in the websystem -
        // make sure it always has at least one.
        return [Webapp.__container__.lookup('service:store').getModel('Amount').create()];
      } else {
        // HACK if amounts are set, check if they
        // are the same length as the current amounts.
        // If so, just override properties so that
        // forms do not need to reinitialize.
        let cur = this.cacheFor('amounts');
        if (cur && v.length === cur.get('length')) {
          cur.forEach(function(amount, i) {
            amount.replaceUpdate(v[i]);
          });
          return cur;
        }

        return v.map(function(fields) {
          return Webapp.__container__.lookup('service:store').getModel('Amount').create(fields);
        });
      }
    }
  }).saveAs(function(amounts) {
    return amounts.map(function(amount) {
      console.log("model timesheet", amounts[0].minutes)

      return {
        amount: amount.get('amount'),
        vat_amount: amount.get('vat_amount'),
        vat_id: amount.get('vat_id') || undefined,
        category_id: amount.get('category_id') || undefined,
        display_inclusive: amount.get('display_inclusive'),
      };
    });
  }),
});

models.timesheet.js

import Model from './my-model.js';

export default Model.extend({
	amounts: Ember.computed('nonce', {
    get: function() {
      console.log("model timesheet attempt get")

      // Timesheets always have one amount by default
      return [Webapp.__container__.lookup('service:store').getModel('Amount').create({ hours: 0 })];
    },

    set: function(k, v) {
      console.log("model timesheet attempt set")
      if (!v || v.length === 0) {
        // Timesheets always have one amount by default
        return [Webapp.__container__.lookup('service:store').getModel('Amount').create({ hours: 0 })];
      } else {
        // HACK if amounts are set, check if they
        // are the same length as the current amounts.
        // If so, just override properties so that
        // forms do not need to reinitialize.
        let cur = this.cacheFor('amounts');
        console.log("amounts set cur", cur)
        // if (cur && v.length === cur.get('length')) {
        //   cur.forEach(function(amount, i) {
        //     amount.replaceUpdate(v[i]);
        //   });
        //   return cur;
        // }

        let dosn = v.map(function(fields) {
          return Webapp.__container__.lookup('service:store').getModel('Amount').create(fields);
        });
        console.log("timesheet model return",dosn)
        return dosn;
      }
    }
  }).saveAs(function(amounts) {
    console.log("model timesheet", amounts[0].minutes)
    let res = amounts.map(function(amount) {
      return {
        minutes: amount.get('minutes') || undefined,
        category_id: amount.get('category_id') || undefined
      };
    });
    console.log("ress", res)
    return res;
  }),

});

templates.application.hbs

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

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": {
  }
}