ANTOOZA-BACKEND/Admin/wwwroot/js/site.js

// Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.

// Write your JavaScript code.

$(function () {
    // 사이드 바 토글 유지
    aside.applyInitialMode();

    // 사이드바 스크롤 위치 복원
    const savedAsideScroll = sessionStorage.getItem("aside-scroll");
    if (savedAsideScroll) {
        document.getElementById("aside").scrollTop = parseInt(savedAsideScroll);
    }

    // 메인 콘텐츠 스크롤 위치 복원
    const savedMainScroll = sessionStorage.getItem("main-scroll");
    if (savedMainScroll) {
        document.getElementById("main").scrollTop = parseInt(savedMainScroll);
    }
});

// 페이지 이동 전 스크롤 위치 저장
window.addEventListener("beforeunload", function () {
    sessionStorage.setItem("aside-scroll", document.getElementById("aside").scrollTop);
    sessionStorage.setItem("main-scroll", document.getElementById("main").scrollTop);
});

// 좌측 메뉴 처리
// 모드: "expanded" (기본 펼침) | "collapsed" (아이콘만, 데스크탑) | "hidden" (모바일 완전 숨김)
class Aside {
    constructor() {
        this.body = document.body;
        this.aside = document.getElementById("aside");
        this.btnAsideToggle = document.getElementById("btnAsideToggle");
    }

    isMobile() {
        return window.innerWidth <= 768;
    }

    getStoredMode() {
        let mode = getCookie("aside-mode");
        if (mode === "collapsed" || mode === "expanded" || mode === "hidden") {
            return mode;
        }
        return null;
    }

    applyMode(mode) {
        this.body.classList.remove("collapsed-aside", "hidden-aside");

        if (mode === "collapsed") {
            this.body.classList.add("collapsed-aside");
            this.setIcon(true);
        } else if (mode === "hidden") {
            this.body.classList.add("hidden-aside");
            this.setIcon(true);
        } else {
            this.setIcon(false);
        }
    }

    applyInitialMode() {
        const stored = this.getStoredMode();

        if (this.isMobile()) {
            this.applyMode("hidden");
            return;
        }

        if (stored === "collapsed") {
            this.applyMode("collapsed");
        } else if (stored === "hidden") {
            this.applyMode("collapsed");
            setCookie("aside-mode", "collapsed", 7);
        } else {
            this.applyMode("expanded");
        }
    }

    toggleAside() {
        if (this.isMobile()) {
            const hidden = this.body.classList.contains("hidden-aside");
            const next = hidden ? "expanded" : "hidden";
            this.applyMode(next);
            setCookie("aside-mode", next, 7);
        } else {
            const collapsed = this.body.classList.contains("collapsed-aside");
            const next = collapsed ? "expanded" : "collapsed";
            this.applyMode(next);
            setCookie("aside-mode", next, 7);
        }
    }

    setIcon(pointRight) {
        const icon = this.btnAsideToggle.querySelector("i");
        if (!icon) {
            return;
        }
        if (pointRight) {
            icon.classList.remove("bi-arrow-left");
            icon.classList.add("bi-arrow-right");
        } else {
            icon.classList.remove("bi-arrow-right");
            icon.classList.add("bi-arrow-left");
        }
    }

    expandFromCollapsed() {
        if (this.body.classList.contains("collapsed-aside")) {
            this.applyMode("expanded");
            setCookie("aside-mode", "expanded", 7);
        }
    }
}

const aside = new Aside();

document.getElementById("btnAsideToggle").addEventListener("click", () => aside.toggleAside());

// collapsed 상태에서 자식 있는 부모 메뉴 클릭 시 자동 expand
document.querySelectorAll("#aside .nav-link[data-bs-toggle='collapse']").forEach(el => {
    el.addEventListener("click", function (e) {
        if (document.body.classList.contains("collapsed-aside")) {
            e.preventDefault();
            e.stopPropagation();
            aside.expandFromCollapsed();
        }
    }, true);
});

window.addEventListener("resize", function () {
    if (aside.isMobile()) {
        if (!document.body.classList.contains("hidden-aside")) {
            aside.applyMode("hidden");
        }
    } else {
        if (document.body.classList.contains("hidden-aside")) {
            const stored = aside.getStoredMode();
            aside.applyMode(stored === "collapsed" ? "collapsed" : "expanded");
        }
    }
});

// 메뉴 토글 유지
document.querySelectorAll(".collapse").forEach(e => {
    const collapseID = e.id;
    const collapseState = getCookie(collapseID);

    const instance = bootstrap.Collapse.getOrCreateInstance(e, {
        toggle: false
    });

    if (collapseState === "open") {
        instance.show();
    } else {
        instance.hide();
    }

    e.addEventListener("show.bs.collapse", () => {
        setCookie(collapseID, "open", 7);
    });

    e.addEventListener("hide.bs.collapse", () => {
        setCookie(collapseID, "closed", 7);
    });
});

// 드롭박스 적용
const dropdownList = [...document.querySelectorAll('.dropdown-toggle')].map(e => new bootstrap.Dropdown(e));

function GetCheckedBoxIDs() {
    return Array.from(document.querySelectorAll('input[type="checkbox"].list-check-box:checked')).map(c => c.value);
}

// 목록 버튼상자
class ActionButtons {
    constructor() {
        this.form = document.getElementById("fAdminList");
    }

    validate() {
        let checked = $("input:checkbox.list-check-box:checked");
        if (checked.length < 1) {
            alert("항목을 하나 이상 선택하세요.");
            return false;
        }
        return true;
    }

    checkout(e, action)
    {
        let handler = "";

        switch (action) {
            case "Restore":
                handler = "?handler=Restore";
                break;
            case "Delete":
                handler = "?handler=Delete";
                break;
            case "Update":
                handler = "?handler=Update";
                break;
        }

        if (handler) {
            this.form.action = handler;
        }

        this.form.submit();
    }

    Update(e) {
        if (!this.validate()) {
            return false;
        }

        if (confirm("선택한 항목을 정말 수정 하시겠습니까?")) {
            this.checkout(e, "Update");
        }
    }

    Delete(e) {
        let ids = GetCheckedBoxIDs();

        if (ids.length > 1) {
            if (confirm(`${ids.length}건의 항목을 정말 삭제 하시겠습니까?`)) {
                if (!this.validate()) {
                    return false;
                }
            }
        } else {
            if (!confirm("선택한 항목을 정말 삭제 하시겠습니까?")) {
                return false;
            }

            let id = e.target.dataset.id;
            if (id) {
                this.form.elements[`ids_${id}`].checked = true;
            }
        }

        setTimeout(() => this.checkout(e, "Delete"), 100);
    }

    Restore(e) {
        if (!this.validate()) {
            return false;
        }

        if (confirm("선택한 항목을 정말 복원 하시겠습니까?")) {
            this.checkout(e, "Restore");
        }
    }

    checkedAll(e) {
        let chk = document.getElementsByClassName("list-check-box");
        for (let i = 0; i < chk.length; i++) {
            let targetFormName = (e.target.getAttribute("form") || e.target.form.id);
            let chkFormName = (chk[i].getAttribute("form") || chk[i].form.id);

            if (targetFormName == chkFormName) {
                chk[i].checked = e.target.checked;
            }
        }

        this.toggleDisabled();
    }

    toggleDisabled() {
        let checked = $("input:checkbox.list-check-box:checked");
        if (checked.length > 0) {
            $('button[form="fAdminList"]').prop("disabled", false);
        } else {
            $('button[form="fAdminList"]').prop("disabled", true);
        }
    }
}

const actionButtons = new ActionButtons();
$(document).on("click", "#btnListUpdate", (e) => actionButtons.Update(e));
$(document).on("click", "#btnListDelete", (e) => actionButtons.Delete(e));
$(document).on("click", "#btnListRestore", (e) => actionButtons.Restore(e));
$(document).on("click", "#btnListExecute", (e) => actionButtons.Execute(e));
$(document).on("click", ".btn-row-delete", (e) => actionButtons.Delete(e));
$(document).on("click", "#checkedAll", (e) => actionButtons.checkedAll(e));
$(document).on("change", "input.list-check-box", actionButtons.toggleDisabled);