From 4e96b0dbc6fb546073b383f5414a6758ec4f2903 Mon Sep 17 00:00:00 2001
From: leebeomjun <leebj91@xit.co.kr>
Date: Thu, 30 Nov 2023 18:13:58 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B6=9C=EB=A0=A5=EC=9A=94=EC=86=8C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80,=EC=82=AD=EC=A0=9C=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WEB-INF/jsp/fims/sprt/sprt01200-main.jsp  | 217 ++++++++++++++++--
 1 file changed, 199 insertions(+), 18 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt01200-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt01200-main.jsp
index f60a07d8..0aee924b 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt01200-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt01200-main.jsp
@@ -42,8 +42,11 @@
 			<div class="col-md-12">
 				<div class="float-start">
 					<strong>단일 출력 항목</strong>
-					<button type="button" id="btnUniqueAdd--${pageName}" class="btn btn-info">+ 추가</button>
-					<button type="button" id="btnUniqueDel--${pageName}" class="btn btn-info">- 삭제</button>
+					<button type="button" id="btnUniqueAdd--${pageName}" 
+						class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">추가</button>
+					<ul id="dropdownUniqueAdd--${pageName}" class="dropdown-menu" style="overflow-y: scroll;max-height: 250px">
+					</ul>
+					<button type="button" id="btnUniqueDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
 				</div>
 			</div>
 		</div>
@@ -68,7 +71,7 @@
 				<div class="float-start">
 					<strong>복수 출력 가능 항목</strong>
 					<button type="button" id="btnMultipleAdd--${pageName}" class="btn btn-info">+ 추가</button>
-					<button type="button" id="btnMultipleDel--${pageName}" class="btn btn-info">- 삭제</button>
+					<button type="button" id="btnMultipleDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
 				</div>
 			</div>
 		</div>
@@ -197,6 +200,10 @@
 	</tr>
 </template>
 
+<template id="dropdownTemplate--${pageNmae}">
+	<li><a class="dropdown-item" onclick="{onclick}">{DSCRP}</a></li>
+</template>
+
 <script>
 var FIM054 = new CommonCodes(${FIM054});
 var FIM047 = new CommonCodes(${FIM047});
@@ -257,7 +264,7 @@ $(document).ready(function(){
 		
 		for(var i=0; i < prototypeList.length; i++){
 			var p = prototypeList[i];
-			components += "<option value='"+p.otptNm+"' data-component-type='"+p.componentType+"'>"+p.dscrp+"</option>";
+			components += "<option value='"+p.otptNm+"' >"+p.dscrp+"</option>";
 		}
 		
 		for(var i=0; i < dataList.length; i++){
@@ -271,21 +278,26 @@ $(document).ready(function(){
 			var lastTr = $("#"+tbodyId).find("tr").last()[0];
 			$($P.fnGetElement(lastTr,"otptNm")).val(data.OTPT_NM);
 			$($P.fnGetElement(lastTr,"componentType")).val(data.COMPONENT_TYPE);
-			$($P.fnGetElement(lastTr,"leftPstn")).val(data.LEFT_PSTN);
-			$($P.fnGetElement(lastTr,"topPstn")).val(data.TOP_PSTN);
-			$($P.fnGetElement(lastTr,"widthSz")).val(data.WIDTH_SZ);
-			$($P.fnGetElement(lastTr,"heightSz")).val(data.HEIGHT_SZ);
+			
+			$($P.fnGetElement(lastTr,"leftPstn"))
+				.val(!isEmpty(data.LEFT_PSTN) ? data.LEFT_PSTN : $P.fnGetProto(prototypeList, data.OTPT_NM, "leftPstn"));
+			$($P.fnGetElement(lastTr,"topPstn"))
+				.val(!isEmpty(data.TOP_PSTN) ? data.TOP_PSTN : $P.fnGetProto(prototypeList, data.OTPT_NM, "topPstn"));
+			$($P.fnGetElement(lastTr,"widthSz"))
+				.val(!isEmpty(data.WIDTH_SZ) ? data.WIDTH_SZ : $P.fnGetProto(prototypeList, data.OTPT_NM, "widthSz"));
+			$($P.fnGetElement(lastTr,"heightSz"))
+				.val(!isEmpty(data.HEIGHT_SZ) ? data.HEIGHT_SZ : $P.fnGetProto(prototypeList, data.OTPT_NM, "heightSz"));
 			
 			$($P.fnGetElement(lastTr,"textSort"))
-				.val(!isEmpty(data.TEXT_SORT) ? data.TEXT_SORT : $P.fnGetProto(prototypeList, data, "textSort"));
+				.val(!isEmpty(data.TEXT_SORT) ? data.TEXT_SORT : $P.fnGetProto(prototypeList, data.OTPT_NM, "textSort"));
 			$($P.fnGetElement(lastTr,"fontNm"))
-				.val(!isEmpty(data.FONT_NM) ? data.FONT_NM : $P.fnGetProto(prototypeList, data, "fontNm"));
+				.val(!isEmpty(data.FONT_NM) ? data.FONT_NM : $P.fnGetProto(prototypeList, data.OTPT_NM, "fontNm"));
 			$($P.fnGetElement(lastTr,"fontSz"))
-				.val(!isEmpty(data.FONT_SZ) ? data.FONT_SZ : $P.fnGetProto(prototypeList, data, "fontSz"));
+				.val(!isEmpty(data.FONT_SZ) ? data.FONT_SZ : $P.fnGetProto(prototypeList, data.OTPT_NM, "fontSz"));
 			$($P.fnGetElement(lastTr,"fontColor"))
-				.val(!isEmpty(data.FONT_COLOR) ? data.FONT_COLOR : $P.fnGetProto(prototypeList, data, "fontColor"));
+				.val(!isEmpty(data.FONT_COLOR) ? data.FONT_COLOR : $P.fnGetProto(prototypeList, data.OTPT_NM, "fontColor"));
 			$($P.fnGetElement(lastTr,"fontStyle"))
-				.val(!isEmpty(data.FONT_STYLE) ? data.FONT_STYLE : $P.fnGetProto(prototypeList, data, "fontStyle"));
+				.val(!isEmpty(data.FONT_STYLE) ? data.FONT_STYLE : $P.fnGetProto(prototypeList, data.OTPT_NM, "fontStyle"));
 		}
 		
 		$("#"+tbodyId).find("tr").each(function(){
@@ -307,17 +319,179 @@ $(document).ready(function(){
 		return $(tableRow).find("td[data-col='"+colName+"']").children("input, select").first()[0];
 	}
 	
-	$P.fnGetProto = (prototypeList, sggData, colName) => {
-		return prototypeList.find((item) => item.otptNm == sggData.OTPT_NM)[colName];
+	$P.fnGetProto = (prototypeList, otptNm, stngItemAttrNm) => {
+		if(stngItemAttrNm == "leftPstn" || stngItemAttrNm == "topPstn"){
+			var paperSeCd = $("#frmEdit--${pageName}").find("[name='otptPaperSeCd']").val();
+			var paperNm = "";
+			if(paperSeCd == "01"){
+				paperNm = "a4";
+			} else if(paperSeCd == "02"){
+				paperNm = "letter";
+			}
+			var paperObj = prototypeList.find((item) => item.otptNm == otptNm)[paperNm];
+			if(paperObj == null){
+				return 0;
+			}
+			if(stngItemAttrNm == "leftPstn"){
+				return paperObj["left"];
+			}
+			if(stngItemAttrNm == "topPstn"){
+				return paperObj["top"];
+			}
+		} else {
+			return prototypeList.find((item) => item.otptNm == otptNm)[stngItemAttrNm];
+		}
+	}
+	
+	$P.choiceOtptNm = () => {
+		$("#dropdownUniqueAdd--${pageName}").html("");
+		
+		var prototypeList = $P.otptStngMap.unique.prototypeList;
+		var existArr = [];
+		
+		$("#tbodyUnique--sprt01200-main tr").each(function(){
+			var el = $P.fnGetElement(this,"otptNm");
+			existArr.push($(el).val());
+		});
+		
+		var selectableArr = prototypeList.filter(item => existArr.indexOf(item.otptNm) == -1);
+		
+		var template = document.getElementById("dropdownTemplate--${pageNmae}");
+		
+		if(selectableArr.length < 1){
+			var li = template.innerHTML;
+			li = li.replace(/{onclick}/gi, "");
+			li = li.replace(/{DSCRP}/gi, "추가할 수 있는 항목이 없습니다.");
+			$("#dropdownUniqueAdd--${pageName}").append(li);
+		} else {
+			for(var i=0; i < selectableArr.length; i++){
+				var li = template.innerHTML;
+				li = li.replace(/{onclick}/gi, "pageObject['${pageName}'].addRow('" + selectableArr[i].otptNm + "')");
+				li = li.replace(/{DSCRP}/gi, selectableArr[i].dscrp);
+				$("#dropdownUniqueAdd--${pageName}").append(li);
+			}
+		}
+	}
+	
+	$P.addRow = (otptNm) => {
+		var paperSeCd = $("#frmEdit--${pageName}").find("[name='otptPaperSeCd']").val();
+		var prototypeList;
+		var tbodyId;
+		
+		if(otptNm == null || otptNm == ""){
+			prototypeList = $P.otptStngMap.multiple.prototypeList;
+			tbodyId = "tbodyMultiple--${pageName}";
+		} else {
+			prototypeList = $P.otptStngMap.unique.prototypeList;
+			tbodyId = "tbodyUnique--${pageName}";
+		}
+
+		var components = "<option value='' data-component-type=''>선택</option>";
+		for(var i=0; i < prototypeList.length; i++){
+			var p = prototypeList[i];
+			components += "<option value='"+p.otptNm+"' data-component-type='"+p.componentType+"'>"+p.dscrp+"</option>";
+		}
+		var template = document.getElementById("found--${pageName}").innerHTML;
+		template = template.replace(/{OTPT_FORM_ID}/gi, "");
+		template = template.replace(/{COMPONENTS}/gi, components);
+		$("#"+tbodyId).append(template);
+		
+		var lastTr = $("#"+tbodyId).find("tr").last()[0];
+
+		if(otptNm != null && otptNm != ""){	
+			
+			$($P.fnGetElement(lastTr,"otptNm")).val(otptNm);
+			
+			$($P.fnGetElement(lastTr,"componentType"))
+				.val($P.fnGetProto(prototypeList, otptNm, "componentType"));
+			
+			$($P.fnGetElement(lastTr,"leftPstn"))
+				.val($P.fnGetProto(prototypeList, otptNm, "leftPstn"));
+			$($P.fnGetElement(lastTr,"topPstn"))
+				.val($P.fnGetProto(prototypeList, otptNm, "topPstn"));
+			$($P.fnGetElement(lastTr,"widthSz"))
+				.val($P.fnGetProto(prototypeList, otptNm, "widthSz"));
+			$($P.fnGetElement(lastTr,"heightSz"))
+				.val($P.fnGetProto(prototypeList, otptNm, "heightSz"));
+			
+			$($P.fnGetElement(lastTr,"textSort"))
+				.val($P.fnGetProto(prototypeList, otptNm, "textSort"));
+			$($P.fnGetElement(lastTr,"fontNm"))
+				.val($P.fnGetProto(prototypeList, otptNm, "fontNm"));
+			$($P.fnGetElement(lastTr,"fontSz"))
+				.val($P.fnGetProto(prototypeList, otptNm, "fontSz"));
+			$($P.fnGetElement(lastTr,"fontColor"))
+				.val($P.fnGetProto(prototypeList, otptNm, "fontColor"));
+			$($P.fnGetElement(lastTr,"fontStyle"))
+				.val($P.fnGetProto(prototypeList, otptNm, "fontStyle"));
+			
+		}
+		
+		if(tbodyId == "tbodyUnique--${pageName}"){
+			var el = $P.fnGetElement(lastTr,"otptNm");
+			$(el).attr("disabled","disabled");
+			$(el).addClass("no-bgi");
+		}
+		
+		//셀렉트 스피너
+		var sel = $P.fnGetElement(lastTr,"textSort");
+		var toPrev = $(sel).siblings()[0];
+		var toNext = $(sel).siblings()[1];
+		fnMakeSpinnerSelect(sel, toPrev, toNext);
+	}
+	
+	$P.delRow = (tbodyId) => {
+		
+		if($("#"+tbodyId).find("tr").length <= 0){
+			alert('삭제할 항목이 없습니다.');
+			return;
+		}
+		
+		if($("#"+tbodyId).find("input[type='checkbox']:checked").length <= 0){
+			alert('체크된 항목이 없습니다.');
+			return;
+		}
+		
+		$("#"+tbodyId).find("tr").filter(function(index, selector){
+			if($(selector).find(":checkbox").is(":checked")){
+				$(selector).remove();
+			}
+		});
 	}
 	
+	
 	$P.fnChangeComponent = (selectElement) => {
+		if($("#tbodyMultiple--${pageName}").find(selectElement).length <= 0){
+			return;
+		}
+		
+		var otptNm = $(selectElement).val();
 		var tr = $(selectElement).parent().parent()[0];
-		var componentTypeEl = $P.fnGetElement(tr,"componentType");
+		var prototypeList = $P.otptStngMap.multiple.prototypeList;
+		
+		$($P.fnGetElement(tr,"componentType"))
+			.val($P.fnGetProto(prototypeList, otptNm, "componentType"));
+		
+		$($P.fnGetElement(tr,"leftPstn"))
+			.val($P.fnGetProto(prototypeList, otptNm, "leftPstn"));
+		$($P.fnGetElement(tr,"topPstn"))
+			.val($P.fnGetProto(prototypeList, otptNm, "topPstn"));
+		$($P.fnGetElement(tr,"widthSz"))
+			.val($P.fnGetProto(prototypeList, otptNm, "widthSz"));
+		$($P.fnGetElement(tr,"heightSz"))
+			.val($P.fnGetProto(prototypeList, otptNm, "heightSz"));
 		
-		var selectedOption = $(selectElement).find("option:selected")[0];
+		$($P.fnGetElement(tr,"textSort"))
+			.val($P.fnGetProto(prototypeList, otptNm, "textSort"));
+		$($P.fnGetElement(tr,"fontNm"))
+			.val($P.fnGetProto(prototypeList, otptNm, "fontNm"));
+		$($P.fnGetElement(tr,"fontSz"))
+			.val($P.fnGetProto(prototypeList, otptNm, "fontSz"));
+		$($P.fnGetElement(tr,"fontColor"))
+			.val($P.fnGetProto(prototypeList, otptNm, "fontColor"));
+		$($P.fnGetElement(tr,"fontStyle"))
+			.val($P.fnGetProto(prototypeList, otptNm, "fontStyle"));
 		
-		$(componentTypeEl).val(selectedOption.dataset.componentType);
 	}
 	
 	$P.fnSave = () => {
@@ -328,6 +502,13 @@ $(document).ready(function(){
 	$("#theadMultiple--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
 	
 	$("#btnLoad--${pageName}").on("click", () => $P.fnLoad() );
+	
+	$("#btnUniqueAdd--${pageName}").on("click", () => $P.choiceOtptNm() );
+	$("#btnMultipleAdd--${pageName}").on("click", () => $P.addRow() );
+	
+	$("#btnUniqueDel--${pageName}").on("click", () => $P.delRow('tbodyUnique--${pageName}') );
+	$("#btnMultipleDel--${pageName}").on("click", () => $P.delRow('tbodyMultiple--${pageName}') );
+	
 	$("#btnSave--${pageName}").on("click", () => $P.fnSave() );
 	
 });