From b3ba28dba365f4751f71c007a908ec9dd1e81520 Mon Sep 17 00:00:00 2001
From: mjkhan21 <mjkhan21@xit.co.kr>
Date: Tue, 27 Jun 2023 17:32:12 +0900
Subject: [PATCH] =?UTF-8?q?DataItem.inString(...),=20Dataset.inStrings(...?=
 =?UTF-8?q?)=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WEB-INF/jsp/base/user/user-main.jsp       | 39 ++++++++++++-------
 src/main/webapp/resources/js/base/dataset.js  | 11 ++++--
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/base/user/user-main.jsp b/src/main/webapp/WEB-INF/jsp/base/user/user-main.jsp
index 69a1c62..47a484f 100644
--- a/src/main/webapp/WEB-INF/jsp/base/user/user-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/base/user/user-main.jsp
@@ -43,12 +43,12 @@
 			<div class="table-responsive">
 				<table class="datatables-ajax table table-bordered dataTable no-footer" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
 					<thead>
-						<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 158.828px; text-align:center;"><input onchange="${infoPrefix}Control.select(this.checked);" type="checkbox" class="form-check-input"></th>
-							<th class="sorting sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Full name: activate to sort column descending" style="width: 223.719px;">계정</th>
-							<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" style="width: 146.156px;">이름</th>
-							<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 195.688px;">이메일</th>
-							<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 160.141px;">전화번호(무선)</th>
-							<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 230.469px;">등록일자</th>
+						<tr><th tabindex="0" style="width: 158.828px; text-align:center;"><input onchange="${infoPrefix}Control.select(this.checked);" type="checkbox" class="form-check-input"></th>
+							<th class="sorting sorting_asc" aria-sort="ascending" style="width: 223.719px;">계정</th>
+							<th class="sorting" style="width: 146.156px;">이름</th>
+							<th class="sorting" style="width: 195.688px;">이메일</th>
+							<th class="sorting" style="width: 160.141px;">전화번호(무선)</th>
+							<th class="sorting" style="width: 230.469px;">등록일자</th>
 						</tr>
                     </thead>
                     <tbody id="${infoPrefix}List">
@@ -56,11 +56,11 @@
                    	<template id="${infoPrefix}Row">
                    	<tr data-key="{USER_ID}">
                        <td style="text-align:center;"><input value="{USER_ID}" onchange="${infoPrefix}Control.select('{USER_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
-                       <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{USER_ACNT}</td>
-                       <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{USER_NM}</td>
-                       <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{EML_ADRS}</td>
-                       <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{MBL_TELNO}</td>
-                       <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{REG_DT}</td>
+                       <td {onclick} {ondblclick}>{USER_ACNT}</td>
+                       <td {onclick} {ondblclick}>{USER_NM}</td>
+                       <td {onclick} {ondblclick}>{EML_ADRS}</td>
+                       <td {onclick} {ondblclick}>{MBL_TELNO}</td>
+                       <td {onclick} {ondblclick}>{REG_DT}</td>
                     </tr>
                     </template>
                    	<template id="${infoPrefix}NotFound">
@@ -125,8 +125,21 @@ function render${infoPrefix}List() {
 	let empty = ${infoPrefix}List.empty;
 	
 	let trs = empty ?
-		[document.getElementById("${infoPrefix}NotFound").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
-		${infoPrefix}List.inStrings(document.getElementById("${infoPrefix}Row").innerHTML); <%-- from template#${infoPrefix}Row --%>
+			[document.getElementById("${infoPrefix}NotFound").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
+			${infoPrefix}List.inStrings(
+				document.getElementById("${infoPrefix}Row").innerHTML, <%-- from template#${infoPrefix}Row --%>
+				(str, dataItem) => str
+					.replace(/{onclick}=""/gi, 'onclick="userControl.setCurrent(\'' + dataItem.getValue("USER_ID") + '\');"')
+					.replace(/{ondblclick}=""/gi, 'ondblclick="userControl.getInfo(\'' + dataItem.getValue("USER_ID") + '\')"')
+	<%-- OR
+				(str, dataItem) => {
+					let userID = dataItem.getValue("USER_ID");
+					return str
+					.replace(/{onclick}=""/gi, 'onclick="userControl.setCurrent(\'' + userID + '\');"')
+					.replace(/{ondblclick}=""/gi, 'ondblclick="userControl.getInfo(\'' + userID + '\')"')
+				}
+	--%>
+			);
 	$("#${infoPrefix}List").html(trs.join());
 	$("th input[type='checkbox']").prop("checked", false);
 }
diff --git a/src/main/webapp/resources/js/base/dataset.js b/src/main/webapp/resources/js/base/dataset.js
index 8655b00..9ec9861 100644
--- a/src/main/webapp/resources/js/base/dataset.js
+++ b/src/main/webapp/resources/js/base/dataset.js
@@ -273,10 +273,14 @@ class DataItem {
 	/**Returns a string converted from the template using the property values of the user data.
 	 * In the template, placeholder for the properties of the user data is specified like {property name}.
 	 * @param {string} template template string
+	 * @param {function} formatter function to format a row string with custom property placeholders 
 	 * @returns {string} string converted from the template using the property values of the user data
 	 */
-	inString(template) {
+	inString(template, formatter) {
 		let str = template;
+		if (formatter) {
+			str = formatter(str, this);
+		}
 		for (let p in this.data) {
 			let regexp = this._formats.regexp(p);
 			str = str.replace(regexp, this.getValue(p));
@@ -1087,11 +1091,12 @@ class Dataset {
 	/**Returns an array of strings converted from the template using the property values of the Dataset's user data.
 	 * In the template, placeholder for the properties of the user data is specified like {property name}.
 	 * @param {string} template template string
+	 * @param {function} formatter function to format a row string with custom property placeholders 
 	 * @returns {array} array of strings converted from the template using the property values of the user data
 	 */
-	inStrings(template) {
+	inStrings(template, formatter) {
 		return this.getDataset("item")
-			.map(item => item.inString(template));
+			.map(item => item.inString(template, formatter));
 	}
 
 	/**Returns a property value of user data.