From bf4fb22c21019e917d7cc46dd860c1668cee0d70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerardo=20P=C3=A9rez?= Date: Wed, 25 Mar 2015 00:06:49 -0600 Subject: [PATCH 01/24] Route is Properly a mixin --- addon/components/crud-table.js | 42 +++++++++++++-- addon/mixins/route.js | 5 +- addon/templates/components/crud-table.hbs | 19 ++++--- app/templates/spinner.hbs | 65 +++++++++++++++++++++++ tests/unit/components/crud-table-test.js | 40 +++++++++++--- 5 files changed, 152 insertions(+), 19 deletions(-) create mode 100644 app/templates/spinner.hbs diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index b6cc09e..0bb21f4 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -49,13 +49,34 @@ export default Ember.Component.extend({ }.property('name'), stripped: false, hover: false, - createRecord: '', - updateRecord: '', - deleteRecord: '', + createRecord: 'create', + updateRecord: 'update', + deleteRecord: 'delete', cancelRecord: 'cancel', + searchRecord: 'FetchData', currentRecord: null, getRecord: 'getRecord', + isLoading: true, + SearchTerm: "", + SearchField: "", actions: { + internal_search: function () { + var field = $("#SearchField").val(); + var query = {}; + var that = this; + query[field] = this.get('SearchTerm'); + var deferred = Ember.RSVP.defer('crud-table#createRecord'); + that.set('isLoading', true); + this.sendAction('searchRecord', query, deferred); + deferred.promise.then(function (records) { + that.set('value', records); + regenerateView(that); + that.set('isLoading', false); + }, function (data) { + alert(data.message); + that.set('isLoading', false); + }); + }, confirm: function () { var that = this; var deferred; @@ -120,19 +141,32 @@ export default Ember.Component.extend({ }.on('willInsertElement'), setup: function () { var that = this; - regenerateView(that); + var deferred = Ember.RSVP.defer('crud-table#createRecord'); + that.set('isLoading', true); + this.sendAction('searchRecord', query, deferred); + deferred.promise.then(function (records) { + that.set('value', records); + regenerateView(that); + that.set('isLoading', false); + }, function (data) { + alert(data.message); + that.set('isLoading', false); + }); + //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'); + var template = Ember.RSVP.defer('crud-table#RenderTemplate'); 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); + template.resolve(true); }, function (data) { alert(data); }); diff --git a/addon/mixins/route.js b/addon/mixins/route.js index 69c41fb..bf73560 100644 --- a/addon/mixins/route.js +++ b/addon/mixins/route.js @@ -3,9 +3,12 @@ import Ember from 'ember'; //import EmberValidations from 'ember-validations'; export default function (model /*settings*/) { - return Ember.ObjectController.extend({ + return Ember.Mixin.create({ isEditing: false, actions: { + FetchData:function(query,deferred){ + deferred.resolve(query); + }, getRecord: function (deferred) { deferred.resolve(this.store.createRecord(model)); }, diff --git a/addon/templates/components/crud-table.hbs b/addon/templates/components/crud-table.hbs index f7de793..9f21b73 100755 --- a/addon/templates/components/crud-table.hbs +++ b/addon/templates/components/crud-table.hbs @@ -14,20 +14,23 @@
- {{#each field in this.fields}} - + {{/each}}
- - + {{input value=this.SearchTerm placeholder="Search" class="input-sm form-control" name="SearchTerm" }} + + +
+ {{#unless isLoading}} @@ -41,10 +44,7 @@ {{#each row in this.ComplexModel}} - {{#if row}} - {{render 'crud-table-row' row}} - {{/if}} - {{#if this.editdelete}} + {{#if row}} {{render 'crud-table-row' row}} {{/if}} {{#if this.editdelete}}
{{#if this.updateRecord}}
+ {{else}} + {{render 'spinner' this}} + {{/unless}}
{{yield}} {{render 'crud-table-modal' this}} diff --git a/app/templates/spinner.hbs b/app/templates/spinner.hbs new file mode 100644 index 0000000..78e507b --- /dev/null +++ b/app/templates/spinner.hbs @@ -0,0 +1,65 @@ + diff --git a/tests/unit/components/crud-table-test.js b/tests/unit/components/crud-table-test.js index 5a9d8c3..afea7f9 100755 --- a/tests/unit/components/crud-table-test.js +++ b/tests/unit/components/crud-table-test.js @@ -11,12 +11,6 @@ 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, @@ -42,6 +36,26 @@ var emberdatafix = DS.RecordArray.create({ ] }); var targetObject = { + FetchData: function (query, deferred) { + var searchResult = DS.RecordArray.create({ + content: [ + FakeModel.create({ + id: '3', + Field1: 'Data5', + Field2: 'Data7', + Field3: 'Data11' + }), + FakeModel.create({ + id: '13', + Field1: 'Data17', + Field2: 'Data19', + Field3: 'Data23' + }), + ] + }); + ok(query); + deferred.resolve(searchResult); + }, getRecord: function (deferred) { var newobject = FakeModel.create({ id: '3', @@ -152,3 +166,17 @@ test('User deletes a Record', function () { }); }); }); + +test('User pushes a search',function(){ + Ember.run(function(){ + component.set('SearchTerm','Data2'); + component.set('SearchField','Field1'); + click('[data-action=search]'); + }); + andThen(function(){ + equal(component.get('SearchTerm'),'Data2'); + equal(component.get('SearchField'),'Field1'); + equal( component.get('ComplexModel').get('lastObject').get('lastObject').get('Value'),'Data23','Complex Model not Updated') ; + equal( component.get('value').get('lastObject').get('Field3'),'Data23') ; + }); +}); From d5d7bdddf8b3e24e29fe4db3f79471d3243adbcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerardo=20P=C3=A9rez?= Date: Wed, 25 Mar 2015 00:08:19 -0600 Subject: [PATCH 02/24] Load Content with a nice spinner! --- addon/components/crud-table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index 0bb21f4..475a0ba 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -143,7 +143,7 @@ export default Ember.Component.extend({ var that = this; var deferred = Ember.RSVP.defer('crud-table#createRecord'); that.set('isLoading', true); - this.sendAction('searchRecord', query, deferred); + this.sendAction('searchRecord', {}, deferred); deferred.promise.then(function (records) { that.set('value', records); regenerateView(that); From 8e316f8a4a03f3862f2a97fcc839197810392e21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerardo=20P=C3=A9rez?= Date: Wed, 25 Mar 2015 13:18:46 -0600 Subject: [PATCH 03/24] Creating Navigation Bar --- addon/components/crud-table.js | 33 +++++++++++++++++++++++ addon/templates/components/crud-table.hbs | 24 ++++++++++++++--- tests/unit/components/crud-table-test.js | 2 +- 3 files changed, 55 insertions(+), 4 deletions(-) diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index 475a0ba..76f4c50 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -8,7 +8,38 @@ var CustomField = Ember.Object.extend({ Type: null, listener: function () {}.observes('Value') }); +var GetMetaData = function (records, that) { + var inflector = new Ember.Inflector(Ember.Inflector.defaultRules); + var meta = records.get("meta"); + meta = { + total: meta.count, + previous: meta.previous, + current: meta.previous ? meta.next - 1 : 1, + next: meta.next, + showing: records.get('content.length'), + name: inflector.pluralize(records.type.typeKey) + }; + meta.from = (meta.current - 1) * meta.showing + 1; + meta.to = meta.current * meta.showing; + meta.links = (function () { + var arr = []; + var tpages = Math.ceil(meta.total / meta.showing); + var stc = meta.current-1; + + var page = 1; + for(page; page<=stc; page++){ + arr.push({page:page,current:false}); + } + arr.push({page:page++,current:true}); + for(page; page<=tpages; page++){ + arr.push({page:page,current:false}); + } + return arr; + })(); + + that.set('pagination', meta); +}; var regenerateView = function (cmp) { var ComplexModel = []; if (cmp.value) { @@ -69,6 +100,7 @@ export default Ember.Component.extend({ that.set('isLoading', true); this.sendAction('searchRecord', query, deferred); deferred.promise.then(function (records) { + GetMetaData(records, that); that.set('value', records); regenerateView(that); that.set('isLoading', false); @@ -145,6 +177,7 @@ export default Ember.Component.extend({ that.set('isLoading', true); this.sendAction('searchRecord', {}, deferred); deferred.promise.then(function (records) { + GetMetaData(records, that); that.set('value', records); regenerateView(that); that.set('isLoading', false); diff --git a/addon/templates/components/crud-table.hbs b/addon/templates/components/crud-table.hbs index 9f21b73..ee3bee6 100755 --- a/addon/templates/components/crud-table.hbs +++ b/addon/templates/components/crud-table.hbs @@ -60,8 +60,26 @@ - {{else}} - {{render 'spinner' this}} - {{/unless}} + {{else}} {{render 'spinner' this}} {{/unless}} + +
+
+ Showing {{this.pagination.from}} to {{this.pagination.to}} of {{this.pagination.total}} {{this.pagination.name}} +
+
+ +
+ + {{#each page in this.pagination.links}} + + {{/each}} + +
+
{{yield}} {{render 'crud-table-modal' this}} diff --git a/tests/unit/components/crud-table-test.js b/tests/unit/components/crud-table-test.js index afea7f9..0bfa2ff 100755 --- a/tests/unit/components/crud-table-test.js +++ b/tests/unit/components/crud-table-test.js @@ -81,7 +81,7 @@ var targetObject = { 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', 'template:crud-table-update'], + needs: ['template:crud-table-row', 'template:crud-table-modal', 'template:crud-table-update','template:spinner'], setup: function () { App = startApp(); component = this.subject({ From 297d4de84a78c07ceab2bee43ddffefe70f1d779 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerardo=20P=C3=A9rez?= Date: Wed, 25 Mar 2015 13:55:09 -0600 Subject: [PATCH 04/24] Test Cases Created --- addon/components/crud-table.js | 82 ++++++++++++++--------- addon/templates/components/crud-table.hbs | 1 + tests/unit/components/crud-table-test.js | 52 +++++++++----- 3 files changed, 85 insertions(+), 50 deletions(-) diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index 76f4c50..30e2eb3 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -8,7 +8,36 @@ var CustomField = Ember.Object.extend({ Type: null, listener: function () {}.observes('Value') }); -var GetMetaData = function (records, that) { + + +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); + +}; +var showmodal = function () { + $("#CrudTableDeleteRecordModal").modal('show'); +}; +var metadata= function(records, that) { var inflector = new Ember.Inflector(Ember.Inflector.defaultRules); var meta = records.get("meta"); meta = { @@ -40,38 +69,10 @@ var GetMetaData = function (records, that) { that.set('pagination', meta); }; -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); - -}; -var showmodal = function () { - $("#CrudTableDeleteRecordModal").modal('show'); -}; - var hidemodal = function () { $("#CrudTableDeleteRecordModal").modal('hide'); }; - +var lastquery={page:null}; export default Ember.Component.extend({ attributeBindings: ['style'], @@ -91,16 +92,33 @@ export default Ember.Component.extend({ SearchTerm: "", SearchField: "", actions: { + goto:function(page){ + + var that = this; + var deferred = Ember.RSVP.defer('crud-table#goto'); + lastquery.page = page; + this.sendAction('searchRecord', lastquery, deferred); + deferred.promise.then(function (records) { + metadata(records,that); + that.set('value', records); + regenerateView(that); + that.set('isLoading', false); + }, function (data) { + alert(data.message); + that.set('isLoading', false); + }); + }, internal_search: function () { var field = $("#SearchField").val(); var query = {}; var that = this; query[field] = this.get('SearchTerm'); + lastquery = query; var deferred = Ember.RSVP.defer('crud-table#createRecord'); that.set('isLoading', true); this.sendAction('searchRecord', query, deferred); deferred.promise.then(function (records) { - GetMetaData(records, that); + metadata(records,that); that.set('value', records); regenerateView(that); that.set('isLoading', false); @@ -177,7 +195,7 @@ export default Ember.Component.extend({ that.set('isLoading', true); this.sendAction('searchRecord', {}, deferred); deferred.promise.then(function (records) { - GetMetaData(records, that); + metadata(records, that); that.set('value', records); regenerateView(that); that.set('isLoading', false); diff --git a/addon/templates/components/crud-table.hbs b/addon/templates/components/crud-table.hbs index ee3bee6..cbe21d9 100755 --- a/addon/templates/components/crud-table.hbs +++ b/addon/templates/components/crud-table.hbs @@ -72,6 +72,7 @@ {{#each page in this.pagination.links}} + {{#each page in this.pagination.links}} + From 4b524cb52dee35e81a3e7e0ce3d3bfee85b97fa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerardo=20P=C3=A9rez?= Date: Wed, 25 Mar 2015 14:30:57 -0600 Subject: [PATCH 07/24] New Record BugFix --- addon/components/crud-table.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index 7962251..3b3f971 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -155,7 +155,8 @@ export default Ember.Component.extend({ that.set('newRecord', true); var deferred = Ember.RSVP.defer('crud-table#newRecord'); this.sendAction('getRecord', deferred); - deferred.promise.then(function ( /*record*/ ) { + deferred.promise.then(function ( record) { + that.get('value').pushObject(record); regenerateView(that); that.set('currentRecord', that.get('ComplexModel').get('lastObject')); showmodal(); From de3a4cce8a026e368290dfdb01254d3a502b88eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerardo=20P=C3=A9rez?= Date: Wed, 25 Mar 2015 14:44:27 -0600 Subject: [PATCH 08/24] CreateRecord Test was duplicating new record --- tests/unit/components/crud-table-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/components/crud-table-test.js b/tests/unit/components/crud-table-test.js index b37ce99..f8bcf2e 100755 --- a/tests/unit/components/crud-table-test.js +++ b/tests/unit/components/crud-table-test.js @@ -72,7 +72,6 @@ var targetObject = { Field2: 'Data8', Field3: 'Data9' }); - component.get('value').pushObject(newobject); deferred.resolve(newobject); }, delete: function (record, deferred) { @@ -125,6 +124,7 @@ test('User Create a Record', function () { click('[data-action=confirm]'); andThen(function () { equal(find('table.table>tbody>tr').length, rows + 1); + }); }); }); From e0dd508f01c0bd8dbf015a0f06121e25f5cfae04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerardo=20P=C3=A9rez?= Date: Wed, 25 Mar 2015 15:06:53 -0600 Subject: [PATCH 09/24] cool spinner when saving deleting and updating --- addon/components/crud-table.js | 5 ++++- addon/templates/components/crud-table.hbs | 2 +- app/templates/crud-table-modal.hbs | 5 ++++- app/templates/spinner.hbs | 5 ++++- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index 3b3f971..08b0b50 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -131,6 +131,7 @@ export default Ember.Component.extend({ confirm: function () { var that = this; var deferred; + this.set('isLoading',true); if (this.get('newRecord')) { deferred = Ember.RSVP.defer('crud-table#createRecord'); this.sendAction('createRecord', this.get('currentRecord').RoutedRecord, deferred); @@ -146,15 +147,17 @@ export default Ember.Component.extend({ deferred.promise.then(function () { regenerateView(that); hidemodal(); + that.set('isLoading',false); }, function (data) { alert(data.message); + that.set('isLoading',false); }); }, internal_create: function () { var that = this; that.set('newRecord', true); var deferred = Ember.RSVP.defer('crud-table#newRecord'); - this.sendAction('getRecord', deferred); + that.sendAction('getRecord', deferred); deferred.promise.then(function ( record) { that.get('value').pushObject(record); regenerateView(that); diff --git a/addon/templates/components/crud-table.hbs b/addon/templates/components/crud-table.hbs index d9eb3b3..2d7f266 100755 --- a/addon/templates/components/crud-table.hbs +++ b/addon/templates/components/crud-table.hbs @@ -60,7 +60,7 @@ - {{else}} {{render 'spinner' this}} {{/unless}} + {{else}} -{{render 'spinner' this.newRecord}}- {{/unless}}
diff --git a/app/templates/crud-table-modal.hbs b/app/templates/crud-table-modal.hbs index e2b981f..732844d 100755 --- a/app/templates/crud-table-modal.hbs +++ b/app/templates/crud-table-modal.hbs @@ -17,7 +17,6 @@
- {{this}} {{#if newRecord}} {{render 'crud-table-update' this.currentRecord}} {{else}} @@ -29,6 +28,7 @@ {{/if}}
+ {{#unless isLoading}} + {{else}} + {{render 'spinner' this.isLoading}} + {{/unless}}
diff --git a/app/templates/spinner.hbs b/app/templates/spinner.hbs index 78e507b..20d5fad 100644 --- a/app/templates/spinner.hbs +++ b/app/templates/spinner.hbs @@ -1,5 +1,8 @@ -