유저관리 - ajax와 모달창을 활용한 유저 정지

관리자만 접속할 수 있으며 현재 가입된 모든 유저가 나온다. 

 

해당 유저를 클릭하면 아래 정보칸에 유저의 정보가 출력된다 . ajax로 구현했다.

유저를 클릭하면 해당 유저의 아이디를 가지고 userManageDetail.do 요청을 한다.

컨트롤러에서 해당 유저 아이디로 회원테이블, 결제내역테이블, 정지내역테이블 총 3개의 테이블에서 객체리스트들을

담아와서 JSONObject에 담아서 view에 반환한다.

 

#Controller

@RequestMapping(value = "userManageDetail.do", method = RequestMethod.POST)
	@ResponseBody
	public String userManageDetailMethod(HttpServletResponse response, @RequestParam("userId") String userId)
			throws UnsupportedEncodingException {
		response.setContentType("application/json; charset=utf-8");
		User user = userService.selectUserById(userId);
		JSONObject job = new JSONObject();
		// 전송용 json 객체 생성
		JSONObject sendJson = new JSONObject();
		job.put("id", user.getId());
		job.put("userId", user.getUserId());
		job.put("passWd", user.getPassWd());
		job.put("email", user.getEmail());
		job.put("userNo", user.getUserNo());
		job.put("phone", user.getPhone());
		job.put("accountNumber", user.getAccountNumber());
		/* job.put("bankName", URLEncoder.encode(user.getBankName(), "utf-8")); */
		job.put("profileUrl", user.getProfileUrl());
		job.put("isQuit", user.getIsQuit());
		job.put("loginOk", user.getLoginOk());
		job.put("lastModified", user.getLastModified().toString());
		if (user.getServiceDate() != null) {
			job.put("serviceDate", user.getServiceDate().toString());
		} else {
			job.put("serviceDate", "이용중인 서비스가 없습니다.");
		}
		job.put("businessNo", user.getBusinessNo());
		job.put("businessStoreName", URLEncoder.encode(user.getBusinessStoreName(), "utf-8"));
		sendJson.put("objUser", job);
		// job == 유저객체 1개

		JSONArray suspensionJarray = new JSONArray();
		ArrayList<Suspension> suspensionList = umService.selectSuspenseList(user.getId() + "");
		if (suspensionList.size() > 0) {
			for (Suspension suspension : suspensionList) {
				// notice 값들을 저장할 json 객체 생성
				JSONObject suspensionJob = new JSONObject();
				suspensionJob.put("suspensionNo", suspension.getSuspensionNo());
				suspensionJob.put("targetAccount", suspension.getTargetAccount());
				suspensionJob.put("suspensionStart", suspension.getSuspensionStart().toString());
				if (suspension.getSuspensionEnd() != null) {
					suspensionJob.put("suspensionEnd", suspension.getSuspensionEnd().toString());
				} else {
					suspensionJob.put("suspensionEnd", "");
				}
				suspensionJob.put("suspensionTitle", URLEncoder.encode(suspension.getSuspensionTitle(), "utf-8"));
				suspensionJob.put("suspensionContent", URLEncoder.encode(suspension.getSuspensionContent(), "utf-8"));
				suspensionJarray.add(suspensionJob);
			} // for
		} // if
			// job == 유저객체 1개 , suspensionJarray 정지객체 리스트
			// 전송용 json 에 jarr 을 저장함
		sendJson.put("suspensionList", suspensionJarray);
		// job == 유저객체 1개 , suspensionJarray 정지객체 리스트, subscribepaments 결제내역 리스트
		JSONArray subsPaymentsJarray = new JSONArray();
		ArrayList<SubscribePayments> subsPayList = subscribeService.selectSubscribePaymentsByUserId(user.getId());
		if (subsPayList.size() > 0) {
			for (SubscribePayments subscribePayment : subsPayList) {
				// notice 값들을 저장할 json 객체 생성
				JSONObject subscribePaymentJob = new JSONObject();
				subscribePaymentJob.put("payNo", subscribePayment.getPayNo());
				subscribePaymentJob.put("SubscribeName",
						URLEncoder.encode(subscribePayment.getSubscribeName(), "utf-8"));
				subscribePaymentJob.put("amount", subscribePayment.getAmount());
				subscribePaymentJob.put("payMethod", subscribePayment.getPayMethod());
				subscribePaymentJob.put("payDate", subscribePayment.getPayDate().toString());
				subsPaymentsJarray.add(subscribePaymentJob);
			} // for
		} // if
		sendJson.put("subsPaymentsList", subsPaymentsJarray);
		return sendJson.toJSONString();
	}

계정정지를 누르고 사유를 입력한 뒤 정지를 누르면 유저의 LoginOK를 N으로 update하고 정지내역에 insert를 한다.

그리고 정지상태인 계정을 눌렀을 때는 빨간 정지버튼이 아닌 녹색 계정활성화버튼이 나온다.

#Controller

@RequestMapping(value = "ususpend.do", method = RequestMethod.POST)
	public void updateUserAccountSuspendMethod(Suspension suspension, HttpServletResponse response) throws IOException {
		int result = umService.updateUserAccountSuspendMethod(suspension.getTargetAccount());
		PrintWriter out = response.getWriter();
		logger.info(suspension.getTargetAccount() + "");
		if (result == 1) {
			umService.insertSuspension(suspension);
			String suspensionNo = umService.selectSuspenseNo(suspension.getTargetAccount());
			if (suspensionNo == null || suspensionNo.length() < 1) {
				suspensionNo = "1";
			}
			out.append(suspensionNo);
		} else {
			out.append("실패");
		}
		out.flush();
		out.close();
	}

 

유저 정지 Ajax

#view

		function suspendUser() {
			var userId = $('span#id').text(); // 사용자 ID 가져오기
			var suspensionTitle = $('#suspensionTitle').val();
			console.log(suspensionTitle);
			var suspensionContent = $('#suspensionContent').val();
			console.log(suspensionContent);
			$.ajax({
				url : 'ususpend.do',
				type : 'post',
				data : {
					targetAccount : userId,
					suspensionTitle : suspensionTitle,
					suspensionContent : suspensionContent
				}, // 사용자 ID를 데이터로 전송
				success : function(response) {
					console.log('User suspended successfully');
					var today = new Date();
					var year = today.getFullYear();
					var month = ('0' + (today.getMonth() + 1)).slice(-2);
					var day = ('0' + today.getDate()).slice(-2);
					var dateString = year + '-' + month + '-' + day;
					$('li#buttonspace').html(activationButton);
					$('table#suspensionList').append(
							"<tr><td>" + response + "</td><td>" + dateString
									+ "</td><td>" + "" + "</td><td>"
									+ suspensionTitle + "</td><td>"
									+ suspensionContent + "</td></tr>");
					closeModal();//모달창닫기
				},
				error : function(request, status, errorData) {
					console.log("Error: " + errorData);
				}
			});
		};

 

여기서 문제가 있었다. ajax로 구현하다보니 정지를 한다고 해서 바로 정지내역에 기록되지 않았다.

이유는 유저 정지는 비동기 통신이고 정지내역을 불러오는건 처음 랜더링되었을때 였기 때문.

그리고 만약 새로고침을 강제로 시킨다면 선택되었던 유저정보가 날아가서 다시 텅빈 정보창이 나온다. 

 

그래서 정지가 기록되는순간 일시적으로 자바스크립트로 추가하게 구현하였다 .

윗부분 ajax success시 코드가 그것이다.