maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(messages): add recipient profile preview card on compose form

Browse Source
This commit is contained in:
Maciej Pienczyn 2026-03-11 17:30:10 +01:00
parent d64447627a
commit ce4d659279
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
templates/messages/compose.html
View File

@ -328,6 +328,15 @@
</div> </div>
<button type="button" class="selected-recipient-remove" onclick="clearRecipient()" title="Zmien odbiorcę">✕</button> <button type="button" class="selected-recipient-remove" onclick="clearRecipient()" title="Zmien odbiorcę">✕</button>
</div> </div>
<div id="recipient-preview" style="display: none; margin-top: 8px; padding: 12px 16px; background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--border-color);">
<div style="display: flex; align-items: center; gap: 12px;">
<div id="preview-avatar" style="width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px;"></div>
<div>
<div id="preview-name" style="font-weight: 600; color: var(--text-primary);"></div>
<div id="preview-company" style="font-size: var(--font-size-sm); color: var(--text-secondary);"></div>
</div>
</div>
</div>
<div id="recipient-autocomplete" class="recipient-autocomplete"> <div id="recipient-autocomplete" class="recipient-autocomplete">
<input type="text" id="recipient_search" placeholder="Wpisz imie, nazwisko lub email..." autocomplete="off"> <input type="text" id="recipient_search" placeholder="Wpisz imie, nazwisko lub email..." autocomplete="off">
<div id="autocomplete-results" class="autocomplete-results"></div> <div id="autocomplete-results" class="autocomplete-results"></div>
@ -369,7 +378,7 @@
(function() { (function() {
var users = [ var users = [
{% for user in users %} {% for user in users %}
{id: {{ user.id }}, name: {{ (user.name or user.email.split('@')[0]) | tojson }}, email: {{ user.email | tojson }}, showEmail: {{ 'true' if user.privacy_show_email != False else 'false' }}}{{ ',' if not loop.last }} {id: {{ user.id }}, name: {{ (user.name or user.email.split('@')[0]) | tojson }}, email: {{ user.email | tojson }}, showEmail: {{ 'true' if user.privacy_show_email != False else 'false' }}, companyName: {{ (user._company_name or '') | tojson }}, companySlug: {{ (user._company_slug or '') | tojson }}, position: {{ (user._position or '') | tojson }}}{{ ',' if not loop.last }}
{% endfor %} {% endfor %}
]; ];
@ -418,6 +427,26 @@
autocompleteDiv.style.display = 'none'; autocompleteDiv.style.display = 'none';
resultsDiv.classList.remove('visible'); resultsDiv.classList.remove('visible');
searchInput.value = ''; searchInput.value = '';
// Show recipient preview card
var user = users.find(function(u) { return u.id === id; });
var previewDiv = document.getElementById('recipient-preview');
if (user && (user.companyName)) {
document.getElementById('preview-avatar').textContent = (name || email)[0].toUpperCase();
document.getElementById('preview-name').textContent = name;
var companyHtml = '';
if (user.companyName) {
companyHtml = user.companySlug
? '<a href="/firma/' + user.companySlug + '" target="_blank" style="color: var(--primary); text-decoration: none;">' + user.companyName + '</a>'
: user.companyName;
}
if (user.position) {
companyHtml = user.position + (companyHtml ? ' · ' + companyHtml : '');
}
document.getElementById('preview-company').innerHTML = companyHtml;
previewDiv.style.display = 'block';
} else {
previewDiv.style.display = 'none';
}
} }
window.clearRecipient = function() { window.clearRecipient = function() {
@ -426,6 +455,7 @@
autocompleteDiv.style.display = 'block'; autocompleteDiv.style.display = 'block';
searchInput.value = ''; searchInput.value = '';
searchInput.focus(); searchInput.focus();
document.getElementById('recipient-preview').style.display = 'none';
}; };
searchInput.addEventListener('input', function() { searchInput.addEventListener('input', function() {