@revolist/revogrid 3.0.99 → 3.1.5

package/dist/collection/plugins/filter/filter.pop.js

@@ -1,19 +1,30 @@
 import { Component, h, Host, Listen, Prop, State, Event, Method } from '@stencil/core';
-import { isFilterBtn } from './filter.button';
+import { AndOrButton, isFilterBtn, TrashButton } from './filter.button';
 import { RevoButton } from '../../components/button/button';
 import '../../utils/closestPolifill';
+import debounce from 'lodash/debounce';
 const defaultType = 'none';
+const FILTER_LIST_CLASS = 'multi-filter-list';
+const FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';
 export class FilterPanel {
   constructor() {
     this.filterCaptionsInternal = {
-      title: "Filter by condition",
-      save: "Save",
-      reset: "Reset",
-      cancel: "Cancel",
+      title: 'Filter by condition',
+      save: 'Save',
+      reset: 'Reset',
+      cancel: 'Close',
     };
+    this.isFilterIdSet = false;
+    this.filterId = 0;
+    this.currentFilterId = -1;
+    this.currentFilterType = defaultType;
+    this.filterItems = {};
     this.filterTypes = {};
     this.filterNames = {};
     this.filterEntities = {};
+    this.debouncedApplyFilter = debounce(() => {
+      this.filterChange.emit(this.filterItems);
+    }, 400);
   }
   onMouseDown(e) {
     if (this.changes && !e.defaultPrevented) {
@@ -32,26 +43,63 @@ export class FilterPanel {
   async getChanges() {
     return this.changes;
   }
-  renderConditions(type) {
+  componentWillRender() {
+    if (!this.isFilterIdSet) {
+      this.isFilterIdSet = true;
+      const filterItems = Object.keys(this.filterItems);
+      for (const prop of filterItems) {
+        // we set the proper filterId so there won't be any conflict when removing filters
+        this.filterId += this.filterItems[prop].length;
+      }
+    }
+  }
+  renderSelectOptions(type, isDefaultTypeRemoved = false) {
+    var _a;
     const options = [];
+    const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
+    if (!isDefaultTypeRemoved) {
+      options.push(h("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? 'Add more condition...' : this.filterNames[defaultType]));
+    }
     for (let gIndex in this.filterTypes) {
-      options.push(h("option", { value: defaultType }, this.filterNames[defaultType]));
       options.push(...this.filterTypes[gIndex].map(k => (h("option", { value: k, selected: type === k }, this.filterNames[k]))));
       options.push(h("option", { disabled: true }));
     }
     return options;
   }
-  renderExtra(extra, value) {
-    this.extraElement = undefined;
-    switch (extra) {
-      case 'input':
-        return (h("input", { type: "text", value: value, onInput: (e) => this.onInput(e), onKeyDown: e => this.onKeyDown(e), ref: e => (this.extraElement = e) }));
-      default:
-        return '';
-    }
+  renderExtra(prop, index) {
+    const currentFilter = this.filterItems[prop];
+    if (!currentFilter)
+      return '';
+    if (this.filterEntities[currentFilter[index].type].extra !== 'input')
+      return '';
+    return (h("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: "Enter value...", type: "text", value: currentFilter[index].value, onInput: this.onUserInput.bind(this, index, prop), onKeyDown: e => this.onKeyDown(e) }));
+  }
+  getFilterItemsList() {
+    var _a;
+    const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
+    if (!(prop || prop === 0))
+      return '';
+    const propFilters = this.filterItems[prop] || [];
+    return (h("div", { key: this.filterId },
+      propFilters.map((d, index) => {
+        let andOrButton;
+        // hide toggle button if there is only one filter and the last one
+        if (index !== this.filterItems[prop].length - 1) {
+          andOrButton = (h("div", { onClick: () => this.toggleFilterAndOr(d.id) },
+            h(AndOrButton, { isAnd: d.relation === 'and' })));
+        }
+        return (h("div", { key: d.id, class: FILTER_LIST_CLASS },
+          h("div", { class: { 'select-input': true } },
+            h("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)),
+            h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton),
+            h("div", { onClick: () => this.onRemoveFilter(d.id) },
+              h(TrashButton, null))),
+          h("div", null, this.renderExtra(prop, index))));
+      }),
+      propFilters.length > 0 ? h("div", { class: "add-filter-divider" }) : ''));
   }
   render() {
-    if (!this.changes || !this.changes) {
+    if (!this.changes) {
       return h(Host, { style: { display: 'none' } });
     }
     const style = {
@@ -62,29 +110,80 @@ export class FilterPanel {
     const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
     return (h(Host, { style: style },
       h("label", null, capts.title),
-      h("select", { class: "select-css", onChange: e => this.onFilterChange(e) }, this.renderConditions(this.changes.type)),
-      h("div", null, this.renderExtra(this.filterEntities[this.changes.type].extra, this.changes.value)),
-      h("div", { class: "center" },
-        h(RevoButton, { class: { green: true }, onClick: () => this.onSave() }, capts.save),
+      h("div", { class: "filter-holder" }, this.getFilterItemsList()),
+      h("div", { class: "add-filter" },
+        h("select", { id: "add-filter", class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+      h("div", { class: "filter-actions" },
         h(RevoButton, { class: { red: true }, onClick: () => this.onReset() }, capts.reset),
         h(RevoButton, { class: { light: true }, onClick: () => this.onCancel() }, capts.cancel))));
   }
-  onFilterChange(e) {
-    if (!this.changes) {
-      throw new Error('Changes required per edit');
-    }
+  onFilterTypeChange(e, prop, index) {
     const el = e.target;
     const type = el.value;
-    this.changes = Object.assign(Object.assign({}, this.changes), { type });
+    this.filterItems[prop][index].type = type;
+    // this re-renders the input to know if we need extra input
+    this.filterId++;
+    // adding setTimeout will wait for the next tick DOM update then focus on input
+    setTimeout(() => {
+      const input = document.getElementById('filter-input-' + this.filterItems[prop][index].id);
+      if (input)
+        input.focus();
+    }, 0);
+    this.debouncedApplyFilter();
   }
-  onInput(e) {
-    this.changes.value = e.target.value;
-    // prevent grid focus and other unexpected events
-    e.preventDefault();
+  onAddNewFilter(e) {
+    const el = e.target;
+    const type = el.value;
+    this.currentFilterType = type;
+    this.addNewFilterToProp();
+    // reset value after adding new filter
+    const select = document.getElementById('add-filter');
+    if (select) {
+      select.value = defaultType;
+      this.currentFilterType = defaultType;
+    }
+    this.debouncedApplyFilter();
+  }
+  addNewFilterToProp() {
+    var _a;
+    const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
+    if (!(prop || prop === 0))
+      return;
+    if (!this.filterItems[prop]) {
+      this.filterItems[prop] = [];
+    }
+    if (this.currentFilterType === 'none')
+      return;
+    this.filterId++;
+    this.currentFilterId = this.filterId;
+    this.filterItems[prop].push({
+      id: this.currentFilterId,
+      type: this.currentFilterType,
+      value: '',
+      relation: 'and',
+    });
+    // adding setTimeout will wait for the next tick DOM update then focus on input
+    setTimeout(() => {
+      const input = document.getElementById('filter-input-' + this.currentFilterId);
+      if (input)
+        input.focus();
+    }, 0);
+  }
+  onUserInput(index, prop, event) {
+    // update the value of the filter item
+    this.filterItems[prop][index].value = event.target.value;
+    this.debouncedApplyFilter();
   }
   onKeyDown(e) {
     if (e.key.toLowerCase() === 'enter') {
-      this.onSave();
+      const select = document.getElementById('add-filter');
+      if (select) {
+        select.value = defaultType;
+        this.currentFilterType = defaultType;
+        this.addNewFilterToProp();
+        select.focus();
+      }
+      return;
     }
     // keep event local, don't escalate farther to dom
     e.stopPropagation();
@@ -92,23 +191,43 @@ export class FilterPanel {
   onCancel() {
     this.changes = undefined;
   }
-  onSave() {
-    var _a, _b;
+  onReset() {
     this.assertChanges();
-    this.filterChange.emit({
-      prop: this.changes.prop,
-      type: this.changes.type,
-      value: (_b = (_a = this.extraElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim(),
-    });
-    this.changes = undefined;
+    delete this.filterItems[this.changes.prop];
+    // this updates the DOM which is used by getFilterItemsList() key
+    this.filterId++;
+    this.filterChange.emit(this.filterItems);
   }
-  onReset() {
+  onRemoveFilter(id) {
     this.assertChanges();
-    this.filterChange.emit({
-      prop: this.changes.prop,
-      type: "none",
-    });
-    this.changes = void 0;
+    // this is for reactivity issues for getFilterItemsList()
+    this.filterId++;
+    const prop = this.changes.prop;
+    const items = this.filterItems[prop];
+    if (!items)
+      return;
+    const index = items.findIndex(d => d.id === id);
+    if (index === -1)
+      return;
+    items.splice(index, 1);
+    // let's remove the prop if no more filters so the filter icon will be removed
+    if (items.length === 0)
+      delete this.filterItems[prop];
+    this.debouncedApplyFilter();
+  }
+  toggleFilterAndOr(id) {
+    this.assertChanges();
+    // this is for reactivity issues for getFilterItemsList()
+    this.filterId++;
+    const prop = this.changes.prop;
+    const items = this.filterItems[prop];
+    if (!items)
+      return;
+    const index = items.findIndex(d => d.id === id);
+    if (index === -1)
+      return;
+    items[index].relation = items[index].relation === 'and' ? 'or' : 'and';
+    this.debouncedApplyFilter();
   }
   assertChanges() {
     if (!this.changes) {
@@ -116,6 +235,12 @@ export class FilterPanel {
     }
   }
   isOutside(e) {
+    const select = document.getElementById('add-filter');
+    if (select)
+      select.value = defaultType;
+    this.currentFilterType = defaultType;
+    this.changes.type = defaultType;
+    this.currentFilterId = -1;
     if (e.classList.contains(`[uuid="${this.uuid}"]`)) {
       return false;
     }
@@ -146,6 +271,26 @@ export class FilterPanel {
       "attribute": "uuid",
       "reflect": true
     },
+    "filterItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "MultiFilterItem",
+        "resolved": "{ [prop: string]: FilterData[]; }",
+        "references": {
+          "MultiFilterItem": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{}"
+    },
     "filterTypes": {
       "type": "unknown",
       "mutable": false,
@@ -232,6 +377,10 @@ export class FilterPanel {
     }
   }; }
   static get states() { return {
+    "isFilterIdSet": {},
+    "filterId": {},
+    "currentFilterId": {},
+    "currentFilterType": {},
     "changes": {}
   }; }
   static get events() { return [{
@@ -245,10 +394,10 @@ export class FilterPanel {
         "text": ""
       },
       "complexType": {
-        "original": "FilterItem",
-        "resolved": "{ prop?: ColumnProp; type?: \"none\" | \"empty\" | \"notEmpty\" | \"eq\" | \"notEq\" | \"begins\" | \"contains\" | \"notContains\" | \"eqN\" | \"neqN\" | \"gt\" | \"gte\" | \"lt\" | \"lte\"; value?: any; }",
+        "original": "MultiFilterItem",
+        "resolved": "{ [prop: string]: FilterData[]; }",
         "references": {
-          "FilterItem": {
+          "MultiFilterItem": {
             "location": "local"
           }
         }

package/dist/collection/plugins/filter/filter.style.css

@@ -84,6 +84,10 @@ revogr-filter-panel {
   min-width: 220px;
   text-align: left;
 }
+revogr-filter-panel .filter-holder > div {
+  display: flex;
+  flex-direction: column;
+}
 revogr-filter-panel label {
   color: gray;
   font-size: 13px;
@@ -108,6 +112,10 @@ revogr-filter-panel button {
   margin-top: 10px;
   margin-right: 5px;
 }
+revogr-filter-panel .filter-actions {
+  text-align: right;
+  margin-right: -5px;
+}
 
 .rgHeaderCell:hover .rv-filter {
   transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -134,10 +142,6 @@ revogr-filter-panel button {
   width: 11px;
 }
 
-.center {
-  text-align: center;
-}
-
 .select-css {
   display: block;
   font-family: sans-serif;
@@ -189,4 +193,47 @@ revogr-filter-panel button {
 }
 .select-css:disabled:hover, .select-css[aria-disabled=true] {
   border-color: #f1f1f1;
+}
+
+.multi-filter-list {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.multi-filter-list div {
+  white-space: nowrap;
+}
+.multi-filter-list .multi-filter-list-action {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.multi-filter-list .and-or-button {
+  margin: 0 0 0 10px;
+  min-width: 58px;
+  cursor: pointer;
+}
+.multi-filter-list .trash-button {
+  margin: 0 0 -2px 6px;
+  cursor: pointer;
+  width: 22px;
+  height: 22px;
+  color: gray;
+  font-size: 18px;
+}
+.multi-filter-list .trash-button .trash-img {
+  width: 1em;
+}
+
+.add-filter-divider {
+  display: block;
+  margin: 0 -10px 10px -10px;
+  border-bottom: 1px solid #d9d9d9;
+  height: 10px;
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.05);
+}
+
+.select-input {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }

package/dist/collection/plugins/groupingColumn/grouping.col.plugin.js

@@ -27,6 +27,7 @@ export default class GroupingColumnPlugin extends BasePlugin {
       res.columnGrouping[key].push(...collectionItem);
     }
     res.maxLevel = Math.max(res.maxLevel, collection.maxLevel);
+    res.sort = Object.assign(Object.assign({}, res.sort), collection.sort);
     return res;
   }
   static isColGrouping(colData) {

package/dist/collection/plugins/sorting/sorting.plugin.js

@@ -157,6 +157,9 @@ export default class SortingPlugin extends BasePlugin {
       let sorted = 0;
       for (let prop in sortingFunc) {
         const cmp = sortingFunc[prop];
+        if (!cmp) {
+          continue;
+        }
         sorted = cmp(prop, a, b);
         if (sorted) {
           break;

package/dist/collection/utilsExternal/generate-data.js

@@ -90,7 +90,7 @@ export function generateFakeDataObject(config = {}) {
     }
     // apply config
     if (rgCol === order) {
-      columns[rgCol].order = 'asc';
+      columns[rgCol].order = 'desc';
     }
   }
   // apply config