ninegrid2 6.315.0 → 6.317.0

package/dist/etc/ninegridContainer.js

@@ -11,7 +11,6 @@ import { ngDataManager } from "./ngDataManager.js";
 import { ngView } from "./ngView.js";
 import { ngTableWrapper } from "./ngTableWrapper.js";
 import { ngColumns } from "./ngColumns.js";
-import { ngFiltering } from "./ngFiltering.js";
 import { ngSorting } from "./ngSorting.js";
 import { ngMatrixManager } from "./ngMatrixManager.js";
 import { ngColResizer } from "./ngColResizer.js";
@@ -19,6 +18,8 @@ import { ngColMover } from "./ngColMover.js";
 import { ngRowMover } from "./ngRowDrag.js";
 import { ngCustomEvent } from "./ngCustomEvent.js";
 
+import { ngFiltering } from "../utils/ngFiltering.js";
+
 class ninegridContainer extends HTMLElement
 {
 	#colResizer;

package/dist/index.js

@@ -54,7 +54,6 @@ import "./etc/ngDataManager.js";
 import "./etc/ngExpandIcon.js";
 import "./etc/ngExport.js";
 import "./etc/ngFields.js";
-import "./etc/ngFiltering.js";
 import "./etc/ngFoot.js";
 import "./etc/ngHead.js";
 import "./etc/ngIcon.js";
@@ -99,6 +98,9 @@ import "./etc/nxTest.js";
 import "./etc/nxTopMenu.js";
 //import "./etc/object-observe.js";
 
+import "./utils/ngFiltering.js";
+
+
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";
 

package/dist/utils/ninegrid.js

@@ -333,6 +333,18 @@ export class ninegrid {
 	static nvl = (v, v2) => {
 		return ninegrid.isNvl(v) ? v2 : v;
 	};
+
+	static isEllipsis = (element) => {
+		const clone = element.cloneNode(true);
+		clone.style.width = "auto";
+		clone.style.visibility = "hidden";
+		document.body.appendChild(clone);
+
+		const isTruncated = clone.scrollWidth > element.clientWidth;
+		document.body.removeChild(clone);
+
+		return isTruncated;
+	}
 	
 	static oppositeColor = (bgColor, lightColor, darkColor) => {
 		var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.315.0",
+  "version": "6.317.0",
   "main": "dist/index.js",
   "exports": {
     "import": "./dist/index.js",

package/src/ai/aiMessage.js

@@ -19,9 +19,9 @@ class aiMessage extends HTMLElement
 			</style>
 
 			<div class="chat-message">
-				<div title="${this.#message}" class="message">
+				<span title="${this.#message}" class="message">
 					${this.#message}
-				</div>
+				</span>
 				<span class="more" style="position:relative;"><a href="#">more</a></span>
 			</div>
 
@@ -45,6 +45,8 @@ class aiMessage extends HTMLElement
 		console.log(v);;
 	}
 
+	
+
 	#init = () => {
 
 		const html = `
@@ -81,27 +83,7 @@ class aiMessage extends HTMLElement
 			alert(this.#message);
 		});
 
-		setTimeout(() => {
-			const elMessage = this.shadowRoot.querySelector(".message");
-			const elMore = this.shadowRoot.querySelector(".more");
-
-			console.log(elMessage.scrollWidth, elMessage.clientWidth);
-
-			elMore.style.display = "flex";
-			//elMore.style.position = "absolute";
-
-			console.log(elMessage.scrollWidth, elMessage.clientWidth);
-
-			//elMore.style.display = (elMessage.scrollWidth > elMessage.clientWidth) ? "flex" : "none";
-			if (elMessage.scrollWidth > elMessage.clientWidth) {
-				//elMore.style.display = "flex";
-				//elMore.style.position = "absolute";
-			}
-			else {
-				//elMore.style.display = "none";
-			}
-		}, 100);
-		
+		this.shadowRoot.querySelector(".more").style.display = (ninegrid.isEllipsis(this.shadowRoot.querySelector(".message"))) ? "flex" : "none";
 	};
 }
 

package/src/etc/ninegridContainer.js

@@ -11,7 +11,6 @@ import { ngDataManager } from "./ngDataManager.js";
 import { ngView } from "./ngView.js";
 import { ngTableWrapper } from "./ngTableWrapper.js";
 import { ngColumns } from "./ngColumns.js";
-import { ngFiltering } from "./ngFiltering.js";
 import { ngSorting } from "./ngSorting.js";
 import { ngMatrixManager } from "./ngMatrixManager.js";
 import { ngColResizer } from "./ngColResizer.js";
@@ -19,6 +18,8 @@ import { ngColMover } from "./ngColMover.js";
 import { ngRowMover } from "./ngRowDrag.js";
 import { ngCustomEvent } from "./ngCustomEvent.js";
 
+import { ngFiltering } from "../utils/ngFiltering.js";
+
 class ninegridContainer extends HTMLElement
 {
 	#colResizer;

package/src/index.js

@@ -54,7 +54,6 @@ import "./etc/ngDataManager.js";
 import "./etc/ngExpandIcon.js";
 import "./etc/ngExport.js";
 import "./etc/ngFields.js";
-import "./etc/ngFiltering.js";
 import "./etc/ngFoot.js";
 import "./etc/ngHead.js";
 import "./etc/ngIcon.js";
@@ -99,6 +98,9 @@ import "./etc/nxTest.js";
 import "./etc/nxTopMenu.js";
 //import "./etc/object-observe.js";
 
+import "./utils/ngFiltering.js";
+
+
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";
 

package/src/utils/ngFiltering.js

@@ -0,0 +1,392 @@
+import ninegrid from "../index.js";
+
+/**
+ * button.filterOptions = [{
+ * 	colnm: "userId",
+ *  data: [],
+ * }]
+ * button.
+ */
+export class ngFiltering
+{
+	#owner;
+	#isFiltering;
+	
+	constructor(owner) {
+        this.#owner = owner;
+        this.#isFiltering = false;
+
+        const filterPanel = document.createElement("ng-filter-panel"); // ✅ 필터 패널 생성
+        filterPanel.style.display = "none"; // ✅ 숨김 처리
+        this.#owner.shadowRoot.appendChild(filterPanel); // ✅ Shadow DOM 내부에 추가
+    }
+	
+	initialize = () => {
+		/**
+		 * 1. grid attr == filter : on();
+		 */
+		this.#isFiltering = false;
+		this.#owner.data.clearFilter();
+	};
+	
+	isFiltering = () => {
+		return this.#isFiltering;
+	};
+	
+	on = (v) => {
+		
+		this.#isFiltering = true;
+		const lastRowIndex = this.#getLastRowIndex();
+
+		this.#owner.body.querySelectorAll(".ng-table thead th, .ng-table thead td").forEach((td) => {
+			const rowIndex = td.closest("tr")?.sectionRowIndex;
+			if (rowIndex !== undefined && rowIndex + td.rowSpan - 1 === lastRowIndex) {
+				const options = Array.from(this.#owner.activeTmpl.querySelectorAll(`[data-col="${td.dataset.col}"]`))
+					.map(el => el.dataset.bind ? { colnm: el.dataset.bind, data: [] } : null)
+					.filter(Boolean); // ✅ `null` 제거
+
+				if (options.length > 0) {
+					td.querySelector("ng-filter-button")?.remove();
+
+					const filterButton = document.createElement("ng-filter-button");
+					td.appendChild(filterButton);
+					filterButton.filterOptions = options;
+				}
+			}
+		});
+	};
+
+	off = () => {
+		this.#isFiltering = false;
+
+		this.#owner.body.querySelectorAll(".ng-table ng-filter-button").forEach((el) => {
+			el.remove(); // ✅ 요소 삭제
+		});
+	};
+
+	/**
+	clear = () => {
+		console.log(this.#owner.dataManager.rawRecords);
+		this.#owner.dataManager.rawRecords.map(item => { item.__ng.filtered = false; });
+
+
+		this.#records = this.#owner.dataManager.rawRecords.filter(item => { return !item.__ng.deleted && !item.__ng.filtered; } );
+		return this.#records;
+	}
+	
+	refresh = () => {
+		this.#records = this.#owner.dataManager.rawRecords.filter(item => { return !item.__ng.deleted && !item.__ng.filtered; } );
+		//this.#records.forEach((o,i) => { o.__ng.rowidx = i; });
+		//this.getValidData().forEach((o,i) => { o.__ng._[ninegrid.ROW.ORDER] = i + 1; });
+		this.#resetOrder();
+		return this.#records;
+	} */
+	
+	
+	/**
+	 * oFilter : {
+	 * 	col1 : [],
+	 *  col2 : []
+	 * }
+	 */
+	set = (oFilter) => {
+
+		this.on();
+
+		// ✅ JSON 변환 (배열 → 객체)
+		let jsonFilter = Array.isArray(oFilter)
+			? Object.fromEntries(Object.keys(oFilter[0]).map(key => [key, [...new Set(oFilter.map(item => item[key]))]]))
+			: oFilter;
+		
+		this.#owner.data.clearFilter();
+		
+		Object.entries(jsonFilter).forEach(([key, arr]) => {
+			const idx = this.#owner.fields.indexOf(key);
+
+			// ✅ 숫자 판별 및 변환
+			if (this.#owner.data.getValidData().some(o => typeof o.v[idx] === "number")) {
+				arr = arr.map(Number);
+			}
+
+			// ✅ 필터 적용
+			this.#owner.data.getValidData()
+				.filter(m => arr.nineBinarySearch(m.v[idx] || '') < 0)
+				.forEach(m => { m.__ng.filtered = true; });
+		});
+		
+		
+		this.#owner.data.refreshFilter();
+		
+		// ✅ 필터 버튼 초기화
+		this.#owner.shadowRoot.querySelectorAll("ng-filter-button").forEach(el => {
+			el.filterOptions.forEach(opt => { opt.data = []; });
+		});
+		
+		Object.entries(jsonFilter).forEach(([key, arr]) => {
+			this.#owner.shadowRoot.querySelectorAll("ng-filter-button").forEach(el => {
+
+				let options = el.filterOptions;
+
+				options.forEach(opt => {
+					if (opt.colnm === key) opt.data = arr;
+				});
+
+				el.filterOptions = options;
+			});
+		});
+		
+		
+		this.#owner.scrollTo_V1(0);
+		
+		this.#owner.paging.reset();
+	};
+	
+	#getLastRowIndex = (v = "thead") => 
+		[...this.#owner.body.querySelectorAll(`.ng-table ${v}`)]
+			.reduce((maxIndex, el) => Math.max(el.rows.length - 1, maxIndex), 0);
+
+}
+
+class ngFilterButton extends HTMLElement
+{
+	#owner;
+	#filterOptions;
+	
+	constructor () {
+		super();
+	}
+
+	connectedCallback() {
+		this.#owner = this.getRootNode().host;//this.closest("nine-grid");
+		
+		this.removeEventListener("click", this.#onClick);
+		this.addEventListener("click", this.#onClick);
+	};
+	
+	get filterOptions() {
+		return this.#filterOptions;
+	};
+	set filterOptions(v) {
+		this.#filterOptions = v;
+		this.classList.toggle('filtered', this.#filterOptions.some(item => item.data.length > 0));
+	}
+	
+	#onClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const panel = this.#owner.shadowRoot.querySelector("ng-filter-panel");
+        const col = this.closest("th,td")?.dataset.col; // ✅ `?.` 활용하여 안전한 접근
+
+        panel.col === col ? panel.close() : panel.open(this);
+    };
+}
+
+class ngFilterPanel extends HTMLElement
+{
+	#owner;
+	#button;
+	#timer;
+	
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+
+		this.#owner = this.getRootNode().host;
+
+		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.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
+	};
+
+	#onOk = (e) => {
+
+		const grd = this.shadowRoot.querySelector("nine-grid");
+
+		this.classList.add("loading");
+		
+		setTimeout(() => {
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
+			
+			
+			this.#button.filterOptions = filterOptions;
+
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
+			
+			this.#owner.filtering.set(oParam);
+
+			this.classList.remove("loading");
+			this.style.display = 'none';
+		});
+	};
+	
+	
+	
+	#onCancel = (e) => {
+		this.style.display = 'none';
+	};
+
+	#onSelectAll = (e) => {
+		const grd = this.shadowRoot.querySelector("nine-grid");
+		const idx = grd.fields.indexOf("CHK");
+		const isChecked = e.target.checked; // ✅ jQuery 없이 `checked` 값 가져오기
+
+		grd.data.getValidData().forEach(m => {
+			m.v[idx] = isChecked ? "Y" : "N"; // ✅ `Y` 또는 `N` 값 설정
+		});
+
+		grd.refreshData();
+	};
+
+	
+	
+	#onInput = (e) => {
+		const grd = this.shadowRoot.querySelector("nine-grid");
+		
+		grd.classList.add("loading");
+		
+		const data = grd.dataManager.rawRecords;
+    	data.forEach(m => { m.__ng.filtered = false; });
+		
+		const v = e.target.value.toLowerCase(); // ✅ jQuery 없이 값 가져오기
+		const [LVL_IDX, DATA_IDX] = ["LVL", "DATA"].map(field => grd.fields.indexOf(field));
+
+		data.forEach(m => {
+			m.__ng.filtered = m.v[LVL_IDX] === 2 && !String(m.v[DATA_IDX] || "").toLowerCase().includes(v);
+		});
+
+		grd.data.resetRecords();
+		
+		clearTimeout(this.#timer);
+		this.#timer = setTimeout(() => {
+			grd.dataManager.viewRecords.reset();
+			grd.dataManager.viewRecords.touch();
+		}, 200)
+	};
+	
+	close = () => {
+		this.col = null;
+		this.style.display = 'none';
+	};
+
+	open = (filterButton) => {
+
+		/** 위치 */
+		const cell = filterButton.closest("th,td");
+
+		const { left: btnLeft } = filterButton.getBoundingClientRect();
+		const { left: ownerLeft, width: ownerWidth, top: ownerTop } = this.#owner.getBoundingClientRect();
+		const { top: cellTop, height: cellHeight } = cell.getBoundingClientRect();
+		const { width: targetWidth } = this.getBoundingClientRect();
+
+		let l = Math.max(0, btnLeft - ownerLeft);
+		l = Math.min(l, ownerWidth - targetWidth - 5);
+
+		const t = cellTop + cellHeight - ownerTop;
+
+		Object.assign(this.style, { left: `${l}px`, top: `${t}px`, display: "flex" });
+		this.classList.add("loading");
+
+		this.shadowRoot.querySelector("input[type=text]").value = "";
+
+		setTimeout(() => {
+			const data = this.#owner.data.getValidDataNF();
+			const col = cell.dataset.col;
+			this.col = col;
+			this.#button = filterButton;
+			
+			const ds = filterButton.filterOptions.map((opt, i) => {
+				const groupLabel = `<span class="group">${cell.textContent}${filterButton.filterOptions.length > 1 ? ` #${i + 1} (${opt.colnm})` : ""}</span>`;
+
+				const cellEl = this.#owner.activeTmpl.querySelector(`[data-col="${col}"][data-bind="${opt.colnm}"]`);
+				const expr = cellEl?.getAttribute("data-expr");
+				const exprFunc = expr ? this.#owner.exprFunction(expr) : null;
+
+				const data2 = data.map(rowData => {
+					const idx = this.#owner.fields.indexOf(opt.colnm);
+					return expr ? { v: rowData.v[idx], v2: exprFunc(this.#owner.data.conv(rowData), rowData.__ng.rowidx, this.#owner.data) } : { v: rowData.v[idx], v2: rowData.v[idx] };
+				});
+
+				return [
+					{ LVL: 1, CHK: "N", DATA2: groupLabel },
+					...[...new Set(data2.map(JSON.stringify))]
+						.map(JSON.parse)
+						.sort((a, b) => (a.v2 || "") > (b.v2 || "") ? 1 : (a.v2 || "") < (b.v2 || "") ? -1 : 0)
+						.map(o => ({
+							LVL: 2,
+							DATA: o.v,
+							DATA2: o.v2 || ` <span class="empty">(empty)</span> ${o.v}`,
+							COLNM: opt.colnm,
+							CHK: opt.data.length === 0 || opt.data.nineBinarySearch(o.v || "") >= 0 ? "Y" : "N",
+						}))
+				];
+			}).flat();
+			
+			const grd = this.shadowRoot.querySelector("nine-grid");
+			grd.fields.add(["DATA","DATA2","COLNM"]);
+			grd.data.set(ds);
+			
+			// ✅ 데이터 필터링 및 체크 상태 결정
+			const checkbox = this.shadowRoot.querySelector("input[type=checkbox]");
+			checkbox.checked = grd.data.getValidData().every(item => !(item.LVL === 2 && item.CHK !== "Y"));
+
+			this.shadowRoot.querySelector("input").focus();
+			this.classList.remove("loading");
+		});
+	};
+}
+
+
+customElements.define("ng-filter-button", ngFilterButton);
+customElements.define("ng-filter-panel", ngFilterPanel);

package/src/utils/ninegrid.js

@@ -333,6 +333,18 @@ export class ninegrid {
 	static nvl = (v, v2) => {
 		return ninegrid.isNvl(v) ? v2 : v;
 	};
+
+	static isEllipsis = (element) => {
+		const clone = element.cloneNode(true);
+		clone.style.width = "auto";
+		clone.style.visibility = "hidden";
+		document.body.appendChild(clone);
+
+		const isTruncated = clone.scrollWidth > element.clientWidth;
+		document.body.removeChild(clone);
+
+		return isTruncated;
+	}
 	
 	static oppositeColor = (bgColor, lightColor, darkColor) => {
 		var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;