dpot-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 () {
    // 사이드 바 토글 유지
    let isHidden = aside.isHidden();

    if (isHidden) {
        aside.hideAside();
    } else {
        aside.showAside();
    }

    // 사이드바 스크롤 위치 복원
    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);
});

// 좌측 메뉴 처리
class Aside {
    constructor() {
        this.body = document.body;
        this.aside = document.getElementById("aside");
        this.btnAsideToggle = document.getElementById("btnAsideToggle");
    }

    // 사이드 바 토글 시
    toggleAside(e) {
        let isHidden = this.isHidden();

        if (isHidden) {
            aside.showAside();
        } else {
            aside.hideAside();
        }
        setCookie("hidden-aside", isHidden ? "visible" : "hidden", 7);
    }

    // 사이드 바 토글 시 아이콘 변경
    toggleAsideIcon (isHidden) {
        let icon = this.btnAsideToggle.querySelector("i");
        if (isHidden) {
            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");
        }
    };

    // 숨김 여부 확인
    isHidden() {
        let isHidden = getCookie("hidden-aside") ;
        if (isHidden == "") {
            isHidden = this.body.classList.contains("hidden-aside");
        }
        return (isHidden === "hidden");
    }

    // 보이기
    showAside() {
        this.body.classList.remove("hidden-aside");
        this.toggleAsideIcon(0);
        setCookie("hidden-aside", "visible", 7);
    }

    // 숨기기
    hideAside() {
        this.body.classList.add("hidden-aside");
        this.toggleAsideIcon(1);
        setCookie("hidden-aside", "hidden", 7);
    }
}

const aside = new Aside();

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

// 화면이 작아지면
window.addEventListener("resize", function () {
    if (window.innerWidth > 768) {
        aside.showAside(0);
    } else {
        aside.hideAside(1);
    }
});

// 메뉴 토글 유지
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);