paper-datatable-column.html

<script src="../whenever.js/whenever.js"></script>
<dom-module id="paper-datatable-column">
	<template>
		<style>
			:host {
				display: block;
			}
		</style>
		<template id="arrayTemplate">
			<template is="dom-repeat" items="{{value}}" as="arrayItem">
				<div class="array-item">{{_pdt_getArrayItemLabel(column, arrayItem)}}</div>
			</template>
		</template>
		<template id="editableInputTemplate">
			<paper-input type="[[_pdt_getCorrectTypeForInput(column.type)]]" value="{{value}}" step="any" no-label-float></paper-input>
		</template>
		<template id="editableBooleanTemplate">
			<paper-checkbox checked="{{value}}"></paper-checkbox>
		</template>
	</template>

	<script>
		(function () {
			'use strict';

			/*
This element is used inside of `<paper-datatable>` to declare the columns to be shown in the datatable.

@element paper-datatable-column
			*/

			Polymer({
				is: 'paper-datatable-column',
				properties: {
					/**
					 * String displayed in `<th></th>`
					 *
					 * @attribute header
					 * @type String
					 * @required
					 */
					header: String,
					/**
					 * The property to be used from `data` for this column
					 *
					 * @attribute property
					 * @type String
					 * @required
					 */
					property: String,
					/**
					 * The type of the property (can be 'String', 'Number', 'Array', 'Date', etc.)
					 * Used for sorting and default display
					 *
					 * @attribute type
					 * @type String
					 * @default 'String'
					 */
					type: {
						type: String,
						value: 'String'
					},
					/**
					 * Tooltip shown when hovering the `<th>`
					 *
					 * @attribute tooltip
					 * @type String
					 */
					tooltip: {
						type: String,
						notify: true
					},
					/**
					 * Whether to show sorting UI on the column. Sorting only works automagically
					 * on simple data types.
					 *
					 * @attribute sortable
					 * @type Boolean
					 * @default false
					 */
					sortable: Boolean,
					/**
					 * Whether the column is currently sorted. Should only be set on one column at a time
					 *
					 * @attribute sorted
					 * @type Boolean
					 * @default false
					 */
					sorted: {
						type: Boolean,
						notify: true,
						observer: '_sortChanged',
						reflectToAttribute: true
					},
					/**
					 * Whether the column is currently sorted. Should only be set on one column at a time
					 *
					 * @attribute sortDirection
					 * @type String
					 * @default 'asc'
					 */
					sortDirection: {
						type: String,
						value: 'asc',
						observer: '_sortChanged'
					},
					/**
					 * If `type` is a simple type, then if this is true one of the default editable
					 * templates is used. For example if `type` is `String` every cell will contain
					 * a `<paper-input>`. This is practically just a convenience method so that you
					 * don't have to define every `<template>` on your own.
					 *
					 * If you do use a custom `<template>` this will prevent a `row-tap` from triggering
					 * a selection. So if you click in a `<paper-input>` it won't select the row.
					 *
					 * @attribute editable
					 * @type Boolean
					 * @default false
					 */
					editable: Boolean,
					/**
					 * If `type` is an `Array` and the array consists of `Object`s it's a common need
					 * to display a single property of every object (in non-editable mode).
					 *
					 * Note that it's not possible to use this in combination with an editable dialog,
					 * as internally this is using a `<template>` and Polymer currently allows only
					 * one template to be templatized per element.
					 *
					 * @attribute arrayDisplayProp
					 * @type String
					 */
					arrayDisplayProp: String,
					/**
					 * Style to be applied to every cell.
					 *
					 * @attribute cellStyle
					 * @type String
					 */
					cellStyle: {
						type: String,
						value: ''
					},
					/**
					 * Convenience attribute to align the header and cell content (e.g. 'center')
					 *
					 * @attribute align
					 * @type String
					 * @default 'left'
					 */
					align: {
						type: String,
						value: 'left'
					},
					/**
					 * Style to be applied to the header.
					 *
					 * @attribute style
					 * @type String
					 */
					_styleString: {
						type: String,
						value: function(){
							var alignment = this.align || this.getAttribute('align') || 'left';
							var minWidth = this.width || this.getAttribute('width') || 0;
							minWidth += parseFloat(minWidth).toString() === minWidth ? 'px' : '';
							var styleString = this.getAttribute('style') || '';
							return 'text-align:'+alignment+';min-width:'+minWidth+';'+styleString;
						}
					},
					/**
					 * If you have `undefined`'s in your `data` this method can be used to
					 * set a default, thus preventing auto-saves from triggering.
					 *
					 * @attribute default
					 * @type Object
					 */
					default: Object,
					/**
					 * Can be overwritten to manually format the value in a non-editable state
					 *
					 * IMPORTANT: This is a property, not a method you should call directly.
					 *
					 * @attribute formatValue
					 * @type Function
					 * @default see code
					 */
					formatValue: Function,
					/**
					 * Can be overwritten to manually sort the datatable if internal sorting is used. This is a normal
					 * function following the Javascript sort API.
					 *
					 * IMPORTANT: This is a property, not a method you should call directly.
					 *
					 * @attribute sort
					 * @type Function
					 * @default see code
					 */
					sort: Function,
					/**
					 * Instead of rendering the `<template>` inline in the cell it will instead be rendered in a
					 * floating `<paper-datatable-edit-dialog>` after the user `tap`s on the cell.
					 *
					 * @attribute dialog
					 * @type Boolean
					 * @default false
					 */
					dialog: {
						type: Boolean
					},
					/**
					 * Per material design spec it's often useful to indicate that a cell is editable if you're using
					 * `[dialog]` based editing. This will show a little pencil icon to the right of the cell, but can be
					 * a bit overwhelming if used on more than one column.
					 *
					 * @attribute editIcon
					 * @type Boolean
					 * @default false
					 */
					editIcon: {
						type: Boolean
					},

					/**
					 * Removing and adding columns entirely from the DOM is a bit hard, so instead there is this
					 * convenience method to entirely disable a column.
					 *
					 * @attribute inactive
					 * @type Boolean
					 * @default false
					 */
					inactive: {
						type: Boolean,
						observer: '_requeryColumnList'
					},
					/**
					 * If you're using the `dynamic-columns` resize behavior this attribute is used to determining
					 * how important the column is when columns have to be hidden due to the window size. Set to -1
					 * if the column should always be shown. If columns have the same priority they will be assumed to
					 * be ordered by importance from left to right.
					 */
					resizePriority: {
						type: Number,
						value: 0
					},
					/**
					 * Mostly just a convenience attribute to set min-width, but required in conjuction with
					 * the `dynamic-columns` resize behavior
					 *
					 * @type Number in px or String
					 */
					width: Object
				},
				behaviors: [
					Polymer.Templatizer
				],

				created: function(){
					this.beenAttached = new Whenever();
				},

				ready: function() {

					var template = Polymer.dom(this).querySelector('template');
					if(!template && this.type.toLowerCase() == 'array'){
						var template = this.$.arrayTemplate;
					}else if(!template && this.editable && this.type.toLowerCase() == 'string'){
						var template = this.$.editableInputTemplate;
					}else if(!template && this.editable && this.type.toLowerCase() == 'number'){
						var template = this.$.editableInputTemplate;
					}else if(!template && this.editable && this.type.toLowerCase() == 'boolean'){
						var template = this.$.editableBooleanTemplate;
					}

					if(template) {
						this._instanceProps = {};
						this._instanceProps.item = true;
						this._instanceProps.value = true;
						this._instanceProps.column = true;

						this.templatize(template);

						this.template = true;
					}


				},

				_createCellInstance: function(model, notificationKey){
					if(typeof model[this.property] == 'undefined' && typeof this.default !== 'undefined'){
						var instance = this.stamp({item: model, column:this, value: this.default, _dataKey: notificationKey});
					}else{
						var instance = this.stamp({item: model, column:this, value: model[this.property], _dataKey: notificationKey});
					}
					return instance;
				},

				_formatValue: function(data){
					data = this._cast(data);
					if('formatValue' in this){
						return this.formatValue(data);
					}
					if(typeof data == 'undefined'){
						return '';
					}
					var value = this._cast(data);
					if(this.type.toLowerCase() == 'string'){
						return value;
					}else if(this.type.toLowerCase() == 'number'){
						return value;
					}else if(this.type.toLowerCase() == 'boolean'){
						return value ? 'Yes' : 'No';
					}else if(this.type.toLowerCase() == 'date'){
						var prependZero = function(val){
							return val < 10 ? '0' + val : val;
						}
						return value.getUTCFullYear() +'/'+ prependZero(value.getUTCMonth()+1) +'/'+ prependZero(value.getUTCDate()) + '&nbsp;' + prependZero(value.getUTCHours()) + ':' + prependZero(value.getUTCMinutes()) + ':' + prependZero(value.getUTCSeconds());
					}else{
						console.warn('Complex objects should implement their own template or format-value function.', data);
						return '?';
					}
				},

				_sort: function(valA, valB){
					valA = this._cast(valA);
					valB = this._cast(valB);

					if('sort' in this){
						return this.sort(valA, valB);
					}

					if(valA < valB) return -1;
					if(valA > valB) return 1;
					return 0;
				},

				_cast: function(value){
					if(typeof value === 'undefined'){
						if(typeof this.default !== 'undefined'){
							value = JSON.parse(JSON.stringify(this.default));
						}else{
							value = '';
						}
					}

					if(this.type.toLowerCase() == 'string'){
						return value.toString();
					}else if(this.type.toLowerCase() == 'number'){
						return parseFloat(value);
					}else if(this.type.toLowerCase() == 'boolean'){
						return value ? true : false;
					}else if(this.type.toLowerCase() == 'date'){
						return new Date(value);
					}else{
						return value;
					}
				},

				_sortChanged: function(){
					if(this.sorted){
						this.beenAttached.whenReady(function(){
							this.parentNodeRef.sort(this);
						}.bind(this));
					}
				},

				_forwardParentProp: function(prop, value){
					console.warn('_forwardParentProp',arguments);
				},
				_forwardParentPath: function(prop, value){
					console.warn('_forwardParentPath',arguments);
				},

				_forwardInstanceProp: function(templateInstance, prop, value){
					var path = prop.split('.');
					var item = path.shift();
					if(item == 'value'){
						var parentPath = ['data', templateInstance.get('_dataKey'), this.property];
						value = this._cast(value);
						//console.log('_forwardInstanceProp',arguments);
						//console.log('set', parentPath, 'to', value);
						this.parentNodeRef.set(parentPath, value);
					}else if(item == 'item'){
						console.warn('_forwardInstanceProp',arguments);
					}
				},

				_forwardInstancePath: function(templateInstance, prop, value){
					var path = prop.split('.');
					var item = path.shift();
					if(item == 'value'){
						var parentPath = ['data', templateInstance.get('_dataKey'), this.property].concat(path);
						if(path.length == 0){
							value = this._cast(value);
						}
						//console.log(parentPath, path.join('.'), value)
						//console.log('_forwardInstancePath',arguments);
					}else if(item == 'item'){
						var parentPath = ['data', templateInstance.get('_dataKey')].concat(path);
						//console.log(parentPath, value);
						//console.log('_forwardInstancePath',arguments);
					}
					//console.log('set', parentPath, 'to', value);
					this.parentNodeRef.set(parentPath, value);
				},
				_requeryColumnList: function(){
					//only trigger this if ready, anything before that point will be handled automatically during
					// initial initialization.
					if(this.beenAttached.state.ready){
						this.parentNodeRef._queryAndSetColumns();
					}
				},
				/*
				_getRootDataHost: function(){
					return this;
				},*/
				_registerEvilFunctions: function(){
					if(typeof this.dataHost === 'undefined' || typeof this.parentNodeRef.dataHost !== 'undefined') {
						this.dataHost = this.parentNodeRef.dataHost;
					}else if(typeof this.dataHost === 'undefined'){
						console.warn('A hack is used to support some functionality of the `[editable]` and [`array-display-prop`] attribute. ' +
								'This however requires the element to be located in a polymer element or `dom-bind`.')
					}

					this.dataHost._pdt_getArrayItemLabel = this._getArrayItemLabel;
					this.dataHost._pdt_getCorrectTypeForInput = this._getCorrectTypeForInput;

				},
				_getArrayItemLabel: function(column, value){
					return column.arrayDisplayProp ? value[column.arrayDisplayProp] : value;
				},
				_getCorrectTypeForInput: function(type){
					if(type.toLowerCase() == 'string'){
						return 'string';
					}else if(type.toLowerCase() == 'number'){
						return 'number';
					}
				}


			});
		})();
	</script>

</dom-module>