[working] add grid filter

lib/ui/css/grid.scss

@@ -23,6 +23,9 @@
         --row-selected-bg-color: #e6f2fb;
         --text-disabled-color: gray;
 
+        --filter-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
+        --filter-transition: transform .12s ease, opacity .24s ease;
+
         --row-height: 36px;
         --header-line-height: 26px;
         --text-indent: 8px;
@@ -31,6 +34,7 @@
         --loading-border-radius: 20px;
 
         --arrow-size: 4px;
+        --filter-size: 10px;
         --split-width: 8px;
         --dragger-size: 20px;
         --dragger-opacity: .6;
@@ -39,6 +43,7 @@
         --dragger-cursor-opacity: .3;
 
         --header-padding: 4px 12px 4px 8px;
+        --header-filter-padding: 4px 26px 4px 8px;
         --spacing-s: 4px;
         --spacing-cell: 6px 4px 6px 8px;
     }
@@ -93,6 +98,8 @@
 
                     >span {
                         overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
                     }
                 }
 
@@ -119,6 +126,36 @@
                     }
                 }
 
+                >.filter {
+                    width: var(--filter-size);
+                    height: var(--filter-size);
+                    top: 50%;
+                    margin-top: calc(0px - var(--filter-size) / 2);
+                    right: calc(var(--arrow-size) * 2 + 4px);
+                    position: absolute;
+                    display: flex;
+
+                    >svg {
+                        width: 100%;
+                        height: 100%;
+                        fill: var(--color);
+                        opacity: .2;
+                        transition: opacity .12s ease;
+
+                        &:hover {
+                            opacity: .8;
+                        }
+                    }
+
+                    &.hover>svg {
+                        opacity: .8;
+                    }
+
+                    &.active>svg {
+                        opacity: 1;
+                    }
+                }
+
                 >.spliter {
                     position: absolute;
                     height: 100%;
@@ -183,6 +220,10 @@
                         border-right: var(--dragger-cursor-size) solid transparent;
                     }
                 }
+
+                &.header-filter>div {
+                    padding: var(--header-filter-padding);
+                }
             }
         }
     }
@@ -367,6 +408,48 @@
             }
         }
     }
+
+    >.filter-panel {
+        position: absolute;
+        width: 200px;
+        height: 300px;
+        box-shadow: var(--filter-shadow);
+        transition: var(--filter-transition);
+        background-color: var(--bg-color);
+        transform: scaleY(0);
+        transform-origin: top;
+        opacity: 0;
+        display: flex;
+        flex-direction: column;
+
+        &.active {
+            transform: scaleY(1);
+            opacity: 1;
+        }
+
+        >.filter-search-holder {
+            position: relative;
+            margin: 8px 8px 4px;
+
+            >.filter-search-box {
+                box-sizing: border-box;
+                text-indent: 16px;
+                width: 100%;
+                font-size: var(--font-smaller-size);
+                line-height: var(--line-height);
+            }
+
+            >svg {
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                top: calc(50% - 6px);
+                left: 4px;
+                fill: var(--color);
+                cursor: text;
+            }
+        }
+    }
 }
 
 @media (prefers-color-scheme: dark) {

lib/ui/grid/grid.html

@@ -198,6 +198,7 @@
           key: 'c2a',
           caption: '下拉',
           type: Grid.ColumnTypes.Dropdown,
+          allowFilter: true,
           source: item => {
             if (item.source == null) {
               return new Promise((resolve, reject) => {

lib/ui/grid/grid.js

@@ -1,5 +1,5 @@
 import '../css/grid.scss';
-import { global, isPositive, isMobile, throttle, truncate } from "../../utility";
+import { global, isPositive, isMobile, throttle, truncate, distinct } from "../../utility";
 import { r } from "../../utility/lgres";
 import { createElement } from "../../functions";
 import { createIcon } from "../icon";
@@ -12,11 +12,11 @@ const ColumnChangedType = {
     Sort: 'sort'
 };
 const RefreshInterval = isMobile() ? 32 : 0;
-const MaxColumnBit = 10;
-const MaxColumnMask = 0x3ff;
+const HoverInternal = 200;
 const RedumCount = 4;
 const MiniDragOffset = 4;
 const MiniColumnWidth = 50;
+const FilterPanelWidth = 200;
 
 function getClientX(e) {
     if (e == null) {
@@ -63,7 +63,6 @@ class Grid {
     #containerHeight;
     #bodyClientWidth;
     #rowCount = -1;
-    #overflows;
     #scrollTop;
     #scrollLeft;
     #colTypes = {};
@@ -126,9 +125,22 @@ class Grid {
         }
         list = list.map(i => { return { values: i } });
         this.#source = list;
-        // TODO: filter to currentSource;
-        this.#currentSource = list;
-        this.#overflows = {};
+        if (this.#colAttrs.__filtered === true) {
+            this.#currentSource = list.filter(it => {
+                for (let col of this.columns) {
+                    const f = this.#get(col.key, 'filter');
+                    if (Array.isArray(f)) {
+                        const v = this.#getItemValue(it, col.key, col.filter);
+                        if (f.indexOf(v) < 0) {
+                            return false;
+                        }
+                    }
+                }
+                return true;
+            });
+        } else {
+            this.#currentSource = list;
+        }
         this.#selectedColumnIndex = -1;
         this.#selectedIndexes = [];
         this.#startIndex = 0;
@@ -323,17 +335,17 @@ class Grid {
                     width = col.width;
                 }
                 if (width > 0) {
-                    this.#changeColumnWidth(i, width, true);
+                    this.#changeColumnWidth(i, width);
                 }
             });
         }
     }
 
     resetChange() {
-        if (this.#currentSource == null) {
+        if (this.#source == null) {
             return;
         }
-        for (let row of this.#currentSource) {
+        for (let row of this.#source) {
             delete row.__changed;
         }
     }
@@ -363,21 +375,8 @@ class Grid {
                 direction = 1;
             }
             comparer = (a, b) => {
-                const ta = a.values[col.key];
-                const tb = b.values[col.key];
-                if ((ta == null || tb == null) && typeof col.filter === 'function') {
-                    a = col.filter(a.values);
-                    b = col.filter(b.values);
-                } else {
-                    a = ta;
-                    b = tb;
-                }
-                if (a?.value != null) {
-                    a = a.value;
-                }
-                if (b?.value != null) {
-                    b = b.value;
-                }
+                a = this.#getItemValue(a, col.key, col.filter);
+                b = this.#getItemValue(b, col.key, col.filter);
                 if (a == null && typeof b === 'number') {
                     a = 0;
                 } else if (typeof a === 'number' && b == null) {
@@ -394,8 +393,9 @@ class Grid {
             comparer = (a, b) => col.sortFilter(a.values, b.values) * direction;
         }
         this.#source.sort(comparer);
-        // TODO: filter to currentSource;
-        this.#currentSource = this.#source;
+        if (this.#colAttrs.__filtered === true) {
+            this.#currentSource.sort(comparer);
+        }
         if (reload) {
             this.reload();
         } else {
@@ -434,6 +434,9 @@ class Grid {
                 if (!this.readonly && col.enabled !== false && col.allcheck && isCheckbox) {
                     width += 32;
                 }
+                if (col.allowFilter === true) {
+                    width += 14;
+                }
                 if (width < MiniColumnWidth) {
                     width = MiniColumnWidth;
                 }
@@ -486,8 +489,12 @@ class Grid {
                 th.appendChild(createElement('layer', 'arrow'));
             }
             // filter
-            if (col.allowFilter) {
-                // TODO: filter
+            if (col.allowFilter === true) {
+                const filter = createElement('layer', 'filter');
+                filter.appendChild(createIcon('fa-solid', 'filter'));
+                filter.addEventListener('mousedown', e => this.#onFilter(e, col));
+                th.classList.add('header-filter');
+                th.appendChild(filter);
             }
             // resize spliter
             if (col.resizable !== false) {
@@ -549,19 +556,16 @@ class Grid {
             const holder = createElement('div', 'ui-grid-hover-holder');
             holder.addEventListener('mousedown', e => {
                 const holder = e.currentTarget;
-                const keyid = holder.keyid;
-                if (keyid == null) {
-                    return;
-                }
-                delete holder.keyid;
+                const row = Number(holder.dataset.row);
+                const col = Number(holder.dataset.col);
                 if (holder.classList.contains('active')) {
                     holder.classList.remove('active');
                 }
-                return this.#onRowClicked(e, (keyid >>> MaxColumnBit) - this.#startIndex, keyid & MaxColumnMask);
+                return this.#onRowClicked(e, row + this.#startIndex, col);
             });
             holder.addEventListener('dblclick', e => this.#onRowDblClicked(e));
             bodyContainer.appendChild(holder);
-            body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder), { passive: true });
+            body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, HoverInternal, this, e, holder), { passive: true });
         }
         this.#refs.body = body;
         this.#refs.bodyContainer = bodyContainer;
@@ -588,7 +592,8 @@ class Grid {
                 cols.forEach((col, j) => {
                     const cell = createElement('td');
                     if (col.visible !== false) {
-                        cell.keyid = ((exists + i) << MaxColumnBit) | j;
+                        cell.dataset.row = String(exists + i);
+                        cell.dataset.col = String(j);
                         const style = this.#get(col.key, 'style');
                         if (style != null) {
                             for (let css of Object.entries(style)) {
@@ -717,7 +722,6 @@ class Grid {
                         widths[j] = width;
                         widths.flag = true;
                     }
-                    this.#overflows[(startIndex + i) << MaxColumnBit | j] = false;
                 }
                 if (typeof col.styleFilter === 'function') {
                     const style = col.styleFilter(item);
@@ -746,7 +750,7 @@ class Grid {
         });
     }
 
-    #changeColumnWidth(index, width, keepOverflows) {
+    #changeColumnWidth(index, width) {
         const col = this.columns[index];
         // const oldwidth = col.width;
         const w = `${width}px`;
@@ -772,15 +776,6 @@ class Grid {
         //     width = this.#refs.bodyContainer.offsetWidth - oldwidth + width;
         //     this.#refs.bodyContainer.style.width = `${width}px`;
         // }
-        if (keepOverflows) {
-            return;
-        }
-        for (let i = 0; i < this.#currentSource.length; i += 1) {
-            const keyid = (i << MaxColumnBit) | index;
-            if (this.#overflows.hasOwnProperty(keyid)) {
-                delete this.#overflows[keyid];
-            }
-        }
     }
 
     #changingColumnOrder(index, offset, x, offsetLeft) {
@@ -821,8 +816,8 @@ class Grid {
             }
             idx ??= count - 1;
         }
-        if (idx !== this.#colAttrs.orderIndex) {
-            this.#colAttrs.orderIndex = idx;
+        if (idx !== this.#colAttrs.__orderIndex) {
+            this.#colAttrs.__orderIndex = idx;
             element = children[idx];
             if (element == null) {
                 return;
@@ -835,7 +830,7 @@ class Grid {
     #changeColumnOrder(index) {
         this.#refs.dragger.style.display = '';
         this.#refs.draggerCursor.style.display = '';
-        const orderIndex = this.#colAttrs.orderIndex;
+        const orderIndex = this.#colAttrs.__orderIndex;
         if (orderIndex >= 0 && orderIndex !== index) {
             let targetIndex = orderIndex - index;
             if (targetIndex >= 0 && targetIndex <= 1) {
@@ -936,6 +931,16 @@ class Grid {
         }
     }
 
+    #getItemValue(item, key, filter) {
+        let value;
+        if (typeof filter === 'function') {
+            value = filter(item);
+        } else {
+            value = item.values[key];
+        }
+        return value?.value ?? value;
+    }
+
     #getRowTarget(target) {
         let parent;
         while ((parent = target.parentElement) != null && !parent.classList.contains('ui-grid-row')) {
@@ -969,6 +974,169 @@ class Grid {
         }
     }
 
+    #onCloseFilter() {
+        const panels = this.#el.querySelectorAll('.filter-panel.active');
+        if (panels.length > 0) {
+            panels.forEach(el => el.classList.remove('active'));
+            setTimeout(() => this.#el.querySelectorAll('.filter-panel').forEach(el => el.remove()), 120);
+            const filtering = this.#colAttrs.__filtering;
+            if (filtering instanceof HTMLElement) {
+                filtering.classList.remove('hover');
+            }
+            delete this.#colAttrs.__filtering;
+            return true;
+        }
+        return false;
+    }
+
+    #onFilter(e, col) {
+        if (this.#onCloseFilter()) {
+            return;
+        }
+        const close = e => {
+            if ((e.target.tagName === 'LAYER' && e.target.classList.contains('filter')) ||
+                e.target.tagName === 'use') {
+                return;
+            }
+            if (this.#onCloseFilter()) {
+                document.removeEventListener('mousedown', close);
+            }
+        }
+        document.addEventListener('mousedown', close);
+        const panel = createElement('div', 'filter-panel');
+        panel.addEventListener('mousedown', e => e.stopPropagation());
+        const th = e.currentTarget.parentElement;
+        const width = th.offsetWidth;
+        panel.style.top = `${th.offsetHeight}px`;
+        panel.style.left = (th.offsetLeft + (width > FilterPanelWidth ? width - FilterPanelWidth : 0)) + 'px';
+
+        // search
+        let searchbox;
+        if (col.allowSearch !== false) {
+            const searchholder = createElement('div', 'filter-search-holder');
+            searchbox = createElement('input', 'filter-search-box ui-text');
+            searchbox.type = 'text';
+            const searchicon = createIcon('fa-regular', 'search');
+            searchicon.addEventListener('mousedown', e => {
+                searchbox.focus();
+                e.preventDefault();
+            });
+            searchholder.append(searchbox, searchicon);
+            panel.append(searchholder);
+        }
+        // list
+        const itemlist = createElement('div', 'filter-item-list');
+        itemlist.addEventListener('scroll', e => throttle(this.#onFilterScroll, RefreshInterval, this, col, itemlist, e.target.scrollTop), { passive: true });
+        // - all
+        const itemall = createElement('div', 'filter-item filter-all');
+        itemall.appendChild(createCheckbox({
+            label: this.langs.all,
+            onchange: e => {
+                const checked = e.target.checked;
+                itemlist.querySelectorAll('.filter-content input').forEach(box => box.checked = checked);
+            }
+        }));
+        itemlist.appendChild(itemall);
+        // - items
+        let array;
+        if (Array.isArray(col.filterSource)) {
+            array = col.filterSource;
+        } else if (typeof col.filterSource === 'function') {
+            array = col.filterSource.call(this, col);
+        } else {
+            array = distinct(this.#currentSource, col.key, col.filter)
+                .sort((a, b) => {
+                    a = a?.value ?? a;
+                    b = b?.value ?? b;
+                    return a > b ? 1 : a < b ? -1 : 0;
+                });
+        }
+        array = array.map(i => {
+            if (Object.prototype.hasOwnProperty.call(i, 'value') &&
+                Object.prototype.hasOwnProperty.call(i, 'displayValue')) {
+                return i;
+            }
+            return {
+                value: i,
+                displayValue: i == null ? '' : i
+            };
+        });
+        this.#fillFilterList(col, itemlist, array, itemall);
+        // TODO: check status
+        panel.appendChild(itemlist);
+        if (searchbox != null) {
+            searchbox.addEventListener('input', e => {
+                const key = e.currentTarget.value.toLowerCase();
+                const items = key.length === 0 ? array : array.filter(i => {
+                    const displayValue = i?.displayValue ?? i;
+                    return String(displayValue ?? '').indexOf(key) >= 0;
+                });
+                this.#fillFilterList(col, itemlist, items, itemall);
+            });
+        }
+
+        this.#el.appendChild(panel);
+        setTimeout(() => panel.classList.add('active'), 0);
+        this.#colAttrs.__filtering = e.currentTarget;
+        e.currentTarget.classList.add('hover');
+    }
+
+    #fillFilterList(col, list, array, all) {
+        list.querySelector('.filter-holder').remove();
+        list.querySelector('.filter-content').remove();
+        const rowHeight = this.filterRowHeight;
+        const height = array.length * rowHeight;
+        this.#set(col.key, 'filterHeight', height);
+        const holder = createElement('div', 'filter-holder');
+        holder.style.height = `${height}px`;
+        const content = createElement('div', 'filter-content');
+        content.style.top = `${rowHeight}px`;
+        this.#set(col.key, 'filterSource', array);
+        const filter = this.#get(col.key, 'filter');
+        for (let item of array) {
+            item.__checked = !Array.isArray(filter) || filter.indexOf(item.value ?? item);
+        }
+        if (array.length > 12) {
+            array = array.slice(0, 12);
+        }
+        this.#doFillFilterList(col, content, array, all);
+        list.append(holder, content);
+    }
+
+    #doFillFilterList(col, content, array, all) {
+
+    }
+
+    #onFilterScroll(col, list, top) {
+        const rowHeight = this.filterRowHeight;
+        top -= (top % (rowHeight * 2)) + rowHeight;
+        if (top < 0) {
+            top = 0;
+        } else {
+            let bottomTop = this.#get(col.key, 'filterHeight') - (12 * rowHeight);
+            if (bottomTop < 0) {
+                bottomTop = 0;
+            }
+            if (top > bottomTop) {
+                top = bottomTop;
+            }
+        }
+        if (this.#get(col.key, 'filterTop') !== top) {
+            this.#set(col.key, 'filterTop', top);
+            const startIndex = top / rowHeight;
+            let array = this.#get(col.key, 'filterSource');
+            if (startIndex + 12 < array.length) {
+                array = array.slice(startIndex, startIndex + 12);
+            } else {
+                array = array.slice(-12);
+            }
+            const content = list.querySelector('.filter-content');
+            content.replaceChildren();
+            this.#doFillFilterList(col, content, array, list.querySelector('.filter-all>input'));
+            content.style.top = `${top + rowHeight}px`;
+        }
+    }
+
     #onDragStart(e, col) {
         if (this.#notHeader(e.target.tagName)) {
             return;
@@ -1050,7 +1218,7 @@ class Grid {
             }
             attr.resizing = val;
             attr.sizing = true;
-            this.#changeColumnWidth(index, val, true);
+            this.#changeColumnWidth(index, val);
         };
         attr.mousemove = e => throttle(resizemove, RefreshInterval, this, e);
         attr.mouseup = e => {
@@ -1142,30 +1310,32 @@ class Grid {
             return;
         }
         let [parent, target] = this.#getRowTarget(e.target);
-        let keyid = target.keyid;
-        if (parent == null || keyid == null) {
-            delete holder.keyid;
+        if (parent == null) {
+            delete holder.dataset.row;
+            delete holder.dataset.col;
             if (holder.classList.contains('active')) {
                 holder.classList.remove('active');
             }
             return;
         }
-        const oldkeyid = holder.keyid;
-        keyid += this.#startIndex << MaxColumnBit;
-        if (keyid === oldkeyid) {
-            return;
-        }
         const element = target.children[0];
-        if (element.tagName !== 'SPAN') {
+        if (element?.tagName !== 'SPAN') {
+            if (holder.classList.contains('active')) {
+                delete holder.dataset.row;
+                delete holder.dataset.col;
+                holder.classList.remove('active');
+            }
             return;
         }
-        let overflow = this.#overflows[keyid];
-        if (overflow == null) {
-            overflow = element.scrollWidth > element.offsetWidth;
-            this.#overflows[keyid] = overflow;
+        const row = target.dataset.row;
+        const col = target.dataset.col;
+        if (holder.dataset.row === row &&
+            holder.dataset.col === col) {
+            return;
         }
-        if (overflow) {
-            holder.keyid = keyid;
+        if (element.scrollWidth > element.offsetWidth) {
+            holder.dataset.row = row;
+            holder.dataset.col = col;
             holder.innerText = element.innerText;
             const top = this.#refs.bodyContent.offsetTop + target.offsetTop;
             let left = target.offsetLeft;
@@ -1180,13 +1350,10 @@ class Grid {
             const height = target.offsetHeight;
             holder.style.cssText = `top: ${top}px; left: ${left}px; max-width: ${this.#bodyClientWidth}px; height: ${height - 2}px`;
             holder.classList.add('active');
-        } else {
-            if (oldkeyid != null) {
-                delete holder.keyid;
-            }
-            if (holder.classList.contains('active')) {
-                holder.classList.remove('active');
-            }
+        } else if (holder.classList.contains('active')) {
+            delete holder.dataset.row;
+            delete holder.dataset.col;
+            holder.classList.remove('active');
         }
     }
 

lib/utility.js

@@ -27,10 +27,30 @@ function throttle(method, delay = 100, context = g, ...args) {
     }
 }
 
+function debounce(method, delay = 100, context = g, ...args) {
+    if (method == null) {
+        return;
+    }
+    method.tiid && clearTimeout(method.tiid);
+    method.tiid = setTimeout(() => method.apply(context, args), delay);
+}
+
 function truncate(v) {
     return (v > 0 ? Math.floor : Math.ceil)(v);
 }
 
+function distinct(array, key, filter) {
+    const dict = Object.create(null);
+    for (let item of array) {
+        const v = typeof filter === 'function' ? filter(item) : item[key];
+        const val = v?.value ?? v;
+        if (!Object.prototype.hasOwnProperty.call(dict, val)) {
+            dict[val] = v;
+        }
+    }
+    return Object.values(dict);
+}
+
 function isEmail(text) {
     return /^\w[-\w.+]*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(text);
 }
@@ -65,7 +85,9 @@ export {
     isMobile,
     // functions
     throttle,
+    debounce,
     truncate,
+    distinct,
     isEmail,
     isPhone
 }