ninegrid2 6.315.0 → 6.317.0

package/src/etc/ngFiltering.js.bak

@@ -1,532 +0,0 @@
-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);