From 0f147f3563764881458c9561822fecc75d660fa8 Mon Sep 17 00:00:00 2001 From: israel de la hoz Date: Wed, 20 May 2015 23:03:59 -0500 Subject: [PATCH 1/6] add a page action --- app/components/base-modal.js | 9 +++++++ app/controllers/new-page-modal.js | 32 +++++++++++++++++++++++++ app/controllers/team/index.js | 19 +++++++++++++-- app/models/page.js | 3 ++- app/routes/application.js | 15 ++++++++++++ app/styles/app.scss | 2 ++ app/styles/modals.scss | 24 +++++++++++++++++++ app/templates/application.hbs | 1 + app/templates/components/base-modal.hbs | 6 +++++ app/templates/new-page-modal.hbs | 9 +++++++ app/templates/team/index.hbs | 1 + 11 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 app/components/base-modal.js create mode 100644 app/controllers/new-page-modal.js create mode 100644 app/styles/modals.scss create mode 100644 app/templates/components/base-modal.hbs create mode 100644 app/templates/new-page-modal.hbs diff --git a/app/components/base-modal.js b/app/components/base-modal.js new file mode 100644 index 0000000..dbb2046 --- /dev/null +++ b/app/components/base-modal.js @@ -0,0 +1,9 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + actions: { + close: function() { + return this.sendAction(); + } + } +}); diff --git a/app/controllers/new-page-modal.js b/app/controllers/new-page-modal.js new file mode 100644 index 0000000..e6eda1f --- /dev/null +++ b/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); + } + } +}); \ No newline at end of file diff --git a/app/controllers/team/index.js b/app/controllers/team/index.js index 6fdffd2..1771f61 100644 --- a/app/controllers/team/index.js +++ b/app/controllers/team/index.js @@ -2,6 +2,21 @@ import Ember from 'ember'; export default Ember.Controller.extend({ rootPageNodes: Ember.computed('model.@each', function() { - return this.get('model').filterProperty('root', true); - }) + return this.get('model').filterProperty('rootNode', true); + }), + actions: { + createRootPage: function(){ + var controller = this; + var page = this.store.createRecord('page', {}); + page.on('didCommit', function(page){ + controller.onPageCreated(page); + }) + this.send('openModal', 'new-page-modal', page); + } + }, + + onPageCreated: function(page){ + this.store.push('page', page) + } + }); \ No newline at end of file diff --git a/app/models/page.js b/app/models/page.js index 6f27490..cd18bf9 100644 --- a/app/models/page.js +++ b/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'), - root: DS.attr('boolean') + rootNode: DS.attr('boolean'), + parentId: DS.attr('number') }); // Page.reopenClass({ diff --git a/app/routes/application.js b/app/routes/application.js index 29470f1..029ac90 100644 --- a/app/routes/application.js +++ b/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' + }); } } }); \ No newline at end of file diff --git a/app/styles/app.scss b/app/styles/app.scss index 87a8af2..3aa1ba2 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -7,5 +7,7 @@ @import "team"; @import "team-sidebar"; @import "team-main"; +@import "modals"; + @import "components/team-options-menu.scss"; \ No newline at end of file diff --git a/app/styles/modals.scss b/app/styles/modals.scss new file mode 100644 index 0000000..72ff28d --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/app/templates/application.hbs b/app/templates/application.hbs index c24cd68..1e9c8e4 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1 +1,2 @@ {{outlet}} +{{outlet 'modal'}} \ No newline at end of file diff --git a/app/templates/components/base-modal.hbs b/app/templates/components/base-modal.hbs new file mode 100644 index 0000000..84b8791 --- /dev/null +++ b/app/templates/components/base-modal.hbs @@ -0,0 +1,6 @@ +
+
+
+

{{title}}

+ {{yield}} +
\ No newline at end of file diff --git a/app/templates/new-page-modal.hbs b/app/templates/new-page-modal.hbs new file mode 100644 index 0000000..38aaf01 --- /dev/null +++ b/app/templates/new-page-modal.hbs @@ -0,0 +1,9 @@ +{{#base-modal title='Settings' action="close"}} +
+ {{input value=model.title}} + + {{#if showError}} + {{errorMessage}} + {{/if}} +
+{{/base-modal}} \ No newline at end of file diff --git a/app/templates/team/index.hbs b/app/templates/team/index.hbs index 9040e2b..430d8cc 100644 --- a/app/templates/team/index.hbs +++ b/app/templates/team/index.hbs @@ -1,5 +1,6 @@

Pages

+ {{#each page in rootPageNodes}} {{page-node model=page}} {{/each}} From 87dec3fe5abb1003214f9600d5f93d520d500988 Mon Sep 17 00:00:00 2001 From: israel de la hoz Date: Wed, 20 May 2015 23:27:41 -0500 Subject: [PATCH 2/6] add new record to list --- app/controllers/team/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/controllers/team/index.js b/app/controllers/team/index.js index 1771f61..5b181f0 100644 --- a/app/controllers/team/index.js +++ b/app/controllers/team/index.js @@ -16,7 +16,6 @@ export default Ember.Controller.extend({ }, onPageCreated: function(page){ - this.store.push('page', page) + this.get('model').pushObject(page); } - }); \ No newline at end of file From d7be73a43b5ff7db92d7b61c9be3a124c9654135 Mon Sep 17 00:00:00 2001 From: israel de la hoz Date: Thu, 21 May 2015 00:12:01 -0500 Subject: [PATCH 3/6] child action --- app/components/page-node.js | 8 +++- app/controllers/team/index.js | 39 ++++++++++++++----- .../inject-store-into-component.js | 6 +++ app/templates/components/page-node.hbs | 1 + app/templates/team/index.hbs | 2 +- 5 files changed, 45 insertions(+), 11 deletions(-) create mode 100644 app/initializers/inject-store-into-component.js diff --git a/app/components/page-node.js b/app/components/page-node.js index 282d115..3eea430 100644 --- a/app/components/page-node.js +++ b/app/components/page-node.js @@ -3,5 +3,11 @@ 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(){ + console.log('onAddchild'); + this.sendAction('createChild', this.get('model')); + } + } }); diff --git a/app/controllers/team/index.js b/app/controllers/team/index.js index 5b181f0..616036a 100644 --- a/app/controllers/team/index.js +++ b/app/controllers/team/index.js @@ -6,16 +6,37 @@ export default Ember.Controller.extend({ }), actions: { createRootPage: function(){ - var controller = this; - var page = this.store.createRecord('page', {}); - page.on('didCommit', function(page){ - controller.onPageCreated(page); - }) - this.send('openModal', 'new-page-modal', page); - } + 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); }, - onPageCreated: function(page){ - this.get('model').pushObject(page); + paramsForPage: function(parent){ + if(parent){ + return {parentId: parent.get('id')}; + }else{ + return {}; + } } }); \ No newline at end of file diff --git a/app/initializers/inject-store-into-component.js b/app/initializers/inject-store-into-component.js new file mode 100644 index 0000000..f07f2af --- /dev/null +++ b/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'); + }, +}; \ No newline at end of file diff --git a/app/templates/components/page-node.hbs b/app/templates/components/page-node.hbs index 8a7ad63..52958fa 100644 --- a/app/templates/components/page-node.hbs +++ b/app/templates/components/page-node.hbs @@ -1,4 +1,5 @@ {{#link-to 'team.index.page' model}}{{model.title}}{{/link-to}} +(Add Child) {{#if hasChildren}}
    {{#each child in model.children}} diff --git a/app/templates/team/index.hbs b/app/templates/team/index.hbs index 430d8cc..08cb028 100644 --- a/app/templates/team/index.hbs +++ b/app/templates/team/index.hbs @@ -2,7 +2,7 @@
    {{#each page in rootPageNodes}} - {{page-node model=page}} + {{page-node model=page createChild=createChildPage}} {{/each}}
    From 39384e80e3221b59003b311188bb488084640dd9 Mon Sep 17 00:00:00 2001 From: israel de la hoz Date: Thu, 21 May 2015 07:05:46 -0500 Subject: [PATCH 4/6] render modal form for adding childs --- app/components/page-node.js | 1 + app/templates/new-page-modal.hbs | 2 +- app/templates/team/index.hbs | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/page-node.js b/app/components/page-node.js index 3eea430..bcb5c21 100644 --- a/app/components/page-node.js +++ b/app/components/page-node.js @@ -7,6 +7,7 @@ export default Ember.Component.extend({ actions: { addChild: function(){ console.log('onAddchild'); + console.log(this.get('model')); this.sendAction('createChild', this.get('model')); } } diff --git a/app/templates/new-page-modal.hbs b/app/templates/new-page-modal.hbs index 38aaf01..7476cfc 100644 --- a/app/templates/new-page-modal.hbs +++ b/app/templates/new-page-modal.hbs @@ -1,4 +1,4 @@ -{{#base-modal title='Settings' action="close"}} +{{#base-modal title="New Page" action="close"}}
    {{input value=model.title}} diff --git a/app/templates/team/index.hbs b/app/templates/team/index.hbs index 08cb028..73bfec2 100644 --- a/app/templates/team/index.hbs +++ b/app/templates/team/index.hbs @@ -2,7 +2,7 @@
    {{#each page in rootPageNodes}} - {{page-node model=page createChild=createChildPage}} + {{page-node model=page createChild="createChildPage"}} {{/each}}
    From 25c0ec500165bd43a14dc002f8eca2a80c7afc03 Mon Sep 17 00:00:00 2001 From: israel de la hoz Date: Tue, 26 May 2015 18:14:23 -0500 Subject: [PATCH 5/6] fix problem with attributes camelize --- app/serializers/application.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/serializers/application.js b/app/serializers/application.js index b08dc8b..9dd5919 100644 --- a/app/serializers/application.js +++ b/app/serializers/application.js @@ -1,3 +1,7 @@ import JsonApiSerializer from 'ember-json-api/json-api-serializer'; -export default JsonApiSerializer.extend({}); \ No newline at end of file +export default JsonApiSerializer.extend({ + keyForAttribute: function(key) { + return Ember.String.decamelize(key); + } +}); \ No newline at end of file From c1bcd544bda0d53fdb42b5d69e8b73c4b25ae47e Mon Sep 17 00:00:00 2001 From: israel de la hoz Date: Tue, 26 May 2015 18:40:17 -0500 Subject: [PATCH 6/6] remove button --- app/components/page-node.js | 10 ++++++++-- app/controllers/team/index.js | 4 +--- app/templates/components/page-node.hbs | 1 + 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/app/components/page-node.js b/app/components/page-node.js index bcb5c21..21434de 100644 --- a/app/components/page-node.js +++ b/app/components/page-node.js @@ -6,9 +6,15 @@ export default Ember.Component.extend({ hasChildren: Ember.computed.notEmpty('model.children'), actions: { addChild: function(){ - console.log('onAddchild'); - console.log(this.get('model')); this.sendAction('createChild', this.get('model')); + }, + remove: function(){ + var component = this; + var page = this.get('model'); + page.deleteRecord(); + page.save().then(function(){ + component.destroy(); + }); } } }); diff --git a/app/controllers/team/index.js b/app/controllers/team/index.js index 62650f1..2953b8f 100644 --- a/app/controllers/team/index.js +++ b/app/controllers/team/index.js @@ -1,9 +1,7 @@ import Ember from 'ember'; export default Ember.Controller.extend({ - rootPageNodes: Ember.computed.filterBy('model', 'rootNode', true) - return this.get('model').filterProperty('rootNode', true); - }), + rootPageNodes: Ember.computed.filterBy('model', 'rootNode', true), actions: { createRootPage: function(){ this.createPage(); diff --git a/app/templates/components/page-node.hbs b/app/templates/components/page-node.hbs index 52958fa..ced0128 100644 --- a/app/templates/components/page-node.hbs +++ b/app/templates/components/page-node.hbs @@ -1,5 +1,6 @@ {{#link-to 'team.index.page' model}}{{model.title}}{{/link-to}} (Add Child) +(Remove Page) {{#if hasChildren}}
      {{#each child in model.children}}