EricOP Small Biz Demo

application.adapter.js

import DS from 'ember-data'

DS.FixtureAdapter.extend({});

var AppAdapter = DS.FixtureAdapter.reopen({
  generateIdForRecord: function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r, v;
      r = Math.random() * 16 | 0;
      v = c === 'x' ? r : r & 0x3 | 0x8;
      return v.toString(16);
    });
  }
});

export default AppAdapter;

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Small Biz Demo'
});

application.serializer.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  normalizeHash: {
    frogs: function(hash) {
      var newHash = hash.data;
      delete hash.data;
      hash = newHash
      return hash;
    }
});

application.template.hbs

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

companies.route.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
    return this.store.findAll('company');
  },
  actions: {
    addCompany: function() {
      var newCompany = this.store.createRecord('company', {
        name: "My New Company"
      });
    },
    removeCompany: function(company) {
      console.log(company);
      console.log(this.controller.get("model"));
      this.controller.get("model").removeObject(company);
    }
  }
});

companies.template.hbs

  <ul>
  {{#each item in model}}
    <li>{{#link-to 'company.contacts' item }}{{item.name}}, List of Contacts{{/link-to}} , 
      <button {{action "removeCompany" item}}>X</button>
    </li>
  {{/each}}
  
  </ul>
<button class="button-blue" type="button"{{action "addCompany" this.id}}>Add a Company</button>
  {{outlet}}

company.contacts.index.template.hbs

    <h1></h1>
    <b>Contacts</b>
    <br>
    <ul>
      {{#each contact in contacts}}
      <li>{{contact.name}}</li>
      {{/each}}
    </ul>
    <button class="button-blue" type="button" {{action "addContact"}}>Add a Contact</button>
    <br> {{#link-to 'company' this}}Company details page{{/link-to}} 
    {{outlet}}

company.contacts.new.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  previousId: 5,
  lastId: function() {
    return new ObjectId().toString();
  }.property(),  
  
  model: function(params) {
    var parentCompanyId = this.modelFor('company').get("id");

    var newContact = this.store.createRecord('contact', {
      name: "John Doe",
      //company : parentCompanyId
      company: this.store.getById('company', parentCompanyId)


    });
    console.log("new contact = ", newContact);
    return newContact;
  },
  actions: {
    save: function() {
      var self = this;
      var newContact = this.controller.get('model');      //console.log(this.controllerFor('companyContactsNew').content);
      console.log('newContact~ ', newContact);
      newContact.save()
      
    
        //this.controllerFor('companyContactsNew').content.save()
        .then(function() {
          self.transitionTo("company.contacts");
        });

    },
    cancel: function() {
      console.log("rollback for " + this.get("controller.model"));
      this.get("controller.model").rollback();
      this.set("controller.model", null);
      this.transitionTo("company.contacts");
    }
  }
});

company.contacts.new.template.hbs

    <h1></h1>
    <b>New Contacts</b>
    <br>
    <ul>
      <li>Name: {{input type='text' value=model.name}}</li>
      <li>Contact Id: {{input type='text' value=id}}</li>
      <li>Parent Company Id: {{company}}</li>
    </ul>
    <button type="button" {{action "save"}}>Save Contact</button>
    <button type="button" {{action "cancel"}}>cancel</button>
    <br> {{outlet}}

company.contacts.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.modelFor('company');

  },
  actions: {
    addContact: function() {
      this.transitionTo("company.contacts.new");
    }
  }
});

company.index.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.modelFor('company');
  }
});

company.index.template.hbs

 <br><b>Name of Company:</b> {{name}}

company.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('company', params.company_id).then(function(company) {
      return company;
    });
  }
});

company.template.hbs

   {{#link-to "companies"}}Home{{/link-to}} {{outlet}}

models.company.js

import DS from 'ember-data';

var Company = DS.Model.extend({
  name: DS.attr(),
  contacts: DS.hasMany('Contact', {
    async: true
  })
});

Company.reopenClass({
  FIXTURES: { 
    data:[{
      id: 1,
      name: 'Housing4Hope',
      contacts: ['2']
    }, {
      id: 2,
      name: 'Johns Shoe Repair',
      contacts: ['1', '2']
    }, {
      id: 3,
      name: 'Sweaters by Janet',
      contacts: ['4']
    }] 
  }
});

export default Company;

models.contact.js

import DS from 'ember-data';

var Contact = DS.Model.extend({
  name: DS.attr('string'),
  company: DS.belongsTo('Company')
});

Contact.reopenClass({
  FIXTURES: {
      data: [{
      id: 1,
      name: 'Tim H',
      company: 1
    }, {
      id: 2,
      name: 'Matt H',
      company: 2
    }, {
      id: 4,
      name: 'Janet McFee',
      company: 3
  }] 
  } 
});   
export default Contact;

router.js

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

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.resource('companies', {
    path: '/'
  });
  this.resource('company', {
    path: '/companies/:company_id'
  }, function() {
    // URL = '/companies/:id/contacts'
    this.resource('company.contacts', {
      path: '/contacts'
    }, function() {
      // URL = '/company/:id/contacts/new'
      this.route("new");
    });
  });
});

export default Router;

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #faf4f1;
  font-size: 12pt;
}
.button-blue {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; 
  border-radius: 3px;
}
.button-blue:hover {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; 
    
}
h1 {
  font-family: 'Pacifico', cursive;
  color: white;
  text-shadow: 1px 1px 1px #000;
  background: url('https://static.jsbin.com/custom/emberjs/navigation_background.png') repeat-x;
  border-bottom: 1px solid #AA412F;
  box-shadow: 1px 1px 1px #000;
  background-size:cover;
  border-radius: 4px;
  
}
li {
    background-image: linear-gradient(-90deg, #f4d2c1, #e7624b);
    border: 1px solid #faf4f1;
    border-radius: 4px;
    padding: 5px;
}

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}