kempo 2.10.0 → 2.10.1

package/src/components/tableControls/DeleteRecord.js

@@ -0,0 +1,43 @@
+import TableControl from './TableControl.js';
+import '../Icon.js';
+import { onEvent, offEvent } from '../../utils/element.js';
+
+const clickHandler = Symbol('clickHandler');
+export default class DeleteRecord extends TableControl {
+  constructor() {
+    super();
+  
+    /* Private Methods */
+    this[clickHandler] = this.delete.bind(this);
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force = false){
+    if(await super.render(force)){
+      onEvent(this.shadowRoot.getElementById('delete'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('delete'), 'click', this[clickHandler]);
+  }
+
+  /* Public Methods */
+  delete(){
+    if(this.record){
+      this.table.deleteRecord(this.record)
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button id="delete" class="no-btn icon-btn">
+        <slot><k-icon name="delete"></k-icon></slot>
+      </button>
+    `;
+  }
+}
+window.customElements.define('k-tc-delete-record', DeleteRecord);

package/src/components/tableControls/DeleteSelected.js

@@ -1,32 +1,29 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import { onEvent, offEvent } from '../../utils/element.js';
 
-const table = Symbol('table'),
-      deleteSelected = Symbol('deleteSelected'),
+const deleteSelected = Symbol('deleteSelected'),
       updateButtonState = Symbol('updateButtonState');
-export default class DeleteSelected extends Component {
-  constructor(_table) {
+export default class DeleteSelected extends TableControl {
+  constructor() {
     super();
 
-    /* Private Members */
-    this[table] = _table;
-
     /* Private Methods */
     this[deleteSelected] = this.deleteSelected.bind(this);
     this[updateButtonState] = (()=>{
-      this.shadowRoot.getElementById('deleteSelectedButton').disabled = this[table].getSelectedRecords().length === 0;
+      this.shadowRoot.getElementById('deleteSelectedButton').disabled = this.table.getSelectedRecords().length === 0;
     }).bind(this);
 
 
     /* Init */
-    this.classList.add('mxq');
+    
   }
+
   /* Lifecycle Callbacks */
   async render(force = false) {
     if (await super.render(force)) {
       this[updateButtonState]();
       onEvent(this.shadowRoot.getElementById('deleteSelectedButton'), 'click', this[deleteSelected]);
-      onEvent(this[table], 'selectionChange', this[updateButtonState]);
+      onEvent(this.table, 'selectionChange', this[updateButtonState]);
       return true;
     }
     return false;
@@ -34,11 +31,12 @@ export default class DeleteSelected extends Component {
   disconnectedCallback(){
     super.disconnectedCallback();
     offEvent(this.shadowRoot.getElementById('deleteSelectedButton'), 'click', this[deleteSelected]);
-    offEvent(this[table], 'selectionChange', this[updateButtonState]);
+    offEvent(this.table, 'selectionChange', this[updateButtonState]);
   }
 
+  /* Public Methods */
   deleteSelected() {
-    this[table].deleteSelected();
+    this.table.deleteSelected();
     this[updateButtonState]();
   }
 

package/src/components/tableControls/Edit.js

@@ -1,18 +1,13 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import { offEvent, onEvent } from '../../utils/element.js';
 
-const table = Symbol('table'),
-      record = Symbol('record'),
-      editRecord = Symbol('editRecord'),
+const editRecord = Symbol('editRecord'),
       saveRecord = Symbol('saveRecord'),
       cancelEdit = Symbol('cancelEdit');
-export default class Edit extends Component {
-  constructor(_table, _record) {
+export default class Edit extends TableControl {
+  constructor() {
     super();
 
-    /* Private Members */
-    this[table] = _table;
-    this[record] = _record;
     
     /* Private Methods */
     this[editRecord] = this.editRecord.bind(this);
@@ -21,13 +16,16 @@ export default class Edit extends Component {
 
     /* Init */
     this.registerAttributes({
-      editing: this[table].recordIsEditing(_record)
+      editing: false
     });
-
-    this.classList.add('mxq');
+    this.maxWidth = 80;
   }
   async render(force = false) {
     if (await super.render(force)) {
+      const record = this.record;
+      if(record){
+        this.editing = this.table.recordIsEditing(record)
+      }
       onEvent(this.shadowRoot.getElementById('editButton'), 'click', this[editRecord]);
       onEvent(this.shadowRoot.getElementById('saveButton'), 'click', this[saveRecord]);
       onEvent(this.shadowRoot.getElementById('cancelButton'), 'click', this[cancelEdit]);
@@ -42,47 +40,45 @@ export default class Edit extends Component {
     offEvent(this.shadowRoot.getElementById('cancelButton'), 'click', this[cancelEdit]);
   }
 
+  /* Public Methods */
   editRecord() {
-    this[table].editRecord(this[record]);
+    this.table.editRecord(this.record);
   }
   saveRecord() {
-    this[table].saveEditedRecord(this[record]);
+    this.table.saveEditedRecord(this.record);
   }
   cancelEdit() {
-    this[table].cancelEditedRecord(this[record]);
+    this.table.cancelEditedRecord(this.record);
   }
 
   get shadowTemplate() {
     return /*html*/`
-      <button id="editButton" class="pq no-btn">
+      <button id="editButton" class="icon-btn no-btn">
         <k-icon name="edit"></k-icon>
       </button>
-      <button id="cancelButton" class="pq no-btn bg-danger">
-        <k-icon name="close"></k-icon>
-      </button>
-      <button id="saveButton" class="pq no-btn bg-success">
+      <button id="saveButton" class="icon-btn no-btn bg-success">
         <k-icon name="check"></k-icon>
       </button>
+      <button id="cancelButton" class="icon-btn no-btn bg-danger">
+        <k-icon name="close"></k-icon>
+      </button>
     `;
   }
 
   get shadowStyles() {
     return /*css*/`
+      ${super.shadowStyles}
       :host {
         display: inline-flex;
         width: max-content;
         align-items: baseline;
       }
-      button {
-        display: flex;
-        align-items: center;
-      }
       :host([editing]) #editButton,
       :host(:not([editing])) #cancelButton,
       :host(:not([editing])) #saveButton {
-        display: none;
+        display: none !important;
       }
     `;
   }
 }
-window.customElements.define('k-table-edit', Edit);
+window.customElements.define('k-tc-edit', Edit);

package/src/components/tableControls/ExportCSV.js

@@ -0,0 +1,91 @@
+import TableControl from './TableControl.js';
+import '../Icon.js';
+import { onEvent, offEvent } from '../../utils/element.js';
+
+const clickHandler = Symbol('clickHandler');
+export default class ExportCsv extends TableControl {
+  constructor() {
+    super({
+      maxWidth: 136
+    });
+  
+    /* Private Methods */
+    this[clickHandler] = this.export.bind(this);
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force = false){
+    if(await super.render(force)){
+      onEvent(this.shadowRoot.getElementById('export'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('export'), 'click', this[clickHandler]);
+  }
+
+  /* Public Methods */
+  getCSV(){
+    const table = this.table;
+    let csv = '';
+    if(table){
+      const fields = [];
+      table.fields.forEach( ({name, calculator}) => {
+        if(!calculator){
+          fields.push(name);
+        }
+      });
+      csv += fields.join(',') + '\n';
+      if(this.record){
+        const record = this.record;
+        const row = [];
+        fields.forEach( field => {
+          row.push(record[field]);
+        });
+        csv += row.join(',') + '\n';
+      } else {
+        table.records.forEach( record => {
+          const row = [];
+          fields.forEach( field => {
+            row.push(record[field]);
+          });
+          csv += row.join(',') + '\n';
+        });
+      }
+    }
+    return csv;
+  }
+  export(){
+    const data = this.getCSV();
+    const record = this.record;
+    if(record){
+      const blob = new Blob([data], {type: 'application/json'});
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'data.json';
+      a.click();
+      URL.revokeObjectURL(url);
+    } else {
+      const blob = new Blob([data], {type: 'application/json'});
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'data.json';
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button id="export" class="no-btn ph">
+        <slot><k-icon name="export-file"></k-icon> Export CSV</slot>
+      </button>
+    `;
+  }
+}
+window.customElements.define('k-tc-export-csv', ExportCsv);

package/src/components/tableControls/ExportJson.js

@@ -0,0 +1,62 @@
+import TableControl from './TableControl.js';
+import '../Icon.js';
+import { onEvent, offEvent } from '../../utils/element.js';
+
+const clickHandler = Symbol('clickHandler');
+export default class ExportJson extends TableControl {
+  constructor() {
+    super({
+      maxWidth: 136
+    });
+  
+    /* Private Methods */
+    this[clickHandler] = this.export.bind(this);
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force = false){
+    if(await super.render(force)){
+      onEvent(this.shadowRoot.getElementById('export'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('export'), 'click', this[clickHandler]);
+  }
+
+  /* Public Methods */
+  export(){
+    const record = this.record;
+    if(record){
+      const data = JSON.stringify(record);
+      const blob = new Blob([data], {type: 'application/json'});
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'data.json';
+      a.click();
+      URL.revokeObjectURL(url);
+    } else {
+      const data = JSON.stringify(this.table.records);
+      const blob = new Blob([data], {type: 'application/json'});
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'data.json';
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button id="export" class="no-btn ph">
+        <slot><k-icon name="export-file"></k-icon> Export JSON</slot>
+      </button>
+    `;
+  }
+}
+window.customElements.define('k-tc-export-json', ExportJson);

package/src/components/tableControls/FieldSortHide.js

@@ -0,0 +1,77 @@
+import TableControl from './TableControl.js';
+import { onEvent, offEvent } from '../../utils/element.js';
+import Dialog from '../Dialog.js';
+
+const clickHandler = Symbol('clickHandler');
+export default class FieldSortHide extends TableControl {
+  constructor() {
+    super();
+
+    /* Private Methods */
+    this[clickHandler] = this.openDialog.bind(this);
+  }
+  async render(force = false) {
+    if (await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('sort'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('sort'), 'click', this[clickHandler]);
+  }
+
+  openDialog() {
+    import('../Sortable.js')
+    const $dialog = Dialog.create(/*html*/`
+      <h3 class="m0 ph" slot="title">Show / Hide Fields</h3>
+      <div class="m">
+        <k-sortable id="sorting">
+          ${this.table.fields.map(field => /*html*/`
+            <k-sortable-item data-field="${field.name}">
+              <label class="field pb0">
+                <input
+                  class="field-visibility"
+                  data-field="${field.name}"
+                  type="checkbox"
+                  ${field.hidden ? '' : 'checked'}
+                  style="height: 1.25rem; width: 1.25rem"
+                />
+                ${field.label}
+              </label>
+            </k-sortable-item>
+          `).join('')}
+        </k-sortable>
+      </div>
+    `, {
+      width: '400px',
+      cancelText: 'Close'
+    });
+    onEvent($dialog, 'click', (event) => {
+      if (!event.target.closest('.field')) return;
+      const $input = event.target.closest('.field-visibility');
+      if ($input) {
+        const fieldName = $input.getAttribute('data-field');
+        this.table.setFieldHiddenState(fieldName, !$input.checked);
+      }
+    });
+    const $sorting = $dialog.querySelector('#sorting');
+    onEvent($sorting, 'sort', () => {
+      const newOrder = Array.from($sorting.querySelectorAll('k-sortable-item')).map(item => item.getAttribute('data-field'));
+      this.table.reorderFields(newOrder);
+    });
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <button
+        id="sort"
+        class="no-btn icon-btn"
+      >
+        <k-icon name="table-visibility"></k-icon>
+      </button>
+    `;
+  }
+}
+window.customElements.define('k-tc-field-sort-hide', FieldSortHide);

package/src/components/tableControls/Filters.js

@@ -1,21 +1,15 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import Dialog from '../Dialog.js';
 import { offEvent, onEvent } from '../../utils/element.js';
 
 const table = Symbol('table'),
       clickHandler = Symbol('clickHandler');
-export default class Filters extends Component {
-  constructor(_table) {
+export default class Filters extends TableControl {
+  constructor() {
     super();
 
-    /* Private Members */
-    this[table] = _table;
-
     /* Private Methods */
     this[clickHandler] = this.revealFilters.bind(this);
-
-    /* Init */
-    this.classList.add('mxq');
   }
 
   /* Lifecycle Callbacks */
@@ -59,19 +53,19 @@ export default class Filters extends Component {
     const $dialog = Dialog.create( /*html*/`
       <h3 slot="title" class="m0 pyh px">Filters</h3>
       <div class="p">
-        ${this[table].filters.length === 0 ? /*html*/`
+        ${this.table.filters.length === 0 ? /*html*/`
           <p>No Current Filters.</p>
         ` :  /*html*/`
           <h5>Current Filters</h5>
           <ul id="currentFilters">${
-            this[table].filters.map(formatFilter).join('') 
+            this.table.filters.map(formatFilter).join('') 
           }</ul>
         `}
         <hr />
         <h5>Add A Filter</h5>
         <form id="addFilter">
           <select id="filterField" class="mb">${
-            this[table].fields.map(({name, label}) => /*html*/`<option value="${name}">${label}</option>`).join('') 
+            this.table.fields.map(({name, label}) => /*html*/`<option value="${name}">${label}</option>`).join('') 
           }</select>
           <select id="filterCondition" class="mb">${
             Object.entries({
@@ -87,7 +81,10 @@ export default class Filters extends Component {
             }).map(([key, value]) => /*html*/`<option value="${key}" ${key==='contains'?'selected':''}>${value}</option>`).join('') 
           }</select>
           <input id="filterValue" type="text" class="mb" />
-          <button type="submit" class="btn primary">Add Filter</button>
+          <button type="submit" class="btn primary mb mr">Add Filter</button>
+          ${this.table.filters.length === 0 ? '' : /*html*/`
+            <button type="button" id="clearFilters" class="btn danger mb mr">Clear All Filters</button>
+          `}
         </form>
       </div>
     `, {
@@ -96,7 +93,7 @@ export default class Filters extends Component {
     const $form = $dialog.querySelector('#addFilter');
     onEvent($form, 'submit', (e) => {
       e.preventDefault();
-      this[table].addFilter(
+      this.table.addFilter(
         $form.filterField.value,
         $form.filterCondition.value,
         $form.filterValue.value
@@ -109,20 +106,24 @@ export default class Filters extends Component {
         const $li = e.target.closest('li');
         if($li){
           const {field, condition, value} = $li.dataset;
-          this[table].removeFilter(field, condition, value);
+          this.table.removeFilter(field, condition, value);
           $dialog.close();
           this.revealFilters();
         }
       }
+      if(e.target.id === 'clearFilters'){
+        this.table.removeAllFilters();
+        $dialog.close();
+      }
     });
   }
 
   get shadowTemplate() {
     return /*html*/`
-      <button id="filterBtn" class="no-btn pq">
+      <button id="filterBtn" class="no-btn icon-btn">
         <k-icon name="filter"></k-icon>
       </button>
     `;
   }
 }
-window.customElements.define('k-table-filters', Filters);
+window.customElements.define('k-tc-filters', Filters);

package/src/components/tableControls/FirstPage.js

@@ -0,0 +1,69 @@
+import TableControl from './TableControl.js';
+import { onEvent, offEvent } from '../../utils/element.js';
+
+const clickHandler = Symbol('clickHandler'),
+      handlePageChange = Symbol('handlePageChange');
+export default class FirstPage extends TableControl {
+  constructor() {
+    super();
+
+    /* Private Methods */
+    this[clickHandler] = this.goToFirstPage.bind(this);
+    this[handlePageChange] = (()=>{
+      const table = this.table;
+      if(!table || table.getCurrentPage() === 1){
+        this.shadowRoot.getElementById('firstPage').disabled = true;
+      } else {
+        this.shadowRoot.getElementById('firstPage').disabled = false;
+      }
+    }).bind(this);
+  }
+
+  /* Lifecycle Callback */
+  async render(force = false) {
+    if(await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('firstPage'), 'click', this[clickHandler]);
+      this[handlePageChange]();
+      onEvent(this.table, 'pageChange', this[handlePageChange]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('firstPage'), 'click', this[clickHandler]);
+    offEvent(this.table, 'pageChange', this[handlePageChange]);
+  }
+
+  /* Public Methods */
+  goToFirstPage(){
+    const table = this.table;
+    if(table){
+      table.firstPage();
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button
+        id="firstPage"
+        class="no-btn icon-btn"
+      >
+        <slot><k-icon name="first"></k-icon></slot>
+      </button>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      #firstPage[disabled] {
+        cursor: inherit;
+        opacity: 0.5;
+      }
+    `;
+  }
+
+
+}
+window.customElements.define('k-tc-first-page', FirstPage);

package/src/components/tableControls/HiddenCount.js

@@ -1,20 +1,14 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import { offEvent, onEvent } from '../../utils/element.js';
 
-const table = Symbol('table'),
-      record = Symbol('record'),
-      hiddenChangeHandler = Symbol('hiddenChangeHandler');
-export default class HiddenCount extends Component {
-  constructor(_table, _record) {
+const hiddenChangeHandler = Symbol('hiddenChangeHandler');
+export default class HiddenCount extends TableControl {
+  constructor() {
     super();
 
-    /* Private Members */
-    this[table] = _table;
-    this[record] = _record;
-
     /* Private Methods */
     this[hiddenChangeHandler] = (()=>{
-      this.shadowRoot.getElementById('hiddenCount').textContent = this[table].getHiddenRecords().length;
+      this.shadowRoot.getElementById('hiddenCount').textContent = this.table.getHiddenRecords().length;
     }).bind(this);
     
     /* Init */
@@ -23,20 +17,21 @@ export default class HiddenCount extends Component {
   async render(force = false) {
     if (await super.render(force)) {
       this[hiddenChangeHandler]()
-      onEvent(this[table], 'recordHidden recordShown', this[hiddenChangeHandler]);
+      onEvent(this.table, 'recordHidden recordShown', this[hiddenChangeHandler]);
       return true;
     }
     return false;
   }
   disconnectedCallback(){
     super.disconnectedCallback();
-    offEvent(this[table], 'recordHidden recordShown', this[hiddenChangeHandler]);
+    offEvent(this.table, 'recordHidden recordShown', this[hiddenChangeHandler]);
   }
 
+  /* Shadow DOM */
   get shadowTemplate() {
     return /*html*/`
-      <span id="hiddenCount"></span> Hidden Records
+      <span id="hiddenCount"></span>&nbsp;Hidden Records
     `;
   }
 }
-window.customElements.define('k-table-hidden-count', HiddenCount);
+window.customElements.define('k-tc-hidden-count', HiddenCount);