ninegrid2 6.452.0 → 6.454.0

package/dist/bundle.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-require('exceljs');
+var ExcelJS$1 = require('exceljs');
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -17500,16 +17500,300 @@ class ngExportExcel
 	export = () => {
 		
 		var _option = {
-			fileName	: (this.#owner.getAttribute("caption") || "export").replace(/[`~!@#$%^&*|\\\'\";:\/?]/gi, "")};
+			fileName	: (this.#owner.getAttribute("caption") || "export").replace(/[`~!@#$%^&*|\\\'\";:\/?]/gi, ""),
+			afterFunc	: () => {},
+		};
 		
-		ninegrid.nvl(_option.fileName, "temp");
+		var fileName = ninegrid.nvl(_option.fileName, "temp");
+
+		const _download = async (workbook, fileName) => {
+
+			console.log("export....");
+
+			workbook.xlsx.writeBuffer().then((data) => {
+				var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
+				const url = window.URL.createObjectURL(blob);
+
+				const a = document.createElement("a");
+				document.body.appendChild(a);
+				a.href = url;
+				a.download = fileName + ".xlsx";
+				a.click();
+				
+				setTimeout(() => {
+					window.URL.revokeObjectURL(url);
+					document.body.removeChild(a);
+					
+					console.log("completed");
+				}, 0);
+			});
+			
+		};
+		
+		const getImportFill = () => {
+			return {
+				type	: "pattern",
+				pattern	: "solid",
+				fgColor	: { argb: "FFCCCCCC" },
+			};
+		};
+		const getImportBorder = () => {
+			return {
+				top		: { style: "thin", color: { argb: "FF999999" } },
+				left	: { style: "thin", color: { argb: "FF999999" } },
+				bottom	: { style: "thin", color: { argb: "FF999999" } },
+				right	: { style: "thin", color: { argb: "FF999999" } },
+			};
+		};
+		
+		const setRowData = (rowIndex) => {
+
+			var startRow = $(".ng-container-body thead tr:not(.col-indicator-rowgroup)", this.#owner.body).length + 1 + this.#owner.template.length;
+			var rowData = this.#owner.data.get(rowIndex);
+			//var rowData = this.#owner.data.getRow(rowIndex);
+			
+			$(this.#owner.template).each((i, tr) => {
+				var row = parseInt(rowIndex * this.#owner.template.length) + startRow + i;
+
+				if (i == 0) {
+					var cell = sheet.getCell(row, 1);
+					cell.alignment = {
+						horizontal	: "center",
+						vertical	: "middle",
+						wrapText	: true,
+					};
+					cell.dataValidation = {
+						type: 'list',
+						allowBlank: true,
+						formulae: ['"NONE,INSERT,UPDATE,DELETE"'],
+					};
+					cell.fill = getImportFill();
+					cell.border = getImportBorder();
+					
+					if (this.#owner.template.length > 1) sheet.mergeCells(row, 1, row + this.#owner.template.length - 1, 1);
+				}
+				
+				$("th,td", tr).not(".dummy").not(".first").not(".last").each((j, td) => {
+
+					var index = parseInt(td.dataset.index);
+					var cell = sheet.getCell(row, index);
+					
+					var v = "";
+					
+					if (!ninegrid.isNull(td.dataset.expr)) {
+						try {
+							//v = this.#owner.exprFunction2(td.dataset.expr).call(this, rowData, rowIndex);
+							v = this.#owner.exprFunction(td.dataset.expr).call(this, rowData, rowIndex);
+						} catch(e) {
+							console.error(e, rowIndex, td.dataset.bind, td.dataset.expr);
+							//v = this.#owner.exprFunction2(td.dataset.expr).call(this, rowData, rowIndex);
+						}
+					}
+					else if (!ninegrid.isNull(td.dataset.bind)) {
+						//const COL_IDX = this.#owner.fields.indexOf(td.dataset.bind);
+						//v = rowData.v[COL_IDX] || "";
+						v = rowData[td.dataset.bind] || "";
+					}
+					
+					cell.value = v;
+
+					var combo = td.querySelector("ng-combo");
+					if (combo) {
+						var dataSource = combo.getAttribute("data-source");
+						if (dataSource) {
+							const value = combo.getAttribute("value");
+							
+							dataSource = this.#owner.exprFunction(dataSource).call(this, rowData, rowIndex);
+							
+							const formulae = [...new Set(dataSource.map(m => { return m[value].replaceAll(",", " "); }))];
+
+							if (formulae.length > 0) {
+								cell.dataValidation = {
+									type: 'list',
+									allowBlank: true,
+									formulae: ["\"" + formulae.join(",") + "\""],
+								};
+							}
+						}
+					}
+					
+					var radio = td.querySelector("ng-radio");
+					if (radio) {
+						var dataSource = radio.getAttribute("data-source");
+						if (dataSource) {
+							radio.getAttribute("value");
+							
+							dataSource = this.#owner.exprFunction(dataSource).call(this, rowData, rowIndex);
+
+							const formulae = [...new Set(dataSource.map(m => { return m["value"]; }))];
+
+							if (formulae.length > 0) {
+								cell.dataValidation = {
+									type: 'list',
+									allowBlank: true,
+									formulae: ["\"" + formulae.join(",") + "\""],
+								};
+							}
+						}
+					}
+
+
+					cell.alignment = {
+						horizontal	: td.getAttribute("text-align") || "left",
+						vertical	: "middle",
+						wrapText	: true,
+					};
+					
+					if (td.colSpan > 1 || td.rowSpan > 1) {
+						sheet.mergeCells(row, index, row + td.rowSpan - 1, index + td.colSpan - 1);
+					}
+				});
+			});
+		};
 		
 		$(this.#messageBox).html("generate...");
 		this.#progressBar.setAttribute("max", this.#owner.data.count());
 		this.#progressBar.setAttribute("value", 0);
 
 
-		throw "aa";
+		//this.#progressBar.
+		
+		const workbook = new ExcelJS$1.Workbook();
+		const sheet = workbook.addWorksheet('Sheet1');
+
+		var index = 0;
+		sheet.getColumn(++index).width = 10;
+		$(".col-indicator-rowgroup .col-indicator:not(.dummy)", this.#owner.body).not(".first").not(".last").each((i, td) => {
+
+			if (i == 0) return true;
+			
+			td.dataset.index = ++index;
+			$(`[data-col="${td.dataset.col}"]`, this.#owner.template).each((i,v) => {
+				v.dataset.index = index;
+			});
+			
+			this.#owner.body.querySelectorAll(`thead [data-col="${td.dataset.col}"]`).forEach(v => {
+				v.dataset.index = index;
+			});
+			
+			sheet.getColumn(index).width = $(td).width() / 7;
+		});
+		
+		
+		$(this.#owner.template).each((i, tr) => {
+			
+			var row = i + 1;
+
+			if (i == 0) {
+				var cell = sheet.getCell(row, 1);
+				cell.fill = getImportFill();
+				cell.border = getImportBorder();
+				if (this.#owner.template.length > 1) sheet.mergeCells(row, 1, row + this.#owner.template.length - 1, 1);
+			}
+			
+			$("th:not(.dummy),td:not(.dummy)", tr).not(".first").not(".last").each((j, td) => {
+				var index = parseInt(td.dataset.index);
+				var cell = sheet.getCell(row, index);
+				
+				if (!["rowState"].includes(td.dataset.bind)) cell.value = td.dataset.bind;
+				
+				if (td.colSpan > 1 || td.rowSpan > 1) {
+					sheet.mergeCells(row, index, row + td.rowSpan - 1, index + td.colSpan - 1);
+				}
+				
+				cell.font		= {
+					size	: 6,
+					//color	: {argb: color.replace("#", "")}
+				};
+				cell.fill = getImportFill();
+				cell.border = getImportBorder();
+			});
+		});
+
+
+		$("thead tr:not(.col-indicator-rowgroup)", this.#owner.body).each((i, tr) => {
+			
+			var row = tr.sectionRowIndex + this.#owner.template.length;
+
+			if (i == 0) {
+				var cell = sheet.getCell(row, 1);
+				cell.value = "CRUD";
+				cell.alignment = {
+					horizontal	: "center",
+					vertical	: "middle",
+					wrapText	: true,
+				};
+				cell.fill = getImportFill();
+				cell.border = getImportBorder();
+				
+				if (this.#owner.template.length > 1) sheet.mergeCells(row, 1, row + this.#owner.template.length - 1, 1);
+			}
+			
+			$("th:not(.dummy),td:not(.dummy)", tr).not(".first").not(".last").each((j, td) => {
+				var index = parseInt(td.dataset.index);
+				var cell = sheet.getCell(row, index);
+				cell.value = $(td).text();
+				
+				if (td.colSpan > 1 || td.rowSpan > 1) {
+					sheet.mergeCells(row, index, row + td.rowSpan - 1, index + td.colSpan - 1);
+				}
+				
+				//cell.font		= getCellFontInfo(oCell, -1);
+				cell.alignment	= {
+					horizontal	: "center",
+					vertical	: "middle",
+					wrapText	: true,
+				};
+
+				cell.fill = {
+					type	: "pattern",
+					pattern	: "solid",
+					fgColor	: { argb: "FFEEEEEE" },
+				};
+				
+				cell.border		= {
+					top		: { style: "thin", color: { argb: "FFCCCCCC" } },
+					left	: { style: "thin", color: { argb: "FFCCCCCC" } },
+					bottom	: { style: "thin", color: { argb: "FFCCCCCC" } },
+					right	: { style: "thin", color: { argb: "FFCCCCCC" } },
+				};
+			});
+		});
+
+		
+		/**
+		 * Data Export (Table Body)
+		 */
+		var data = this.#owner.data.getValidData();
+		//setTimeout(() => {
+			var rowIndex = 0;
+			for (var i = 0; i < data.length; i++) {
+				setTimeout(() => {
+					setRowData(rowIndex++);
+				//});
+	
+				//setTimeout(() => {
+					this.#progressBar.setAttribute("value", rowIndex+1);
+					$(this.#messageBox).html(rowIndex+1 >= data.length ? "downloading..." : "processing... " + rowIndex.toLocaleString() + " / " + data.length.toLocaleString());
+				});
+			}
+		//});
+		
+		var interval = setInterval(() => {
+			if (parseInt(this.#progressBar.getAttribute("value")) >= parseInt(this.#progressBar.getAttribute("max"))) {
+				clearInterval(interval);
+
+				setTimeout(() => {
+					_download(workbook, fileName).then(r => {});
+
+					if (_option.afterFunc) _option.afterFunc.call(this.#owner);
+				});
+				
+				setTimeout(() => {
+					this.#dialog.close();
+				});
+			}
+		}, 500);
 	};
 	
 	exportPdf = () => {
@@ -17592,9 +17876,12 @@ class ngExport extends HTMLElement
 	};
 	
 	exportExcel = () => {
-		console.log("export Excel...");
-		this.#dialog.showModal();
-		$(".title", this.#dialog).html("Export Excel");
+		//console.log("export Excel...");
+		if (this.#owner.data.count() > 100) {
+			this.#dialog.showModal();
+			$(".title", this.#dialog).html("Export Excel");
+		}
+		
 		this.#excel.export();
 	};
 }

package/dist/bundle.esm.js

@@ -1,4 +1,4 @@
-import 'exceljs';
+import ExcelJS$1 from 'exceljs';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -17498,16 +17498,300 @@ class ngExportExcel
 	export = () => {
 		
 		var _option = {
-			fileName	: (this.#owner.getAttribute("caption") || "export").replace(/[`~!@#$%^&*|\\\'\";:\/?]/gi, "")};
+			fileName	: (this.#owner.getAttribute("caption") || "export").replace(/[`~!@#$%^&*|\\\'\";:\/?]/gi, ""),
+			afterFunc	: () => {},
+		};
 		
-		ninegrid.nvl(_option.fileName, "temp");
+		var fileName = ninegrid.nvl(_option.fileName, "temp");
+
+		const _download = async (workbook, fileName) => {
+
+			console.log("export....");
+
+			workbook.xlsx.writeBuffer().then((data) => {
+				var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
+				const url = window.URL.createObjectURL(blob);
+
+				const a = document.createElement("a");
+				document.body.appendChild(a);
+				a.href = url;
+				a.download = fileName + ".xlsx";
+				a.click();
+				
+				setTimeout(() => {
+					window.URL.revokeObjectURL(url);
+					document.body.removeChild(a);
+					
+					console.log("completed");
+				}, 0);
+			});
+			
+		};
+		
+		const getImportFill = () => {
+			return {
+				type	: "pattern",
+				pattern	: "solid",
+				fgColor	: { argb: "FFCCCCCC" },
+			};
+		};
+		const getImportBorder = () => {
+			return {
+				top		: { style: "thin", color: { argb: "FF999999" } },
+				left	: { style: "thin", color: { argb: "FF999999" } },
+				bottom	: { style: "thin", color: { argb: "FF999999" } },
+				right	: { style: "thin", color: { argb: "FF999999" } },
+			};
+		};
+		
+		const setRowData = (rowIndex) => {
+
+			var startRow = $(".ng-container-body thead tr:not(.col-indicator-rowgroup)", this.#owner.body).length + 1 + this.#owner.template.length;
+			var rowData = this.#owner.data.get(rowIndex);
+			//var rowData = this.#owner.data.getRow(rowIndex);
+			
+			$(this.#owner.template).each((i, tr) => {
+				var row = parseInt(rowIndex * this.#owner.template.length) + startRow + i;
+
+				if (i == 0) {
+					var cell = sheet.getCell(row, 1);
+					cell.alignment = {
+						horizontal	: "center",
+						vertical	: "middle",
+						wrapText	: true,
+					};
+					cell.dataValidation = {
+						type: 'list',
+						allowBlank: true,
+						formulae: ['"NONE,INSERT,UPDATE,DELETE"'],
+					};
+					cell.fill = getImportFill();
+					cell.border = getImportBorder();
+					
+					if (this.#owner.template.length > 1) sheet.mergeCells(row, 1, row + this.#owner.template.length - 1, 1);
+				}
+				
+				$("th,td", tr).not(".dummy").not(".first").not(".last").each((j, td) => {
+
+					var index = parseInt(td.dataset.index);
+					var cell = sheet.getCell(row, index);
+					
+					var v = "";
+					
+					if (!ninegrid.isNull(td.dataset.expr)) {
+						try {
+							//v = this.#owner.exprFunction2(td.dataset.expr).call(this, rowData, rowIndex);
+							v = this.#owner.exprFunction(td.dataset.expr).call(this, rowData, rowIndex);
+						} catch(e) {
+							console.error(e, rowIndex, td.dataset.bind, td.dataset.expr);
+							//v = this.#owner.exprFunction2(td.dataset.expr).call(this, rowData, rowIndex);
+						}
+					}
+					else if (!ninegrid.isNull(td.dataset.bind)) {
+						//const COL_IDX = this.#owner.fields.indexOf(td.dataset.bind);
+						//v = rowData.v[COL_IDX] || "";
+						v = rowData[td.dataset.bind] || "";
+					}
+					
+					cell.value = v;
+
+					var combo = td.querySelector("ng-combo");
+					if (combo) {
+						var dataSource = combo.getAttribute("data-source");
+						if (dataSource) {
+							const value = combo.getAttribute("value");
+							
+							dataSource = this.#owner.exprFunction(dataSource).call(this, rowData, rowIndex);
+							
+							const formulae = [...new Set(dataSource.map(m => { return m[value].replaceAll(",", " "); }))];
+
+							if (formulae.length > 0) {
+								cell.dataValidation = {
+									type: 'list',
+									allowBlank: true,
+									formulae: ["\"" + formulae.join(",") + "\""],
+								};
+							}
+						}
+					}
+					
+					var radio = td.querySelector("ng-radio");
+					if (radio) {
+						var dataSource = radio.getAttribute("data-source");
+						if (dataSource) {
+							radio.getAttribute("value");
+							
+							dataSource = this.#owner.exprFunction(dataSource).call(this, rowData, rowIndex);
+
+							const formulae = [...new Set(dataSource.map(m => { return m["value"]; }))];
+
+							if (formulae.length > 0) {
+								cell.dataValidation = {
+									type: 'list',
+									allowBlank: true,
+									formulae: ["\"" + formulae.join(",") + "\""],
+								};
+							}
+						}
+					}
+
+
+					cell.alignment = {
+						horizontal	: td.getAttribute("text-align") || "left",
+						vertical	: "middle",
+						wrapText	: true,
+					};
+					
+					if (td.colSpan > 1 || td.rowSpan > 1) {
+						sheet.mergeCells(row, index, row + td.rowSpan - 1, index + td.colSpan - 1);
+					}
+				});
+			});
+		};
 		
 		$(this.#messageBox).html("generate...");
 		this.#progressBar.setAttribute("max", this.#owner.data.count());
 		this.#progressBar.setAttribute("value", 0);
 
 
-		throw "aa";
+		//this.#progressBar.
+		
+		const workbook = new ExcelJS$1.Workbook();
+		const sheet = workbook.addWorksheet('Sheet1');
+
+		var index = 0;
+		sheet.getColumn(++index).width = 10;
+		$(".col-indicator-rowgroup .col-indicator:not(.dummy)", this.#owner.body).not(".first").not(".last").each((i, td) => {
+
+			if (i == 0) return true;
+			
+			td.dataset.index = ++index;
+			$(`[data-col="${td.dataset.col}"]`, this.#owner.template).each((i,v) => {
+				v.dataset.index = index;
+			});
+			
+			this.#owner.body.querySelectorAll(`thead [data-col="${td.dataset.col}"]`).forEach(v => {
+				v.dataset.index = index;
+			});
+			
+			sheet.getColumn(index).width = $(td).width() / 7;
+		});
+		
+		
+		$(this.#owner.template).each((i, tr) => {
+			
+			var row = i + 1;
+
+			if (i == 0) {
+				var cell = sheet.getCell(row, 1);
+				cell.fill = getImportFill();
+				cell.border = getImportBorder();
+				if (this.#owner.template.length > 1) sheet.mergeCells(row, 1, row + this.#owner.template.length - 1, 1);
+			}
+			
+			$("th:not(.dummy),td:not(.dummy)", tr).not(".first").not(".last").each((j, td) => {
+				var index = parseInt(td.dataset.index);
+				var cell = sheet.getCell(row, index);
+				
+				if (!["rowState"].includes(td.dataset.bind)) cell.value = td.dataset.bind;
+				
+				if (td.colSpan > 1 || td.rowSpan > 1) {
+					sheet.mergeCells(row, index, row + td.rowSpan - 1, index + td.colSpan - 1);
+				}
+				
+				cell.font		= {
+					size	: 6,
+					//color	: {argb: color.replace("#", "")}
+				};
+				cell.fill = getImportFill();
+				cell.border = getImportBorder();
+			});
+		});
+
+
+		$("thead tr:not(.col-indicator-rowgroup)", this.#owner.body).each((i, tr) => {
+			
+			var row = tr.sectionRowIndex + this.#owner.template.length;
+
+			if (i == 0) {
+				var cell = sheet.getCell(row, 1);
+				cell.value = "CRUD";
+				cell.alignment = {
+					horizontal	: "center",
+					vertical	: "middle",
+					wrapText	: true,
+				};
+				cell.fill = getImportFill();
+				cell.border = getImportBorder();
+				
+				if (this.#owner.template.length > 1) sheet.mergeCells(row, 1, row + this.#owner.template.length - 1, 1);
+			}
+			
+			$("th:not(.dummy),td:not(.dummy)", tr).not(".first").not(".last").each((j, td) => {
+				var index = parseInt(td.dataset.index);
+				var cell = sheet.getCell(row, index);
+				cell.value = $(td).text();
+				
+				if (td.colSpan > 1 || td.rowSpan > 1) {
+					sheet.mergeCells(row, index, row + td.rowSpan - 1, index + td.colSpan - 1);
+				}
+				
+				//cell.font		= getCellFontInfo(oCell, -1);
+				cell.alignment	= {
+					horizontal	: "center",
+					vertical	: "middle",
+					wrapText	: true,
+				};
+
+				cell.fill = {
+					type	: "pattern",
+					pattern	: "solid",
+					fgColor	: { argb: "FFEEEEEE" },
+				};
+				
+				cell.border		= {
+					top		: { style: "thin", color: { argb: "FFCCCCCC" } },
+					left	: { style: "thin", color: { argb: "FFCCCCCC" } },
+					bottom	: { style: "thin", color: { argb: "FFCCCCCC" } },
+					right	: { style: "thin", color: { argb: "FFCCCCCC" } },
+				};
+			});
+		});
+
+		
+		/**
+		 * Data Export (Table Body)
+		 */
+		var data = this.#owner.data.getValidData();
+		//setTimeout(() => {
+			var rowIndex = 0;
+			for (var i = 0; i < data.length; i++) {
+				setTimeout(() => {
+					setRowData(rowIndex++);
+				//});
+	
+				//setTimeout(() => {
+					this.#progressBar.setAttribute("value", rowIndex+1);
+					$(this.#messageBox).html(rowIndex+1 >= data.length ? "downloading..." : "processing... " + rowIndex.toLocaleString() + " / " + data.length.toLocaleString());
+				});
+			}
+		//});
+		
+		var interval = setInterval(() => {
+			if (parseInt(this.#progressBar.getAttribute("value")) >= parseInt(this.#progressBar.getAttribute("max"))) {
+				clearInterval(interval);
+
+				setTimeout(() => {
+					_download(workbook, fileName).then(r => {});
+
+					if (_option.afterFunc) _option.afterFunc.call(this.#owner);
+				});
+				
+				setTimeout(() => {
+					this.#dialog.close();
+				});
+			}
+		}, 500);
 	};
 	
 	exportPdf = () => {
@@ -17590,9 +17874,12 @@ class ngExport extends HTMLElement
 	};
 	
 	exportExcel = () => {
-		console.log("export Excel...");
-		this.#dialog.showModal();
-		$(".title", this.#dialog).html("Export Excel");
+		//console.log("export Excel...");
+		if (this.#owner.data.count() > 100) {
+			this.#dialog.showModal();
+			$(".title", this.#dialog).html("Export Excel");
+		}
+		
 		this.#excel.export();
 	};
 }

package/dist/etc/ngExport.js

@@ -202,7 +202,6 @@ export class ngExportExcel
 		this.#progressBar.setAttribute("value", 0);
 
 
-		throw "aa";
 		//this.#progressBar.
 		
 		const workbook = new ExcelJS.Workbook();
@@ -423,9 +422,12 @@ export class ngExport extends HTMLElement
 	};
 	
 	exportExcel = () => {
-		console.log("export Excel...");
-		this.#dialog.showModal();
-		$(".title", this.#dialog).html("Export Excel");
+		//console.log("export Excel...");
+		if (this.#owner.data.count() > 100) {
+			this.#dialog.showModal();
+			$(".title", this.#dialog).html("Export Excel");
+		}
+		
 		this.#excel.export();
 	};
 }

package/package.json

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

package/src/etc/ngExport.js

@@ -202,7 +202,6 @@ export class ngExportExcel
 		this.#progressBar.setAttribute("value", 0);
 
 
-		throw "aa";
 		//this.#progressBar.
 		
 		const workbook = new ExcelJS.Workbook();
@@ -423,9 +422,12 @@ export class ngExport extends HTMLElement
 	};
 	
 	exportExcel = () => {
-		console.log("export Excel...");
-		this.#dialog.showModal();
-		$(".title", this.#dialog).html("Export Excel");
+		//console.log("export Excel...");
+		if (this.#owner.data.count() > 100) {
+			this.#dialog.showModal();
+			$(".title", this.#dialog).html("Export Excel");
+		}
+		
 		this.#excel.export();
 	};
 }