nidus/web/static/contacts.js

"use strict";
// Contact form behavior: adding/removing repeatable phone, email, and
// address rows, plus a live preview when choosing a new photo.
(function initContactForm() {
    document.querySelectorAll(".add-row-btn").forEach((btn) => {
        btn.addEventListener("click", () => {
            const containerId = btn.dataset.addTarget;
            if (!containerId) {
                return;
            }
            const container = document.getElementById(containerId);
            if (!container) {
                return;
            }
            const rows = container.querySelectorAll(".form-row");
            const lastRow = rows[rows.length - 1];
            if (!lastRow) {
                return;
            }
            // Clone the last row rather than keeping a separate <template>,
            // so the JS-added row always matches whatever markup the server
            // rendered (including the TYPE select's options).
            const newRow = lastRow.cloneNode(true);
            newRow.querySelectorAll("input").forEach((el) => {
                el.value = "";
            });
            newRow.querySelectorAll("select").forEach((el) => {
                el.selectedIndex = 0;
            });
            container.appendChild(newRow);
        });
    });
    document.addEventListener("click", (e) => {
        const target = e.target;
        if (!target.classList.contains("remove-row-btn")) {
            return;
        }
        const row = target.closest(".form-row");
        const container = row?.parentElement;
        if (!row || !container) {
            return;
        }
        const rows = container.querySelectorAll(".form-row");
        if (rows.length > 1) {
            row.remove();
            return;
        }
        // Keep at least one row per section — just clear it instead of
        // removing it entirely.
        row.querySelectorAll("input").forEach((el) => {
            el.value = "";
        });
        row.querySelectorAll("select").forEach((el) => {
            el.selectedIndex = 0;
        });
    });
    const photoInput = document.getElementById("photo-input");
    const photoPreview = document.getElementById("photo-preview");
    const currentAvatar = document.getElementById("current-avatar");
    const removePhotoCheckbox = document.getElementById("remove-photo");
    photoInput?.addEventListener("change", () => {
        const file = photoInput.files?.[0];
        if (!file || !photoPreview) {
            return;
        }
        const reader = new FileReader();
        reader.onload = () => {
            photoPreview.src = reader.result;
            photoPreview.classList.remove("hidden");
            currentAvatar?.classList.add("hidden");
        };
        reader.readAsDataURL(file);
        if (removePhotoCheckbox) {
            removePhotoCheckbox.checked = false;
        }
    });
})();