From 5bbf39488f6302d11128f6303af82d0e5025f09a Mon Sep 17 00:00:00 2001 From: BFLOWS Date: Thu, 23 Apr 2026 15:15:18 +0200 Subject: [PATCH] feat(ar1-admin): variabili cliccabili nel dialog modifica testo email I 7 Tag delle variabili disponibili (company_name, company_piva, ar1_form_url, expires_at, days_to_expiry, variant, signer_name) sono ora CLICCABILI dentro il dialog di modifica testo. Click inserisce {{variabile}} nel campo attivo al punto del cursore (o in coda se focus perso). Cambiamenti: - Stato nuovo: activeEmailField ('subject' | 'body_html' | 'body_text'), inizialmente 'body_html' - 3 ref: subjectInputRef, bodyHtmlInputRef, bodyTextInputRef - Funzione insertVariable(varName): 1. Legge editEmailData[activeEmailField] 2. Calcola posizione cursore via ref.getInput().selectionStart (fallback: coda) 3. Inserisce '{{' + varName + '}}' al cursore 4. Riposiziona cursor dopo il token inserito (setTimeout 0 per React re-render) - 3 campi Input wrappati con ref + onFocus={() => setActiveEmailField(...)} - Box variabili spostato DENTRO il dialog (prima era nel TabPanel, poco scopribile). Mostra live quale campo e attivo: 'inserite in: Oggetto / Corpo HTML / Corpo testo' - Tag stile severity=info + cursor:pointer + userSelect:none per feedback visuale - Box variabili nel tab ora e un semplice Message informativo (la funzione e nel dialog) UX: l'utente clicca dentro Oggetto, poi clicca {{company_name}}, vede il token comparire al cursore. Se clicca Corpo HTML, poi un'altra variabile, va in quel campo. Nessun drag&drop, nessuna complicazione. --- src/modules/ar1/pages/Ar1AdminConfig.js | 102 +++++++++++++++++++++--- 1 file changed, 91 insertions(+), 11 deletions(-) diff --git a/src/modules/ar1/pages/Ar1AdminConfig.js b/src/modules/ar1/pages/Ar1AdminConfig.js index 2580c97..77c7465 100644 --- a/src/modules/ar1/pages/Ar1AdminConfig.js +++ b/src/modules/ar1/pages/Ar1AdminConfig.js @@ -59,7 +59,7 @@ const PEC_KIND_OPTIONS = [ ]; /** - * Ar1AdminConfig — configurazione AR1 per superadmin. (build 1776949690) + * Ar1AdminConfig — configurazione AR1 per superadmin. (build 1776950093) * URL: /ar1-admin * * 5 sezioni (TabView): @@ -112,6 +112,51 @@ const Ar1AdminConfig = () => { const [editEmailData, setEditEmailData] = useState(null); const [previewHtml, setPreviewHtml] = useState(null); const [previewSubject, setPreviewSubject] = useState(null); + // Tracking campo attivo per inserimento variabili con click + const [activeEmailField, setActiveEmailField] = useState('body_html'); // 'subject' | 'body_html' | 'body_text' + const subjectInputRef = useRef(null); + const bodyHtmlInputRef = useRef(null); + const bodyTextInputRef = useRef(null); + + // Inserisce {{variabile}} nel campo attivo, al cursore se possibile + const insertVariable = (varName) => { + if (!editEmailData) return; + const token = '{{' + varName + '}}'; + const fieldName = activeEmailField; + const refMap = { subject: subjectInputRef, body_html: bodyHtmlInputRef, body_text: bodyTextInputRef }; + const ref = refMap[fieldName]; + const currentValue = editEmailData[fieldName] || ''; + + // InputText/InputTextarea PrimeReact espone l'elemento nativo via .getElement() o .current.element in v10+ + // fallback sicuro: appendo in coda + let insertAt = currentValue.length; + let el = null; + try { + el = ref?.current?.getInput ? ref.current.getInput() : (ref?.current?.element || ref?.current); + if (el && typeof el.selectionStart === 'number') { + insertAt = el.selectionStart; + } + } catch (e) { + // ignore, insertAt rimane a length + } + + const before = currentValue.slice(0, insertAt); + const after = currentValue.slice(insertAt); + const newValue = before + token + after; + + setEditEmailData({ ...editEmailData, [fieldName]: newValue }); + + // riposiziono focus e cursor dopo il token appena inserito + setTimeout(() => { + try { + if (el && typeof el.setSelectionRange === 'function') { + el.focus(); + const pos = insertAt + token.length; + el.setSelectionRange(pos, pos); + } + } catch (e) { /* ignore */ } + }, 0); + }; // ---- load all ---- const loadTemplates = () => { @@ -655,12 +700,7 @@ const Ar1AdminConfig = () => { - {availableVariables.length > 0 && ( -
- Variabili disponibili (usa nel testo come {'{{nome_variabile}}'}):
- {availableVariables.map(v => )} -
- )} + ( @@ -859,21 +899,61 @@ const Ar1AdminConfig = () => { > {editEmailData && (
- + + + {availableVariables.length > 0 && ( +
+ Variabili disponibili + + (inserite in: {activeEmailField === 'subject' ? 'Oggetto' : activeEmailField === 'body_html' ? 'Corpo HTML' : 'Corpo testo'}) + +
+ {availableVariables.map(v => ( + insertVariable(v)} + /> + ))} +
+
+ )}
- setEditEmailData({ ...editEmailData, subject: e.target.value })} style={{ width: '100%' }} /> + setEditEmailData({ ...editEmailData, subject: e.target.value })} + onFocus={() => setActiveEmailField('subject')} + style={{ width: '100%' }} + />
- setEditEmailData({ ...editEmailData, body_html: e.target.value })} rows={10} style={{ width: '100%', fontFamily: 'monospace', fontSize: 12 }} /> + setEditEmailData({ ...editEmailData, body_html: e.target.value })} + onFocus={() => setActiveEmailField('body_html')} + rows={10} + style={{ width: '100%', fontFamily: 'monospace', fontSize: 12 }} + />
- setEditEmailData({ ...editEmailData, body_text: e.target.value })} rows={5} style={{ width: '100%', fontSize: 13 }} /> + setEditEmailData({ ...editEmailData, body_text: e.target.value })} + onFocus={() => setActiveEmailField('body_text')} + rows={5} + style={{ width: '100%', fontSize: 13 }} + /> Usato dai client email che non supportano HTML.