cms.techvanguard.vn/views/admin/submissions/partials/submission-manager-script.ejs

<script>
(function () {
  const config = window.submissionManagerConfig || {};
  const sources = config.sources || ["home", "request", "contact"];
  const statuses = config.statuses || [];
  const statusesBySource = config.statusesBySource || {};
  const hiddenFieldsBySource = config.hiddenFieldsBySource || {};
  const apiBySource = config.apiBySource || {};
  const itemLabelBySource = config.itemLabelBySource || {};
  const rows = document.getElementById("submissionRows");
  const searchInput = document.getElementById("submissionSearch");
  const statusInput = document.getElementById("submissionStatus");
  const startDateInput = document.getElementById("submissionStartDate");
  const endDateInput = document.getElementById("submissionEndDate");
  const pageSizeInput = document.getElementById("submissionPageSize");
  const summary = document.getElementById("submissionPaginationSummary");
  const prevButton = document.getElementById("submissionPrevPage");
  const nextButton = document.getElementById("submissionNextPage");
  const saveButton = document.getElementById("submissionSaveDetail");
  const detailModalNode = document.getElementById("submissionDetailModal");
  if (detailModalNode && detailModalNode.parentElement !== document.body) {
    document.body.appendChild(detailModalNode);
  }
  const detailModal = detailModalNode ? new bootstrap.Modal(detailModalNode) : null;
  const state = {
    source: config.initialSource || sources[0] || "home",
    page: 1,
    totalPages: 1,
    limit: parseInt(pageSizeInput?.value, 10) || 20,
  };

  applyFieldVisibility();
  renderStatusFilterOptions();

  document.querySelectorAll("[data-submission-tab]").forEach((tab) => {
    tab.addEventListener("click", function () {
      document.querySelectorAll("[data-submission-tab]").forEach((item) => item.classList.remove("active"));
      tab.classList.add("active");
      state.source = tab.dataset.submissionTab;
      state.page = 1;
      updateUrlTab(state.source);
      applyFieldVisibility();
      renderStatusFilterOptions();
      loadSubmissions();
    });
  });

  document.getElementById("submissionApplyFilters")?.addEventListener("click", function () {
    state.page = 1;
    loadSubmissions();
  });

  document.getElementById("submissionClearFilters")?.addEventListener("click", function () {
    if (searchInput) searchInput.value = "";
    if (statusInput) statusInput.value = "";
    if (startDateInput) startDateInput.value = "";
    if (endDateInput) endDateInput.value = "";
    state.page = 1;
    loadSubmissions();
  });

  searchInput?.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
      event.preventDefault();
      state.page = 1;
      loadSubmissions();
    }
  });

  prevButton?.addEventListener("click", function () {
    if (state.page > 1) {
      state.page -= 1;
      loadSubmissions();
    }
  });

  nextButton?.addEventListener("click", function () {
    if (state.page < state.totalPages) {
      state.page += 1;
      loadSubmissions();
    }
  });

  pageSizeInput?.addEventListener("change", function () {
    state.limit = parseInt(pageSizeInput.value, 10) || 20;
    state.page = 1;
    loadSubmissions();
  });

  saveButton?.addEventListener("click", saveDetail);

  async function loadSubmissions() {
    if (!rows) return;
    rows.innerHTML = `<tr><td colspan="${getTableColumnCount()}" class="text-center text-muted py-5">Loading submissions...</td></tr>`;
    const params = new URLSearchParams({
      source: state.source,
      page: String(state.page),
      limit: String(state.limit),
    });
    if (searchInput?.value) params.set("search", searchInput.value);
    if (statusInput?.value) params.set("status", statusInput.value);
    if (startDateInput?.value) params.set("startDate", startDateInput.value);
    if (endDateInput?.value) params.set("endDate", endDateInput.value);

    try {
      const response = await fetch(`${getListUrl()}?${params.toString()}`);
      const result = await response.json();
      if (!response.ok || !result.success) {
        throw new Error(result.error || "Unable to load submissions");
      }
      state.totalPages = result.pagination.totalPages || 1;
      renderRows(result.data || []);
      renderPagination(result.pagination);
    } catch (error) {
      rows.innerHTML = `<tr><td colspan="${getTableColumnCount()}" class="text-center text-danger py-5">${escapeHtml(error.message)}</td></tr>`;
    }
  }

  function renderRows(items) {
    if (!items.length) {
      rows.innerHTML = `<tr><td colspan="${getTableColumnCount()}" class="text-center text-muted py-5">No submissions found</td></tr>`;
      return;
    }

    rows.innerHTML = items.map((item) => `
      <tr>
        <td>${formatDate(item.createdAt)}</td>
        ${isNameHidden() ? "" : `<td>${escapeHtml(item.name || "-")}</td>`}
        ${isEmailHidden() ? "" : `<td><a href="mailto:${escapeHtml(item.email || "")}">${escapeHtml(item.email || "-")}</a></td>`}
        ${isPhoneHidden() ? "" : `<td>${escapeHtml(item.phone || "-")}</td>`}
        <td><span class="badge ${statusClass(item.status)} rounded-pill">${escapeHtml((item.status || "").replace("_", " "))}</span></td>
        <td class="text-end">
          <button type="button" class="btn btn-sm btn-outline-primary" data-view-submission="${item._id}">
            <i class="fas fa-eye me-1"></i>View
          </button>
        </td>
      </tr>
    `).join("");

    rows.querySelectorAll("[data-view-submission]").forEach((button) => {
      button.addEventListener("click", function () {
        openDetail(button.dataset.viewSubmission);
      });
    });
  }

  function renderPagination(pagination) {
    if (summary) {
      summary.textContent = `Page ${pagination.page} of ${pagination.totalPages || 1} - ${pagination.total} ${getItemLabel()}`;
    }
    if (prevButton) prevButton.disabled = pagination.page <= 1;
    if (nextButton) nextButton.disabled = pagination.page >= (pagination.totalPages || 1);
  }

  async function openDetail(id) {
    try {
      const response = await fetch(`${getDetailBaseUrl()}/${id}`);
      const result = await response.json();
      if (!response.ok || !result.success) {
        throw new Error(result.error || "Unable to load submission");
      }
      fillDetail(result.data);
      detailModal?.show();
    } catch (error) {
      alert(error.message);
    }
  }

  function fillDetail(item) {
    setText("submissionDetailMeta", `${item.source || ""} - ${formatDate(item.createdAt)}`);
    setValue("submissionDetailId", item._id);
    renderDetailStatusOptions(item.source, item.status);
    setValue("submissionDetailNote", item.internalNote || "");

    const email = document.getElementById("submissionDetailEmail");
    applyFieldVisibility(item.source);

    if (item.source === "partnership") {
      setText("submissionDetailNameLabel", getPayloadLabel("firstName", item.source));
      setText("submissionDetailName", item.payload?.firstName || "-");
      if (!isEmailHidden(item.source)) {
        setText("submissionDetailEmailLabel", getPayloadLabel("lastName", item.source));
        if (email) {
          email.textContent = item.payload?.lastName || "-";
          email.href = "#";
        }
      }
      if (!isPhoneHidden(item.source)) {
        setText("submissionDetailPhoneLabel", getPayloadLabel("organization", item.source));
        setText("submissionDetailPhone", item.payload?.organization || "-");
      }
      setText("submissionDetailPageLabel", getPayloadLabel("partnershipType", item.source));
      setText("submissionDetailPage", item.payload?.partnershipType || "-");
    } else {
      setText("submissionDetailNameLabel", "Name");
      setText("submissionDetailName", item.name || "-");
      setText("submissionDetailEmailLabel", "Email");
      if (email) {
        email.textContent = item.email || "-";
        email.href = item.email ? `mailto:${item.email}` : "#";
      }
      setText("submissionDetailPhoneLabel", "Phone");
      setText("submissionDetailPhone", item.phone || "-");
      setText("submissionDetailPageLabel", "Page");
      setText("submissionDetailPage", item.pageUrl || "-");
    }

    const payload = document.getElementById("submissionPayload");
    if (payload) {
      payload.innerHTML = getPayloadEntries(item).map(([key, value]) => `
        <div class="row py-1 border-bottom">
          <div class="col-md-4 text-muted">${escapeHtml(getPayloadLabel(key, item.source))}</div>
          <div class="col-md-8">${escapeHtml(formatValue(value))}</div>
        </div>
      `).join("") || '<span class="text-muted">No payload values</span>';
    }
  }

  function getTableColumnCount() {
    return 6 - (isNameHidden() ? 1 : 0) - (isEmailHidden() ? 1 : 0) - (isPhoneHidden() ? 1 : 0);
  }

  function applyFieldVisibility(source) {
    const nameHidden = isNameHidden(source);
    const emailHidden = isEmailHidden(source);
    const phoneHidden = isPhoneHidden(source);
    document.querySelectorAll("[data-submission-name-column], [data-submission-name-field]").forEach((node) => {
      node.classList.toggle("d-none", nameHidden);
    });
    document.querySelectorAll("[data-submission-email-column], [data-submission-email-field]").forEach((node) => {
      node.classList.toggle("d-none", emailHidden);
    });
    document.querySelectorAll("[data-submission-phone-column], [data-submission-phone-field]").forEach((node) => {
      node.classList.toggle("d-none", phoneHidden);
    });
  }

  function isNameHidden(source) {
    return Boolean(hiddenFieldsBySource[source || state.source]?.name);
  }

  function isEmailHidden(source) {
    return Boolean(hiddenFieldsBySource[source || state.source]?.email);
  }

  function isPhoneHidden(source) {
    return Boolean(hiddenFieldsBySource[source || state.source]?.phone);
  }

  function getStatuses(source) {
    return statusesBySource[source || state.source] || statuses;
  }

  function renderStatusFilterOptions() {
    if (!statusInput) return;
    const previousValue = statusInput.value;
    statusInput.innerHTML = '<option value="">All statuses</option>';
    getStatuses().forEach((status) => {
      const option = document.createElement("option");
      option.value = status;
      option.textContent = status.replace("_", " ");
      statusInput.appendChild(option);
    });
    statusInput.value = getStatuses().includes(previousValue) ? previousValue : "";
  }

  function renderDetailStatusOptions(source, selectedStatus) {
    const node = document.getElementById("submissionDetailStatus");
    if (!node) return;
    node.innerHTML = "";
    getStatuses(source).forEach((status) => {
      const option = document.createElement("option");
      option.value = status;
      option.textContent = status.replace("_", " ");
      node.appendChild(option);
    });
    node.value = selectedStatus || getStatuses(source)[0] || "";
  }

  function getListUrl() {
    return apiBySource[state.source]?.list || "/admin/submissions/data";
  }

  function getDetailBaseUrl() {
    return apiBySource[state.source]?.detail || "/admin/submissions";
  }

  function getUpdateBaseUrl() {
    return apiBySource[state.source]?.update || "/admin/submissions";
  }

  function getItemLabel() {
    return itemLabelBySource[state.source] || "submissions";
  }

  function updateUrlTab(tabKey) {
    if (!config.urlTabParam || !tabKey) return;
    const url = new URL(window.location.href);
    url.searchParams.set("tab", tabKey);
    window.history.replaceState({}, "", `${url.pathname}?${url.searchParams.toString()}`);
  }

  async function saveDetail() {
    const id = document.getElementById("submissionDetailId")?.value;
    if (!id) return;
    try {
      const response = await fetch(`${getUpdateBaseUrl()}/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          status: document.getElementById("submissionDetailStatus")?.value,
          internalNote: document.getElementById("submissionDetailNote")?.value || "",
        }),
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        throw new Error(result.error || "Unable to update submission");
      }
      detailModal?.hide();
      loadSubmissions();
    } catch (error) {
      alert(error.message);
    }
  }

  function setText(id, value) {
    const node = document.getElementById(id);
    if (node) node.textContent = value;
  }

  function setValue(id, value) {
    const node = document.getElementById(id);
    if (node) node.value = value;
  }

  function formatDate(value) {
    if (!value) return "-";
    return new Date(value).toLocaleString();
  }

  function formatKey(value) {
    return String(value || "").replace(/_/g, " ").replace(/([A-Z])/g, " $1").trim();
  }

  function getPayloadEntries(item) {
    const payload = item.payload || {};
    if (item.source !== "partnership") {
      return Object.entries(payload);
    }

    const orderedKeys = getPartnershipFieldOrder();
    return orderedKeys
      .filter((key) => Object.prototype.hasOwnProperty.call(payload, key))
      .map((key) => [key, payload[key]]);
  }

  function getPayloadLabel(key, source) {
    if (source === "partnership") {
      const field = getPartnershipFields().find((item) => item.id === key);
      if (field?.label) {
        return field.label;
      }
      const fallback = {
        firstName: "First Name",
        lastName: "Last Name",
        organization: "Organization Name",
        partnershipType: "Partnership Type",
        message: "Message",
      };
      return fallback[key] || formatKey(key);
    }

    return formatKey(key);
  }

  function getPartnershipFieldOrder() {
    const fields = getPartnershipFields();
    if (fields.length > 0) {
      return fields.map((field) => field.id);
    }
    return ["firstName", "lastName", "organization", "partnershipType", "message"];
  }

  function getPartnershipFields() {
    return Array.isArray(window.partnershipsPageData?.inquiryForm?.fields)
      ? window.partnershipsPageData.inquiryForm.fields
      : [];
  }

  function formatValue(value) {
    if (Array.isArray(value)) return value.join(", ");
    if (value && typeof value === "object") return JSON.stringify(value);
    if (typeof value === "boolean") return value ? "Yes" : "No";
    return value == null || value === "" ? "-" : String(value);
  }

  function statusClass(status) {
    if (status === "new") return "bg-warning text-dark";
    if (status === "contacted") return "bg-info text-dark";
    if (status === "info_provided") return "bg-success";
    if (status === "closed") return "bg-secondary";
    if (status === "subscribed") return "bg-success";
    if (status === "unsubscribed") return "bg-secondary";
    return "bg-light text-dark";
  }

  function escapeHtml(value) {
    return String(value || "")
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  loadSubmissions();
})();
</script>