Control_Panel/server/frontend/js/material.js

// ChemiFactory MES - Material Properties Specifications Management Logic
const API_BASE = "/inventory/materials";

let allMaterials = [];

document.addEventListener("DOMContentLoaded", () => {
    initEvents();
    fetchMaterials();
});

async function fetchMaterials() {
    try {
        const res = await fetch(API_BASE);
        if (!res.ok) throw new Error("Failed to fetch material specifications");
        allMaterials = await res.json();
        renderMaterialList(allMaterials);
    } catch (err) {
        console.error(err);
        document.getElementById("material-list-body").innerHTML = `<tr><td colspan="6" style="text-align:center; color:var(--accent-red); padding:20px 0;">자재 규격 데이터를 로드하지 못했습니다.</td></tr>`;
    }
}

function renderMaterialList(list) {
    const tbody = document.getElementById("material-list-body");
    tbody.innerHTML = "";

    if (list.length === 0) {
        tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; color:var(--text-muted); padding:30px 0;">등록된 자재 물성 규격이 존재하지 않습니다.</td></tr>`;
        return;
    }

    list.forEach(m => {
        const tr = document.createElement("tr");
        tr.innerHTML = `
            <td><code>${m.material_code}</code></td>
            <td><strong>${m.material_name}</strong></td>
            <td>${m.material_type === 'Yarn' ? '원사 (Yarn)' : m.material_type === 'Bond' ? '본드 (Bond)' : '기타'}</td>
            <td>${m.density} g/cm³</td>
            <td>${m.remarks || "-"}</td>
            <td>
                <button class="btn btn-secondary" style="padding: 4px 8px; font-size:11px;" onclick="openEditMaterialModal(${JSON.stringify(m).replace(/"/g, '&quot;')})">수정</button>
                <button class="btn btn-danger" style="padding: 4px 8px; font-size:11px;" onclick="deleteMaterial(${m.id})">삭제</button>
            </td>
        `;
        tbody.appendChild(tr);
    });
}

function initEvents() {
    // Search filter
    document.getElementById("search-material").addEventListener("input", (e) => {
        const query = e.target.value.toLowerCase();
        const filtered = allMaterials.filter(m => 
            m.material_name.toLowerCase().includes(query) || 
            m.material_code.toLowerCase().includes(query)
        );
        renderMaterialList(filtered);
    });

    // Close Modals
    const modal = document.getElementById("material-modal");
    modal.querySelectorAll(".close-btn, .close-modal-btn").forEach(btn => {
        btn.addEventListener("click", () => modal.style.display = "none");
    });

    // Trigger Form
    document.getElementById("btn-add-material").addEventListener("click", () => {
        document.getElementById("material-form").reset();
        document.getElementById("material-id").value = "";
        document.getElementById("material-modal-title").innerText = "자재 규격 정보 등록";
        modal.style.display = "flex";
    });

    document.getElementById("material-form").addEventListener("submit", handleMaterialSubmit);
}

async function handleMaterialSubmit(e) {
    e.preventDefault();
    const id = document.getElementById("material-id").value;
    const payload = {
        material_code: document.getElementById("mat-code").value,
        material_name: document.getElementById("mat-name").value,
        material_type: document.getElementById("mat-type").value,
        density: parseFloat(document.getElementById("mat-density").value),
        remarks: document.getElementById("mat-remarks").value || null
    };

    try {
        let res;
        if (id) {
            res = await fetch(`${API_BASE}/${id}`, {
                method: "PUT",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(payload)
            });
        } else {
            res = await fetch(API_BASE, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(payload)
            });
        }

        if (!res.ok) throw new Error("API operation failed");
        modal.style.display = "none";
        fetchMaterials();
    } catch (err) {
        console.error(err);
        alert("자재 규격 데이터를 저장하는 데 실패했습니다.");
    }
}

window.openEditMaterialModal = function(m) {
    document.getElementById("material-id").value = m.id;
    document.getElementById("mat-code").value = m.material_code;
    document.getElementById("mat-name").value = m.material_name;
    document.getElementById("mat-type").value = m.material_type;
    document.getElementById("mat-density").value = m.density;
    document.getElementById("mat-remarks").value = m.remarks || "";

    document.getElementById("material-modal-title").innerText = "자재 규격 정보 수정";
    document.getElementById("material-modal").style.display = "flex";
};

window.deleteMaterial = async function(id) {
    if (!confirm("이 자재 물성 규격을 삭제하시겠습니까?\n이미 해당 규격으로 입고된 재고 내역이 존재하면 삭제가 불가합니다.")) return;
    try {
        const res = await fetch(`${API_BASE}/${id}`, { method: "DELETE" });
        if (!res.ok) {
            const data = await res.json();
            throw new Error(data.detail || "오류 발생");
        }
        fetchMaterials();
    } catch (err) {
        console.error(err);
        alert(`물성 데이터 삭제 실패: ${err.message}`);
    }
};