[진료관리 - 상세] 메모 수정 기능 반영.

src/main/webapp/WEB-INF/jsp/clinic/info.jsp

@@ -571,19 +571,19 @@ function modifyMemoData() {
     return;
   }
 
-  var memoContent = $("#memoContent").val().trim();
+  var modifyMemoContent = $("#modifyMemoContent").val().trim();
 
-	if (!memoContent) {
+	if (!modifyMemoContent) {
 		alert("메모 내용을 입력해 주세요.");
-		$("#memoContent").val("");
+		$("#modifyMemoContent").val("");
 		return;
 	}
 
   const result = confirm("메모를 수정하시겠습니까?");
   if(result){
-    requestUpdateMemoData(memoId, memoContent);
+    requestUpdateMemoData(memoId, modifyMemoContent);
   
-  $("#defaultModalPrimaryMemo").modal("hide");
+    $("#defaultModalPrimaryMemo").modal("hide");
   }  
 }
 
@@ -619,11 +619,11 @@ function requestDeleteMemoData(memoIdx) {
     });
 }
 
-function requestUpdateMemoData(memoIdx, memoContent) {
+function requestUpdateMemoData(memoIdx, modifyMemoContent) {
 	
 	$.ajax({
         url      : "./api/memoData",
-        data     : {idx:memoIdx, contents:memoContent},
+        data     : {idx:memoIdx, contents:modifyMemoContent},
         method   : "PATCH",
         dataType : "json",
         success  : function( datas ){
@@ -657,7 +657,7 @@ function retrieveMemoData() {
 					html += "<tr>";
           html += "<td>" + gridDateFormatter(d.updateDate) + "</td>";
           if (d.canModify) {
-            html += "<td><pre id='memo_"+d.idx+"' class='contentsEdit' onClick='modifyMemo("+d.idx+")'>" + d.contents + "</pre></td>";
+            html += "<td><pre id='memo_"+d.idx+"' class='contentsEdit' onClick='handleModifyMemo("+d.idx+")'>" + d.contents + "</pre></td>";
           }
           else {
             html += "<td><pre>" + d.contents + "</pre></td>";
@@ -707,24 +707,40 @@ function getExcel(type) {
 	window.open(url);
 }
 
-function modifyMemo(memoId) {
+function handleModifyMemo(memoId) {
   $("#defaultModalPrimaryMemo").data("memoid", memoId);
   const content = $("#memo_"+memoId).html();
   var memoInfoHTML = '';
-			memoInfoHTML += '<th>내용</th>';
-			memoInfoHTML += '<td>';
+      memoInfoHTML += '<tr>';
+      memoInfoHTML += ' <th>작성자</th>';
+      memoInfoHTML += ' <td>';
+      memoInfoHTML += '   <div class="form-row">';
+      memoInfoHTML += '     <input type="text" name="" class="form-control" placeholder="이름을 입력하세요" value="${data._SES_NAME}" readonly>';
+      memoInfoHTML += '   </div>';
+      memoInfoHTML += ' </td>';
+      memoInfoHTML += '</tr>';
+      memoInfoHTML += '<tr id="memoInfo">';
+			memoInfoHTML += ' <th>내용</th>';
+			memoInfoHTML += ' <td>';
 			memoInfoHTML += '	<div class="form-row">';
-			memoInfoHTML += '		<textarea id="memoContent" class="form-control" rows="15" placeholder="내용을 입력하세요">'+content+'</textarea>';
+			memoInfoHTML += '		<textarea id="modifyMemoContent" class="form-control" rows="15" placeholder="내용을 입력하세요">'+content+'</textarea>';
 			memoInfoHTML += '	</div>';
-			memoInfoHTML += '</td>';
-		
-    $('#memoInfo').html(memoInfoHTML);
-    $('.addMemoTools').hide();
-    $('.modifMemoTools').show();
-    $('#defaultModalPrimaryMemo').modal();
-		setTimeout(function (){
-			$('#memoInfo').find('.form-row textarea').focus();
-    }, 500);
+      memoInfoHTML += ' </td>';
+      memoInfoHTML += '</tr>';
+      memoInfoHTML += '<tr>';
+      memoInfoHTML += ' <th>처리일시</th>';
+      memoInfoHTML += ' <td>';
+      memoInfoHTML += '   <div class="datetimepickerWrap form-row">';
+      memoInfoHTML += '     <input id="modifMemoDateTime" class="datetimepicker form-control" type="text" placeholder="측정일시(미 입력시 현재시간 자동등록)">';
+      memoInfoHTML += '   </div>';
+      memoInfoHTML += ' </td>';
+      memoInfoHTML += '</tr>';
+
+  $('#memoInfo').html(memoInfoHTML);
+  $('#defaultModalPrimaryMemo').modal();
+  setTimeout(function (){
+    $('#memoInfo').find('.form-row textarea').focus();
+  }, 500);
 }
 
 $(document).ready(function() {
@@ -1123,12 +1139,12 @@ $(document).ready(function() {
 			</div>
 		</div>
 	</div>
-  <!--
+
 	<div class="modal fade" id="defaultModalPrimaryMemo" tabindex="-1" role="dialog" aria-hidden="true" data-memoid="">
 		<div class="modal-dialog" role="document">
 			<div class="modal-content">
 				<div class="modal-header">
-					<h5 class="modal-title">의료진 메모 입력</h5>
+					<h5 class="modal-title">의료진 메모 수정</h5>
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
 							aria-hidden="true">&times;</span> </button>
 				</div>
@@ -1138,31 +1154,19 @@ $(document).ready(function() {
 							<col style="width: 20%">
 							<col style="width: 80%">
 						</colgroup>
-						<tr>
-							<th>작성자</th>
-							<td>
-								<div class="form-row">
-									<input type="text" name="" class="form-control" placeholder="이름을 입력하세요" value="${data._SES_NAME}" readonly>
-								</div>
-							</td>
-						</tr>
-						<tr id="memoInfo">
-						<!-- 컨텐츠 동적 생성 --
-						</tr>
+            <tbody id="memoInfo">
+            <!-- 컨텐츠 동적 생성 -->
+            </tbody>
 					</table>
 				</div>
-        <div class="addMemoTools modal-footer">
-					<button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
-					<button type="button" class="btn btn-primary" onclick="insertMemoData()">등록</button>
-				</div>
-				<div class="modifMemoTools modal-footer">
-					<button type="button" class="removeMemo btn btn-danger" onclick="deleteMemoData()">삭제</button>
+        <div class="modal-footer">
+        	<button type="button" class="removeMemo btn btn-danger" onclick="deleteMemoData()">삭제</button>
 					<button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
 					<button type="button" class="btn btn-primary" onclick="modifyMemoData()">수정</button>
 				</div>
 			</div>
 		</div>
-	</div>-->
+	</div>
 	<div class="wrapper">
 		<jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>
 
@@ -1670,7 +1674,7 @@ $(document).ready(function() {
                                           <td><c:out value="${d.createDateFormatted}" /></td>
                                           <c:choose>
                                             <c:when test="${d.canModify}">
-                                            <td><pre id='memo_${d.idx}' class='contentsEdit' onClick='modifyMemo(${d.idx})'>${d.contents}</pre></td>
+                                            <td><pre id='memo_${d.idx}' class='contentsEdit' onClick='handleModifyMemo(${d.idx})'>${d.contents}</pre></td>
                                             </c:when>
                                             <c:otherwise>
                                             <td><pre>${d.contents}</pre></td>

src/main/webapp/resources/css/common/classic.css

@@ -700,10 +700,11 @@ table pre {
   position: sticky;
   top: 0;
   left: 0;
+  z-index: 2;
 }
 .memoDataTable thead th:first-child,
 .symptomDataTable thead th:first-child {
-  z-index: 2;
+  z-index: 3;
 }
 .memoDataTableWrap tbody td:first-child {
   background-color: #fff;
@@ -794,6 +795,32 @@ table.symptomDataTable tbody th {
 .memoDataTable pre {
   text-align: left;
 }
+.contentsEdit {
+  position: relative;
+  padding-right: 20px;
+  cursor: pointer;
+  z-index: 1;
+}
+.contentsEdit:after {
+  content: "\F3EA";
+  font-family: "Material Design Icons";
+  position: absolute;
+  top: 50%;
+  right: 0px;
+  font-size: 20px;
+  line-height: 1;
+  color: #999999;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+}
+.contentsEdit:hover,
+.contentsEdit:hover:after {
+  color: #47bac1;
+}
+
 #defaultModalPrimary_2 .form-check-inline {
   min-width: 110px;
 }
@@ -809,7 +836,7 @@ table.symptomDataTable tbody th {
 }
 
 .legend {
-  padding: 0;
+  padding: 0 10px;
 }
 
 .legend li {
@@ -822,6 +849,10 @@ table.symptomDataTable tbody th {
   border-bottom: 1px solid #ebebeb;
 }
 
+.legend li > div {
+  word-break: keep-all;
+}
+
 .legend li:last-child {
   border: 0;
 }
@@ -846,6 +877,10 @@ table.symptomDataTable tbody th {
   background-image: url("../../images/device_connect_link_6.png");
 }
 
+.legend li.symptom {
+  background-image: url("../../images/device_connect_link_5.png");
+}
+
 .datetimepicker.form-control {
   padding-right: 25px;
 }