osda_efilling_editor.js

(() => {
  const CATEGORY_MAP = {
    "ใช้สอย": "general",
    "ตอบแทน": "people",
    "วัสดุ": "materials",
    "ครุภัณฑ์": "articles",
    "สาธารณูปโภค": "utilities",
  };
  const CATEGORY_KEYS = Object.values(CATEGORY_MAP);

  let expState = null;
  let formsState = null;
  let fundingState = null;
  let draggedItemInfo = null;

  function getVueInstance(el) {
    return el.__vue__ || (el.__vnode && el.__vnode.context);
  }

  function isValidExpensesModel(obj) {
    return (
      obj &&
      typeof obj === "object" &&
      CATEGORY_KEYS.every((key) => Array.isArray(obj[key]))
    );
  }

  function findActiveTable() {
    let allTables = document.querySelectorAll("table.table-striped");
    return (
      Array.from(allTables).find((t) => t.textContent.includes("หมวดค่า")) ||
      allTables[allTables.length - 1]
    );
  }

  function getRowItemIndex(row) {
    let index = 0;
    let prev = row.previousElementSibling;
    while (prev) {
      if (prev.querySelector("strong")) break;
      if (prev.children.length >= 10) index++;
      prev = prev.previousElementSibling;
    }
    return index;
  }

  function setDropIndicator(targetRow, direction) {
    targetRow.querySelectorAll("td").forEach((td) => {
      td.style.borderTop = direction === "top" ? "2px solid #007bff" : "";
      td.style.borderBottom = direction === "bottom" ? "2px solid #007bff" : "";
    });
  }

  function clearDropIndicator(targetRow) {
    targetRow.querySelectorAll("td").forEach((td) => {
      td.style.borderTop = "";
      td.style.borderBottom = "";
    });
  }

  function ensureConnection() {
    if (!window.location.href.includes("/budget/edit")) {
      expState = null;
      formsState = null;
      return false;
    }

    let table = findActiveTable();
    if (!table) {
      expState = null;
      formsState = null;
      return false;
    }

    if (expState && formsState) {
      let currEl = table;
      let stillValid = false;
      while (currEl && !stillValid) {
        let vm = getVueInstance(currEl);
        if (vm && vm.$data && (vm.$data.forms === formsState || vm.$data.form === formsState)) {
          stillValid = true;
        }
        currEl = currEl.parentElement;
      }

      if (!stillValid) {
        expState = null;
        formsState = null;
      } else {
        return true;
      }
    }

    let currEl = table;
    while (currEl && (!expState || !formsState)) {
      let vm = getVueInstance(currEl);
      if (vm) {
        if (vm.$data && vm.$data.forms) formsState = vm.$data.forms;
        else if (vm.$data && vm.$data.form) formsState = vm.$data.form;

        let queue = [vm.$data, vm.$props];
        let visited = new Set();
        while (queue.length > 0) {
          let curr = queue.shift();
          if (!curr || typeof curr !== "object" || visited.has(curr)) continue;
          visited.add(curr);

          if (isValidExpensesModel(curr)) {
            if (CATEGORY_KEYS.some((key) => curr[key].length > 0)) {
              expState = curr;
              break;
            }
            if (!expState) expState = curr;
          }

          if (curr && typeof curr === "object" && "isNotUse" in curr && "amount" in curr) {
            fundingState = curr;
          } else if (curr && curr.funding && typeof curr.funding === "object" && "isNotUse" in curr.funding) {
            fundingState = curr.funding;
          }

          for (let k in curr) {
            if (k.startsWith("$") || k.startsWith("_")) continue;
            try {
              let val = curr[k];
              if (val && typeof val === "object") queue.push(val);
            } catch (e) {}
          }
        }
      }
      currEl = currEl.parentElement;
    }
    return !!(expState && formsState);
  }

  function handleAutoFillFunding() {
    let inputs = document.querySelectorAll('input[type="number"], input[type="text"]');
    let fundingInput = null;
    
    for (let input of inputs) {
      let expr = null;
      if (input.__vnode && input.__vnode.data && input.__vnode.data.directives) {
        let vmodel = input.__vnode.data.directives.find((d) => d.name === "model");
        if (vmodel) expr = vmodel.expression;
      }
      
      if (!expr && input.__vue__ && input.__vue__.$vnode && input.__vue__.$vnode.data && input.__vue__.$vnode.data.model) {
        expr = input.__vue__.$vnode.data.model.expression;
      }

      if (
        expr &&
        expr.toLowerCase().includes("funding") &&
        (expr.toLowerCase().includes("amount") || expr.toLowerCase().includes("osda"))
      ) {
        fundingInput = input;
        break;
      }
    }

    if (!fundingInput) return;

    let parent = fundingInput.parentElement;
    let existingBtn = parent.querySelector(".osda-autofill-btn");
    let isDisabled = fundingInput.disabled || fundingInput.readOnly;

    if (!existingBtn) {
      let btn = document.createElement("button");
      btn.type = "button";
      btn.className = "btn btn-outline-info btn-sm osda-autofill-btn";
      btn.innerHTML = "✨ ดึงยอดรวมอัตโนมัติ";
      btn.style.marginLeft = "8px";
      btn.style.whiteSpace = "nowrap";

      btn.onclick = () => {
        let grandTotal = 0;
        if (expState) {
          CATEGORY_KEYS.forEach((cat) => {
            if (expState[cat]) {
              expState[cat].forEach((item) => {
                let q = item.qty !== undefined && item.qty !== null && item.qty !== "" ? parseFloat(item.qty) : 1;
                let p = parseFloat(item.amountEach || item.amount || item.price) || 0;
                grandTotal += q * p;
              });
            }
          });
        }

        let domTotal = 0;
        let tables = document.querySelectorAll("table");
        let summaryTable = Array.from(tables).find((t) => t.textContent.includes("จัดสรรแล้ว") || t.textContent.includes("รวมทั้งสิ้น"));
        if (summaryTable) {
          let text = summaryTable.textContent.replace(/,/g, "");
          let matches = text.match(/(\d+\.\d{2})/g);
          if (matches && matches.length > 0) {
            let numbers = matches.map((m) => parseFloat(m));
            domTotal = Math.max(...numbers);
          }
        }

        let finalTotal = expState ? grandTotal : domTotal;

        fundingInput.value = finalTotal;
        fundingInput.dispatchEvent(new Event("input", { bubbles: true }));
        fundingInput.dispatchEvent(new Event("change", { bubbles: true }));

        if (fundingInput.__vue__) {
          fundingInput.__vue__.$emit("input", finalTotal);
          fundingInput.__vue__.$emit("update", finalTotal);
          fundingInput.__vue__.$emit("change", finalTotal);
        }

        if (fundingState) {
          fundingState.amount = finalTotal;
        }

        let oldHtml = btn.innerHTML;
        btn.innerHTML = "รวม " + finalTotal.toLocaleString("en-US", { minimumFractionDigits: 2 }) + " บ.";
        btn.classList.replace("btn-outline-info", "btn-success");
        btn.classList.add("text-white");
        setTimeout(() => {
          btn.innerHTML = oldHtml;
          btn.classList.replace("btn-success", "btn-outline-info");
          btn.classList.remove("text-white");
        }, 2000);
      };

      if (parent.classList.contains("input-group")) {
        let appendDiv = document.createElement("div");
        appendDiv.className = "input-group-append osda-autofill-btn-container";
        btn.style.marginLeft = "0";
        btn.classList.remove("btn-sm");
        appendDiv.appendChild(btn);
        parent.appendChild(appendDiv);
      } else {
        parent.style.display = "flex";
        parent.style.alignItems = "center";
        parent.appendChild(btn);
      }
      existingBtn = btn;
    }

    let container = existingBtn.closest(".osda-autofill-btn-container") || existingBtn;
    container.style.display = isDisabled ? "none" : "";
  }

  function handleDragAndDrop(row, activeCatKey) {
    if (row.dataset.osdaDragEnabled) return;
    
    row.dataset.osdaDragEnabled = "true";
    row.draggable = true;

    let tds = row.children;
    if (tds[0]) {
      tds[0].style.cursor = "grab";
      let handle = document.createElement("span");
      handle.innerHTML = "☰ "; 
      handle.style.color = "#ccc";
      handle.style.marginRight = "8px";
      tds[0].insertBefore(handle, tds[0].firstChild);
    }

    row.addEventListener("dragstart", (e) => {
      let fromIdx = getRowItemIndex(row);
      draggedItemInfo = { catKey: activeCatKey, rowElement: row };
      e.dataTransfer.effectAllowed = "move";
      e.dataTransfer.setData("text/plain", fromIdx);
      setTimeout(() => (row.style.opacity = "0.4"), 0);
    });

    row.addEventListener("dragover", (e) => {
      e.preventDefault();
      if (draggedItemInfo && draggedItemInfo.catKey === activeCatKey && draggedItemInfo.rowElement !== row) {
        let bounding = row.getBoundingClientRect();
        let midpoint = bounding.top + bounding.height / 2;
        if (e.clientY < midpoint) setDropIndicator(row, "top");
        else setDropIndicator(row, "bottom");
      }
    });

    row.addEventListener("dragleave", (e) => {
      clearDropIndicator(row);
    });

    row.addEventListener("drop", (e) => {
      e.preventDefault();
      clearDropIndicator(row);

      if (draggedItemInfo && draggedItemInfo.catKey === activeCatKey && draggedItemInfo.rowElement !== row) {
        let fromIdx = getRowItemIndex(draggedItemInfo.rowElement);
        let toIdx = getRowItemIndex(row);

        let bounding = row.getBoundingClientRect();
        let midpoint = bounding.top + bounding.height / 2;
        if (e.clientY >= midpoint) toIdx++;
        if (fromIdx < toIdx) toIdx--;

        if (fromIdx !== toIdx) {
          let list = expState[activeCatKey];
          let itemToMove = list.splice(fromIdx, 1)[0];
          list.splice(toIdx, 0, itemToMove);
        }
      }
    });

    row.addEventListener("dragend", (e) => {
      row.style.opacity = "1";
      draggedItemInfo = null;
      document.querySelectorAll("tbody tr").forEach((r) => clearDropIndicator(r));
    });
  }

  function handleRowEditing(row, boundItem, activeCatKey, capturedIndex, targetFormState) {
    let tds = row.children;
    let actionCell = tds[tds.length - 1];
    if (actionCell.dataset.osdaEditEnabled || !actionCell.querySelector("button")) return;
    
    actionCell.dataset.osdaEditEnabled = "true";

    let editBtn = document.createElement("button");
    editBtn.type = "button";
    editBtn.className = "btn btn-outline-info btn-sm";
    editBtn.style.marginLeft = "4px";
    editBtn.innerText = "แก้ไข";

    editBtn.onclick = () => {
      let scanRow = row.nextElementSibling;
      let targetAddRow = null;
      while (scanRow) {
        if (scanRow.dataset.osdaAddRow === "true") {
          targetAddRow = scanRow;
          break;
        }
        if (scanRow.querySelector("strong")) break;
        scanRow = scanRow.nextElementSibling;
      }

      if (!targetAddRow) return;

      document.querySelectorAll(".osda-custom-save-btn").forEach((btn) => btn.remove());
      document.querySelectorAll(".osda-native-add-btn").forEach((btn) => (btn.style.display = ""));

      let nativeAddBtn = targetAddRow.querySelector("button");
      let nativeSelect = targetAddRow.querySelector("select");
      if (!nativeAddBtn || !nativeSelect) return;

      if (targetFormState) {
        targetFormState.selected = boundItem.title;
        setTimeout(() => {
          for (let k in boundItem) {
            if (k !== "title" && boundItem[k] !== null && boundItem[k] !== undefined) {
              targetFormState[k] = boundItem[k];
            }
          }
        }, 50);
      }
      
      nativeAddBtn.classList.add("osda-native-add-btn");
      nativeAddBtn.style.display = "none";

      if (nativeSelect && !nativeSelect.dataset.osdaChangeFix) {
        nativeSelect.dataset.osdaChangeFix = "true";
        nativeSelect.addEventListener("change", (e) => {
          if (e.isTrusted && nativeAddBtn.style.display === "none") {
            let targetFormStateLocal = formsState[activeCatKey];
            let snapshot = {};
            for (let k in targetFormStateLocal) {
              if (k !== "selected" && k !== "options" && typeof targetFormStateLocal[k] !== "object") {
                snapshot[k] = targetFormStateLocal[k];
              }
            }
            setTimeout(() => {
              for (let k in snapshot) {
                if (snapshot[k] !== null && snapshot[k] !== undefined) {
                  targetFormStateLocal[k] = snapshot[k];
                }
              }
            }, 50);
          }
        }, true);
      }

      let saveBtn = document.createElement("button");
      saveBtn.type = "button";
      saveBtn.className = "btn btn-success btn-sm osda-custom-save-btn";
      saveBtn.style.marginLeft = "8px";
      saveBtn.innerText = "บันทึกการแก้ไข";

      let cancelBtn = document.createElement("button");
      cancelBtn.type = "button";
      cancelBtn.className = "btn btn-secondary btn-sm osda-custom-save-btn";
      cancelBtn.style.marginLeft = "4px";
      cancelBtn.innerText = "ยกเลิก";

      saveBtn.onclick = () => {
        let updatedItem = JSON.parse(JSON.stringify(boundItem));

        if (targetFormState) {
          updatedItem.title = targetFormState.selected;
          for (let k in targetFormState) {
            if (k !== "selected" && k !== "options" && typeof targetFormState[k] !== "object" && targetFormState[k] !== null) {
              updatedItem[k] = targetFormState[k];
            }
          }
        }

        expState[activeCatKey].splice(capturedIndex, 1, updatedItem);

        saveBtn.remove();
        cancelBtn.remove();
        nativeAddBtn.style.display = "";
        if (targetFormState) targetFormState.selected = "";
      };

      cancelBtn.onclick = () => {
        saveBtn.remove();
        cancelBtn.remove();
        nativeAddBtn.style.display = "";
        if (targetFormState) targetFormState.selected = "";
      };

      nativeAddBtn.parentNode.appendChild(saveBtn);
      nativeAddBtn.parentNode.appendChild(cancelBtn);

      targetAddRow.scrollIntoView({ behavior: "smooth", block: "center" });
    };

    actionCell.appendChild(editBtn);
  }

  function renderOperations() {
    if (!ensureConnection()) return;

    let table = findActiveTable();
    if (!table) return;

    handleAutoFillFunding();

    let rows = table.querySelectorAll("tbody tr");
    let activeCatKey = null;
    let itemIndexCounter = 0;

    rows.forEach((row) => {
      if (row.childElementCount === 1 && row.querySelector("strong")) {
        let cellText = row.textContent || "";
        
        activeCatKey = null;
        for (let thWord in CATEGORY_MAP) {
          if (cellText.includes(thWord)) {
            activeCatKey = CATEGORY_MAP[thWord];
            break;
          }
        }
        
        if (activeCatKey) {
          itemIndexCounter = 0;
        }
        return;
      }

      if (row.childElementCount === 1 && row.querySelector("select") && row.querySelector("button")) {
        if (!row.dataset.osdaAddRow) row.dataset.osdaAddRow = "true";
        return;
      }

      let tds = row.children;
      if (tds.length >= 10 && activeCatKey) {
        let boundItem = expState[activeCatKey] ? expState[activeCatKey][itemIndexCounter] : null;
        let capturedIndex = itemIndexCounter;
        itemIndexCounter++;

        if (!boundItem) return;

        let targetFormState = formsState[activeCatKey];

        handleRowEditing(row, boundItem, activeCatKey, capturedIndex, targetFormState);
        handleDragAndDrop(row, activeCatKey);
      }
    });
  }

  setInterval(renderOperations, 300);
})();