sam-manage/public/js/pagination.js

/**
 * 공통 페이지네이션 스크립트
 *
 * 기능:
 * - 쿠키 기반 per_page 값 관리
 * - 페이지네이션 이벤트 핸들러
 * - HTMX 연동
 */

// ============================================
// 쿠키 헬퍼 함수
// ============================================

window.setCookie = function(name, value, days = 365) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
};

window.getCookie = function(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
};

window.getPerPageFromCookie = function() {
    const savedPerPage = getCookie('pagination_per_page');
    return savedPerPage ? savedPerPage : '10'; // 기본값 10
};

// ============================================
// 페이지네이션 이벤트 핸들러
// ============================================

// 페이지당 항목 수 변경 핸들러
window.handlePerPageChange = function(perPage) {
    // 쿠키에 저장
    setCookie('pagination_per_page', perPage);

    // 현재 페이지의 HTMX 타겟 찾기
    const target = document.querySelector('[hx-trigger*="filterSubmit"]');
    if (target) {
        const perPageInput = document.getElementById('perPageInput');
        const pageInput = document.getElementById('pageInput');

        if (perPageInput && pageInput) {
            perPageInput.value = perPage;
            pageInput.value = 1; // 페이지를 1로 초기화
            htmx.trigger(target, 'filterSubmit');
        }
    }
};

// 페이지 변경 핸들러
window.handlePageChange = function(page) {
    const target = document.querySelector('[hx-trigger*="filterSubmit"]');
    if (target) {
        const pageInput = document.getElementById('pageInput');

        if (pageInput) {
            pageInput.value = page;
            htmx.trigger(target, 'filterSubmit');
        }
    }
};

// ============================================
// 초기화
// ============================================

document.addEventListener('DOMContentLoaded', function() {
    // filterForm 찾기
    const filterForm = document.getElementById('filterForm');
    if (!filterForm) return;

    // hidden input이 이미 존재하는지 확인
    let perPageInput = document.getElementById('perPageInput');
    let pageInput = document.getElementById('pageInput');

    // per_page input 생성 또는 업데이트
    if (!perPageInput) {
        perPageInput = document.createElement('input');
        perPageInput.type = 'hidden';
        perPageInput.name = 'per_page';
        perPageInput.id = 'perPageInput';
        filterForm.appendChild(perPageInput);
    }
    perPageInput.value = getPerPageFromCookie();

    // page input 생성 또는 업데이트
    if (!pageInput) {
        pageInput = document.createElement('input');
        pageInput.type = 'hidden';
        pageInput.name = 'page';
        pageInput.id = 'pageInput';
        pageInput.value = '1';
        filterForm.appendChild(pageInput);
    }
});

// ============================================
// HTMX 이벤트 핸들러
// ============================================

// HTMX afterSwap: 테이블 새로고침 시 selectbox 재설정
document.body.addEventListener('htmx:afterSwap', function(event) {
    // selectbox 설정을 약간 지연시켜 DOM이 완전히 렌더링된 후 실행
    setTimeout(function() {
        const perPageSelect = document.getElementById('perPageSelect');
        if (perPageSelect) {
            // 서버에서 받은 값(data-server-value)을 우선 사용
            const serverValue = perPageSelect.dataset.serverValue;
            if (serverValue) {
                perPageSelect.value = serverValue;
                // 쿠키도 서버 값으로 업데이트
                setCookie('pagination_per_page', serverValue);
            }
        }
    }, 50);
});