날짜별 검색/접수대기 주문 카운트

[Hyeonjeong-JANG]

✔️ 날짜별 검색

🐯 StoreOwnerController: 쿼리스트링으로 들어온 데이터 타입을 로컬타임으로 변경

    @GetMapping("/stores/{storeId}/orders/history/date") // 매장 관리자 - 주문내역 날짜로 조회
    public ResponseEntity<?> orderListSortByDate(@PathVariable int storeId,
                                                 @RequestParam("startDate") @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate startDate,
                                                 @RequestParam("endDate") @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate endDate, Model model) {
        // TODO: 권한 처리
        // TODO: 날짜로 검색하는 기능 구현
        StoreResponse.OrderListDTO respDTO = storeService.getOrderListByDate(storeId, startDate, endDate);
        model.addAttribute("orders", respDTO.getOrderList());

        return ResponseEntity.ok().body(respDTO);
    }

🐯StoreService: 시작 날짜는 00:00:00부터, 끝 날짜는 23:59:59까지 설정해서 해당 범위의 날짜들의 모든 데이터를 가져올 수 있게 함.

public StoreResponse.OrderListDTO getOrderListByDate(int storeId, LocalDate startDate, LocalDate endDate) {
        LocalDateTime startDateTime = startDate.atStartOfDay();
        LocalDateTime endDateTime = endDate.atTime(23, 59, 59);
        List<Order> orderList = orderRepository.findAllByStoreIdAndCreatedAtBetween(storeId, startDateTime, endDateTime);

        orderList.stream().filter(order -> order.getStatus().equals(OrderStatus.PENDING)).toList().forEach(orderList::remove);
        orderList.stream().filter(order -> order.getStatus().equals(OrderStatus.PREPARING)).toList().forEach(orderList::remove);
        orderList.stream().filter(order -> order.getStatus().equals(OrderStatus.PREPARED)).toList().forEach(orderList::remove);
        orderList.stream().filter(order -> order.getStatus().equals(OrderStatus.CONFIRMED)).toList().forEach(orderList::remove);

        // 이넘 -> 한글
        orderList.forEach(order -> {
            OrderStatus status = order.getStatus();
        });

        return new StoreResponse.OrderListDTO(orderList);
    }

🐯OrderRepository: BETWEEN 사용해서 특정 범위의 날짜를 검색

@Query("""
            SELECT DISTINCT o
            FROM Order o
            JOIN FETCH o.store s
            LEFT JOIN FETCH o.orderMenus om
            WHERE s.id = :storeId
            AND o.createdAt BETWEEN :startDate AND :endDate
            """)
    List<Order> findAllByStoreIdAndCreatedAtBetween(int storeId, @Param("startDate") LocalDateTime startDate, @Param("endDate") LocalDateTime endDate);

🐯orderList.js: 날짜 쿼리스트링으로 받아서 검색, renderOrderHistories(order)로 부분 랜더링

document.querySelector("#searchOrders").addEventListener("click", function (event) {

    생략

    fetch(`/stores/${storeId}/orders/history/date?startDate=${startDate}&endDate=${endDate}`, {
        method: 'GET',
        headers: {

생략
});

function renderOrderHistories(order) {
    let html = "";
    if (order.orderList.length > 0) {
        order.orderList.forEach(order => {
            html += `
                <tr>
                    <!-- TODO: 주문번호 로직 짜서 그거 적용시켜야 함. -->
                    <td>${order.orderId}</td>
                    <td>${order.status}</td>
                    <td>${order.createdAt}</td>
                    <td>${order.totalPrice}</td>
                    <td>${order.customerNickname}</td>
                    <td>${order.orderMenus}</td>
                </tr>
            `;
        });
    } else {
        html += `
            <tr>
                <td colspan="5">주문 내역이 없습니다.</td>
            </tr>
        `;
    }
    document.getElementById('orderHistories').innerHTML = html;
}

✔️ 접수대기 주문 카운트

🐯StoreOwnerController: 접수대기중인 주문 카운트를 받아서 던짐

@ResponseBody
    @GetMapping("/stores/{sessionStoreId}/pending-order-count")
    public ResponseEntity<?> getPendingOrderCount(@PathVariable int sessionStoreId) {

        int pendingOrderCount = storeService.getPendingOrderCount(sessionStoreId);
        return ResponseEntity.ok(new ApiUtil<>(pendingOrderCount));
    }

🐯StoreService: 접수대기중인 주문리스트의 사이즈를 반

public int getPendingOrderCount(int storeId) {
        List<Order> orders = orderRepository.findAllByStoreId(storeId)
                .orElseThrow(() -> new Exception404("찾을 수 없는 주문입니다."));

        int pendingOrderCount = 0;
        for (int i = 0; i < orders.size(); i++) {
            if (orders.get(i).getStatus() == OrderStatus.PENDING) {
                pendingOrderCount++;
            }
        }

        return pendingOrderCount;
    }

🐯scripts.js: 페이지가 로드될 때마다 주문 카운트를 업데이트하고, 50초마다 주기적으로 업데이트를 반복하게 설정함

document.addEventListener("DOMContentLoaded", function (event) {
    const sessionStoreId = document.getElementById('sessionStoreId').dataset.id;

    function updatePendingOrderCount() {
        fetch(`/stores/${sessionStoreId}/pending-order-count`)
            .then(response => response.json())
            .then(data => {
                const pendingOrderCountElement = document.getElementById('pendingOrderCount');

                if (data.body === 0) {
                    pendingOrderCountElement.classList.add('hidden-count');
                } else {
                    pendingOrderCountElement.classList.remove('hidden-count');
                }

                pendingOrderCountElement.innerHTML = data.body;
            })
            .catch(error => {
                console.error('데이터 가져오기 오류:', error);
            });
    }

    updatePendingOrderCount();

    setInterval(updatePendingOrderCount, 50000);
});