Verbesserte Suchfunktion: Highlighting für allgemeine Suche und Reset-Buttons
This commit is contained in:
@@ -34,11 +34,23 @@ function createEmailLink(email) {
|
||||
|
||||
function highlightText(text, searchTerm) {
|
||||
if (!searchTerm || !text) return text;
|
||||
// Escapen von Sonderzeichen im Suchbegriff
|
||||
const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
// Erstelle einen regulären Ausdruck ohne Wortgrenzen
|
||||
const regex = new RegExp(escapedSearchTerm, 'gi');
|
||||
return text.replace(regex, '<mark>$&</mark>');
|
||||
|
||||
// Teile den Suchbegriff in einzelne Wörter
|
||||
const searchWords = searchTerm.split(/\s+/).filter(word => word.length > 0);
|
||||
|
||||
// Wenn keine Wörter gefunden wurden, gebe den ursprünglichen Text zurück
|
||||
if (searchWords.length === 0) return text;
|
||||
|
||||
// Erstelle einen regulären Ausdruck für alle Suchwörter
|
||||
const regexPattern = searchWords
|
||||
.map(word => word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
|
||||
.join('|');
|
||||
|
||||
// Erstelle den regulären Ausdruck
|
||||
const regex = new RegExp(`(${regexPattern})`, 'gi');
|
||||
|
||||
// Ersetze alle Übereinstimmungen mit mark-Tags
|
||||
return text.replace(regex, '<mark>$1</mark>');
|
||||
}
|
||||
|
||||
function createAddressLink(street, plz, city) {
|
||||
@@ -121,18 +133,15 @@ async function copyCustomerLink(customerNumber) {
|
||||
function updateResultCounts() {
|
||||
const resultCount = document.getElementById('result-count');
|
||||
const exportButton = document.getElementById('exportButton');
|
||||
const vcfExportButton = document.getElementById('vcfExportButton');
|
||||
|
||||
if (lastResults && lastResults.length > 0) {
|
||||
resultCount.textContent = `${lastResults.length} Ergebnisse gefunden`;
|
||||
resultCount.style.display = 'inline';
|
||||
exportButton.style.display = 'inline-block';
|
||||
vcfExportButton.style.display = 'inline-block';
|
||||
} else {
|
||||
resultCount.textContent = '';
|
||||
resultCount.style.display = 'none';
|
||||
exportButton.style.display = 'none';
|
||||
vcfExportButton.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -205,33 +214,28 @@ function exportToCSV() {
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
function exportToVCF() {
|
||||
if (!lastResults || lastResults.length === 0) {
|
||||
return;
|
||||
}
|
||||
function exportToVCF(customer) {
|
||||
if (!customer) return;
|
||||
|
||||
const vcfData = lastResults.map(customer => {
|
||||
const lines = [
|
||||
'BEGIN:VCARD',
|
||||
'VERSION:3.0',
|
||||
`FN:${customer.vorname} ${customer.nachname}`,
|
||||
`N:${customer.nachname};${customer.vorname};;`,
|
||||
`TEL;TYPE=CELL:${customer.telefon || ''}`,
|
||||
`TEL;TYPE=HOME:${customer.telefon_2 || ''}`,
|
||||
`EMAIL:${customer.email || ''}`,
|
||||
`ADR;TYPE=HOME:;;${customer.strasse || ''};${customer.plz || ''};${customer.ort || ''};${customer.land || ''}`,
|
||||
`ORG:${customer.firma || ''}`,
|
||||
`NOTE:${customer.notizen || ''}`,
|
||||
'END:VCARD'
|
||||
];
|
||||
return lines.join('\n');
|
||||
}).join('\n\n');
|
||||
const vcfData = [
|
||||
'BEGIN:VCARD',
|
||||
'VERSION:3.0',
|
||||
`FN:${customer.vorname || ''} ${customer.nachname || ''}`,
|
||||
`N:${customer.nachname || ''};${customer.vorname || ''};;`,
|
||||
`TEL;TYPE=CELL:${customer.telefon || ''}`,
|
||||
`TEL;TYPE=HOME:${customer.telefon_2 || ''}`,
|
||||
`EMAIL:${customer.email || ''}`,
|
||||
`ADR;TYPE=HOME:;;${customer.strasse || ''};${customer.plz || ''};${customer.ort || ''};${customer.land || ''}`,
|
||||
`ORG:${customer.firma || ''}`,
|
||||
`NOTE:${customer.notizen || ''}`,
|
||||
'END:VCARD'
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob([vcfData], { type: 'text/vcard;charset=utf-8' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `kontakte_${new Date().toISOString().split('T')[0]}.vcf`;
|
||||
a.download = `kontakt_${customer.vorname || ''}_${customer.nachname || ''}_${new Date().toISOString().split('T')[0]}.vcf`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
@@ -240,14 +244,14 @@ function exportToVCF() {
|
||||
|
||||
function displayResults(results) {
|
||||
const resultsDiv = document.getElementById('results');
|
||||
const resultCount = document.getElementById('resultCount');
|
||||
const resultCount = document.getElementById('result-count');
|
||||
const generalSearchTerm = document.getElementById('q').value;
|
||||
const nameSearchTerm = document.getElementById('nameInput').value;
|
||||
const fachrichtungSearchTerm = document.getElementById('fachrichtungInput').value;
|
||||
|
||||
if (!results || results.length === 0) {
|
||||
resultsDiv.innerHTML = '<p>Keine Ergebnisse gefunden.</p>';
|
||||
resultCount.textContent = '0 Ergebnisse';
|
||||
resultCount.textContent = '';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -255,47 +259,59 @@ function displayResults(results) {
|
||||
lastResults = results;
|
||||
|
||||
const resultsHTML = results.map(customer => {
|
||||
const highlightedName = highlightText(customer.name, nameSearchTerm);
|
||||
const highlightedFachrichtung = highlightText(customer.fachrichtung, fachrichtungSearchTerm);
|
||||
const highlightedGeneral = highlightText(customer.name, generalSearchTerm) ||
|
||||
highlightText(customer.fachrichtung, generalSearchTerm) ||
|
||||
highlightText(customer.ort, generalSearchTerm);
|
||||
|
||||
// Hilfsfunktion zum Erstellen von Feldern nur wenn sie Werte haben
|
||||
const createFieldIfValue = (label, value, formatter = (v) => v) => {
|
||||
if (!value || value === 'N/A' || value === 'n/a' || value === 'N/a' || (typeof value === 'string' && value.trim() === '')) return '';
|
||||
const formattedValue = formatter(value);
|
||||
return `<p class="mb-1"><strong>${label}:</strong> ${formattedValue}</p>`;
|
||||
};
|
||||
|
||||
// Highlighting für alle Felder
|
||||
const highlightField = (value) => {
|
||||
if (!value) return value;
|
||||
let highlighted = value;
|
||||
if (nameSearchTerm) {
|
||||
highlighted = highlightText(highlighted, nameSearchTerm);
|
||||
}
|
||||
if (fachrichtungSearchTerm) {
|
||||
highlighted = highlightText(highlighted, fachrichtungSearchTerm);
|
||||
}
|
||||
if (generalSearchTerm) {
|
||||
highlighted = highlightText(highlighted, generalSearchTerm);
|
||||
}
|
||||
return highlighted;
|
||||
};
|
||||
|
||||
return `
|
||||
<div class="customer-card">
|
||||
<div class="customer-header">
|
||||
<h3 class="customer-name">${highlightedName || highlightedGeneral}</h3>
|
||||
<h3 class="customer-name">${highlightField(customer.name)}</h3>
|
||||
<div class="customer-actions">
|
||||
<span class="badge ${(customer.tag || 'medisoft') === 'medisoft' ? 'bg-primary' : 'bg-warning text-dark'}">${(customer.tag || 'medisoft').toUpperCase()}</span>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="copyCustomerLink('${customer.nummer}')">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="copyCustomerLink('${customer.nummer}')" title="Link kopieren">
|
||||
<i class="fas fa-link"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick='exportToVCF(${JSON.stringify(customer).replace(/'/g, "\\'")})' title="Als VCF exportieren">
|
||||
<i class="bi bi-person-vcard"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="customer-details">
|
||||
${createFieldIfValue('Nummer', highlightText(customer.nummer, generalSearchTerm), createCustomerLink)}
|
||||
${createFieldIfValue('Nummer', highlightField(customer.nummer), createCustomerLink)}
|
||||
${createFieldIfValue('Adresse', (customer.strasse && customer.plz && customer.ort) ? true : false,
|
||||
() => createAddressLink(
|
||||
highlightText(customer.strasse, generalSearchTerm),
|
||||
highlightText(customer.plz, generalSearchTerm),
|
||||
highlightText(customer.ort, generalSearchTerm)
|
||||
customer.strasse,
|
||||
highlightField(customer.plz),
|
||||
highlightField(customer.ort)
|
||||
))}
|
||||
${createFieldIfValue('Telefon', highlightText(customer.telefon, generalSearchTerm), createPhoneLink)}
|
||||
${createFieldIfValue('Mobil', highlightText(customer.mobil, generalSearchTerm), createPhoneLink)}
|
||||
${createFieldIfValue('Handy', highlightText(customer.handy, generalSearchTerm), createPhoneLink)}
|
||||
${createFieldIfValue('Telefon Firma', highlightText(customer.tele_firma, generalSearchTerm), createPhoneLink)}
|
||||
${createFieldIfValue('E-Mail', highlightText(customer.email, generalSearchTerm), createEmailLink)}
|
||||
${createFieldIfValue('Fachrichtung', highlightText(customer.fachrichtung, generalSearchTerm || fachrichtungSearchTerm))}
|
||||
${createFieldIfValue('Kontakt 1', highlightText(customer.kontakt1, generalSearchTerm), createPhoneLink)}
|
||||
${createFieldIfValue('Kontakt 2', highlightText(customer.kontakt2, generalSearchTerm), createPhoneLink)}
|
||||
${createFieldIfValue('Kontakt 3', highlightText(customer.kontakt3, generalSearchTerm), createPhoneLink)}
|
||||
${createFieldIfValue('Telefon', highlightField(customer.telefon), createPhoneLink)}
|
||||
${createFieldIfValue('Mobil', highlightField(customer.mobil), createPhoneLink)}
|
||||
${createFieldIfValue('Handy', highlightField(customer.handy), createPhoneLink)}
|
||||
${createFieldIfValue('E-Mail', highlightField(customer.email), createEmailLink)}
|
||||
${createFieldIfValue('Fachrichtung', highlightField(customer.fachrichtung))}
|
||||
${createFieldIfValue('Kontakt 1', highlightField(customer.kontakt1), createPhoneLink)}
|
||||
${createFieldIfValue('Kontakt 2', highlightField(customer.kontakt2), createPhoneLink)}
|
||||
${createFieldIfValue('Kontakt 3', highlightField(customer.kontakt3), createPhoneLink)}
|
||||
${customer.tags && customer.tags.length > 0 ? `
|
||||
<p class="mb-0"><strong>Tags:</strong>
|
||||
${customer.tags.map(tag => `<span class="badge bg-primary me-1">${tag}</span>`).join('')}
|
||||
|
||||
Reference in New Issue
Block a user