diff --git a/README.md b/README.md index 178b52d..7a71f6f 100755 --- a/README.md +++ b/README.md @@ -56,6 +56,18 @@ ember install:addon ember-cli-crudtable@beta ##Changelog Maybe you want one of the older relases. +### v0.4.0-beta.3 +1. Fixed a bug that prevent pulling from stopping. +2. Improved the map initialization. +3. Support for ReadOnly Fields. +4. Added the edit-cell-image template. +5. Added email datatype. + +### v0.4.0-beta.2 +1. Added support for data poolling every n milisecods. +2. Create button can now be hidden. +3. The export commands can now be hidden. + ### v0.4.0-beta.1 1. **fields** variable of the component now is and **object** an should be defined through the controller. 1. Added support to export results to CSV, TSV, JSON. @@ -80,8 +92,9 @@ The field definition is this: field_name:{ Label:'label_to_show_on_table_header', Display:'field_which_contain_data_to_show', - Type: 'text' || 'googlemap' || 'image', + Type: 'any_of_the_supported_datatypes, Zoom:'zoom_value_for_google_map_type' + ReadOnly: true || false } ``` ** *If not clear please check the example at the end* **. @@ -102,17 +115,29 @@ These variables are completed optional, if you're using the integrated mixin for 1. stripped: [ true| **false** ] - Makes the table to render stripped. 1. hover: [ true | **false** ] - Allows to hover the table. -###Custom Templates +##Datatypes + +Datatypes allow to make a custom predifined render of the data in the table, currente supported datatypes are: + +1. **text**: It just render the informatión without any decoration, in edition mode it renders a input text. +2. **image**: It assumes that information if an url so it renders the image. In edition mode it render a input text. +3. **email**: Displays the email along with a button to mail the receiver, in edition mode it renders a input email. +4. **googlemap**: Render a link that shows a modal windown with the location it is important to notice this Type of field is by default ReadOnly. + + + +##Custom Templates The table which is generated depends on templates so you can choose whatever you like to be the render style of every cell in the table or the model window to update a field. You must put your templetes under */templates/**ember-cli-crudtable**/template_name* These are the current aviable templates to overwrite: -####Handlebars templates for data Read +###Handlebars templates for data Read a. table-cell-googlemap a. table-cell-text +a. table-cell-image You can access the data in handeblar using the next object @@ -120,16 +145,18 @@ You can access the data in handeblar using the next object recod = { Field:'field_name', Value:'field_value', - Display:'mask_field_value' + Display:'mask_field_value', + ReadOnly: true || false } ``` --- -####Handlebars templates for data creation/update +###Handlebars templates for data creation/update a. edit-cell-googlemap a. edit-cell-text +a. edit-cell-image You can access the data in handeblar using the next object @@ -138,12 +165,13 @@ recod = { Field:'field_name', Value:'field_value', Display:'mask_field_value' + ReadOnly: true || false } ``` --- -####Other handlebars templates +###Other handlebars templates **modal-googlemap** Contains the definition for waht will be shown in the modal window when, a googlemap field is defined. @@ -169,7 +197,26 @@ The templace uses de **crud-cell** helper to determine which templete is goin to This template is render inside the modal window and calls every tamplate labeled edit-cell-*datatype* this template also calls the **crud-edit-cell** helper in order to determine which template is goin to be rendered. +##Hidding Edit,Delete,Create, Exports +All these commands can be hidden if you need just by setting to null their corresponding action in the handlebars herlper. + +``` +{{crud-table + createRecord=null + deleteRecord=null + updateRecord=null + exports=false + + fields=fieldDefinition +}} +``` + +##Data Pulling + +ember-cli-crudtable has the hability to indicate and interval of time for reloading all data from the server. +You can do this by setting the pulling var in the template to the time you like to pull in milliseconds. +The default value if false (no pulling). ##Controller Configuration You can use this very same code when creating your controller and the only thing you have to worry about is to indicate the model. diff --git a/addon/components/crud-cell.js b/addon/components/crud-cell.js index b4ce060..f219acb 100755 --- a/addon/components/crud-cell.js +++ b/addon/components/crud-cell.js @@ -7,7 +7,10 @@ export default Ember.Component.extend({ parent:null, actions: { show_map: function () { - this.sendAction('renderMap',this.get('parent')); + this.sendAction( 'renderMap', this.get('parent'), this.get('record.Type') ); + }, + mailto:function(){ + document.location.href = "mailto:"+this.get('record.Value'); } } }); diff --git a/addon/components/crud-edit-cell.js b/addon/components/crud-edit-cell.js index e324054..d2fdb53 100644 --- a/addon/components/crud-edit-cell.js +++ b/addon/components/crud-edit-cell.js @@ -7,7 +7,9 @@ export default Ember.Component.extend({ return this.get('record.Value'); }.property('record'), layoutName: function () { - console.log(this.get('record')); + if(this.get('record.ReadOnly')){ + return null; + } return 'ember-cli-crudtable/edit-cell-' + this.get('record.Type'); }.property('record'), parent:null, @@ -18,4 +20,4 @@ export default Ember.Component.extend({ this.sendAction('renderMap',this.get('parent')); } } -}); +}); \ No newline at end of file diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index bf255e0..482a54d 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -8,6 +8,7 @@ var CustomField = Ember.Object.extend({ Type: null, Display: null, DisplayField: null, + ReadOnly:null, listener: function () {}.observes('Value'), googlefield: function () {}.observes('Display'), }); @@ -73,6 +74,7 @@ var regenerateView = function (cmp) { Field: field, Value: data, Display: data, + ReadOnly: cmp.fields[field].ReadOnly || false, Type: cmp.fields[field].Type || 'text', listener: function () { row.set(this.get('Field'), this.get('Value')); @@ -84,6 +86,7 @@ var regenerateView = function (cmp) { if (this.get('DisplayField')) { row.set(this.get('DisplayField'), this.get('Display')); } + this.set('ReadOnly',cmp.fields[field].ReadOnly || true); }.observes('Display') }); switch (cfield.get('Type')) { @@ -129,28 +132,32 @@ var hidemodal = function () { $("#CrudTableDeleteRecordModal").modal('hide'); }; var lastquery = { - page: null + page: 1 }; var PULLID = 0; var PULLFN = function(cmp,time){ return setTimeout(function(){ var deferred = Ember.RSVP.defer('crud-table#pulling'); - //cmp.set('isLoading', true); - cmp.sendAction('searchRecord', {}, deferred); + cmp.sendAction('searchRecord', lastquery, deferred); deferred.promise.then(function (records) { cmp.set('page_size',records.get('content.length') ); metadata(records, cmp); cmp.set('value', records); regenerateView(cmp); - //cmp.set('isLoading', false); - PULLFN(cmp,time); + PULLID = PULLFN(cmp,time); }, function (data) { - alert(data.message); - //cmp.set('isLoading', false); + console.log(data.message); }); },time); -} +}; +var PULL = function(cmp){ + clearTimeout(PULLID); + PULLID=0; + if( cmp.get('pulling') > 0){ + PULLID = PULLFN(cmp,cmp.get('pulling')); + } +}; export default Ember.Component.extend({ pulling:false, stripped: false, @@ -160,6 +167,9 @@ export default Ember.Component.extend({ deleteRecord: 'delete', cancelRecord: 'cancel', searchRecord: 'FetchData', + newRecord: false, + isDeleting: false, + showMap: false, currentRecord: null, getRecord: 'getRecord', isLoading: true, @@ -349,8 +359,6 @@ export default Ember.Component.extend({ deferred.promise.then(function () { lastquery.page = that.get('pagination').current; that.sendAction('searchRecord', lastquery, updateview); - //regenerateView(that); - //recalculatePagination(that,that.get('pagination')); }, function (data) { alert(data.message); that.set('isLoading', false); @@ -367,12 +375,17 @@ export default Ember.Component.extend({ that.set('isLoading', false); }); }, - internal_map: function (record) { + internal_map: function (record,kind) { + if(google === undefined){ + + } var that = this; that.set('showMap', true); - this.set('currentRecord', record); showmodal(); function mapit(id, latlng) { + if(document.getElementById(id)==null){ + return false; + } var mapOptions = { zoom: latlng.zoom, center: new google.maps.LatLng(latlng.lat, latlng.lng), @@ -380,11 +393,12 @@ export default Ember.Component.extend({ }; var map = new google.maps.Map(document.getElementById(id), mapOptions); record.set('map', map); + return true; } var cord = ""; record.forEach(function (prop) { - if (prop.Type === 'googlemap') { + if (prop.Type === kind) { cord = prop.Value.split(','); cord = { lat: cord[0], @@ -393,10 +407,24 @@ export default Ember.Component.extend({ }; } }); - - setTimeout(function () { - mapit('google_map_canvas', cord); - }, 500); + var waitforgoogle = function(fn){ + if(google === undefined){ + setTimeout(function () { + fn(fn); + }, 10); + return false; + } + if( mapit('google_map_canvas', cord) ){ + setTimeout(function(){ + that.set('currentRecord', record); + },1); + }else{ + setTimeout(function () { + fn(fn); + }, 10); + } + }; + waitforgoogle(waitforgoogle); }, internal_create: function () { var that = this; @@ -437,14 +465,8 @@ export default Ember.Component.extend({ this.init = function () { that._super(); }.on('willInsertElement'); - this.addObserver('pulling',function(a,b){ - if( PULLID > 0 && that.get('pulling')>0 ){ - clearTimeout(PULLID); - PULLID=0; - } - if(this.get('pulling')>0){ - PULLID = PULLFN(that,that.get('pulling')); - } + this.addObserver('pulling',function(){ + PULL(that); }); }.on('willInsertElement'), setup: function () { @@ -461,7 +483,7 @@ export default Ember.Component.extend({ that.set('value', records); regenerateView(that); that.set('isLoading', false); - PULLID = PULLFN(that,that.get('pulling')); + PULL(that); }, function (data) { alert(data.message); that.set('isLoading', false); diff --git a/app/templates/ember-cli-crudtable/edit-cell-email.hbs b/app/templates/ember-cli-crudtable/edit-cell-email.hbs new file mode 100644 index 0000000..dc2d7b3 --- /dev/null +++ b/app/templates/ember-cli-crudtable/edit-cell-email.hbs @@ -0,0 +1,6 @@ +
+ +
+ {{input value=record.Value type="email" class="form-control"}} +
+
\ No newline at end of file diff --git a/app/templates/ember-cli-crudtable/edit-cell-image.hbs b/app/templates/ember-cli-crudtable/edit-cell-image.hbs new file mode 100644 index 0000000..fb7dd14 --- /dev/null +++ b/app/templates/ember-cli-crudtable/edit-cell-image.hbs @@ -0,0 +1,9 @@ +
+ +
+ {{input value=record.Value type="text" class="form-control"}} +
+
+ +
+
diff --git a/app/templates/ember-cli-crudtable/table-cell-email.hbs b/app/templates/ember-cli-crudtable/table-cell-email.hbs new file mode 100644 index 0000000..b29adc5 --- /dev/null +++ b/app/templates/ember-cli-crudtable/table-cell-email.hbs @@ -0,0 +1,5 @@ + +{{record.Value}} + +mail + \ No newline at end of file diff --git a/app/templates/ember-cli-crudtable/table-cell-googlemap.hbs b/app/templates/ember-cli-crudtable/table-cell-googlemap.hbs index 5e8a8ba..de0693f 100755 --- a/app/templates/ember-cli-crudtable/table-cell-googlemap.hbs +++ b/app/templates/ember-cli-crudtable/table-cell-googlemap.hbs @@ -1 +1 @@ -{{record.Display}} {{record.Type}} +{{record.Display}} \ No newline at end of file diff --git a/app/templates/ember-cli-crudtable/table-modal.hbs b/app/templates/ember-cli-crudtable/table-modal.hbs index fc94f30..82dd4d9 100755 --- a/app/templates/ember-cli-crudtable/table-modal.hbs +++ b/app/templates/ember-cli-crudtable/table-modal.hbs @@ -22,7 +22,6 @@
- {{newRecord}}.{{isDeleting}}.{{showMap}} {{#if newRecord}} {{render 'ember-cli-crudtable/table-update' this.currentRecord}} {{else}} diff --git a/app/templates/ember-cli-crudtable/table-update.hbs b/app/templates/ember-cli-crudtable/table-update.hbs index de0b6fd..b4968c6 100755 --- a/app/templates/ember-cli-crudtable/table-update.hbs +++ b/app/templates/ember-cli-crudtable/table-update.hbs @@ -1,6 +1,8 @@
{{#each record in this.model}} - {{crud-edit-cell record=record}} -
+ {{#unless record.ReadOnly}} + {{crud-edit-cell record=record}} +
+ {{/unless}} {{/each}}
diff --git a/package.json b/package.json index c5c6551..ddfffae 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-cli-crudtable", - "version": "0.4.0-beta.2", + "version": "0.4.0-beta.3", "description": "This addon allows you to easly create a CRUD Table, it will take you only 5s!.", "directories": { "doc": "doc", diff --git a/tests/unit/components/crud-table-rendering-test.js b/tests/unit/components/crud-table-rendering-test.js new file mode 100644 index 0000000..771b724 --- /dev/null +++ b/tests/unit/components/crud-table-rendering-test.js @@ -0,0 +1,146 @@ +/* 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: { + Label: 'Field1' + }, + Field2: { + Label: 'Field2' + }, + Field3: { + Label: 'Field3' + } +}; +var tricky = 0; +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 searchResult = DS.RecordArray.create({ + type: { + typeKey: "Dummy" + }, + meta: { + count: 2, + previous: null, + next: 2 + }, + content: [ + FakeModel.create({ + id: 2, + Field1: 'Data5', + Field2: 'Data7', + Field3: 'Data11' + }), + FakeModel.create({ + id: 12, + Field1: 'Data17', + Field2: 'Data19', + Field3: 'Data23' + }), + ] +}); + +var targetObject = { + FetchData: function (query, deferred) { + var page = query.page ? query.page : 1; + ok(query); + searchResult.get('meta').count = searchResult.get('content').length + tricky; + deferred.resolve(searchResult); + }, + getRecord: function (deferred) { + var newobject = FakeModel.create({ + id: '3', + Field1: 'Data77', + Field2: 'Data88', + Field3: 'Data99' + }); + //searchResult.pushObject(newobject); + deferred.resolve(newobject); + }, + delete: function (record, deferred) { + component.get('value').removeAt(0); + searchResult.removeAt(0); + + deferred.resolve(record); + }, + update: function (record, deferred) { + ok(true, 'external Action was called!'); + deferred.resolve(record); + }, + create: function (record, deferred) { + deferred.resolve(record); + } +}; + +moduleForComponent('crud-table', { + needs: [ + 'component:crud-cell', + 'component:crud-edit-cell', + 'template:ember-cli-crudtable/table-cell-googlemap', + 'template:ember-cli-crudtable/table-cell-text', + 'template:ember-cli-crudtable/edit-cell-googlemap', + 'template:ember-cli-crudtable/edit-cell-text', + 'template:ember-cli-crudtable/modal-googlemap', + 'template:ember-cli-crudtable/spinner', + 'template:ember-cli-crudtable/table-modal', + 'template:ember-cli-crudtable/table-row', + 'template:ember-cli-crudtable/table-update' + ], + setup: function () { + App = startApp(); + component = this.subject({ + fields: ArrField, + stripped: true, + hover: false, + deleteRecord: null, + updateRecord: null, + createRecord: null, + exports:null + }); + component.set('targetObject', targetObject); + this.render(); + }, + teardown: function () { + Ember.run(App, 'destroy'); + } +}); + +test('Actions Are not rendered', function () { + ok(!!!find('#tocsv').html(),"Shall be empty"); + ok(!!!find('#totsv').html(),"Shall be empty"); + ok(!!!find('#tojson').html(),"Shall be empty"); + ok(!!!find('[data-action=create]').html(),"Shall be empty"); + ok(!!!find('[data-action=edit]').html(),"Shall be empty"); + ok(!!!find('[data-action=delete]').html(),"Shall be empty"); +}); \ No newline at end of file