Changeset test (with Mirage)

controllers.create.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save() {
      let model = this.get('model');
      console.log(
        'Saving model: [%s] [%s] [%s]',
        model.get('name'),
        model.get('blurb1'),
        model.get('blurb2'),
    	);
      model.save().then(() => {
	      this.transitionToRoute('index');
      });
    }
  }
});

mirage.config.js

//import Collection from 'ember-cli-mirage/orm/collection';

export default function() {
  //window.server = this;

  this.get('/widgets', function (schema, request) {
    if (schema.widgets.all().models.length === 0) {
      // Bootstrap some widget data if none already exists
      schema.db.widgets.insert([
        { name:'Widget 1', blurb1:'Lorum', blurb2:'ipsum' },
        { name:'Widget 2', blurb1:'dolor', blurb2:'sit amet' }
      ]);    
    }    
    let widgets = schema.widgets.all();
    return widgets.models;
  });
  
  this.post('/widgets', function(schema, request) {
    const requestBodyData = JSON.parse(request.requestBody);
    return schema.widgets.create(requestBodyData.data.attributes);
  });
};

models.widget.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  name: attr('string', { defaultValue: 'New widget' }),
  blurb1: attr('string', { defaultValue: 'Foo' }),
  blurb2: attr('string', { defaultValue: 'Bar' })
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('create');
});

export default Router;

routes.create.js

import Ember from 'ember';
import Changeset from 'ember-changeset';
import WidgetValidations from '../validations/widget';

export default Ember.Route.extend({
  model() {
    let newWidget = this.get('store').createRecord('widget');
    return new Changeset(newWidget);
    //return newWidget;
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return $.get('/widgets');
    //return this.get('store').findAll('widget');
  }  
});

styles.app.css

* {
  box-sizing: border-box;
}

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

nav {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin-bottom: 2em;
  padding: 10px 0px 14px 0px;
}

li {
	margin-bottom: 1em;
}

li > div {
	margin-bottom: 0.25em;
}

form > div.row {
  margin-bottom: 1.5em;
  background-color: #eeeeee;
  padding: 10px;
}

form > div.row > label {
  display: block;
  margin-bottom: 8px;
}

form > div.row > input[type="text"] {
  font-size: 1em;
  width: 100%;
  padding: 2px;
}

templates.application.hbs

{{outlet}}

templates.create.hbs

<h1>Create widget</h1>

<nav>
	{{#link-to "index"}}Home{{/link-to}}
</nav>

<form>
	<div class="row">
		<label>Widget name</label>
    {{input value=model.name}}
	</div>

	<div class="row">
		<label>Widget blurb 1</label>
    {{input value=model.blurb1}}
	</div>

	<div class="row">
		<label>Widget blurb 2</label>
    {{input value=model.blurb2}}
	</div>
  
	<div class="row">
    <button type="button" {{action "save"}}>Save</button>
	</div>
</form>
 

templates.index.hbs

<h1>Welcome to Widgets and Flanges Limited</h1>

<nav>
	{{#link-to "create"}}Create widget{{/link-to}}
</nav>

<h2>Widgets</h2>
{{#if model}}
  <ul>
    {{#each model as |widget|}}
      <li>
      	<div>ID: {{widget.id}}</div>
      	<div>Name: {{widget.name}}</div>
        <div>Blurb 1: {{widget.blurb1}}</div>
        <div>Blurb 2: {{widget.blurb2}}</div>
      </li>
    {{/each}}
  </ul>
{{else}}
	<p>No widgets found.</p>
{{/if}}

twiddle.json

{
  "version": "0.13.0",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
		"ember-changeset-validations": "1.2.8",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-changeset": "1.3.0",
		"ember-cli-mirage": "0.4.1",
    "ember-data": "2.16.3"
  }
}

validations.widget.js

import {
  validatePresence,
  validateLength
} from 'ember-changeset-validations/validators';

export default {
  name: [
    validatePresence(true),
		validateLength({ min: 8 })
  ]
};