@bobfrankston/rmfmail 1.2.223 → 1.2.224

package/client/app.bundle.js

@@ -306,8 +306,8 @@ function hasBccHistoryTo(email) {
 function listContacts(query, page = 1, pageSize = 100) {
   return ipc().listContacts(query, page, pageSize);
 }
-function upsertContact(name, email) {
-  return ipc().upsertContact(name, email);
+function upsertContact(name, email, fields) {
+  return ipc().upsertContact(name, email, fields);
 }
 function deleteContact(email) {
   return ipc().deleteContact(email);
@@ -1127,13 +1127,13 @@ async function openAddressBook(prefillSearch) {
                 <span class="ab-actions"></span>
             </div>` + items.map((c) => `
             <div class="ab-row" data-email="${escapeAttr(c.email)}">
-                <span class="ab-name">${escapeHtml(c.name || "")}</span>
+                <span class="ab-name" title="${escapeAttr(cardSummary(c))}">${escapeHtml(c.name || "")}${cardSummary(c) ? ' <span class="ab-hascard" aria-hidden="true">\u2022</span>' : ""}</span>
                 <span class="ab-email">${escapeHtml(c.email)}</span>
                 <span class="ab-source">${escapeHtml(c.source)}</span>
                 <span class="ab-count-cell">${c.useCount || 0}</span>
                 <span class="ab-last">${fmtDate(c.lastUsed)}</span>
                 <span class="ab-actions">
-                    <button type="button" class="ab-edit" title="Edit name">\u270E</button>
+                    <button type="button" class="ab-edit" title="Edit contact">\u270E</button>
                     <button type="button" class="ab-del" title="Delete">\u{1F5D1}</button>
                     <button type="button" class="ab-mail" title="Compose to">\u2709</button>
                 </span>
@@ -1146,38 +1146,76 @@ async function openAddressBook(prefillSearch) {
       row.querySelector(".ab-mail")?.addEventListener("click", () => composeTo(c));
     });
   };
-  const beginEdit = (row, c) => {
+  const beginEdit = (_row, c) => {
     if (editingEmail === c.email)
       return;
     editingEmail = c.email;
-    const nameSpan = row.querySelector(".ab-name");
-    const original = c.name || "";
-    nameSpan.innerHTML = `<input type="text" value="${escapeAttr(original)}" class="ab-name-input">`;
-    const inp = nameSpan.querySelector("input");
-    inp.focus();
-    inp.select();
-    const commit = async () => {
-      const newName = inp.value.trim();
-      if (newName !== original) {
-        try {
-          await upsertContact(newName, c.email);
-          c.name = newName;
-        } catch (e) {
-          alert(`Update failed: ${e?.message || e}`);
-        }
-      }
-      nameSpan.textContent = c.name || "";
+    const back = document.createElement("div");
+    back.className = "mailx-modal-backdrop";
+    const card = document.createElement("div");
+    card.className = "mailx-modal";
+    card.innerHTML = `
+            <div class="mailx-modal-title">
+                <span class="mailx-modal-title-text">Edit contact</span>
+                <button type="button" class="mailx-modal-close" data-role="x" title="Close (Esc)" aria-label="Close">&times;</button>
+            </div>
+            <div class="ab-card">
+                <label class="ab-field"><span>Name</span>
+                    <input type="text" class="mailx-modal-input" data-field="name" value="${escapeAttr(c.name || "")}"></label>
+                <label class="ab-field"><span>Email</span>
+                    <input type="email" class="mailx-modal-input" value="${escapeAttr(c.email)}" disabled
+                           title="The address identifies the contact \u2014 delete and re-add to change it"></label>
+                ${CONTACT_FIELDS.map((f) => `
+                <label class="ab-field"><span>${escapeHtml(f.label)}</span>
+                    ${f.multiline ? `<textarea class="mailx-modal-input" rows="2" data-field="${f.key}">${escapeHtml(c[f.key] || "")}</textarea>` : `<input type="${f.type || "text"}" class="mailx-modal-input" data-field="${f.key}"
+                                  value="${escapeAttr(c[f.key] || "")}"
+                                  ${f.placeholder ? `placeholder="${escapeAttr(f.placeholder)}"` : ""}>`}
+                </label>`).join("")}
+            </div>
+            <div class="mailx-modal-buttons">
+                <span class="mailx-modal-spacer"></span>
+                <button type="button" class="mailx-modal-btn" data-role="cancel">Cancel</button>
+                <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" data-role="save">Save</button>
+            </div>`;
+    back.appendChild(card);
+    document.body.appendChild(back);
+    card.querySelector('[data-field="name"]')?.focus();
+    const shut = () => {
+      back.remove();
+      document.removeEventListener("keydown", onCardKey, true);
       editingEmail = null;
     };
-    inp.addEventListener("blur", commit);
-    inp.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        inp.blur();
-      } else if (e.key === "Escape") {
+    const onCardKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
         e.preventDefault();
-        inp.value = original;
-        inp.blur();
+        shut();
+      }
+    };
+    document.addEventListener("keydown", onCardKey, true);
+    card.querySelector('[data-role="x"]')?.addEventListener("click", shut);
+    card.querySelector('[data-role="cancel"]')?.addEventListener("click", shut);
+    back.addEventListener("mousedown", (e) => {
+      if (e.target === back)
+        shut();
+    });
+    card.querySelector('[data-role="save"]')?.addEventListener("click", async () => {
+      const val = (k) => card.querySelector(`[data-field="${k}"]`)?.value.trim() ?? "";
+      const fields = {};
+      for (const f of CONTACT_FIELDS)
+        fields[f.key] = val(f.key);
+      const newName = val("name");
+      const bd = fields.birthday;
+      if (bd && !/^(\d{4}|-)-\d{2}-\d{2}$/.test(bd)) {
+        alert(`Birthday must be YYYY-MM-DD, or --MM-DD when the year is unknown. Got "${bd}".`);
+        return;
+      }
+      try {
+        await upsertContact(newName, c.email, fields);
+        shut();
+        await reload();
+      } catch (e) {
+        alert(`Update failed: ${e?.message || e}`);
       }
     });
   };
@@ -1262,17 +1300,29 @@ async function openAddressBook(prefillSearch) {
   });
   await reload();
 }
+function cardSummary(c) {
+  return CONTACT_FIELDS.map((f) => ({ label: f.label, value: (c[f.key] || "").trim() })).filter((x) => x.value).map((x) => `${x.label}: ${x.value.replace(/\s+/g, " ")}`).join("\n");
+}
 function escapeHtml(s) {
   return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
 function escapeAttr(s) {
   return escapeHtml(s);
 }
-var isOpen;
+var CONTACT_FIELDS, isOpen;
 var init_address_book = __esm({
   "client/components/address-book.js"() {
     "use strict";
     init_api_client();
+    CONTACT_FIELDS = [
+      { key: "organization", label: "Company" },
+      { key: "title", label: "Job title" },
+      { key: "phone", label: "Phone", type: "tel" },
+      { key: "website", label: "Website", type: "url", placeholder: "https://" },
+      { key: "birthday", label: "Birthday", placeholder: "YYYY-MM-DD or --MM-DD" },
+      { key: "address", label: "Address", multiline: true },
+      { key: "notes", label: "Notes", multiline: true }
+    ];
     isOpen = false;
   }
 });