kempo 2.9.4 → 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,36 +1,43 @@
-import Component from '../Component.js';
-import { onEvent } from '../../utils/element.js';
+import TableControl from './TableControl.js';
+import { onEvent, offEvent } from '../../utils/element.js';
 
-export default class DeleteSelected extends Component {
-  constructor(table) {
+const deleteSelected = Symbol('deleteSelected'),
+      updateButtonState = Symbol('updateButtonState');
+export default class DeleteSelected extends TableControl {
+  constructor() {
     super();
-    this.table = table;
-    this.classList.add('mxq');
+
+    /* Private Methods */
+    this[deleteSelected] = this.deleteSelected.bind(this);
+    this[updateButtonState] = (()=>{
+      this.shadowRoot.getElementById('deleteSelectedButton').disabled = this.table.getSelectedRecords().length === 0;
+    }).bind(this);
+
+
+    /* Init */
+    
   }
 
-  async render() {
-    if (await super.render()) {
-      this.updateButtonState();
-      const $button = this.shadowRoot.getElementById('deleteSelectedButton');
-      onEvent($button, 'click', () => this.deleteSelected());
-      onEvent(this.table, 'selectionChange', () => this.updateButtonState());
+  /* 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]);
       return true;
     }
     return false;
   }
-
-  deleteSelected() {
-    const selectedIndexes = this.table.selectedIndexes;
-    selectedIndexes.sort((a, b) => b - a); // Sort in descending order
-    selectedIndexes.forEach(index => this.table.deleteRecord(index));
-    this.table.selectedIndexes = [];
-    this.table.renderRecords();
-    this.updateButtonState();
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('deleteSelectedButton'), 'click', this[deleteSelected]);
+    offEvent(this.table, 'selectionChange', this[updateButtonState]);
   }
 
-  updateButtonState() {
-    const $button = this.shadowRoot.getElementById('deleteSelectedButton');
-    $button.disabled = this.table.selectedIndexes.length === 0;
+  /* Public Methods */
+  deleteSelected() {
+    this.table.deleteSelected();
+    this[updateButtonState]();
   }
 
   get shadowTemplate() {
@@ -48,10 +55,15 @@ export default class DeleteSelected extends Component {
         width: max-content;
         align-items: baseline;
       }
-      button {
+      #deleteSelectedButton {
         display: flex;
         align-items: center;
       }
+      #deleteSelectedButton:disabled,
+      #deleteSelectedButton[disabled] {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
     `;
   }
 }

package/src/components/tableControls/Edit.js

@@ -0,0 +1,84 @@
+import TableControl from './TableControl.js';
+import { offEvent, onEvent } from '../../utils/element.js';
+
+const editRecord = Symbol('editRecord'),
+      saveRecord = Symbol('saveRecord'),
+      cancelEdit = Symbol('cancelEdit');
+export default class Edit extends TableControl {
+  constructor() {
+    super();
+
+    
+    /* Private Methods */
+    this[editRecord] = this.editRecord.bind(this);
+    this[saveRecord] = this.saveRecord.bind(this);
+    this[cancelEdit] = this.cancelEdit.bind(this);
+
+    /* Init */
+    this.registerAttributes({
+      editing: false
+    });
+    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]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('editButton'), 'click', this[editRecord]);
+    offEvent(this.shadowRoot.getElementById('saveButton'), 'click', this[saveRecord]);
+    offEvent(this.shadowRoot.getElementById('cancelButton'), 'click', this[cancelEdit]);
+  }
+
+  /* Public Methods */
+  editRecord() {
+    this.table.editRecord(this.record);
+  }
+  saveRecord() {
+    this.table.saveEditedRecord(this.record);
+  }
+  cancelEdit() {
+    this.table.cancelEditedRecord(this.record);
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="editButton" class="icon-btn no-btn">
+        <k-icon name="edit"></k-icon>
+      </button>
+      <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;
+      }
+      :host([editing]) #editButton,
+      :host(:not([editing])) #cancelButton,
+      :host(:not([editing])) #saveButton {
+        display: none !important;
+      }
+    `;
+  }
+}
+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

@@ -0,0 +1,129 @@
+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 TableControl {
+  constructor() {
+    super();
+
+    /* Private Methods */
+    this[clickHandler] = this.revealFilters.bind(this);
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force = false) {
+    if (await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('filterBtn'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('filterBtn'), 'click', this[clickHandler]);
+  }
+
+  /* Public Methods */
+  revealFilters() {
+    function formatFilter({field, condition, value}) {
+      const conditionLabel = {
+        eq: 'equals',
+        ne: 'does not equal',
+        gt: 'is greater than',
+        gte: 'is greater than or equal to',
+        lt: 'is less than',
+        lte: 'is less than or equal to',
+        contains: 'contains',
+        starts: 'starts with',
+        ends: 'ends with'
+      }[condition];
+      return /*html*/`<li
+        data-field="${field}"
+        data-condition="${condition}"
+        data-value="${value}"
+      >
+        ${field} ${conditionLabel} ${value}
+        <button class="remove-filter no-btn pq">
+          <k-icon name="close"></k-icon>
+        </button>
+    </li>`;
+    }
+    const $dialog = Dialog.create( /*html*/`
+      <h3 slot="title" class="m0 pyh px">Filters</h3>
+      <div class="p">
+        ${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('') 
+          }</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('') 
+          }</select>
+          <select id="filterCondition" class="mb">${
+            Object.entries({
+              eq: 'equals',
+              ne: 'does not equal',
+              gt: 'is greater than',
+              gte: 'is greater than or equal to',
+              lt: 'is less than',
+              lte: 'is less than or equal to',
+              contains: 'contains',
+              starts: 'starts with',
+              ends: 'ends with'
+            }).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 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>
+    `, {
+      width: '600px'
+    });
+    const $form = $dialog.querySelector('#addFilter');
+    onEvent($form, 'submit', (e) => {
+      e.preventDefault();
+      this.table.addFilter(
+        $form.filterField.value,
+        $form.filterCondition.value,
+        $form.filterValue.value
+      );
+      $dialog.close();
+      this.revealFilters();
+    });
+    onEvent($dialog, 'click', (e) => {
+      if(e.target.closest('button')?.classList.contains('remove-filter')){
+        const $li = e.target.closest('li');
+        if($li){
+          const {field, condition, value} = $li.dataset;
+          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 icon-btn">
+        <k-icon name="filter"></k-icon>
+      </button>
+    `;
+  }
+}
+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

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