Revert "Revert "[진료관리] 대시보드 정렬 적용. 필터 적용.""

This reverts commit ca8aa6a8b774a96495aa88441f946b88f117d488.

src/main/java/com/lemon/lifecenter/controller/ClinicController.java

@@ -78,11 +78,51 @@ public class ClinicController extends LifeCenterController {
 	
 	private final Logger logger = LoggerFactory.getLogger(this.getClass());
 
+	private enum FilterType {
+	    newPatient(0x01), 
+	    alarm(0x02), 
+	    temperatureBlank(0x04), 
+	    bloodPressureBlank(0x08), 
+	    pulseRateBlank(0x10), 
+	    oxygenSaturationBlank(0x20), 
+	    bloodSugarBlank(0x40), 
+	    symptomBlank(0x80);
+	
+	    private final int value;
+	
+	    FilterType(int value) {
+	    	this.value = value;
+	    }
+	
+	    public int getValue() {
+	    	return value;
+	    }
+	}
+
+	private String[] parseFilter(String filter) {
+
+    ArrayList<String> arrayList = new ArrayList<String>();
+    try {
+      int filterValue = Integer.parseInt(filter);
+      for (FilterType f: FilterType.values()) {
+        if ((filterValue & f.getValue()) == f.getValue()) {
+          arrayList.add(f.name());
+        }
+      }
+    }
+    catch( Exception e) {
+    	// 에러시 필터가 없는 것으로 간주
+    }
+    
+    return arrayList.toArray(new String[arrayList.size()]);
+  }
+
 	@RequestMapping("/state")
 	public ModelAndView clinicState(HttpServletRequest request,
 			@RequestParam(value = "page", required = true, defaultValue = "1") int page,
 			@RequestParam(value = "size", required = true, defaultValue = "30") int pageSize,
-			@RequestParam(value = "searchText", required = false, defaultValue = "") String searchText) {
+			@RequestParam(value = "searchText", required = false, defaultValue = "") String searchText,
+      @RequestParam(value = "filter", required = false, defaultValue = "") String filter) {
 
 
 		String centerCode = LifeCenterSessionController.getSession( request, "sesCenterCode" );
@@ -92,6 +132,12 @@ public class ClinicController extends LifeCenterController {
 		dto.setLimitMax(pageSize);
 		dto.setCenterCode(centerCode);
 		dto.setSearchText(searchText);
+		if (!filter.equals("")) {
+	        String[] filterList = parseFilter(filter);
+	        if (filterList.length > 0) {
+	        	dto.setFilterList(filterList);
+	        }
+		}
 
 		int total = clinicService.selectPHRLatestCount(dto);
 
@@ -106,6 +152,7 @@ public class ClinicController extends LifeCenterController {
 
 		mv.addObject("page", page);
 		mv.addObject("searchText", searchText);
+		mv.addObject("filter", filter);
 		mv.addObject("total", total);
 //		mv.addObject("items", result);
 
@@ -116,7 +163,8 @@ public class ClinicController extends LifeCenterController {
 	public ModelAndView patientInfo(
 			@RequestParam(value = "patientIdx", required = true, defaultValue = "") int patientIdx,
 			@RequestParam(value = "refererSearch", required = false, defaultValue = "") String refererSearch,
-			@RequestParam(value = "refererPage", required = false, defaultValue = "") String refererPage) {
+			@RequestParam(value = "refererPage", required = false, defaultValue = "") String refererPage,
+      @RequestParam(value = "refererFilter", required = false, defaultValue = "") String refererFilter) {
 
 		// 환자정보
 		PatientDTO patientDto = new PatientDTO();
@@ -194,6 +242,7 @@ public class ClinicController extends LifeCenterController {
     mv.addObject("memoResult", memoResult);
     mv.addObject("refererSearch", refererSearch);
 		mv.addObject("refererPage", refererPage);
+    mv.addObject("refererFilter", refererFilter);
 
 		return mv;
 	}
@@ -214,7 +263,10 @@ public class ClinicController extends LifeCenterController {
 		dto.setCenterCode(centerCode);
 		dto.setSearchText(searchText);
 		if (!filter.equals("")) {
-			dto.setFilterList(filter.split(","));
+	        String[] filterList = parseFilter(filter);
+	        if (filterList.length > 0) {
+	        	dto.setFilterList(filterList);
+	        }
 		}
 		if (Calendar.getInstance().get(Calendar.HOUR_OF_DAY) < 12) {
 			dto.setTimeCriterion("AM");

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

@@ -749,16 +749,22 @@ function gotoList() {
 	var url = "./state";
 	var refererSearch = '<c:out value="${refererSearch}" />';
 	var refererPage = '<c:out value="${refererPage}" />';
-	
-	if (refererSearch !== "" && refererPage !== "") {
-		url += "?searchText=" + encodeURIComponent(refererSearch) + "&page=" + refererPage;
-	}
-	else if (refererSearch !== "") {
-		url += "?searchText=" + encodeURIComponent(refererSearch);
-	}
-	else if (refererPage !== "") {
-		url += "?page=" + refererPage;
+  var refererFilter = '<c:out value="${refererFilter}" />';
+
+  var params = [];
+	if (refererSearch !== "") {
+		params.push("searchText=" + encodeURIComponent(refererSearch));
 	}
+	if (refererPage !== "") {
+		params.push("page=" + refererPage);
+  }
+  if (refererFilter !== "") {
+		params.push("filter=" + refererFilter);
+  }
+  params.forEach((param, index) => {
+    url += (index === 0 ? "?" : "&");
+    url += param;
+  })
 
 	location.href = url;
 }

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

@@ -10,6 +10,14 @@ let mCurrentPage = ${page}
 let mTotalCount = 0;
 let mReloadTimer = null;
 
+function getSortType() {
+  return localStorage.getItem('dashboardSortType') || "roomAsc";
+}
+
+function setSortType(value) {
+  localStorage.setItem('dashboardSortType', value);
+}
+
 function getPageSize() {
   return localStorage.getItem('dashboardPageSize') || "30";
 }
@@ -111,17 +119,38 @@ function deactiveReloadTimer() {
 }
 
 function searchPatients() {
-	var keyword = $("#searchKeyword").val();
+  var keyword = $("#searchKeyword").val();
+  var filterValue = 0;
+  $('input:checkbox[name="filter"]').each(function() {
+    if(this.checked) {
+      filterValue = filterValue | this.value
+    }
+  });
+
+  var params = [];
+  if (keyword !== "") {
+    params.push("searchText=" + encodeURIComponent(keyword));
+  }
+  if (filterValue !== 0) {
+    params.push("filter=" + filterValue);
+  }
 
-	location.href = "./state?searchText="+encodeURIComponent(keyword);
+  var url = "./state";
+  params.forEach((param, index) => {
+    url += (index === 0 ? "?" : "&");
+    url += param;
+  })
+
+  location.href = url;
 }
 
 function retrieveStateData(page, needInitPagination) {
 
   mCurrentPage = page;
-	var searchText = '<c:out value="${searchText}" />';
+  var searchText = '<c:out value="${searchText}" />';
+  var filter = '<c:out value="${filter}" />';
 	var ignoreCache = moment().unix();
-	var params = {page: page, size: getPageSize(), searchText: searchText, ignoreCache:ignoreCache};
+	var params = {page: page, size: getPageSize(), sortType: getSortType() === "nameAsc" ? "name" : "room", searchText: searchText, filter: filter, ignoreCache:ignoreCache};
 
 	$.ajax({
         url      : "./api/state",
@@ -283,6 +312,13 @@ $(document).ready(function() {
     }
   });
 
+  $("#orderBy").val(getSortType());
+  $(document).on("change", "#orderBy", function() {
+		var sortType = $(this).find("option:selected").val();
+    setSortType(sortType);
+    retrieveStateData(1, true);
+  });
+
   // 초기값 처리
   if(getPageSize() === '10000'){
     $('.patients-list').addClass('all');
@@ -304,24 +340,42 @@ $(document).ready(function() {
 	// 	$(".playPause").attr('id','playButton');
 	// 	$(".playPause").find('i').removeClass('fa-pause').addClass('fa-play');
 	// 	$('#reloadIntervalSelect').prop('disabled',false);
-	// }
+  // }
+  
+  // 필터 초기값 처리
+  var filter = parseInt('<c:out value="${filter}" />', 10);
+  if (!isNaN(filter)) {
+    $('input:checkbox[name="filter"]').each(function() {
+      var value = parseInt(this.value, 10);
+     if((filter & value) === value){
+          this.checked = true;
+      }
+    });
+  }
 
 	$(document).on("click", ".patients-stats", function(event) {
     // alert(event.target.id);
     
-		var searchText = '<c:out value="${searchText}" />';
+    var searchText = '<c:out value="${searchText}" />';
+    var filter = '<c:out value="${filter}" />';
 		var currentPage = $("#pagination .active").children("a").text();
 		var url = $(this).attr("data-url");
 		if (searchText !== "") {
 			url += "&refererSearch="+encodeURIComponent(searchText);
+    }
+    if (filter !== "") {
+			url += "&refererFilter="+filter;
 		}
     url += "&refererPage="+currentPage;
+
+
     if (event.target.id === "memoLink" || event.target.id === "memoLinkIcon") {
       url += "#medicalMemoSection"
     }
     if (event.target.id === "symptomLink" || event.target.id === "symptomLinkIcon") {
       url += "#symptomSection"
     }
+
 		location.href = url;
 	});
 
@@ -434,42 +488,86 @@ $(document).ready(function() {
 							<div class="card">
 								<div class="card-header">
 									<div class="row">
+                    <!-- row content start -->
+                    <!-- 알람 표시 기준 start -->
 										<div class="col-lg-12 mb-3">
 											<h1 class="h4">
                         대시보드
                         <span class="small showLegend ml-2" data-toggle="modal" data-target="#legendGuide"><i class="mdi mdi-comment-question-outline"></i> 알람 표시 기준</span>
                       </h1>
 										</div>
-                    <div class="col-lg-6 entrySelect">
-                        <label>
-                          <select id="viewEntry" class="custom-select">
+                    <!-- 알람 표시 기준 end -->
+
+                    <div class="listTools col-lg-8 form-horizontal">
+                      <div class="entrySelect mb-2">
+                        <span>보기</span>
+                        <span>
+                          <select id="viewEntry" class="form-control">
                             <option value="18">18명</option>
                             <option value="30" selected>30명</option>
                             <option value="60">60명</option>
                             <option value="120">120명</option>
                             <option value="10000">전체</option>
                           </select>
-                        </label>
-                        보기
+                        </span>
                       </div>
-										<div class="col-lg-6 search text-right">
-											<label>
-                        <select id="reloadIntervalSelect" class="custom-select" onchange="changeReloadInterval()">
-													<option value="10">10초</option>
-													<option value="30" selected>30초</option>
-													<option value="60">60초</option>
-											</select>
-											</label>
-                      <label>
-												<button type="button" id="playButton" class="playPause btn btn-primary">
-                          <i class="fas fa-play"></i>
-                        </button>
-											</label>
-                      <input type="text" class="form-control w150" id="searchKeyword" placeholder="호실 or 환자명" value="${searchText}" onkeyup="if(event.keyCode===13){searchPatients()}">
-											<button id="searchKeywordBtn" class="btn btn-primary" onclick="searchPatients()">검색</button>
-										</div>
+                      <div class="orderBy mb-2">
+                        <span>정렬</span>
+                        <span>
+                          <select id="orderBy" class="form-control">
+                            <option value="roomAsc" selected>호실순</option>
+                            <option value="nameAsc">이름순</option>
+                          </select>
+                        </span>
+                      </div>
+                      <div class="reloadInterval mb-2 form-horizontal">
+                        <span>갱신</span>
+                        <span>
+                          <select id="reloadIntervalSelect" class="form-control" onchange="changeReloadInterval()">
+                            <option>10초</option>
+                            <option selected>30초</option>
+                            <option>60초</option>
+                          </select>
+                          <button type="button" id="playButton" class="playPause btn btn-primary">
+                            <i class="fas fa-sync-alt" style="width: 14px"></i>
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+
+                    <div class="searchTools col-lg-4 form-horizontal">
+                      <div class="searchPatient mb-2">
+                        <span>검색</span>
+                        <input type="text" class="form-control w150" id="searchKeyword" placeholder="호실 or 환자명" value="${searchText}" onkeyup="if(event.keyCode===13){searchPatients()}"/>
+                        <button id="searchKeywordBtn" class="btn btn-primary" onclick="searchPatients()"><i class="mdi mdi-magnify"></i></button>
+                      </div>
+                    </div>
+
+                    <!-- 필터 start -->
+                    <div class="filters col-lg-12">
+                      <div class="filtersContainer">
+                        <span class="filterTitle"><i class="mdi mdi-24px mdi-filter-plus-outline"></i> 필터</span>
+                        <span class="filterList">
+                          <label class="filterItem"><input type="checkbox" id= "filter1" name="filter" value="1" /><span>신규 입소</span></label>
+                          <label class="filterItem"><input type="checkbox" id= "filter2" name="filter" value="2" /><span>위험 환자</span></label>
+                          <label class="filterItem"><input type="checkbox" id= "filter4" name="filter" value="4" /><span>체온 미입력</span></label>
+                          <label class="filterItem"><input type="checkbox" id= "filter8" name="filter" value="8" /><span>혈압 미입력</span></label>
+                          <label class="filterItem"><input type="checkbox" id= "filter16" name="filter" value="16" /><span>맥박 미입력</span></label>
+                          <label class="filterItem"><input type="checkbox" id= "filter32" name="filter" value="32" /><span>산소포화도 미입력</span></label>
+                          <label class="filterItem"><input type="checkbox" id= "filter64" name="filter" value="64" /><span>혈당 미입력</span></label>
+                          <label class="filterItem"><input type="checkbox" id= "filter128" name="filter" value="128" /><span>임상증상 미입력</span></label>
+                        </span>
+                        <span class="filterApply"
+                          ><button id="filterApply" class="btn btn-primary" onclick="searchPatients()"><i class="mdi mdi-filter-outline"></i> 적용</button></span
+                        >
+                      </div>
+                    </div>
+                    <!-- 필터 end -->
+
+                    <!-- row content end -->
 									</div>
 								</div>
+
 								<div class="card-body">
 									<ul class="row patients-list">
 										<c:choose>

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

@@ -8,6 +8,14 @@ body {
 label.error {
   color: #ff0000 !important;
 }
+.form-horizontal .form-control {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+}
+.i-block {
+  display: inline-block;
+}
 .preloader {
   position: fixed;
   z-index: 10000;
@@ -65,30 +73,33 @@ label.error {
 }
 .w50 {
   display: inline-block;
-  width: 50px;
+  width: 50px !important;
 }
 
 .w100 {
   display: inline-block;
-  width: 100px;
+  width: 100px !important;
+}
+
+.w120 {
+  display: inline-block;
+  width: 120px !important;
 }
 
 .w150 {
   display: inline-block;
-  width: 150px;
+  width: 150px !important;
 }
 
 .w200 {
   display: inline-block;
-  width: 200px;
+  width: 200px !important;
 }
 
 .max360 {
   max-width: 360px;
 }
-.entrySelect {
-  line-height: 40px;
-}
+
 .toggle .toggleHeader {
   position: relative;
   padding: 15px 20px;
@@ -600,20 +611,26 @@ table pre {
   background-image: url("../../images/device_connect_unlink_6.png");
 }
 
-.patients-stats .stats li:last-child {
+/* .patients-stats .stats li:last-child {
   margin-bottom: 0px;
-}
+} */
 
-/* .patients-stats .stats li.fever {display: none;} */
-.patients-stats .stats li.pulse {
+/* .patients-stats .stats li.fever {
   display: none;
-}
-
-/* .patients-stats .stats li.bloodPressure {display: none;} */
-/* .patients-stats .stats li.oxygen {display: none;} */
-.patients-stats .stats li.sugar {
+} */
+/* .patients-stats .stats li.pulse {
   display: none;
-}
+} */
+/* .patients-stats .stats li.bloodPressure {
+  display: none;
+} */
+/* .patients-stats .stats li.oxygen {
+  display: none;
+} */
+/* .patients-stats .stats li.sugar {
+  display: none;
+} */
+
 .patients-list {
   padding: 0;
 }
@@ -847,17 +864,28 @@ table.symptomDataTable tbody th {
   font-size: 16px;
   padding: 10px 0 10px 20px;
   background-repeat: no-repeat;
-  background-position: 10px 13px;
+  background-position: 10px 18px;
   background-size: 20px;
-  border-bottom: 1px solid #ebebeb;
+  border-bottom: 1px solid #f5f5f5;
 }
 
 .legend li > div {
   word-break: keep-all;
+  margin: 5px 0;
+}
+.legend li .alarmLegendItem span {
+  display: none;
+  opacity: 0.5;
+}
+.legend li.disable .alarmForm {
+  display: none;
+}
+.legend li.disable .alarmLegendItem span {
+  line-height: 31px;
+  display: block;
 }
-
 .legend li:last-child {
-  border: 0;
+  border-bottom: 1px solid #f5f5f5;
 }
 
 .legend li.fever {
@@ -907,7 +935,109 @@ table.symptomDataTable tbody th {
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
 }
-
+.searchTools {
+  text-align: left;
+}
+.listTools > div {
+  display: inline-block;
+  margin-right: 10px;
+  white-space: nowrap;
+}
+.searchTools > div {
+  display: inline-block;
+  white-space: nowrap;
+}
+.filters > div {
+  border-top: 1px solid #e2e2e2;
+  border-bottom: 1px solid #e2e2e2;
+}
+.filterTitle > i {
+  vertical-align: middle;
+  color: #47bac1;
+}
+.filtersContainer {
+  display: table;
+  width: 100%;
+}
+.filtersContainer > span {
+  display: table-cell;
+  padding: 5px 0px;
+}
+.filterTitle {
+  width: 70px;
+}
+.filtersContainer > span.filterList {
+  padding: 5px 10px;
+  border-left: 1px solid #e2e2e2;
+  border-right: 1px solid #e2e2e2;
+}
+.filterApply {
+  width: 80px;
+  text-align: right;
+}
+.filterItem {
+  margin: 3px 5px;
+  cursor: pointer;
+}
+.filterItem::before {
+  content: "";
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+.filterItem > * {
+  vertical-align: middle;
+}
+.filterItem input[type="checkbox"] {
+  margin-right: 5px;
+}
+.displaySetting,
+.alarmSetting {
+  font-size: 16px;
+}
+.subTitle i {
+  margin-right: 5px;
+}
+.subTitle.display i {
+  color: #0063dc;
+}
+.subTitle.alarm i {
+  color: #ff0000;
+}
+.bodyTitle i {
+  margin: 0 5px;
+  color: #47bac1;
+}
+.infoCaption {
+  padding-left: 24px;
+  line-height: 1.4;
+  font-weight: 400;
+}
+.infoCaption:before {
+  content: "\F2FD";
+  font-family: "Material Design Icons";
+  margin: 0 5px 0 -19px;
+  color: #47bac1;
+}
+.displayList,
+.alarmList {
+  padding: 0;
+}
+.displayItem,
+.alarmItem {
+  display: inline-block;
+  list-style: none;
+  margin: 5px 20px;
+}
+.displayItem label,
+.alarmItem label {
+  cursor: pointer;
+}
+.displayItem input[type="checkbox"],
+.alarmItem input[type="checkbox"] {
+  margin-right: 5px;
+  cursor: pointer;
+}
 @media screen and (min-width: 992px) {
   .mobile-table th,
   .mobile-table td {
@@ -977,16 +1107,28 @@ table.symptomDataTable tbody th {
     padding-right: 5px;
     margin-bottom: 10px !important;
   }
+  .filtersContainer > span.filterList {
+    padding: 5px 10px;
+    border-left: 0;
+    border-right: 0;
+  }
+  .listTools {
+    padding-right: 2px;
+  }
+  .searchTools {
+    padding-left: 2px;
+    text-align: right;
+  }
 }
 
 @media screen and (max-width: 480px) {
-  #searchKeyword.w150 {
+  /* #searchKeyword.w150 {
     width: 100px !important;
   }
 
   #searchKeywordBtn {
     display: none;
-  }
+  } */
   .sectionNav {
     text-align: center;
   }