ninegrid2 6.131.0 → 6.133.0

package/src/etc/ngFiltering.js.bak

@@ -0,0 +1,532 @@
+import ninegrid from "../index.js";
+
+export class ngFiltering
+{
+	#owner;
+	#isFiltering;
+	
+	constructor (owner) {
+		this.#owner = owner;
+		this.#isFiltering = false;
+
+		$(this.#owner.shadowRoot).append($('<ng-filter-panel></ng-filter-panel>').hide());
+	}
+	
+	initialize = () => {
+		/**
+		 * 1. grid attr == filter : on();
+		 */
+		this.#isFiltering = false;
+		this.#owner.data.clearFilter();
+	};
+	
+	isFiltering = () => {
+		return this.#isFiltering;
+	};
+	
+	on = (v) => {
+		
+		this.#on();
+		
+		if (v) this.#set(v);
+	};
+	
+	#on = () => {
+
+		this.#isFiltering = true;
+		
+		var lastRowIndex = 0;
+		$(".ng-table thead", this.#owner.body).each((index,el) => {
+			lastRowIndex = Math.max(el.rows.length - 1, lastRowIndex);
+		});
+		
+		$(".ng-table thead th,.ng-table thead td", this.#owner.body).each((index,el) => {
+
+			if (el.closest("tr").sectionRowIndex + el.rowSpan - 1 != lastRowIndex) return true;
+
+			var colnms = [];
+			$(this.#owner.template).find(`[data-col=${el.dataset.col}]`).each((index,el) => {
+				if (el.dataset.bind) colnms.push(el.dataset.bind);
+			});
+			if (colnms.length == 0) return true;
+			
+			//console.log(colnms);
+			
+			$(el).append($(`<ng-filter-button></ng-filter-button`));
+			el.querySelector("ng-filter-button").colnms = colnms;
+			
+			//console.log(el.querySelector("ng-filter-button").colnms);
+		});
+	};
+	off = () => {
+		this.#isFiltering = false;
+		$(".ng-table ng-filter-button", this.#owner.body).remove();
+	};
+	
+	#set = (option) => {
+	
+		let jsonOption = {};
+		if (Array.isArray(option)) {
+			
+			for (let key in option[0]) {
+				jsonOption[key] = Array.from(new Set(oFilter.map(item => item[key])));//oFilter.map(item => item[key]);
+			}
+		}
+		else {
+			jsonOption = option;
+		}
+
+		this.#owner.data.clearFilter();
+		
+		for (let key in jsonOption) {
+			const arr = jsonOption[key];
+			const idx = this.#owner.fields.indexOf(key);
+			
+			for (let o of this.#owner.data.getValidData()) {
+				if (o.v[idx] != null) {
+					if (typeof o.v[idx] === "number") {
+						for (var i = 0; i < arr.length; i++) {
+							arr[i] = Number(arr[i]);
+						}
+					}
+					break;
+				}
+			}
+
+			this.#owner.data.getValidData().filter(m => { return arr.nineBinarySearch(m.v[idx] || '') < 0; }).map(m => { m.__ng.filtered = true; });
+		}
+		
+		
+		this.#owner.data.refreshFilter();
+		
+		var colnms = [];
+		for (let key in jsonOption) {
+			colnms.push(key);
+		}
+		//var colnms = filterData.map(item => item.colnm);
+		
+		ninegrid.querySelectorAll("ng-filter-button").forEach(v => {
+			v.filterData = null;
+		});
+		
+		for (let key in jsonOption) {
+			const arr = jsonOption[key];
+			
+			ninegrid.querySelectorAll("ng-filter-button").forEach(v => {
+				//console.log(v.colnms);
+			
+				v.colnms.forEach(colnm => {
+					if (colnms.includes(colnm)) {
+						v.filterData = arr;
+					}
+				});
+			});
+		}
+		
+		
+		this.#owner.scrollTo_V1(0);
+		
+		this.#owner.paging.reset();
+	};
+}
+
+class ngFilterButton extends HTMLElement
+{
+	#owner;
+	#filterData;
+	#colnms;
+	
+	constructor () {
+		super();
+	}
+
+	connectedCallback() {
+		this.#owner = this.getRootNode().host;//this.closest("nine-grid");
+		
+		$(this).off("click", this.#onClick);
+		$(this).on("click", this.#onClick);
+	};
+	
+	get colnms() {
+		return this.#colnms || [];
+	};
+	set colnms(v) {
+		this.#colnms = v;
+	};
+	
+	get filterData() {
+		return this.#filterData;
+	};
+	set filterData(v) {
+		this.#filterData = v;
+		v && v.length > 0 ? ninegrid.j.querySelectorAll(this).addClass('filtered') : ninegrid.j.querySelectorAll(this).removeClass('filtered');
+	};
+	
+	#onClick = (e) => {
+		
+		e.preventDefault();
+		e.stopPropagation();
+		
+		var panel = this.#owner.shadowRoot.querySelector('ng-filter-panel');
+		
+		if (this.#owner.shadowRoot.querySelectorAll('ng-filter-panel').length > 1) throw "too many ng-filter-panel";
+		if (!panel) throw 'ng-filter-panel is null';
+
+		var cell = e.target.closest("th,td");
+		
+		var l = $(e.target).offset().left - $(this.#owner).offset().left;// - $(panel).width() + $(e.target).width() + 1;
+		if (l < 0) l = 0;
+		if (l + $(panel).width() > $(this.#owner).width()) l = $(this.#owner).width() - $(panel).width() - 5;
+		
+		
+
+		var t = $(cell).offset().top + $(cell).height()- $(this.#owner).offset().top;//$(e.target).offset().top + $(e.target).height() + 2;
+		
+		//$(panel).offset({left: l, top: t});
+		$(panel).css({left: l, top: t});
+
+		panel.refresh(this.#owner, this);
+	};
+}
+
+class ngFilterPanel extends HTMLElement
+{
+	#target;
+	#timer;
+	
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
+
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ngFilterPanel.css";
+				${ninegrid.getCustomPath(this,"ngFilterPanel.css")}
+			</style>
+			
+			<div class="head">
+				<input type="text">
+			</div>
+			<nine-grid class="simple filter" css-path="${cssPath}" select-type="row" auto-fit-col="true" col-indicator-type="collapse">
+				<table style="display: none;">
+					<colgroup>
+						<col width="180" />
+						<col width="30" />
+					</colgroup>
+					<tbody>
+						<tr style="height: 24px;">
+							<td data-bind="LVL" data-expr="data.DATA2">
+								<ng-tree-item />
+							</td>
+							<td data-bind="CHK">
+								<ng-checkbox update-row-state="false" visible="data.LVL!=1" selected-border-color="white" />
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</nine-grid>
+			
+			<div>
+				<label><input type="checkbox" checked>Select All</label>
+				<button id="btnOk">OK</button>
+				<button id="btnCancel">Cancel</button>
+			</div>
+		`;
+		
+		$(this.shadowRoot).find("input[type=text]")		.on("input",	this.#onInput);
+		$(this.shadowRoot).find("input[type=checkbox]")	.on("change",	this.#onSelectAll);
+		$(this.shadowRoot).find("#btnOk")				.on("click",	this.#onOk);
+		$(this.shadowRoot).find("#btnCancel")			.on("click",	this.#onCancel);
+		
+		//$(this).on("mousedown", e => { e.preventDefault(); e.stopPropagation(); });
+		//$(this).on("mousedown", e => { e.stopPropagation(); });
+	};
+
+	#onOk = (e) => {
+
+		var grd = this.shadowRoot.querySelector("nine-grid");
+
+		//ninegrid.j.querySelectorAll(grd).addClass("loading");
+		ninegrid.j.querySelectorAll(this.#target.owner).addClass("loading");
+		
+		
+		setTimeout(() => {
+
+			const LVL_IDX	= grd.fields.indexOf("LVL");
+			const CHK_IDX	= grd.fields.indexOf("CHK");
+			const COLNM_IDX	= grd.fields.indexOf("COLNM");
+			const DATA_IDX	= grd.fields.indexOf("DATA");
+			
+			const checked	= grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] == "Y"; });
+			const unchecked = grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] != "Y"; });
+			
+			if (unchecked.length == 0) {
+				//this.#target.button.filterData = null;
+			}
+			
+			var filterData = [];
+			if (checked.length > 0) {
+				
+				[...new Set(checked.map(m => { return m.v[COLNM_IDX] }))].forEach(v => {
+					filterData.push({
+						colnm	: v,
+						data	: [...new Set(grd.data.getValidData().filter(m => { return m.v[CHK_IDX] == "Y" && m.v[COLNM_IDX] == v; }).map(m => { return m.v[DATA_IDX] || ''; }))].sort((a,b) => { return a > b ? 1 : -1; }),
+					});
+				});
+			}
+			
+			console.log(filterData);
+			
+		//console.log(this.#target);
+		
+			//console.log(this.#target, this.#target.button);
+			
+			//this.#target.button.filterData = filterData;//grd.data.getValidData().filter(item => { return item.CHK == "Y"; });//.map(item => {  return item.DATA; });
+			
+			
+			/**
+			this.#target.owner.data.clearFilter();
+			
+			$("ng-filter-button", this.#target.owner.body).each((index,el) => {
+				if (!el.filterData) return true;
+				el.filterData.forEach(o => {
+					const idx = this.#target.owner.fields.indexOf(o.colnm);
+					this.#target.owner.data.getValidData().filter(m => { return o.data.nineBinarySearch(m.v[idx] || '') < 0; }).map(m => { m.__ng.filtered = true; });
+					//this.#target.owner.data.resetIndex();
+				});
+			});
+			
+			this.#target.owner.data.refreshFilter();
+			*/
+			
+			console.log(this.#target, this.#target.button)
+			
+			this.#target.button.filterData = [...new Set(checked.map(m => { return m.v[DATA_IDX] }))];
+			
+			console.log(this.#target.button.filterData)
+			
+			var oParam = {};
+			
+			$("ng-filter-button", this.#target.owner.body).each((index,el) => {
+				
+				//console.log(el, el.filterData);
+				
+				if (!el.filterData) return true;
+				
+				//console.log(el, el.filterData);
+
+				el.colnms.forEach(colnm => {
+					oParam[colnm] = el.filterData;
+				});
+				
+				/**
+				el.filterData.forEach(o => {
+					
+					oParam[o.colnm] = o.data;
+					
+					//const idx = this.#target.owner.fields.indexOf(o.colnm);
+					//this.#target.owner.data.getValidData().filter(m => { return o.data.nineBinarySearch(m.v[idx] || '') < 0; }).map(m => { m.__ng.filtered = true; });
+				}); */
+			});
+			
+			console.log(oParam);
+			
+			//this.#target.owner.data.setFilter(oParam);
+			this.#target.owner.filtering.on(oParam);
+			
+			
+			//this.#target.owner.data.getValidDataNF().filter(rowData => { return this.#target.button.filterData.findIndex(item => (item.DATA || '') == (rowData[item.COLNM] || '') ) < 0; }).map(item => { item.__ng.filtered = true; });
+			//this.#target.owner.scrollTo_V1(0);
+			
+			//this.#target.owner.paging.reset();
+			
+			ninegrid.j.querySelectorAll(this.#target.owner).removeClass("loading");
+			
+		});
+		
+		$(this).hide();
+	};
+	
+	
+	
+	#onCancel = (e) => {
+		$(this).hide();
+	};
+
+	#onSelectAll = (e) => {
+		var grd = this.shadowRoot.querySelector("nine-grid");
+		var idx = (grd.fields.indexOf("CHK"));
+
+		grd.data.getValidData().map(m => { m.v[idx] = $(e.target).prop("checked") ? "Y" : "N"; });
+		
+		grd.refreshData();
+	};
+	
+	
+	#onInput = (e) => {
+		var grd = this.shadowRoot.querySelector("nine-grid");
+
+		
+		ninegrid.j.querySelectorAll(grd).addClass("loading");
+
+		
+		var data = grd.dataManager.rawRecords;
+		
+		data.map(m => { m.__ng.filtered = false; });
+
+		
+		var v = $(e.target).val().toLowerCase();
+		
+
+		const LVL_IDX	= grd.fields.indexOf("LVL");
+		const DATA_IDX	= grd.fields.indexOf("DATA");
+		
+		data.filter(m => { return m.v[LVL_IDX] == 2 && String(m.v[DATA_IDX] || '').toLowerCase().indexOf(v) < 0; }).map(m => { m.__ng.filtered = true; });
+		
+		grd.data.resetRecords();
+		
+		if (this.#timer) {
+			clearTimeout(this.#timer);
+			this.#timer = null;
+		}
+		this.#timer = setTimeout(() => {
+			grd.dataManager.viewRecords.reset();
+			grd.dataManager.viewRecords.touch();
+			//ninegrid.j.querySelectorAll(grd).removeClass("loading");
+		}, 200)
+	};
+	
+	refresh = (owner, filterButton) => {
+
+		var col = filterButton.closest('th,td').dataset.col;
+
+		//if (this.#target && this.#target.uuid == owner.uuid && this.#target.col == col && $(this).is(':visible')) {
+		if (this.#target && this.#target.col == col && $(this).is(':visible')) {
+			$(this).hide();
+			return;
+		}
+
+		this.#target = {
+			owner	: owner,
+			button	: filterButton,
+			uuid	: owner.uuid,
+			col		: col,
+		}
+		
+		$(this).show();
+
+		ninegrid.j.querySelectorAll(this).addClass("loading");
+		
+		$(this.shadowRoot).find("input[type=text]").val("");
+
+		setTimeout(() => {
+		
+			var ds = [];
+			var colnms = [];
+			$(owner.template).find(`[data-col=${col}]`).each((index,el) => {
+				if (el.dataset.bind) colnms.push(el.dataset.bind);
+			});
+			
+			var data = owner.data.getValidDataNF();
+			$("ng-filter-button", owner.body).each((index,el) => {
+
+				if (el.closest('th,td').dataset.col == col || !el.filterData) return true;
+				/**
+				el.filterData.forEach(o => {
+					var idx = owner.fields.indexOf(o.colnm);
+					
+					if (idx >= 0) {
+						data = data.filter(m => { return o.data.nineBinarySearch(m.v[idx] || '') >= 0; });
+					}
+				});
+				*/
+				
+				console.log(el.filterData, el.colnms, el.dataset.bind);
+
+				el.colnms.forEach(colnm => {
+					var idx = owner.fields.indexOf(colnm);
+					
+					console.log(idx);
+
+					if (idx >= 0) {
+						data = data.filter(m => { return el.filterData.nineBinarySearch(m.v[idx] || '') >= 0; });
+					}
+				});
+				
+				//data = data.filter(rowData => { return el.filterData.findIndex(item => (item.DATA || '') == (rowData[item.COLNM] || '') ) >= 0; });
+			});
+			
+			
+			colnms = [...new Set(colnms)];
+			colnms.forEach((colnm,i) => {
+
+				ds.push({
+					LVL: 1,
+					CHK: 'N',
+					DATA2: '<span class="group">' + $(filterButton).closest('th,td').text() + (colnms.length > 1 ? ` #${i+1} (${colnm})` : '') + '</span>',
+				});
+
+				var filterData = [];
+				if (filterButton.filterData) {
+					var idx = filterButton.filterData.findIndex(item => item.colnm == colnm);
+					if (idx >= 0) {
+						filterData = filterButton.filterData[idx].data;
+					}
+				}
+
+				/**
+				var cell = $(`[data-col=${col}][data-bind=${colnm}]`, owner.template);
+				var expr = cell.attr("data-expr");
+				var exprFunc = (expr) ? owner.exprFunction(expr) : null;
+				*/
+				
+				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${colnm}"]`, owner.tmpl).elem();
+				const expr = cell.getAttribute("data-expr");
+				const exprFunc = (expr) ? owner.exprFunction(expr) : null;
+
+				var data2 = [];
+				for (var rowData of data) {
+					var idx = owner.fields.indexOf(colnm);
+					
+					if (expr) {
+						var o = owner.data.conv(rowData);
+						data2.push({v:o[colnm],v2:exprFunc(o, rowData.__ng.rowidx, owner.data)});
+					}
+					else {
+						data2.push({v:rowData.v[idx],v2:rowData.v[idx]});
+					}
+				}
+
+				[...new Set(data2.sort( (a,b) => { return (a.v2||'') > (b.v2||'') ? 1 : ((a.v2||'') < (b.v2||'') ? -1 : 0); } ).map((m) => JSON.stringify(m)))].map((m) => JSON.parse(m)).forEach(o => {
+					ds.push({
+						LVL		: 2,
+						DATA	: o.v,
+						DATA2	: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
+						COLNM	: colnm,
+						CHK		: filterData.length == 0 || filterData.nineBinarySearch(o.v || '') >= 0 ? "Y" : "N",
+					});
+				});
+			});
+			
+			var grd = this.shadowRoot.querySelector("nine-grid");
+			//grd.dataSource = ds;
+			grd.fields.add(["DATA","DATA2","COLNM"]);
+			
+			grd.data.set(ds);
+			
+			$(this.shadowRoot).find("input[type=checkbox]").prop("checked", grd.data.getValidData().filter(item => { return item.LVL == 2 && item.CHK != "Y"; }).length == 0 ? true : false);
+			
+			this.shadowRoot.querySelector("input").focus();
+			
+			ninegrid.j.querySelectorAll(this).removeClass("loading");
+		});
+	};
+}
+
+
+customElements.define("ng-filter-button", ngFilterButton);
+customElements.define("ng-filter-panel", ngFilterPanel);