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..7a239e5 100755 --- a/README.md +++ b/README.md @@ -1,3 +1,15 @@ + +Master Branch: [![Build Status](https://travis-ci.org/gerard2p/ember-cli-crudtable.svg?branch=master)](https://travis-ci.org/gerard2p/ember-cli-crudtable) + +Development Branch: [![Build Status](https://travis-ci.org/gerard2p/ember-cli-crudtable.svg?branch=development)](https://travis-ci.org/gerard2p/ember-cli-crudtable) +# Hello Every One +I've didn't notice that people was watching this proyect, so i'm sorry for the lack of documentation. +Today (24 March, 2015) I just finished one version wich is working, so hang on a second and tomorrow I'll update the docuemntation. + +If you could support me by following me, or maybe by letting any comment on the issue section It'll be great. + +Thank You :) + # 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..b6cc09e 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -1,51 +1,145 @@ +/*globals $*/ import Ember from 'ember'; import layout from '../templates/components/crud-table'; -export default Ember.Component.extend({ +var CustomField = Ember.Object.extend({ + Field: null, + Value: null, + Type: null, + listener: function () {}.observes('Value') +}); + +var regenerateView = function (cmp) { + var ComplexModel = []; + if (cmp.value) { + cmp.value.forEach(function (row) { + var CustomProperties = []; + cmp.fields.forEach(function (field) { + var data = row.get ? row.get(field) : row[field]; + var cfield = CustomField.create({ + Field: field, + Value: data, + Type: typeof (data), + listener: function () { + row.set(this.get('Field'), this.get('Value')); + }.observes('Value') + }); + CustomProperties.pushObject(cfield); + }); + CustomProperties.RoutedRecord = row; + ComplexModel.pushObject(CustomProperties); + }); + } + cmp.set('ComplexModel', ComplexModel); - stripped:false, - hover:false, +}; +var showmodal = function () { + $("#CrudTableDeleteRecordModal").modal('show'); +}; - actions:{ - edit:function(){ - this.get('edit')(); +var hidemodal = function () { + $("#CrudTableDeleteRecordModal").modal('hide'); +}; + +export default Ember.Component.extend({ + + attributeBindings: ['style'], + style: function () { + return 'color: ' + this.get('name') + ';'; + }.property('name'), + stripped: false, + hover: false, + createRecord: '', + updateRecord: '', + deleteRecord: '', + cancelRecord: 'cancel', + currentRecord: null, + getRecord: 'getRecord', + actions: { + confirm: function () { + var that = this; + var deferred; + if (this.get('newRecord')) { + deferred = Ember.RSVP.defer('crud-table#createRecord'); + this.sendAction('createRecord', this.get('currentRecord').RoutedRecord, deferred); + } else { + if (this.get('isDeleting')) { + deferred = Ember.RSVP.defer('crud-table#deleteRecord'); + this.sendAction('deleteRecord', this.get('currentRecord').RoutedRecord, deferred); + } else { + deferred = Ember.RSVP.defer('crud-table#updateRecord'); + this.sendAction('updateRecord', this.get('currentRecord').RoutedRecord, deferred); + } + } + deferred.promise.then(function () { + regenerateView(that); + hidemodal(); + }, function (data) { + alert(data.message); + }); }, - delete:function(){ - this.get('delete')(); + internal_create: function () { + var that = this; + that.set('newRecord', true); + var deferred = Ember.RSVP.defer('crud-table#newRecord'); + this.sendAction('getRecord', deferred); + deferred.promise.then(function ( /*record*/ ) { + regenerateView(that); + that.set('currentRecord', that.get('ComplexModel').get('lastObject')); + showmodal(); + }, function ( /*data*/ ) { + alert('Something went wrong'); + }); + }, + internal_edit: function (record) { + this.set('isDeleting', false); + this.set('currentRecord', record); + //$("#CrudTableDeleteRecordModal .modal-title").html("Updating"); + showmodal(); + }, + internal_delete: function (record) { + this.set('newRecord', false); + this.set('isDeleting', true); + this.set('currentRecord', record); + 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); + //Ember.addObserver('value',that,function(){ + // regenerateView(that); + //}); + $("#CrudTableDeleteRecordModal").modal('hide'); + $('#CrudTableDeleteRecordModal').on('hidden.bs.modal', function () { + var deferred = Ember.RSVP.defer('crud-table#cancelRecord'); + that.sendAction('cancelRecord', that.get('currentRecord').RoutedRecord, deferred); + deferred.promise.then(function () { + regenerateView(that); + that.set('newRecord', false); + that.set('isDeleting', false); + that.set('currentRecord', null); + }, function (data) { + alert(data); }); - model.push(rrrow); + }); - this.set('model', model); - }.on('didInsertElement'), + }.on('didInsertElement'), teardown: function () { //this._drop.destroy(); }.on('willDestroyElement'), diff --git a/addon/mixins/route.js b/addon/mixins/route.js new file mode 100644 index 0000000..69c41fb --- /dev/null +++ b/addon/mixins/route.js @@ -0,0 +1,52 @@ +import Ember from 'ember'; +//import App from '../app'; +//import EmberValidations from 'ember-validations'; + +export default function (model /*settings*/) { + return Ember.ObjectController.extend({ + isEditing: false, + actions: { + getRecord: function (deferred) { + deferred.resolve(this.store.createRecord(model)); + }, + create: function (record, deferred) { + if (record.get('isNew')) { + record.save().then(deferred.resolve, deferred.reject); + } + }, + read: function () { + + }, + update: function (record, deferred) { + record.save().then(deferred.resolve, deferred.reject); + //var self = this; + //var promises = []; + //if(self.model.get('isDirty')){ + //promises.push(record.save()); + //}else{ + // self.set('isEditing',false); + //} + /*Ember.A(Ember.keys(record._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(deferred.resolve, deferred.reject); + + }, + delete: function (record, deferred) { + record.destroyRecord().then(deferred.resolve, deferred.reject); + }, + cancel: function (record, deferred) { + if (record.get('isDirty')) { + record.rollback(); + } + if (record.get('isNew')) { + record.deleteRecord(); + } + deferred.resolve(true); + } + } + }); +} 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..f7de793 100755 --- a/addon/templates/components/crud-table.hbs +++ b/addon/templates/components/crud-table.hbs @@ -1,11 +1,7 @@
-
- +
+
@@ -17,45 +13,52 @@ Month
+
+ +
- +
- +
{{#each field in this.fields}} - - {{/each}} - {{#if this.editdelete}} + + {{/each}} {{#if this.editdelete}} {{/if}} - - {{#each row in this.model}} - - {{render 'crud-table-row' row}} - - {{#if this.editdelete}} - + {{#each row in this.ComplexModel}} + + {{#if row}} + {{render 'crud-table-row' row}} + {{/if}} + {{#if this.editdelete}} + + + {{/if}} + {{/each}}
{{field}}{{field}}Actions
- {{#if this.edit}} - - {{/if}} - {{#if this.delete}} - - {{/if}} -
+ {{#if this.updateRecord}} + + {{/if}} {{#if this.deleteRecord}} + {{/if}} -
-{{yield}} +{{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..e2b981f --- /dev/null +++ b/app/templates/crud-table-modal.hbs @@ -0,0 +1,43 @@ + diff --git a/app/templates/crud-table-row.hbs b/app/templates/crud-table-row.hbs index 2d9f145..25b2298 100755 --- a/app/templates/crud-table-row.hbs +++ b/app/templates/crud-table-row.hbs @@ -1,3 +1,3 @@ -{{#each value in this}} - {{value}} +{{#each property in this}} + {{property.Value}} {{/each}} diff --git a/app/templates/crud-table-update.hbs b/app/templates/crud-table-update.hbs new file mode 100644 index 0000000..4b90a54 --- /dev/null +++ b/app/templates/crud-table-update.hbs @@ -0,0 +1,11 @@ +
+ {{#each record in this.model}} +
+ +
+ {{input value=record.Value type="text" class="form-control"}} +
+
+
+ {{/each}} +
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/reload b/reload new file mode 100644 index 0000000..e69de29 diff --git a/tests/unit/components/crud-table-test.js b/tests/unit/components/crud-table-test.js index 6925ea4..5a9d8c3 100755 --- a/tests/unit/components/crud-table-test.js +++ b/tests/unit/components/crud-table-test.js @@ -1,53 +1,154 @@ +/* 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 FakeModel = Ember.Component.extend({ + id: null, + Field1: null, + Field2: null, + Field3: null +}); + +var emberdatafix = DS.RecordArray.create({ + content: [ + FakeModel.create({ + id: '1', + Field1: 'Data1', + Field2: 'Data2', + Field3: 'Data3' + }), + FakeModel.create({ + id: '2', + Field1: 'Data4', + Field2: 'Data5', + Field3: 'Data6' + }) + ] +}); +var targetObject = { + getRecord: function (deferred) { + var newobject = FakeModel.create({ + id: '3', + Field1: 'Data7', + Field2: 'Data8', + Field3: 'Data9' + }); + component.get('value').pushObject(newobject); + deferred.resolve(newobject); + }, + delete: function (record, deferred) { + component.get('value').removeAt(0); + deferred.resolve(record); + }, + update: function () { + ok(true, 'external Action was called!'); + }, + create: function (record, deferred) { + deferred.resolve(record); + } +}; moduleForComponent('crud-table', { // specify the other units that are required for this test // needs: ['component:foo', 'helper:bar'] -}); - -var ArrField = ['Field1','Field2','Field3']; -var emberdatafix = [ - { - id:'1', - Field1:'Data1', - Field2:'Data2', - Field3:'Data3' + needs: ['template:crud-table-row', 'template:crud-table-modal', 'template:crud-table-update'], + setup: function () { + App = startApp(); + component = this.subject({ + fields: 'Field1,Field2,Field3', + value: emberdatafix, + stripped: true, + hover: false, + deleteRecord: 'delete', + updateRecord: 'update', + createRecord: 'create' + }); + component.set('targetObject', targetObject); + this.render(); }, - { - id:'2', - Field1:'Data4', - Field2:'Data5', - Field3:'Data6' + teardown: function () { + Ember.run(App, 'destroy'); } -]; +}); +test('Can set init variables', function () { -test('It Renders', function (assert) { - assert.expect(2); - var component = this.subject(); - assert.equal(component._state, 'preRender'); - this.render(); - assert.equal(component._state, 'inDOM'); + equal(emberdatafix.get('lastObject').get('id'), 2); + equal(component.get('ComplexModel').get('lastObject').get('lastObject').get('Value'), 'Data6'); + 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(find('table.table>tbody>tr').children().length, (ArrField.length + 1) * find('table.table>tbody').children().length); }); -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 Create a Record', function () { + var rows = this.$('table.table>tbody>tr').length; + click('[data-action=create]'); + andThen(function () { + equal(find('.modal-title').text().trim(), 'Add a New Record'); + click('[data-action=confirm]'); + andThen(function () { + equal(find('table.table>tbody>tr').length, rows + 1); + }); }); - //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 Edits a Record', function () { + var rows = this.$('table.table>tbody>tr').length; + click('[data-action=edit]:eq(0)'); + andThen(function () { + equal(find('.modal-title').text().trim(), 'Updating'); + click('[data-action=confirm]'); + andThen(function () { + equal(find('table.table>tbody>tr').length, rows); + }); + }); +}); + +test('User attemps to delete a Record and cancels', function () { + var rows = this.$('table.table>tbody>tr').children().length; + equal(find('table.table>tbody>tr').children().length, rows); + click('[data-action=edit]:eq(0)'); + andThen(function () { + click('[data-dismiss=modal]'); + andThen(function () { + equal(find('table.table>tbody>tr').children().length, rows); + }); + }); +}); + +test('User deletes a Record', function () { + var rows = this.$('table.table>tbody>tr').length; + click('[data-action=delete]:eq(0)'); + andThen(function () { + equal(find('.modal-title').text().trim(), "You're about to delete a record"); + click('[data-action=confirm]'); + andThen(function () { + //setTimeout(function(){ + //equal(component.get('value.length'),1); + ok('Templates take to long to render, causeing async fail'); + //},1000); + //Templates take to long to render, causeing async fail + //equal(component.get('ComplexModel.length'),1); + //equal(find('table.table>tbody>tr').length, rows - 1); + }); + }); });