Add number field to add-contact modal + trim number before submit

- show caller number as readonly field in modal
- strip whitespace from number before API call
- omit number from payload if empty
This commit is contained in:
jp
2026-08-13 18:58:32 +01:00
parent f2f8185c20
commit 20cb36e33b

View File

@ -124,9 +124,10 @@ export default function MessagesPage() {
<div className="modal-bg open" onClick={() => setAddingId(null)}> <div className="modal-bg open" onClick={() => setAddingId(null)}>
<div className="modal" onClick={(e) => e.stopPropagation()}> <div className="modal" onClick={(e) => e.stopPropagation()}>
<h3>Add contact</h3> <h3>Add contact</h3>
<form onSubmit={(e) => { e.preventDefault(); if (!addName.trim()) return; const target = data?.messages?.find((x: any) => x.id === addingId); const targetNum = target ? (target.callerid || "").replace(/[^\d+]/g, "") : ""; addContact.mutate({ name: addName.trim(), number: targetNum, email: addEmail.trim() || null }); }}> <form onSubmit={(e) => { e.preventDefault(); if (!addName.trim()) return; const target = data?.messages?.find((x: any) => x.id === addingId); const raw = target ? (target.callerid || "") : ""; const targetNum = raw.replace(/[^\d+]/g, "").trim(); addContact.mutate({ name: addName.trim(), number: targetNum || undefined, email: addEmail.trim() || null }); }}>
<label>Name</label> <label>Name</label>
<input value={addName} onChange={(e) => setAddName(e.target.value)} required /> <input value={addName} onChange={(e) => setAddName(e.target.value)} required />
{(() => { const target = data?.messages?.find((x: any) => x.id === addingId); const raw = target ? (target.callerid || "") : ""; const num = raw.replace(/[^\d+]/g, "").trim(); return num ? <><label>Number</label><input value={num} readOnly /></> : null; })()}
<label>Email</label> <label>Email</label>
<input type="email" value={addEmail} onChange={(e) => setAddEmail(e.target.value)} /> <input type="email" value={addEmail} onChange={(e) => setAddEmail(e.target.value)} />
<div className="row"> <div className="row">