Messages Demo

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Email Message Demo'
});

controllers.my-route.js

import Ember from 'ember';

const {RSVP, Controller, computed, inject: {service}} = Ember;

export default Controller.extend({
  fakeStore: service(),
  
  senderEmail: '[email protected]',
  senderMessage: null,
  responseMessage: null,
  hasValidEmail: computed.match('senderEmail', /^.+@.+\..+$/),
  hasValidMessage: computed.match('senderMessage', /(\w+\s){3,}/),
  isValid: computed.and('hasValidEmail', 'hasValidMessage'),
  
  isInvalid: computed.not('isValid'),
  
  actions: {
    controllerActionSaveMessage(){
      const email = this.get('senderEmail');
      const message = this.get('senderMessage');
      
      const newMessage = this.get('fakeStore').createRecord('contact', {
        email: email,
        message: message
      });
      
      newMessage.save().then(() => {
        this.set('responseMessage', `Thank you for contacting us through the CONTROLLER  ${this.get('senderEmail')}.`);
        this.set('senderEmail','');
        this.set('senderMessage', '');
      });
    }
  }
});

models.contact.js

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

export default Model.extend({
  email: attr(),
  message: attr()
});

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('my-route', function() {});
});

export default Router;

routes.my-route.js

import Ember from 'ember';

const {RSVP, Route, inject: {service}} = Ember;

export default Route.extend({
  fakeStore: service(),
  
  model() {
    return this.get('fakeStore').findAll('contact');
  },
  actions:{
    /**
     * These belong in controller/component because they are just properties
     *
    senderEmail: '',
    senderMessage: '',
    hasValidEmail: Ember.computed.match('senderEmail',/^.+@.+\..+$/),
    hasValidMessage: Ember.computed.match('senderMessage',/^(\w+\s){3,}/),
    isValid: Ember.computed.and('hasValidEmail', 'hasValidMessage'),
     *
     * 
     *  AND THIS IS WHY ACTIONS ARE CONFUSING I THINK.
     */
    saveUserMessage(){
      const email = this.get('controller.senderEmail');
      const message = this.get('controller.senderMessage');
      
      const newMessage = this.get('fakeStore').createRecord('contact',{
        email:email,
        message:message
      });
      newMessage.save().then(() => {
        this.set('controller.responseMessage',`Thank you for contacting us using actions in the ROUTE ${this.get('senderEmail')}.`);
        this.set('controller.senderEmail','');
        this.set('controller.senderMessage', '');
      
      });

    }
  }
});

services.fake-store.js

/**
 *   A Fake Store, Just Add In What You Need
 *
 */
import Ember from 'ember';

const {Service, RSVP, inject: {service}} = Ember;


export default Service.extend({
  
  store: service(),

  appData: {
    contact: [
      {email: '[email protected]', message: `Welcome the the super dome`},
      {email: '[email protected]', message: `Benvenidos hombre, yo soy uno patrone`},
      {email: '[email protected]', message: `Arrrrrr Miss Piggy!`}
    ]
  },
  
  findAll(modelType) {
    return RSVP.resolve( this.appData[modelType] );
  },
  
  createRecord(modelType, properties) {
    const appData = this.appData[modelType];
    
    if (typeof appData === "undefined") {
      throw new Error(`Add ${modelType} into the appData object in 'services/fake-store.js'`);
    }
    return {
      save() {
        appData.push(properties);
        return RSVP.resolve(appData);
      }
    };
  }
});

styles.app.css

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

dl {
  margin-top: 0;
  margin-bottom: 20px;
}
dt {
  margin-right: .5rem;
  font-weight: bold;
  font-size: 1.1rem;
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
dd {
  margin: 0 auto 1rem;
}

input {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQ…AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 16px 18px;
  background-position: 98% 50%;
  cursor: auto;
  height: 34px;
  padding: 3px 6px;
  font-size: 14px;
}
.form-control {
  display: block;
  width: 100%;
  height: 28px;
  padding: 3px 6px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
button {
  margin: 5px auto;
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
button[disabled] {
  background-color: #5a4f4e;
}

templates.application.hbs

<h1>EMBER: {{appName}}</h1>
<br>
<br>
Check out my messages
  {{#link-to "my-route"}}Click to see/send messages{{/link-to}}
{{outlet}}
<br>
<br>

templates.my-route.hbs

<h2> Write a Message</h2>
{{#if responseMessage}}
  <div class="response-message">
    <p> {{responseMessage}} </p>
  </div>
{{/if}}
<hr>
<form {{action 'saveUserMessage' on='submit'}}>
  <legend>Action in the Route</legend>
  {{input type="text" value=senderEmail}}
  {{input type="text" value=senderMessage}}
  <button type="submit" disabled={{isInvalid}}>SEND</button>
</form>


<form {{action 'controllerActionSaveMessage' on='submit'}}>
  <legend>Action in the Controller</legend>
  {{input type="text" value=senderEmail}}
  {{input type="text" value=senderMessage}}
  <button type="submit" disabled={{isInvalid}}>SEND</button>
</form>

<h3>Messages</h3>
<dl>
{{#each model as |contact|}}
  
    <dt>EMAIL: </dt>
    <dd>{{contact.email}}</dd>
    
    <dt>MESSAGE: </dt>
    <dd>{{contact.message}}</dd>
{{/each}}
</dl>

{{output}}
<br>
<br>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

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

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.11.0",
  "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.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}