pt-crud-table.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../vaadin-grid/vaadin-grid.html">
<link rel="import" href="../vaadin-grid/vaadin-grid-column.html">
<link rel="import" href="../vaadin-grid/vaadin-grid-selection-column.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../iron-form/iron-form.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html" async>
<link rel="import" href="../paper-input/paper-input.html" async>
<link rel="import" href="../paper-input/paper-textarea.html" async>
<link rel="import" href="../paper-checkbox/paper-checkbox.html" async>
<link rel="import" href="../pt-multilang-input/pt-multilang-input.html" async>
<link rel="import" href="../pt-select/pt-select.html" async>
<link rel="import" href="../pt-tags-input/pt-tags-input.html" async>
<link rel="import" href="../pt-firebase-file-uploader/pt-firebase-file-uploader.html" async>
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html" async>

<dom-module id="pt-crud-table">
	<template>
		<style>
			:host {
				display: block;
			}

			#grid {
				min-height: 80vh;
			}

			#formDialog {
				z-index: 99999;
				min-width: 50vw;
				max-width: 80vw;
			}

			.mainButtons {
				margin: 5px;
			}

			.mainButton {
				background-color: var(--mainButtonBackground, var(--paper-indigo-500));
				color: var(--mainButtonColor, white);
			}

			.deleteButton {
				background-color: var(--deleteButtonBackground, var(--paper-red-500));
				color: var(--deleteButtonColor, white);
			}

			paper-dialog h2 {
				margin-top: 24px;
			}

			paper-dialog {
				--paper-dialog-scrollable: {
					max-height: 50vh;
				}
			}
		</style>

		<iron-iconset-svg name="crudIcons" size="24">
			<svg>
				<defs>
					<g id="add-box">
						<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
						/>
					</g>
					<g id="create">
						<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
						/>
					</g>
					<g id="delete">
						<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
					</g>
					<g id="search">
						<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
						/>
					</g>
				</defs>
			</svg>
		</iron-iconset-svg>

		<paper-dialog id="formDialog" always-on-top>
			<h2>[[title]]</h2>
			<paper-dialog-scrollable>
				<iron-form is="iron-form" id="ironForm" on-iron-form-presubmit="_save">
					<form id="dataForm"></form>
				</iron-form>
			</paper-dialog-scrollable>
			<hr>
			<div>
				<paper-button dialog-dismiss raised>[[strings.cancel]]</paper-button>
				<paper-button autofocus on-tap="_commitForm" raised class="mainButton">[[strings.accept]]</paper-button>
			</div>
		</paper-dialog>

		<h2>[[title]]</h2>
		<div class="mainButtons">
			<paper-button title="[[strings.create]]" on-tap="_add" raised class="mainButton">
				<iron-icon icon="crudIcons:add-box"></iron-icon>
				[[strings.create]]
			</paper-button>
			<paper-button title="[[strings.delete]]" on-tap="_delete" raised class="deleteButton">
				<iron-icon icon="crudIcons:delete"></iron-icon>
				[[strings.delete]]
			</paper-button>
		</div>

		<vaadin-grid id="grid" items="[[data]]" navigating size="20">

			<vaadin-grid-selection-column auto-select>
			</vaadin-grid-selection-column>

			<template is="dom-repeat" items="[[_getColumns(model)]]" as="column">
				<vaadin-grid-column>
					<template class="header">[[column.label]]</template>
					<template>[[_print(item,column)]]</template>
				</vaadin-grid-column>
			</template>

			<vaadin-grid-column>
				<template class="header">[[strings.actions]]</template>
				<template>
					<div class="buttons">
						<paper-icon-button title="[[strings.view]]" icon="crudIcons:search" on-tap="_view"
						                   item="[[item]]"></paper-icon-button>
						<paper-icon-button title="[[strings.edit]]" icon="crudIcons:create" on-tap="_edit"
						                   item="[[item]]"></paper-icon-button>
						<paper-icon-button title="[[strings.delete]]" icon="crudIcons:delete" on-tap="_delete"
						                   item="[[item]]"></paper-icon-button>

						<template is="dom-repeat" items="[[customActions]]" as="action">
							<paper-icon-button title="[[action.title]]" icon="[[action.icon]]" on-tap="_customEvent"
							                   event="[[action.event]]" item="[[item]]"></paper-icon-button>
						</template>
					</div>
				</template>
			</vaadin-grid-column>

		</vaadin-grid>

	</template>

	<script>
	  /**
	   * `pt-crud-table`
	   * CRUD Table
	   *
	   * @customElement
	   * @polymer
	   * @demo demo/index.html
	   */
	  class PtCrudTable extends Polymer.Element {
		static get is(){
		  return 'pt-crud-table';
		}

		static get properties(){
		  return {
			data: Array,
			model: Array,
			title: String,
			languages: Array,
			currentLang: String,
			customActions: Array,
			strings: Object
		  }
		}

		static get observers(){
		  return ['_modelObserver(model)'];
		}

		connectedCallback(){
		  super.connectedCallback();
		  this.title = this.title || 'CRUD';
		  this.currentLang = this.currentLang || 'en';
		  this.languages = this.languages || [{name: 'es', label: '🇻🇪', description: 'Spanish'}, {
			name: 'en',
			label: '🇺🇸',
			description: 'English'
		  }];
		  this.customActions = this.customActions || [];
		  this.strings = this.strings || {
			accept: 'Accept',
			cancel: 'Cancel',
			create: 'Create',
			delete: 'Delete',
			actions: 'Actions',
			edit: 'Edit',
			view: 'View'
		  };
		}

		_print(item, column){
		  let output = '';
		  if (item && column) {
			try {
			  switch (column.type) {
				case 'multiselect':
				  let value = typeof item[column.path] !== 'undefined' ? item[column.path] : item[column.name];
				  let challengesDic = column.items.filter((challenge) =>{
					return value.find((e) =>{
					  e === challenge.value;
					}) !== 'undefined';
				  });
				  challengesDic.forEach((item) =>{
					output = output === '' ? item.label : output + ', ' + item.label;
				  });
				  break;
				case 'select':
				  let itemFound = column.items.find((i) =>{
					let value = typeof item[column.path] !== 'undefined' ? item[column.path] : item[column.name];
					value = column.multilang ? value[this.currentLang] : value;
					return i.value == value;
				  });
				  output = itemFound.label;
				  break;
				default: {
				  output = typeof item[column.path] !== 'undefined' ? item[column.path] : item[column.name];
				  output = column.multilang ? output[this.currentLang] : output;
				  break;
				}
			  }
			} catch (e) {
			  output = 'Unknown';
			}
		  }
		  return output;
		}

		_modelObserver(model){
		  if (model && model.length > 0) {
			this._buildForm(model);
		  }
		}

		/***
		 * Build the Dialog Form to Create/Edit using the configuration of model property
		 * @private
		 */
		_buildForm(model){
		  this.$.dataForm.innerHTML = '';
		  if (model) {
			model.forEach((field) =>{
			  try {
				let tempElement;
				switch (field.type.toLowerCase()) {
				  case 'input':
					if (field.multilang) {
					  tempElement = document.createElement("pt-multilang-input");
					  tempElement.languages = this.languages;
					} else {
					  tempElement = document.createElement("paper-input");
					}
					tempElement.autoValidate = true;
					tempElement.label = field.label;
					if (field.inputType) {
					  tempElement.type = field.inputType;
					}
					break;

				  case 'float':
					tempElement = document.createElement("paper-input");
					tempElement.autoValidate = true;
					tempElement.step = "0.01";
				  case 'integer':
					tempElement = tempElement || document.createElement("paper-input");
					tempElement.type = "number";
					tempElement.autoValidate = true;
					tempElement.label = field.label;
					break;
				  case 'checkbox':
					tempElement = document.createElement("paper-checkbox");
					tempElement.innerHTML = field.label;
					tempElement.style.display = 'block';
					Object.defineProperty(tempElement, "value", {
					  get: function(){
						return this.checked;
					  }
					});
					break;
				  case 'textarea':
					if (field.multilang) {
					  tempElement = document.createElement("pt-multilang-input");
					  tempElement.languages = this.languages;
					  tempElement.type = 'textarea';
					} else {
					  tempElement = document.createElement("paper-textarea");
					}
					tempElement.label = field.label;
					tempElement.rows = 3;
					if (field.textAreaType) {
					  tempElement.type = field.textAreaType;
					}
					break;
				  case 'wysiwyg':
					tempElement = document.createElement("pt-multilang-input");
					tempElement.languages = this.languages;
					tempElement.type = 'wysiwyg';
					tempElement.label = field.label;
					tempElement.rows = 3;
					if (field.textAreaType) {
					  tempElement.type = field.textAreaType;
					}
					break;
				  case 'select':
					tempElement = document.createElement("pt-select");
					tempElement.options = field.items;
					tempElement.placeholder = "Select One";
					tempElement.label = field.label;
					tempElement.pathToValue = field.pathToValue || 'value';
					tempElement.pathToLabel = field.pathToValue || 'label';
					break;
				  case 'multiselect':
					tempElement = document.createElement("pt-select");
					tempElement.options = field.items;
					tempElement.multiple = true;
					tempElement.placeholder = "Select One or More";
					tempElement.label = field.label;
					tempElement.pathToValue = field.pathToValue || 'value';
					tempElement.pathToLabel = field.pathToValue || 'label';
					break;
				  case 'date':
					tempElement = tempElement || document.createElement("vaadin-date-picker");
					tempElement.label = field.label;
					break;
				  case 'tags':
					if (field.multilang) {
					  tempElement = document.createElement("pt-multilang-input");
					  tempElement.languages = this.languages;
					  tempElement.type = 'tags';
					} else {
					  tempElement = document.createElement("pt-tags-input");
					}
					tempElement.label = field.label;
					break;
				  case 'image':
					tempElement = document.createElement("pt-firebasefile-uploader");
					tempElement.multiple = false;
					tempElement.accept = 'image/*';
					tempElement.label = field.label;
					break;
				}
				if (tempElement) {
				  tempElement.setAttribute('name', field.name);
				  if (field.required) {
					tempElement.setAttribute('required', true);
					tempElement.required = field.required;
				  }
				  this.$.dataForm.appendChild(tempElement);
				  this.isReady = true;

				}
			  } catch (e) {
				console.error('Error Building Form', e);
			  }
			});
		  }
		}

		_loadForm(item, readOnly){
		  try {
			this.$.formDialog.open();
			this.$.dataForm.childNodes.forEach((node) =>{
			  node.setAttribute('disabled', readOnly ? true : false);
			  node.disabled = readOnly ? true : false;
			  switch (node.nodeName.toLowerCase()) {
				case 'paper-checkbox':
				  node.checked = item[node.name] ? true : false;
				  break;
				default:
				  if (typeof node.set === 'function') {
					node.set('value', item[node.name]);
				  } else {
					node.value = item[node.name];
				  }
				  break;
			  }
			});
		  } catch (e) {
		  }
		}

		_add(){
		  this.isNew = true;
		  this.isView = false;
		  this._buildForm(this.model);
		  this.$.formDialog.open();
		}

		_edit(e){
		  try {
			let item = e.target.item;
			let key = this.model.find((field) =>{
			  return field.type === 'uid';
			});

			this.current = item[key.name];
			if (this.isReady && this.current) {
			  this.isNew = false;
			  this.isView = false;
			  this._loadForm(item);
			}
		  } catch (e) {

		  }
		}

		_delete(e){
		  if (confirm('Are you sore delete this record?')) {
			let removeItems = [];
			if (this.$.grid.selectedItems && this.$.grid.selectedItems.length > 0) {
			  removeItems = this.$.grid.selectedItems.slice();

			} else if (e.target.item) {
			  removeItems.push(e.target.item);
			}
			if (removeItems.length > 0) {
			  this.dispatchEvent(new CustomEvent('delete', {
				detail: {data: removeItems}
			  }));
			  this.dispatchEvent(new CustomEvent("show-toast", {
				bubbles: true,
				composed: true,
				detail: {text: 'Item deleted successfully'}
			  }));
			}
		  }
		}

		_view(e){
		  let item = e.target.item;
		  this.isView = true;
		  this._loadForm(item, true);
		}

		_commitForm(){
		  if (!this.isView) {
			this.$.ironForm.submit();
		  } else {
			this.$.formDialog.close();
		  }
		}

		_save(event){
		  event.preventDefault();
		  this.$.formDialog.close();
		  let newData = this.$.ironForm.serializeForm();
		  this.model.forEach((field) =>{
			switch (field.type) {
			  case 'checkbox':
				newData[field.name] = newData[field.name] || false;
				break;
			}
		  });
		  let eventName = this.isNew ? 'create' : 'update';
		  this.dispatchEvent(new CustomEvent(eventName, {
			detail: {data: newData, uid: this.current}
		  }));
		  this.dispatchEvent(new CustomEvent("show-toast", {
			bubbles: true,
			composed: true,
			detail: {text: eventName === 'create' ? 'Item created successfully' : 'Item updated successfully'}
		  }));
		}

		_getColumns(model){
		  if (model && model.length > 0) {
			return model.filter((item) =>{
			  return item.show;
			});
		  }
		  return [];
		}

		_customEvent(e){
		  let item = e.target.item;
		  let eventName = e.target.event;
		  this.dispatchEvent(new CustomEvent(eventName, {
			bubbles: true,
			composed: true,
			detail: {item: item}
		  }));
		}
	  }

	  window.customElements.define(PtCrudTable.is, PtCrudTable);
	</script>
</dom-module>