From 534fe6621034ee93fb14b7855de8fe7794d70dc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerardo=20P=C3=A9rez?= Date: Sat, 21 Mar 2015 22:58:00 -0600 Subject: [PATCH 1/8] Triggers delete and update --- Brocfile.js | 8 +- README.md | 3 + addon/components/crud-table.js | 104 +++++++++--- addon/templates/components/crud-table-row.hbs | 1 - addon/templates/components/crud-table.hbs | 9 +- app/templates/crud-table-modal.hbs | 24 +++ bower.json | 5 +- package.json | 79 +++++---- tests/unit/components/crud-table-test.js | 151 ++++++++++++++---- 9 files changed, 282 insertions(+), 102 deletions(-) delete mode 100755 addon/templates/components/crud-table-row.hbs create mode 100755 app/templates/crud-table-modal.hbs diff --git a/Brocfile.js b/Brocfile.js index 042a64d..ee1fded 100755 --- a/Brocfile.js +++ b/Brocfile.js @@ -3,7 +3,11 @@ var EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); -var app = new EmberAddon(); +var app = new EmberAddon({ + 'ember-cli-bootstrap': { + 'importBootstrapJS': true + } +}); // Use `app.import` to add additional libraries to the generated // output files. @@ -17,5 +21,7 @@ var app = new EmberAddon(); // modules that you would like to import into your application // please specify an object with the list of modules as keys // along with the exports of each module as its value. +app.import('bower_components/bootstrap/dist/js/bootstrap.js'); +app.import('bower_components/bootstrap/dist/css/bootstrap.css'); module.exports = app.toTree(); diff --git a/README.md b/README.md index 46ca723..af18980 100755 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ + +[![Build Status](https://travis-ci.org/gerard2p/ember-cli-crudtable.svg?branch=master)](https://travis-ci.org/gerard2p/ember-cli-crudtable) + # Ember-cli-crudtable This README outlines the details of collaborating on this Ember addon. diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index 1dd9aac..759722e 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -1,51 +1,111 @@ +/*globals $*/ import Ember from 'ember'; import layout from '../templates/components/crud-table'; +var regenerateView = function (cmp) { + var model = []; + var n = -1; + cmp.value.forEach(function (row) { + var rrrow = []; + n++; + cmp.fields.forEach(function (field) { + var data = row.get ? row.get(field) : row[field]; + rrrow.push(data); + }); + //rrrow.id = row.get ? row.get('id') : row['id']; + rrrow.n = n; + model.push(rrrow); + }); + cmp.set('model', model); +}; +var showmodal = function () { + $("#CrudTableDeleteRecordModal").modal('show'); + }; + +var hidemodal = function (ctx) { + $("#CrudTableDeleteRecordModal").modal('hide'); + ctx.set('newRecord', false); + ctx.set('isDeleting', false); + ctx.set('currentRecord',null); + }; + export default Ember.Component.extend({ - stripped:false, - hover:false, + attributeBindings: ['style'], + style: function () { + return 'color: ' + this.get('name') + ';'; + }.property('name'), - actions:{ - edit:function(){ - this.get('edit')(); + stripped: false, + hover: false, + createRecord:'', + updateRecord:'', + deleteRecord:'', + currentRecord:null, + actions: { + confirm: function () { + if (this.get('newRecord')) { + this.sendAction('createRecord'); + } else { + if (this.get('isDeleting')) { + this.sendAction('deleteRecord'); + } else { + this.sendAction('updateRecord'); + } + } + this.sendAction.apply(this,['delete']); + hidemodal(this); + }, + internal_create: function () { + this.set('newRecord', true); + showmodal(); }, - delete:function(){ - this.get('delete')(); + internal_edit: function (record) { + this.set('isDeleting', false); + var obj = this.get('value').objectAtContent(record.n); + this.set('currentRecord',obj); + $("#CrudTableDeleteRecordModal .modal-title").html("Updating"); + showmodal(); + }, + internal_delete: function (record) { + this.set('isDeleting', true); + var obj = this.get('value').objectAtContent(record.n); + this.set('currentRecord',obj); + obj = obj.get ? obj.get(this.get('fields')[0]) : obj[this.get('fields')[0]]; + $("#CrudTableDeleteRecordModal .modal-title").html("You're about to delete a record"); + $("#CrudTableDeleteRecordModal .modal-body").html( + "Deleting the record: " + + obj + + " is a permanent action." + ); + showmodal(); + //this.get('delete')(); } }, layout: layout, class: "", value: [], fields: "id", - edit: function () { - alert('edit'); - }, - delete: function () { - alert('delete'); - }, init: function () { var that = this; this._super(); this.set('fields', this.fields.split(',')); - this.set('editdelete', this.edit != null || this.delete !=null ); + this.set('editdelete', this.deleteRecord != null || this.updateRecord != null); this.init = function () { that._super(); }.on('willInsertElement'); }.on('willInsertElement'), setup: function () { var that = this; - var model = []; - this.value.forEach(function (row) { - var rrrow = []; - that.fields.forEach(function (field) { - rrrow.push(row.get(field)); + regenerateView(that); + this.fields.forEach(function (field) { + that.addObserver('value.content.@each.' + field, function () { + regenerateView(that); }); - model.push(rrrow); }); - this.set('model', model); + //$('body').prepend($("#CrudTableDeleteRecordModal")); + $("#CrudTableDeleteRecordModal").modal('hide'); }.on('didInsertElement'), - teardown: function () { //this._drop.destroy(); }.on('willDestroyElement'), diff --git a/addon/templates/components/crud-table-row.hbs b/addon/templates/components/crud-table-row.hbs deleted file mode 100755 index a9dd238..0000000 --- a/addon/templates/components/crud-table-row.hbs +++ /dev/null @@ -1 +0,0 @@ -A row diff --git a/addon/templates/components/crud-table.hbs b/addon/templates/components/crud-table.hbs index 1122050..2fa2bb1 100755 --- a/addon/templates/components/crud-table.hbs +++ b/addon/templates/components/crud-table.hbs @@ -44,11 +44,11 @@ {{#if this.editdelete}} - {{#if this.edit}} - + {{#if this.updateRecord}} + {{/if}} - {{#if this.delete}} - + {{#if this.deleteRecord}} + {{/if}} {{/if}} @@ -59,3 +59,4 @@ {{yield}} +{{render 'crud-table-modal' this}} diff --git a/app/templates/crud-table-modal.hbs b/app/templates/crud-table-modal.hbs new file mode 100755 index 0000000..fc7e315 --- /dev/null +++ b/app/templates/crud-table-modal.hbs @@ -0,0 +1,24 @@ + diff --git a/bower.json b/bower.json index 9b27e17..45a61f4 100755 --- a/bower.json +++ b/bower.json @@ -12,5 +12,8 @@ "ember-qunit": "0.2.8", "ember-qunit-notifications": "0.0.7", "qunit": "~1.17.1" + }, + "devDependencies": { + "bootstrap": "~3.3.4" } -} \ No newline at end of file +} diff --git a/package.json b/package.json index c75295d..dcf70d1 100755 --- a/package.json +++ b/package.json @@ -1,44 +1,43 @@ { - "name": "ember-cli-crudtable", - "version": "0.0.1", - "description": "The default blueprint for ember-cli addons.", - "directories": { - "doc": "doc", - "test": "tests" - }, - "scripts": { - "start": "ember server", - "build": "ember build", - "test": "ember test" - }, - "repository": "https://github.com/gerard2p/ember-cli-crudtable.git", - "engines": { - "node": ">= 0.10.0" - }, - "dependencies": { - "ember-cli-htmlbars": "0.7.4" - }, - "author": "", - "license": "MIT", - "devDependencies": { - "broccoli-asset-rev": "^2.0.0", - "ember-cli": "0.2.0", - "ember-cli-app-version": "0.3.2", - "ember-cli-babel": "^4.0.0", - "ember-cli-content-security-policy": "0.3.0", - "ember-cli-dependency-checker": "0.0.8", - - "ember-cli-ic-ajax": "0.1.1", - "ember-cli-inject-live-reload": "^1.3.0", - "ember-cli-qunit": "0.3.9", - "ember-cli-uglify": "1.0.1", - "ember-data": "1.0.0-beta.15", - "ember-export-application-global": "^1.0.2" - }, - "keywords": [ + "name": "ember-cli-crudtable", + "version": "0.0.1", + "description": "The default blueprint for ember-cli addons.", + "directories": { + "doc": "doc", + "test": "tests" + }, + "scripts": { + "start": "ember server", + "build": "ember build", + "test": "ember test" + }, + "repository": "https://github.com/gerard2p/ember-cli-crudtable.git", + "engines": { + "node": ">= 0.10.0" + }, + "dependencies": { + "ember-cli-htmlbars": "0.7.4" + }, + "author": "", + "license": "MIT", + "devDependencies": { + "broccoli-asset-rev": "^2.0.0", + "ember-cli": "0.2.0", + "ember-cli-app-version": "0.3.2", + "ember-cli-babel": "^4.0.0", + "ember-cli-content-security-policy": "0.3.0", + "ember-cli-dependency-checker": "0.0.8", + "ember-cli-ic-ajax": "0.1.1", + "ember-cli-inject-live-reload": "^1.3.0", + "ember-cli-qunit": "0.3.9", + "ember-cli-uglify": "1.0.1", + "ember-data": "1.0.0-beta.15", + "ember-export-application-global": "^1.0.2" + }, + "keywords": [ "ember-addon" ], - "ember-addon": { - "configPath": "tests/dummy/config" - } + "ember-addon": { + "configPath": "tests/dummy/config" + } } diff --git a/tests/unit/components/crud-table-test.js b/tests/unit/components/crud-table-test.js index 6925ea4..b584445 100755 --- a/tests/unit/components/crud-table-test.js +++ b/tests/unit/components/crud-table-test.js @@ -1,53 +1,138 @@ +/* globals equal, ok*/ import { moduleForComponent, test } from 'ember-qunit'; - +import startApp from '../../helpers/start-app'; import Ember from 'ember'; +import DS from "ember-data"; + +var component; +var App; +var ArrField = 'Field1,Field2,Field3'; +var Generic = DS.Model.extend({ + id: DS.attr('number'), + Field1: DS.attr('string'), + Field2: DS.attr('string'), + Field3: DS.attr('string') +}); +var emberdatafix = DS.RecordArray.create({ + content: [ + { + id: '1', + Field1: 'Data1', + Field2: 'Data2', + Field3: 'Data3' + }, + { + id: '2', + Field1: 'Data4', + Field2: 'Data5', + Field3: 'Data6' + } +] +}); +var targetObject = { + delete: function () { + component.set('value', DS.RecordArray.create({ + content: [ + { + id: '2', + Field1: 'Data4', + Field2: 'Data5', + Field3: 'Data6' + } +] + })); + }, + update: function () { + ok(true, 'external Action was called!'); + } +}; moduleForComponent('crud-table', { // specify the other units that are required for this test // needs: ['component:foo', 'helper:bar'] -}); + needs: ['template:crud-table-row', 'template:crud-table-modal'], -var ArrField = ['Field1','Field2','Field3']; -var emberdatafix = [ - { - id:'1', - Field1:'Data1', - Field2:'Data2', - Field3:'Data3' + setup: function () { + App = startApp(); + component = this.subject({ + fields: 'Field1,Field2,Field3', + value: emberdatafix, + stripped: true, + hover: false, + deleteRecord: 'delete', + updateRecord: 'update' + }); + component.set('targetObject', targetObject); }, - { - id:'2', - Field1:'Data4', - Field2:'Data5', - Field3:'Data6' + teardown: function () { + Ember.run(App, 'destroy'); } -]; + +}); -test('It Renders', function (assert) { - assert.expect(2); - var component = this.subject(); - assert.equal(component._state, 'preRender'); - this.render(); - assert.equal(component._state, 'inDOM'); + +test('Can set init variables', function () { + //assert.expect(4); + + var oldvalue = component.get('value'); + ArrField = ArrField.split(','); + + equal(component.get('fields').length, ArrField.length); + equal(component.get('fields')[2], ArrField[2]); + equal(emberdatafix, oldvalue); + equal(this.$('table.table>tbody>tr').children().length, (ArrField.length + 1) * this.$('table.table>tbody').children().length); + Ember.run(function () { + Ember.set(oldvalue.content[0], 'Field1', 'Changed'); + component.set('value', oldvalue); + }); + equal(this.$('table.table>tbody>tr:eq(0)>td:eq(0)').text(), 'Changed'); +}); + +test('User attemps to delete a Record and cancels', function () { + var rows = this.$('table.table>tbody>tr').children().length; + click('[data-action=delete]:eq(0)'); + andThen(function () { + click('[data-dismiss=modal]'); + andThen(function () { + equal(find('table.table>tbody>tr').children().length, rows); + }); + }); +}); + +test('User Create a Record', function () { + var rows = this.$('table.table>tbody>tr').length; + click('[data-action=create]'); + andThen(function () { + click('[data-action=confirm]'); + andThen(function () { + equal(find('table.table>tbody>tr').length, rows+1); + }); + }); }); -test('Can set init variables', function (assert) { - assert.expect(10); - var component = this.subject({ - fields:'Field1,Field2,Field3', - value:emberdatafix, - stripped:true, - hover:false +test('User Edits a Record', function () { + var rows = this.$('table.table>tbody>tr').length; + click('[data-action=edit]:eq(0)'); + andThen(function () { + click('[data-action=confirm]'); + andThen(function () { + equal(find('table.table>tbody>tr').length, rows); + }); }); - //component.set('fields', 'Field1,Field2,Field3'); - this.render(); +}); - assert.equal( this.$().attr('class'), 'ember-view'); - //assert.equal( component.get('fields'),ArrField ); - //assert.equal( $('table.table>tbody>tr').count(),2 ); +test('User delete a Record', function () { + var rows = this.$('table.table>tbody>tr').length; + click('[data-action=delete]:eq(0)'); + andThen(function () { + click('[data-action=confirm]'); + andThen(function () { + equal(find('table.table>tbody>tr').length, rows - 1); + }); + }); }); From 2e8e048a9ab197f13a7c3d2f22d0df3b5a7b93e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerardo=20P=C3=A9rez?= Date: Mon, 23 Mar 2015 15:07:46 -0600 Subject: [PATCH 2/8] everyThing working --- addon/components/crud-table.js | 5 +- addon/templates/components/crud-table.hbs | 43 +++++++-------- addon/utils/crud-table-controller.js | 65 +++++++++++++++++++++++ app/templates/crud-table-modal.hbs | 14 ++++- reload | 0 tests/unit/components/crud-table-test.js | 30 ++++++++++- 6 files changed, 131 insertions(+), 26 deletions(-) create mode 100644 addon/utils/crud-table-controller.js create mode 100644 reload diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index 759722e..88c8b23 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -64,7 +64,7 @@ export default Ember.Component.extend({ this.set('isDeleting', false); var obj = this.get('value').objectAtContent(record.n); this.set('currentRecord',obj); - $("#CrudTableDeleteRecordModal .modal-title").html("Updating"); + //$("#CrudTableDeleteRecordModal .modal-title").html("Updating"); showmodal(); }, internal_delete: function (record) { @@ -72,7 +72,8 @@ export default Ember.Component.extend({ var obj = this.get('value').objectAtContent(record.n); this.set('currentRecord',obj); obj = obj.get ? obj.get(this.get('fields')[0]) : obj[this.get('fields')[0]]; - $("#CrudTableDeleteRecordModal .modal-title").html("You're about to delete a record"); + this.set('currentRecordDesc',obj); + //$("#CrudTableDeleteRecordModal .modal-title").html("You're about to delete a record"); $("#CrudTableDeleteRecordModal .modal-body").html( "Deleting the record: " + obj + diff --git a/addon/templates/components/crud-table.hbs b/addon/templates/components/crud-table.hbs index 2fa2bb1..9ace79a 100755 --- a/addon/templates/components/crud-table.hbs +++ b/addon/templates/components/crud-table.hbs @@ -1,5 +1,9 @@
-
+
+ +
+
- +
- +
{{#each field in this.fields}} - - {{/each}} - {{#if this.editdelete}} + + {{/each}} {{#if this.editdelete}} {{/if}} @@ -39,24 +42,22 @@ {{#each row in this.model}} - - {{render 'crud-table-row' row}} - - {{#if this.editdelete}} - + + {{render 'crud-table-row' row}} {{#if this.editdelete}} + + + {{/if}} + {{/each}}
{{field}}{{field}}Actions
- {{#if this.updateRecord}} - - {{/if}} - {{#if this.deleteRecord}} - - {{/if}} -
+ {{#if this.updateRecord}} + + {{/if}} {{#if this.deleteRecord}} + {{/if}} -
-{{yield}} -{{render 'crud-table-modal' this}} +{{yield}} {{render 'crud-table-modal' this}} diff --git a/addon/utils/crud-table-controller.js b/addon/utils/crud-table-controller.js new file mode 100644 index 0000000..e8ac478 --- /dev/null +++ b/addon/utils/crud-table-controller.js @@ -0,0 +1,65 @@ +import Ember from 'ember'; +import App from '../app'; +//import EmberValidations from 'ember-validations'; + +export +default Ember.ObjectController.extend(/*EmberValidations.Mixin,*/ { + needs: ['application'], + isEditing: false, + actions: { + create: function (records) { + var self = this; + if (self.model.get('isNew')) { + self.model.save().then(function () { + self.send('emit', 'success', '¡Creado Exitosamente!'); + self.send('goback'); + }, function (e) { + self.send('emit', 'error', 'Ha ocurrido un error al crear el registro. ' + e.responseText); + }); + } + }, + read:function(){ + + }, + update: function () { + var self = this; + var promises = []; + //if(self.model.get('isDirty')){ + promises.push(self.get('model').save()); + //}else{ + // self.set('isEditing',false); + //} + Ember.A(Ember.keys(self.model._dependentRelations)).any(function (key) { + var value = Ember.get(self.model, key); + if (value.get('isDirty')) { + promises.push(value.get('content').save()); + } + }); + Ember.RSVP.Promise.all(promises).then(function () { + self.set('isEditing', false); + self.send('emit', 'success', 'Actualizado Correctamente'); + }, function (e) { + self.send('emit', 'error', 'Ha ocurrido un error al crear el registro. ' + e.responseText); + }); + + }, + delete: function () { + var self = this; + this.model.destroyRecord().then(function () { + self.send('emit', 'success', '¡Eliminado Corréctamente!'); + self.send('goback'); + },function(e){ + self.send('emit', 'error', 'Ha ocurrido un error al crear el registro. ' + e.responseText); + }); + }, + cancel: function () { + if (this.model.get('isDirty')) { + this.model.rollback(); + } + this.set('isEditing', false); + }, + edit: function () { + this.set('isEditing', true); + } + } +}); diff --git a/app/templates/crud-table-modal.hbs b/app/templates/crud-table-modal.hbs index fc7e315..74764c2 100755 --- a/app/templates/crud-table-modal.hbs +++ b/app/templates/crud-table-modal.hbs @@ -1,10 +1,20 @@