[shop] js활용하여 재고 변경 및 상품 상태 변경

1. html

<div class="row">
  <div class="col">

 <table class="table table striped align-middle">
    <colgroup>
        <col width="10%">
        <col width="10%">
        <col width="15%">
        <col width="10%">
        <col width="20%">
        <col width="15%">
        <col width="20%">
    </colgroup>


    <thead style="font-size: 1.1rem;">
    <tr>
      <th scope="col">No.</th>
      <th scope="col">카테고리</th>
      <th scope="col">상품명</th>
      <th scope="col">가격</th>
      <th scope="col">재고</th>
      <th scope="col">등록일</th>
      <th scope="col">상태</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="item, status : ${itemList}">
      <th th:text="${status.count}"></th>
      <td th:text="${item.cateInfo.getCateName()}"></td>
      <td th:text="${item.itemName}"></td>
      <td th:text="${item.itemPrice}"></td>
      <td>
	  <!-- this를 사용해서 구현하기 -->
    	<div class="row">
            <div class="col" style="margin-right: -1rem;">
                <input type="text" class="form-control stockInput" th:value="${item.itemStock}">
            </div>
            <div class="col">
                <input type="submit" value="변경" th:onclick="updateStock([[${item.itemCode}]], this);">
            </div>
   		</div>
  	</td>
  	<td th:text="${item.regDate}"></td>
  	<td>
      <input type="radio" th:name="|itemStatus_${status.count}|" th:checked="${item.itemStatus eq 'ON_SALE'}" 
      value="ON_SALE" th:onclick="changeItemStatus([[${item.itemCode}]], 'ON_SALE');">판매중
      <input type="radio" th:name="|itemStatus_${status.count}|"  th:checked="${item.itemStatus eq 'SOLD_OUT'}"
       value="SOLD_OUT" th:onclick="changeItemStatus([[${item.itemCode}]], 'SOLD_OUT');">매진
   </td>
 </tr>
</tbody>
</table>
</div>
</div>

<!-- 수량변경 시 모달창  -->
<div class="modal fade" id="updateStockModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-body">
    <div class="row mb-3" >
        <div class="col text-center">
          수량이 변경되었습니다.
        </div>
    </div>

   <div class="row">
    <div class="col text-end">
        <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: 3rem; --bs-btn-font-size: 1rem;">확인</button>
    </div>
   </div>
  </div>
</div>
</div>
</div>

<script type="text/javascript" th:src="@{/js/admin/item_manage.js}"></script> <!-- fragment 끝나기 전에 넣기 -->

enum으로 단어 정의 해줬음.

 

2. 재고 수량 변경 js

1) controller

@PostMapping("/updateStock")
@ResponseBody
public void updateStock(ItemVO itemVO) {
    itemService.changeStock(itemVO);
}

2) js

function updateStock(itemCode, selectedTag){
	
	parentElement : 부모태그 찾아 감.
   	children : 자식 태그 찾아 감.(자식들 다 데려오는것 복수형이니까 배열형태로 가져옴)
   	previousElementSibling : 이전 형제 노드를 찾아 감.
   	nextElementSibling : 다음 형제 노드를 찾아 감.
   	closest() : 가장 가까운 상위태그를 찾아 감
	
	//방법1 div의 상위 div의 input
	//const itemStock = selectedTag.parentElement.previousElementSibling.children[0].value;
	
	//방법2 클래스 부여 (td안에 있는 class가 stockInput인 것은 하나)
	const itemStock = selectedTag.closest('td').querySelector('.stockInput').value;
	
	$.ajax({
	   url: '/item/updateStock', //요청경로
	    type: 'post',
	    data:{'itemCode':itemCode, 'itemStock': itemStock}, //필요한 데이터
	    success: function(result) {
		
			//모달창 소스
			const modal = new bootstrap.Modal('#updateStockModal');
	   		//모달 보여주기
	   		modal.show();
	   
	    },
	    error: function(){
	       alert('실패');
	    }
	});

}

 

3. 상태 변경 js

1) controller

@PostMapping("/changeItemStatus")
@ResponseBody
public void changeItemStatus(ItemVO itemVO) {
    itemService.changeItemStatus(itemVO);

}

2) js

function changeItemStatus(itemCode, status){
	
	const result = confirm('변경하시겠습니까?');
	
	if(result){
		$.ajax({
		   url: '/item/changeItemStatus', //요청경로
		    type: 'post',
		    data:{'itemCode':itemCode, 'itemStatus':status}, //필요한 데이터
		    success: function(result) {
		      alert('상태가 변경되었습니다.');
		   
		    },
		    error: function(){
		       alert('실패');
		    }
		});
	}
}