puredat-entity.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../puredat-paper-input-autocomplete-chips/paper-input-autocomplete-chips.html">
<!--
	`puredat-entity` "ENTITY" type, "ONE" cardinality widget.
	
	@demo demo/index.html 
-->
<dom-module id="puredat-entity">
	<template>
		<style>
			paper-input-autocomplete-chips {
				--paper-input-container: {
					padding-right: 10px;
				}
				--autocomplete-suggestions-container-max-height: 400px;
			}
		</style>
		
		<!-- Si se quiere acentar el espacio o la coma como teclas para aceptar.... token-accept-key-codes="32,188" -->
		<paper-input-autocomplete-chips
				id="input"
				tabindex="-1"
				on-selected-objects-changed="selectedObjectsChangedHandler"
				on-response-treatment="responseTreatmentHandler"
				placeholder="Buscar..."
				search-if-empty
				disable-hover-select
				max-suggestions="100"
				placeholder-after-selected="Buscar..."
				on-keyup="keyupHandler"
				no-chip-image
				always-float-label
				maxlength="[[maxLength]]"
				max-selected-items="1"
				label="[[label]]"
				read-only="[[readOnly]]"
				selected-objects="{{_values}}"
				error-message="[[errorMessage]]"
				invalid="[[_isInvalid(errorMessage)]]"
				allowed-pattern="[[pattern]]">
			<!-- <div loading>Loading...</div>-->
		</paper-input-autocomplete-chips>
	</template>
	
	<script>
		Polymer({
			is: 'puredat-entity',
			
			properties: {
				
				/** Name */
				name: {
					type: String
				},
				
				/** Maximum length. */
				maxLength: {
					type: Number,
					value: 100
				},
				
				/** Allowed pattern. For example: [a-zA-Z]. */
				pattern: {
					type: String
				},
				
				/** Descriptive label. */
				label: {
					type: String
				},
				
				/** Attributes that are used as label. */
				labelAttributes: {
					type: Array
				},
				
				/** Value. */
				value: {
					type: Object,
					notify: true,
					observer: 'valueChangedHandler'
				},

				/** Resource url. */
				resourceUrl: {
					type: String
				},
				
				/** Resource additional url parameters. */
				additionalUrlParams: {
					type: String
				},

				/** Internal values. */
				_values: {
					type: Array
				},
				
				/** Error message. */
				errorMessage: {
					type: String
				},
				
				/** Number of columns in a row of 10 columns. */
				cols: {
					type: Number,
					value: 5,
					observer: '_colsChangedHandler'
				},
				
				/** Read only. */
				readOnly: {
					type: Boolean,
					value: false
				}
			},
			
			observers: [
				'_valuesChangedHandler(_values.splices)'
			],
			
			_valuesChangedHandler: function(changeRecord) {
				if (changeRecord != null) {
					this.value = changeRecord.indexSplices[0].object[0];
				}
			},
			
			_colsChangedHandler: function(newValue, oldValue) {
				this.style.minWidth = (30 * newValue) + "px";
				this.style.flex = "0 0 " + (10 * newValue) + "%";
			},
			
			valueChangedHandler: function(newValue, oldValue) {
				if (newValue == null) {
					this.set("_values", null);
				}
				else {
					if (this.labelAttributes == null
							|| this.labelAttributes.length == 0) {
						newValue.text = "" + newValue._id;
					}
					else {
						newValue.text = "";
						for (var i = 0; i < this.labelAttributes.length; i++) {
							if (i > 0)
								newValue.text += " ";
							newValue.text += newValue[this.labelAttributes[i]];
						}
					}
					this.set("_values", [newValue]);
				}
			},
			
			/**
			 * Returns if the field is valid.
			 * @param {String} errorMessage The error message.
			 * @return {Boolean} If the input field is valid.
			 */
			_isInvalid: function(errorMessage) {
				return errorMessage != null
						&& errorMessage != "";
			},
			
			selectedObjectsChangedHandler: function(event) {
			},
			
			responseTreatmentHandler: function(event) {
				var length = event.detail.response.length;
				
				for (var i = 0; i < length; i++) {
					if (this.labelAttributes == null
							|| this.labelAttributes.length == 0) {
						event.detail.response[i].text = "" + event.detail.response[i]._id;
					}
					else {
						event.detail.response[i].text = "";
						for (var j = 0; j < this.labelAttributes.length; j++) {
							if (j > 0)
								event.detail.response[i].text += " ";
							event.detail.response[i].text += event.detail.response[i][this.labelAttributes[j]];
						}
					}
				}
			},
			
			keyupHandler: function(event) {
				if (event.key != "Escape") {
					this.errorMessage = null;
					if (this.$.input.inputValue != null
							&& this.$.input.inputValue != "") {
						this.$.input.remoteUrl = this.resourceUrl;
						if (this.$.input.inputValue.trim() != "") {
							this.$.input.remoteUrl += "?search=" + this.$.input.inputValue.trim();
						}
					}
					else if (event.key != "Meta" && event.key != "Alt" && event.key != "Control") {
						this.$.input.remoteUrl = null;
					}
					else {
						if (this.$.input.remoteUrl == null) {
							this.$.input.remoteUrl = this.resourceUrl;
						}
						else {
							this.$.input.remoteUrl = null;
						}
					}
				}
				else {
					if (this.$.input.remoteUrl == null
							|| this.$.input.remoteUrl == "") {
						// Salir de la ventana
						this.fire('keydown', event);
					}
					this.$.input.remoteUrl = null;
				}

				if(this.$.input.remoteUrl != null && this.additionalUrlParams != null) this.$.input.remoteUrl += ((this.$.input.remoteUrl.indexOf("?") >= 0 ? "&" : "?") + this.additionalUrlParams);
			}
		});
	</script>
</dom-module>