Add and remove pages

app/components/base-modal.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  actions: {
+    close: function() {
+      return this.sendAction();
+    }
+  }
+});

app/components/page-node.js

@@ -3,5 +3,18 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   classNames: ['page-node'],
   model: null,
-  hasChildren: Ember.computed.notEmpty('model.children')
+  hasChildren: Ember.computed.notEmpty('model.children'),
+  actions: {
+    addChild: function(){
+      this.sendAction('createChild', this.get('model'));
+    },
+    remove: function(){
+      var component = this;
+      var page = this.get('model');
+      page.deleteRecord();
+      page.save().then(function(){
+        component.destroy();
+      });
+    }
+  }
 });

app/controllers/new-page-modal.js

@@ -0,0 +1,32 @@
+import Ember from 'ember';
+import extractError from 'teamplaybook-ember/lib/extract-error';
+
+export default Ember.Controller.extend({
+  showError: false,
+  errorMessage: null,
+
+  actions: {
+    close: function() {
+      console.log('on close');
+      this.send('closeModal');
+    },
+    save: function(){
+      var controller = this;
+      var page = this.get('model');
+
+      var onSaveSucess = function(){
+        controller.send('closeModal');
+      };
+
+      var onSaveFailure = function(response){
+        controller.setProperties({
+          showMessage: false,
+          showError: true,
+          errorMessage: extractError(response)
+        });
+      };
+
+      page.save().then(onSaveSucess, onSaveFailure);
+    }
+  }
+});

app/controllers/team/pages.js

@@ -1,5 +1,40 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  rootPageNodes: Ember.computed.filterBy('model', 'rootNode', true)
-});
+  rootPageNodes: Ember.computed.filterBy('model', 'rootNode', true),
+  actions: {
+    createRootPage: function(){
+      this.createPage();
+    },
+
+    createChildPage: function(parent){
+      console.log('here');
+      this.createPage(parent);
+    },
+
+    onPageCreated: function(page){
+      this.get('model').pushObject(page);
+    }
+  },
+
+  createPage: function(parent){
+    var controller = this;
+    var params = this.paramsForPage(parent);
+
+    var page = this.store.createRecord('page', params);
+
+    page.on('didCommit', function(page){
+      controller.send('onPageCreated', page);
+    });
+
+    this.send('openModal', 'new-page-modal', page);
+  },
+
+  paramsForPage: function(parent){
+    if(parent){
+      return {parentId: parent.get('id')};
+    }else{
+      return {};
+    }
+  }
+});

app/initializers/inject-store-into-component.js

@@ -0,0 +1,6 @@
+export default {
+  name: 'inject-store-into-component',
+  initialize: function(container, application) {
+    application.inject('component', 'store', 'store:main');  
+  },
+};

app/models/page.js

@@ -5,7 +5,8 @@ var Page = DS.Model.extend({
   body: DS.attr('string'),
   children: DS.hasMany('pages', {inverse: 'parent'}),
   parent: DS.belongsTo('page'),
-  rootNode: DS.attr('boolean')
+  rootNode: DS.attr('boolean'),
+  parentId: DS.attr('number')
 });
 
 // Page.reopenClass({

app/routes/application.js

@@ -6,6 +6,21 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
   actions: {
     logout: function() {
       this.get('session').invalidate();
+    },
+
+    openModal: function(modalName, model) {
+      this.controllerFor(modalName).set('model', model);
+      return this.render(modalName, {
+        into: 'application',
+        outlet: 'modal'
+      });
+    },
+
+    closeModal: function() {
+      return this.disconnectOutlet({
+        outlet: 'modal',
+        parentView: 'application'
+      });
     }
   }
 });

app/serializers/application.js

@@ -1,3 +1,8 @@
+import Ember from 'ember';
 import JsonApiSerializer from 'ember-json-api/json-api-serializer';
 
-export default JsonApiSerializer.extend({});
+export default JsonApiSerializer.extend({
+  keyForAttribute: function(key) {
+    return Ember.String.decamelize(key);
+  }
+});

app/styles/app.scss

@@ -5,5 +5,6 @@
 @import "colors";
 
 @import "team-layout";
+@import "modals";
 
-@import "components/team-options-menu.scss";
+@import "components/team-options-menu.scss";

app/styles/modals.scss

@@ -0,0 +1,24 @@
+* {
+  box-sizing: border-box;
+}
+
+.modal {
+  position: relative;
+  margin: 10px auto;
+  width: 300px;
+  background-color: #fff;
+  padding: 1em;
+}
+
+input {
+  width: 100%;
+}
+
+.overlay {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+}

app/templates/application.hbs

@@ -1 +1,2 @@
 {{outlet}}
+{{outlet 'modal'}}

app/templates/components/base-modal.hbs

@@ -0,0 +1,6 @@
+<div class="overlay" {{action "close"}}> 
+</div>
+<div class="modal">
+  <h1>{{title}}</h1>
+  {{yield}}
+</div>

app/templates/components/page-node.hbs

@@ -1,8 +1,10 @@
 {{#link-to 'team.pages.page' model}}{{model.title}}{{/link-to}}
+(<a {{action 'addChild'}}>Add Child</a>)
+(<a {{action 'remove'}}>Remove Page</a>)
 {{#if hasChildren}}
   <ul>
     {{#each child in model.children}}
       <li>{{page-node model=child}}</li>
     {{/each}}
   </ul>
-{{/if}}
+{{/if}}

app/templates/new-page-modal.hbs

@@ -0,0 +1,9 @@
+{{#base-modal title="New Page" action="close"}}
+  <form {{action 'save' on='submit' target=view}}>
+    {{input value=model.title}}
+    <button {{action 'save'}}>Save</button>
+    {{#if showError}}
+      {{errorMessage}}
+    {{/if}}
+  </form>
+{{/base-modal}}

app/templates/team/index.hbs

@@ -1 +1 @@
-{{outlet}}
+{{outlet}}

tests/integration/pages-list-test.js

@@ -69,19 +69,19 @@ test('Navigate to page', function(assert) {
   visit('/pages');
 
   andThen(function() {
-    click(".pages-tree .page-node:first > a");
+    click(".pages-tree .page-node:first > a:first");
   });
 
   andThen(function() {
     assert.equal(find('.page-expanded .page-title .content').text(), "Westeros");
     assert.equal(find('.page-expanded .page-body .content').text(), "Fake place from a book series for nerds");
-    click(".pages-tree .page-node:first > ul > li > .page-node:first > a");
+    click(".pages-tree .page-node:first > ul > li > .page-node:first > a:first");
   });
 
   andThen(function() {
     assert.equal(find('.page-expanded .page-title .content').text(), "The North");
     assert.equal(find('.page-expanded .page-body .content').text(), "It's really cold");
-    click(".pages-tree .page-node:first > ul > li > .page-node:first > ul > li > .page-node:first a");
+    click(".pages-tree .page-node:first > ul > li > .page-node:first > ul > li > .page-node:first a:first");
   });
 
   andThen(function() {