ember-cli-crudtable v2.0.0

CRUD Table

This addon allows you to easily create a CRUD Table, it will take you only 5s!.

This component is compatible with bootstrap and ember-data.

##Features 1. Create 2. Read 3. Update 4. Delete 5. Search by field 6. Pagination 7. Export to CSV, TSV, JSON 8. Browser validations

##Contributions Please let me know about anything you find is not working, or maybe some features you want the component to perform. Any kind of comment will be well received, so thank you so mucho for using it.

##Installation

ember install ember-cli-crudtable

All the classes which the plug-in uses are from bootstrap framework.

So you can install Bootsrap

bower install bootstrap --save

And don't forget to add these lines to ember-cli-build.js

	app.import('bower_components/bootstrap/dist/js/bootstrap.js');
    app.import('bower_components/bootstrap/dist/css/bootstrap.css');
    app.import('bower_components/bootstrap/fonts/glyphicons-halflings-regular.ttf', {
        destDir: 'fonts'
    });
    app.import('bower_components/bootstrap/fonts/glyphicons-halflings-regular.woff', {
        destDir: 'fonts'
    });
    app.import('bower_components/bootstrap/fonts/glyphicons-halflings-regular.woff2', {
        destDir: 'fonts'
    });

just before:

return app.toTree();

##How to use it You can use the helper {{crud-table}} there are some minimun variables you must specify and these are: ###Minimun Configuration 1. class The class name you want the component to have 2. fields The fields as a json object you want the component to render.

The field definition is this:

field_name:{
	Label:'label_to_show_on_table_header',
	Display:'field_which_contain_data_to_show',
	Type: 'any_of_the_supported_datatypes',
	Zoom:'zoom_value_for_google_map_type'
	ReadOnly: true || false,
	Search: false || true,
	IsRequired: true || false,
	Pattern:'regex_expressopm_to_satisfy',
	PlaceHolder:'HTML_placeholder_value'
}

If not clear please check the example at the end . ###Action Configuration These variables are completely optional, if you're using the integrated mixin for the controller and ember-data in your project.

1. createRecord: default: 'create'
2. updateRecord: default: 'update'
3. deleteRecord: default: 'delete'
4. cancelRecord: default: 'cancel'
   2. This actions is triggered when click on "cancel", the default configuration makes a rollback on the record or deletes it if new.
5. getRecord: default: 'getRecord'
   2. This action creates a new empty record.
6. searchRecord: default: 'FetchData'
   2. This actions if the one which searches for your records.

###Style Configuration 1. stripped: true| false - Makes the table to render stripped. 1. hover: true | false - Allows to hover the table.

##Datatypes

Datatypes allow to make a custom predefined render of the data in the table, currently supported datatypes are:

1. text: It just render the information 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 window 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 templates under /templates/ember-cli-crudtable/template_name

These are the current aviable templates to overwrite:

###htmlbars templates for data Read

• table-cell-googlemap
• table-cell-text
• table-cell-image

You can access the data in htmlbars using the next object

record = {
	Field:'field_name',
	Value:'field_value',
	Display:'mask_field_value',
	ReadOnly: true || false,
	IsRequired: true || false,
	Pattern:'regex_expressopm_to_satisfy',
	PlaceHolder:'HTML_placeholder_value'
}

###htmlbars templates for data creation/update

• edit-cell-googlemap
• edit-cell-text
• edit-cell-image
• edit-cell-many-multi

You can access the data in htmlbars using the next object

record = {
	Field:'field_name',
	Value:'field_value',
	Display:'mask_field_value'
	ReadOnly: true || false,
	IsRequired: true || false,
	Pattern:'regex_expressopm_to_satisfy',
	PlaceHolder:'HTML_placeholder_value'
}

###Other htmlbars templates modal-googlemap

Contains the definition for what will be shown in the modal window when, a googlemap field is defined.

spinner

This is the animation which is rendered when the crudtable is loading any content.

table-modal This template contains the hole definition of the model window, by the moment don't touch it!.

table-row

This template recives a full row which be iterated through the model property. The template uses de crud-cell helper to determine which templete is going to be rendered.

table-update

This template is render inside the modal window and calls every template labeled edit-cell-datatype this template also calls the crud-edit-cell helper in order to determine which template is going to be rendered.

##Hiding Edit,Delete,Create, Exports All these commands can be hidden if you need just by setting to null their corresponding action in the htmlbars helper.

{{crud-table
	createRecord=null
	deleteRecord=null
	updateRecord=null
	exports=false

	fields=fieldDefinition
}}

##many-multi

When defining a many-multi field you will have to specify the Source field, which is the name of the model from the second table.

Some_Field:{
	Label:'Some_Label',
	Type:'many-multi',
	Display:'Name',
	Source:'second_table_on_the_manytomany_relation'
}

The component will load all the fields in the table specified in the Source field, And will use the Display field has the property that will show the information from the loaded data.

##Data Pulling

ember-cli-crudtable has the ability to indicate and interval of time for reloading all data from the server.

You can do this by setting the pulling let 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.

import CTABLE from 'ember-cli-crudtable/mixins/crud-controller';
import Ember from 'ember'

let CrudTable = CTABLE('school');
export default Ember.ObjectController.extend(CrudTable);

##Full Example

//app/router.js
import Ember from 'ember';
import config from './config/environment';

let Router = Ember.Router.extend({
    location: config.locationType,
    rootURL: config.baseURL
});

Router.map(function () {
    this.resource('schools');
});

export default Router;

//app/models/school.js
import DS from 'ember-data';

let attr = DS.attr;

export default DS.Model.extend({
    Name: attr('string'),
    City: attr('string'),
    Location:attr('string'),
    Zoom:attr('number'),
    Address: attr('string'),
    CP: attr('string'),
    Responsible:attr('string'),
    AmountStudents:attr('number')
});

//app/controllers/schools/index.js
import CTABLE from 'ember-cli-crudtable/mixins/crud-controller';
import Ember from 'ember'

let CrudTable = CTABLE('school');
export default Ember.ObjectController.extend(CrudTable,{
	fieldDefinition:{
		Name:{Label:'School'},
		Responsible:{
			Label:'Manager',
			Type:'text',
			Search: true
		},
		Location:{
			Label:'Google Map',
			Type:'googlemap',
			Display:'City',
			Zoom:'Zoom'
		},
	}
});

//app/templates/schools/index.hbs
{{crud-table
fields=fieldDefinition -- NOW It Should be an object defined in the controller
deleteRecord='delete'
updateRecord='update'
createRecord='create'}}

Thats All you can have now a fully CRUD table that communicates with your server and allows pagination.

##Pagination The pagination data must be included in the meta response of your server so ember-data can use it and crudtable has access to it.

ember-cli-crudtable has an integrated mixin which is use by default to parse the metadata and the metadata structure it expects is defined as:

{
	"meta":{
		"total":626
	}
}

The default paginator uses skip and limit to make a query request to your WEBAPI, so the next is a example of the requested url:

www.webapi.com/yourmodel/?limit=10&skip=10

This request is equivalent to show 10 records by page and therefore it will be showing page 2.

The mixin calls and update function which set's all the internal values.

###Extending the paginator if you need to change the paginator behavior you should create a file in app/paginator/crudtable.js The next snippet is the default paginator implementation (which works with Sails.js and the Advanced Blueprints).

import pagination from 'ember-cli-crudtable/mixins/pagination';
export default Ember.Object.extend(pagination);

###Changing the query parameters getBody( page, query_params ) is a function which is called when the query parameters need to be updated. So the function can be overrided to match your Web API implementation.

###I don't like the paginator look & feel Easy, if you don't like the links that are generated you can override the generateLinks() functions from the paginator mixin.

Just remember this:

1. You must set the links parameter with and array of links.
2. The link object is like this:

{
	page: <<number>> ,
	current: true | false
}

This all is great, but what about the look, well you can always override the template located in:

app/templates/ember-cli-crudtable/default/pagination.hbs

Creating your own datatype

When You're defining the Type field in the controller you can specify a generic one.

Let's suppose you want the field to have a link to some detail information, and we will define a Type link.

So our controller will contain a field definition like this:

fieldDefinition:{
	Label:'Current State',
	Type:'link',
	ReadOnly:true
},

In order to complete our goal we have to create a template file under templates/ember-cli-crudtable and call it table-cell-link

The definition of the template can be like this:

<!--app/templates/ember-cli-crudtable/table-cell-link.hbs-->
{{#link-to 'school.professors' parent.RoutedRecord}}
	<span class="label label-primary pull-right" style="cursor:pointer">
	<i class="glyphicon glyphicon-user" style="cursor:pointer"></i>
	View All Professors
	</span>
{{/link-to}}

That's all. You'll have a new field rendered as a link which is pointing to 'school.professors' route.

##Upcoming I'll rewrite this component, I might change the name and deprecate this repo, this idea it's to make it 100% compatible with my new project Koaton.

See you soon.