From e9f6eabb282ce94e25696cc5b03487b10342d257 Mon Sep 17 00:00:00 2001
From: rosewiper <rosehips@naver.com>
Date: Tue, 9 Jan 2024 18:34:22 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EC=B9=9C?=
 =?UTF-8?q?=EA=B5=AC=ED=86=A1=20=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ft/KakaoFriendsTalkMsgDataView.jsp        |  13 +-
 .../js/kakao/{at => ft}/friendstalkExcel.js   |   0
 src/main/webapp/js/kakao/ft/ftTabulator.js    | 516 ++++++++++++++++++
 3 files changed, 522 insertions(+), 7 deletions(-)
 rename src/main/webapp/js/kakao/{at => ft}/friendstalkExcel.js (100%)
 create mode 100644 src/main/webapp/js/kakao/ft/ftTabulator.js

diff --git a/src/main/webapp/WEB-INF/jsp/web/kakao/msgdata/ft/KakaoFriendsTalkMsgDataView.jsp b/src/main/webapp/WEB-INF/jsp/web/kakao/msgdata/ft/KakaoFriendsTalkMsgDataView.jsp
index 1d986aad..89141b86 100644
--- a/src/main/webapp/WEB-INF/jsp/web/kakao/msgdata/ft/KakaoFriendsTalkMsgDataView.jsp
+++ b/src/main/webapp/WEB-INF/jsp/web/kakao/msgdata/ft/KakaoFriendsTalkMsgDataView.jsp
@@ -9,7 +9,7 @@
 <script type="text/javascript" src="<c:out value='/js/kakao/at/tabulator.js' />"></script>
 <script type="text/javascript" src="<c:out value='/js/kakao/at/addr.js' />"></script>
 <script type="text/javascript" src="<c:out value='/js/common/popup.js' />"></script>
-<script type="text/javascript" src="<c:out value='/js/kakao/at/friendstalkExcel.js' />"></script>
+<script type="text/javascript" src="<c:out value='/js/kakao/ft/friendstalkExcel.js' />"></script>
 
 <script type="text/javascript">
 /* 파일등록 */
@@ -43,7 +43,6 @@ $(document).ready(function (){
 	$("#inputTemplateContent").keyup(function(e){
 		
 		var contents = $('#inputTemplateContent').val();
-		console.log(contents);
 		setContentsLengForFriends(contents);
 		
 	});
@@ -1006,7 +1005,7 @@ $('.popupAddr').click(function(){
 												<span><span class="vMiddle">*</span> 중복번호는 한번만 발송됩니다.</span>
 											</div>
 											<div class="receipt_num_midde">
-												<div class="listType list01">
+												<div class="listType list01 callList_box"  id="callList_box">
 													<div class="list_table list_head">
 														<div class="cb_wrap">
 															<label for="" class="label"></label>
@@ -1014,14 +1013,14 @@ $('.popupAddr').click(function(){
 														</div>
 														<div class="list_table_num">
 															<p>휴대폰</p>
-															<!-- <img src="/publish/images/sortUp.png">
-															<img src="/publish/images/sortDown.png"> -->
+															<img src="/publish/images/sortUp.png">
+															<img src="/publish/images/sortDown.png">
 														</div>
-														<!-- <div class="list_table_name">
+														<div class="list_table_name">
 															<p>이름</p>
 															<img src="/publish/images/sortUp.png">
 															<img src="/publish/images/sortDown.png">
-														</div> -->
+														</div>
 													</div>
 													<div class="list_body_wrap" id="wrap01_body">
 													</div>
diff --git a/src/main/webapp/js/kakao/at/friendstalkExcel.js b/src/main/webapp/js/kakao/ft/friendstalkExcel.js
similarity index 100%
rename from src/main/webapp/js/kakao/at/friendstalkExcel.js
rename to src/main/webapp/js/kakao/ft/friendstalkExcel.js
diff --git a/src/main/webapp/js/kakao/ft/ftTabulator.js b/src/main/webapp/js/kakao/ft/ftTabulator.js
new file mode 100644
index 00000000..28218ece
--- /dev/null
+++ b/src/main/webapp/js/kakao/ft/ftTabulator.js
@@ -0,0 +1,516 @@
+/**
+ * 
+ * @author 		: 우영두
+ * @fileName 	: ftTabulator.js 
+ * @date 		: 2024.01.09
+ * @description : tabulator 관련 js
+ * =========================================================== 
+ * DATE          AUTHOR   NOTE 
+ * ----------------------------------------------------------- *
+ * 2024.01.09    우영두          최초 생성
+ * 
+ * 
+ * 
+ */
+
+$(document).ready(function (){
+	/**
+	//받는사람 연락처 내용 처리
+	//Tabulator AJAX Data Loading
+	tableL = new Tabulator(".callList_box", {
+		height:"255px",
+	    layout:"fitColumns",
+	    //data:tabledata,
+	    //autoColumns:true,
+	    headerHozAlign:"center",
+	    validationMode:"highlight",
+	    //clipboard:false,
+	    //clipboardCopySelector:"table",
+	    //clipboardPasteAction:"insert", // insert, update, replace
+	    placeholder:"복사(Ctrl+C)한 내용을 여기에 붙여넣기(Ctrl+V) 해주세요.", //fit columns to width of table (optional)
+	    resizableColumns:false,
+	 	columns:[ //Define Table Columns
+	 		{formatter:"rowSelection", titleFormatter:"rowSelection",clipboard:false, hozAlign:"center", headerSort:false, cellClick:function(e, cell){
+	 	        cell.getRow().toggleSelect();
+		 	}}, 
+		 	{title:"이름", hozAlign:"center", field:"name", editor:"input", validator:["maxLength:12"], cellEdited:function(cell){
+		 	    //cell - cell component
+		 	    fnReplCell();
+		    }},
+		 	{title:"휴대폰", hozAlign:"center", field:"phone", editor:"input", width:100, validator:["required","minLength:10", "maxLength:12"], cellEdited:function(cell){
+		 	    //cell - cell component
+		 	    fnDuplPhone();
+		    }},
+		 	{title:"[*1*]", hozAlign:"center", field:"rep1", editor:"input", minWidth:60, validator:["maxLength:40"], cellEdited:function(cell){
+		 	    //cell - cell component
+		 	    fnReplCell();
+		    }},
+		 	{title:"[*2*]", hozAlign:"center", field:"rep2", editor:"input", minWidth:60, validator:["maxLength:40"], cellEdited:function(cell){
+		 	    //cell - cell component
+		 		fnReplCell();
+		    }},
+		 	{title:"[*3*]", hozAlign:"center", field:"rep3", editor:"input", minWidth:60, validator:["maxLength:40"], cellEdited:function(cell){
+		 	    //cell - cell component
+		 		fnReplCell();
+		    }},
+		 	{title:"[*4*]", hozAlign:"center", field:"rep4", editor:"input", minWidth:60, validator:["maxLength:40"], cellEdited:function(cell){
+		 	    //cell - cell component
+		 		fnReplCell();
+		    }},
+		 	
+	 	],
+	 	validationFailed:function(cell, value, parameters){ // 유효성 체크 함수 - 아직 잘 모르겠음 
+	        //take action on validation fail
+	 		var valid = cell.isValid();
+	 		var fieldNm = cell.getField();
+	 		var cellVal = cell.getValue();
+	 		var returnVal = "";
+	 		if(!valid){
+	 			
+	 			if(fieldNm == "name"){
+	 				alert("받는사람 이름은 최대 12글자까지만 입력 가능합니다.");
+	 				cell.setValue(strMaxLengthSubstring(cellVal, 11)); //스크립트 함수가 0부터 시작이므로 원하는 글자수 -1을 해줘야한다.
+	 				cell.clearValidation();
+	 			}else if(fieldNm == "phone"){
+	 				alert("휴대폰번호는 하이픈(-)을 제외한 숫자만 정확히 입력해 주세요.");
+	 			}else{
+		 			alert("치환문자를 정확히 입력해 주세요. 40글자 이내로 입력 가능합니다.");
+		 			cell.setValue(strMaxLengthSubstring(cellVal, 39));
+		 			cell.clearValidation();
+	 			}
+	 			
+	 			//해당 셀 데이터 삭제
+	 			//cell.setValue("");
+	 			
+	 		}
+	 		return value % parameters.phone;
+	    },
+
+	});
+	
+	 */
+	//주소록 불러오기 팝업 내용
+	//Tabulator AJAX Data Loading
+	tableAddr = new Tabulator(".callAddr_box", {
+		height:"255px",
+	    layout:"fitColumns",
+	    headerHozAlign:"center",
+	    validationMode:"highlight",
+	    placeholder:"주소록 그룹을 선택해 주세요.", //fit columns to width of table (optional)
+	    resizableColumns:false,
+	 	columns:[ //Define Table Columns
+	 		{formatter:"rowSelection", titleFormatter:"rowSelection",clipboard:false, hozAlign:"center", headerSort:false, cellClick:function(e, cell){
+	 	        cell.getRow().toggleSelect();
+		 		}
+		 	}, 
+		 	{title:"그룹명", hozAlign:"center", field:"addrGroupNm", editor:"input", width:120, validator:["required","minLength:2", "maxLength:40"]},
+		 	{title:"이름", hozAlign:"center", field:"addrName", editor:"input",  width:120, validator:["maxLength:12"]},
+		 	{title:"휴대폰번호", hozAlign:"center", field:"addrPhone", editor:"input", width:120, validator:["required","minLength:10", "maxLength:11"]},
+		 	
+	 	],
+	 	validationFailed:function(cell, value, parameters){ // 유효성 체크 함수 - 아직 잘 모르겠음 
+	 		var valid = cell.isValid();
+	 		var fieldNm = cell.getField();
+	 		if(!valid){
+	 			if(fieldNm == "addrName"){
+	 				alert("받는사람 이름은 최대 12글자까지만 입력 가능합니다.");
+	 			}else if(fieldNm == "addrPhone"){
+	 				alert("휴대폰번호는 하이픈(-)을 제외한 숫자만 정확히 입력해 주세요.");
+	 			}else if(fieldNm == "addrGroupNm"){
+	 				alert("그룹명을 정확히 입력해 주세요. 2 ~ 40글자 이내로 입력 가능합니다.");
+	 			}
+	 			
+	 			//해당 셀 데이터 삭제
+	 			cell.setValue("");
+	 		}
+	 		return value % parameters.addrPhone;
+	    },
+
+	});
+	
+		
+	//받는사람 번호 버튼 클릭시 Tabulator에 데이터 넣어주기
+	$('.addCallToF').click(function(){ 
+		
+		var callToNum = $('#callTo').val();
+		if(callToNum == null || callToNum == ""){
+			
+			alert("받는사람 번호를 입력해 주세요.");
+			return false;
+			
+		}else if(!checkHpNum(callToNum)){	
+			
+			alert("올바른 전화번호를 입력해 주세요.");
+			$('#callTo').val("");
+			return false;
+		}
+		
+		//핸드폰 번호에 '-' 문자 제거하기
+		callToNum = removeDash(callToNum);
+
+		  var dpCnt = 0;
+		$(".phoneArea p").each(function(index, item){
+			if(this.textContent == callToNum){
+				
+				dpCnt++;
+				
+				alert("받는사람 리스트에 동일한 연락처가 있습니다.");
+		    	$('#callTo').val("");
+		    	return false;
+			}
+		});
+		
+		if(dpCnt > 0){
+			alert("받는사람 리스트에 동일한 연락처가 있습니다.");
+			$('#callTo').val("");
+			return false;
+		}else{
+			// fn_displayJsonToHtmlTable 재사용을 위한
+			// 파라미터 형변환
+			var data =[];
+			data.push({ phone: callToNum, name: ''});
+			fn_displayJsonToHtmlTable(data);
+			
+			/*
+			 * 토탈 카운트 화면에 노출
+			 */ 
+			updateTotCnt();	
+			
+			// 번호 추가란 초기화
+			$('#callTo').val('');
+		}
+	});
+	
+	
+	//받는사람 전체삭제 버튼 처리
+	$('.all_del').click(function(){
+		
+		var data = tableL.getRows();	
+	
+		if(data == null || data == ""){
+			
+			alert("받는사람을 추가해 주세요.");
+			return false;
+		
+		}else{
+			
+			if(confirm("받는사람 목록을 모두 삭제하시겠습니까?")){
+				tableL.clearData();
+				$("#rowTotCnt").text(0); //총건수 수정
+				$("#rowDupCnt").text(0); //중복건수 수정
+				totalPriceSum(0);		 //결제 금액 수정
+			}
+	
+		}
+		
+	});
+	
+	
+	
+	//주소록 불러오기 버튼 클릭시
+	$('.popupAddr').click(function(){
+		
+		var login = '${LoginVO.id}';
+		
+		if(login == null || login == ''){
+			
+			alert("로그인 후 이용이 가능합니다.");
+			return false;
+			
+		}
+		
+		$("#addrGroupLoad").load("/web/mjon/msgdata/selectAddrGroupListAjax.do", "" ,function(response, status, xhr){
+			//리스트 스크롤 처리해주기
+			$(".adr_pop_list").mCustomScrollbar({
+				axis: 'y',
+				scrollbarPosition: "outside",
+				theme: "dark",
+				autoHideScrollbar: false
+			});
+		});
+		
+	});
+
+	
+	//엑섹불러오기 버튼 클릭시 파일 첨부 실행
+	$('.upImg').click(function(){ // 엑셀파일 불러오기 선택 시
+		
+		$("#imgFile").click();
+		
+	});
+	
+	//최근전송내역 팝업 선택추가 버튼 처리(체크내역 받는사람 리스트로 추가해주기)
+	$(document).on('click', '#latestAddPhone', function (){
+
+		var addPhoneList = []; //신규로 추가할 전화번호 저장변수
+		
+		$("input:checkbox[name='latAddrChk']:checked").each(function(index){
+			
+			var chkPhone = $(this).val();
+			
+			if(!checkHpNum(chkPhone)){
+				
+				alert("올바른 전화번호가 아닙니다.");
+				return false;
+				
+			}else{
+				
+				addPhoneList.push({phone: removeDash(chkPhone.trim())});
+				
+			}
+			
+		});
+		
+		
+		if(addPhoneList.length > 0){
+			//연락처 추가해 주기
+			addPhoneInfo(addPhoneList);
+			$("#btnLatestAddPhoneClose").trigger("click");
+		}
+		else {
+			alert("연락처를 선택해주세요.");
+			return false;
+		}		
+		
+		//중복연락처 제거
+		//var removeDuplData = dupliPhoneData(addPhoneList);
+		
+		//받는사람 목록에 추가
+		//tableL.addData(removeDuplData);
+	    
+	    //총 받는사람 수 계산
+	    //totRows = tableL.getRows().length;
+	    //updateTotCnt(totRows);
+	    
+	  	//결제 금액 구하기
+	    //totalPriceSum(totRows);
+		
+	});
+	
+	//최근전송내역 팝업 선택 취소 버튼 처리
+	$(document).on('click', '#latestCancelPhone', function (){
+		
+		$("input[name=latAddrChk]").prop("checked", false);
+		
+	});
+	
+	//최근전송내역 팝업 삭제 버튼 처리
+	$(document).on('click', '#latestAddrDel', function (){
+		
+		$(this).parent("#latestLi").remove();
+		
+	});
+	
+	//자주보내는 번호 팝업 선택추가 버튼 처리(체크내역 받는사람 리스트로 추가해주기)
+	$(document).on('click', '#bookMarkAddPhone', function (){
+
+		var addPhoneList = []; //신규로 추가할 전화번호 저장변수
+		
+		$("input:checkbox[name='bookAddrChk']:checked").each(function(index){
+			
+			var chkPhone = $(this).val();
+			
+			if(!checkHpNum(chkPhone)){
+				
+				alert("올바른 전화번호가 아닙니다.");
+				return false;
+				
+			}else{
+				
+				addPhoneList.push({phone: removeDash(chkPhone.trim())});
+				
+			}
+			
+		});
+		
+		if(addPhoneList.length > 0){
+			//연락처 추가해 주기
+			addPhoneInfo(addPhoneList);
+			$("#btnLatestAddPhoneClose").trigger("click");
+		}
+		else {
+			alert("연락처를 선택해주세요.");
+			return false;
+		}		
+		
+		//중복연락처 제거
+		//var removeDuplData = dupliPhoneData(addPhoneList);
+		
+		//받는사람 목록에 추가
+		//tableL.addData(removeDuplData);
+	    
+	    //총 받는사람 수 계산
+	    //totRows = tableL.getRows().length;
+	    //updateTotCnt(totRows);
+	    
+	  	//결제 금액 구하기
+	    //totalPriceSum(totRows);
+		
+	});
+	
+	//자주보내는 번호 팝업 선택 취소 버튼 처리
+	$(document).on('click', '#bookMarkCancelPhone', function (){
+		
+		$("input[name=bookAddrChk]").prop("checked", false);
+		
+	});
+	
+	//자주보내는 번호 팝업 삭제 버튼 처리
+	$(document).on('click', '#bookMarkAddrDel', function (){
+		
+		$(this).parent("#bookMarkLi").remove();
+		
+	});
+	
+	// 자주보내는 번호 팝업 닫기 버튼 처리
+	$(document).on('click', '#btnLatestAddPhoneClose', function (){
+		// 자주보내는 번호 체크박스 해제처리
+		setCheckBoxUnChecked();		
+	});	
+	
+	// 자주보내는 번호 체크박스 해제처리
+	function setCheckBoxUnChecked() {
+		$("input[name=latAddrChk]").prop("checked", false);
+		$("input[name=bookAddrChk]").prop("checked", false);
+	}
+	
+	
+	//오류 검사 버튼 처리
+	$('.check_validity').click(function(){
+		
+		var invalid = tableL.getInvalidCells();		//오류 데이터 체크
+		var dataLen = tableL.getRows().length;		//연락처 데이터 갯수
+		var totLen = invalid.length;				//오류 데이터 갯수
+		var errMsg = "";							//최종 alert에 표시할 메시지 저장 변수
+		
+		if(dataLen > 0){ //연락처 정보가 있으면 수행
+			
+			if(totLen > 0){ //내용에 오류가 있으면 수행
+				
+				//오류 데이터 값 저장
+				for(var i=0; i < totLen; i++){
+					
+					var cellValue = invalid[i].getValue();
+					
+					if(i == 0){
+						
+						errMsg = cellValue;
+						
+					}else{
+						
+						errMsg = errMsg +", "+ cellValue;
+						
+					}
+					
+				}
+				
+				if(errMsg == "" || errMsg == null){
+					
+					alert("내용에 오류가 있습니다.");
+					return false;
+					
+				}else{
+					
+					alert(errMsg + "의 내용에 오류가 있습니다.");
+					return false;
+					
+				}
+				
+			}else{
+				
+				alert("오류 데이터가 없습니다.");
+				return false;
+				
+			}
+			
+		}else{
+			
+			alert("연락처를 입력해 주세요.");
+			return false;
+			
+		}
+		
+	});
+	
+});
+
+var tableErrorData = [];
+var totRows = 0; // 좌측 받는사람 총 갯수
+
+
+/*
+* 토탈 카운트 화면에 노출
+* 변수 없는 리스트만 체크
+*/ 
+function updateTotCnt(){
+	
+	$("#rowTotCnt").text($('#wrap01_body .list_body').length);
+
+}
+
+//주소록 불러오기에서 수신자 리스트 화면에 추가해주기
+function addPhoneInfo(taData){
+	
+	if(taData == null){
+		alert("연락처 정보가 없습니다.");
+		return;
+	}
+	
+	/*
+	* 주소록 데이터 화면에 추가
+	*/
+	this.fn_displayJsonToHtmlTable(taData);
+
+	/*
+	* 토탈 카운트 화면에 노출
+	*/ 
+	this.updateTotCnt();	
+		
+}
+
+/*
+* 주소록 데이터 화면에 추가
+*/
+function fn_displayJsonToHtmlTable(taData){
+
+	// fn_viewDataInit01();
+	// 치환문자가 있으면 데이터 초기화
+
+
+	var $htmlBody = $('#wrap01_body');
+
+	var addHtml = 	'<div class="list_table list_body excelBody01">'
+					+'\t<div class="cb_wrap">'
+					+'\t\t<label for="" class="label"></label>'
+					+'\t\t<input type="checkbox" class="wrap01C">'
+					+'\t</div>'
+					+'\t<div class="list_table_num phoneArea">'
+					+'\t\t<p>$PHONE$</p>'
+					+'\t</div>'
+					/*23.04.06  이름제거 요청으로인한 화면 이름 제거*/
+					/*+'\t<div class="list_table_name">'
+					+'\t\t<p>$NAME$</p>'
+					+'\t</div>'*/
+					+'</div>';
+
+
+
+
+	var totalDuplCnt = $('#rowDupCnt').text();
+
+	var itemPhone;
+	var itemName;
+	$.each(taData, function(index, item){
+		itemPhone = item.phone;
+		itemName = item.name;
+		//  == null ? '': item.name;
+		if(!phoneDupl(itemPhone))
+			/*23.04.06  이름제거 요청으로인한 화면 이름 제거*/
+//			$htmlBody.append(addHtml.replace('$PHONE$', itemPhone).replace('$NAME$', itemName ??= ''));
+			$htmlBody.append(addHtml.replace('$PHONE$', itemPhone));
+		else
+			totalDuplCnt++;
+	});
+	$('#rowDupCnt').text(totalDuplCnt);
+}
+