elpatron/medi-customers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Verbesserte Suchfunktion: Highlighting für allgemeine Suche und Reset-Buttons

Browse Source
This commit is contained in:
elpatron
2025-03-21 12:40:59 +01:00
parent 93314424d9
commit 9922c0ae9d
3 changed files with 100 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
static/css/styles.css
View File

@@ -151,6 +151,36 @@ body {
position: relative; position: relative;
} }
.reset-icon {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #6c757d;
z-index: 10;
padding: 0.375rem;
display: none;
}
.input-group input:not(:placeholder-shown) + .reset-icon {
display: block;
}
.reset-icon:hover {
color: #dc3545;
}
.search-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
z-index: 10;
padding: 0.375rem;
}
.result-counts { .result-counts {
display: flex; display: flex;
justify-content: center; justify-content: center;

120
static/js/main.js
View File

@@ -34,11 +34,23 @@ function createEmailLink(email) {
function highlightText(text, searchTerm) { function highlightText(text, searchTerm) {
if (!searchTerm || !text) return text; if (!searchTerm || !text) return text;
// Escapen von Sonderzeichen im Suchbegriff
const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // Teile den Suchbegriff in einzelne Wörter
// Erstelle einen regulären Ausdruck ohne Wortgrenzen const searchWords = searchTerm.split(/\s+/).filter(word => word.length > 0);
const regex = new RegExp(escapedSearchTerm, 'gi');
return text.replace(regex, '<mark>$&</mark>'); // 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) { function createAddressLink(street, plz, city) {
@@ -121,18 +133,15 @@ async function copyCustomerLink(customerNumber) {
function updateResultCounts() { function updateResultCounts() {
const resultCount = document.getElementById('result-count'); const resultCount = document.getElementById('result-count');
const exportButton = document.getElementById('exportButton'); const exportButton = document.getElementById('exportButton');
const vcfExportButton = document.getElementById('vcfExportButton');
if (lastResults && lastResults.length > 0) { if (lastResults && lastResults.length > 0) {
resultCount.textContent = `${lastResults.length} Ergebnisse gefunden`; resultCount.textContent = `${lastResults.length} Ergebnisse gefunden`;
resultCount.style.display = 'inline'; resultCount.style.display = 'inline';
exportButton.style.display = 'inline-block'; exportButton.style.display = 'inline-block';
vcfExportButton.style.display = 'inline-block';
} else { } else {
resultCount.textContent = ''; resultCount.textContent = '';
resultCount.style.display = 'none'; resultCount.style.display = 'none';
exportButton.style.display = 'none'; exportButton.style.display = 'none';
vcfExportButton.style.display = 'none';
} }
} }
@@ -205,33 +214,28 @@ function exportToCSV() {
document.body.removeChild(link); document.body.removeChild(link);
} }
function exportToVCF() { function exportToVCF(customer) {
if (!lastResults || lastResults.length === 0) { if (!customer) return;
return;
}
const vcfData = lastResults.map(customer => { const vcfData = [
const lines = [ 'BEGIN:VCARD',
'BEGIN:VCARD', 'VERSION:3.0',
'VERSION:3.0', `FN:${customer.vorname || ''} ${customer.nachname || ''}`,
`FN:${customer.vorname} ${customer.nachname}`, `N:${customer.nachname || ''};${customer.vorname || ''};;`,
`N:${customer.nachname};${customer.vorname};;`, `TEL;TYPE=CELL:${customer.telefon || ''}`,
`TEL;TYPE=CELL:${customer.telefon || ''}`, `TEL;TYPE=HOME:${customer.telefon_2 || ''}`,
`TEL;TYPE=HOME:${customer.telefon_2 || ''}`, `EMAIL:${customer.email || ''}`,
`EMAIL:${customer.email || ''}`, `ADR;TYPE=HOME:;;${customer.strasse || ''};${customer.plz || ''};${customer.ort || ''};${customer.land || ''}`,
`ADR;TYPE=HOME:;;${customer.strasse || ''};${customer.plz || ''};${customer.ort || ''};${customer.land || ''}`, `ORG:${customer.firma || ''}`,
`ORG:${customer.firma || ''}`, `NOTE:${customer.notizen || ''}`,
`NOTE:${customer.notizen || ''}`, 'END:VCARD'
'END:VCARD' ].join('\n');
];
return lines.join('\n');
}).join('\n\n');
const blob = new Blob([vcfData], { type: 'text/vcard;charset=utf-8' }); const blob = new Blob([vcfData], { type: 'text/vcard;charset=utf-8' });
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; 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); document.body.appendChild(a);
a.click(); a.click();
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
@@ -240,14 +244,14 @@ function exportToVCF() {
function displayResults(results) { function displayResults(results) {
const resultsDiv = document.getElementById('results'); const resultsDiv = document.getElementById('results');
const resultCount = document.getElementById('resultCount'); const resultCount = document.getElementById('result-count');
const generalSearchTerm = document.getElementById('q').value; const generalSearchTerm = document.getElementById('q').value;
const nameSearchTerm = document.getElementById('nameInput').value; const nameSearchTerm = document.getElementById('nameInput').value;
const fachrichtungSearchTerm = document.getElementById('fachrichtungInput').value; const fachrichtungSearchTerm = document.getElementById('fachrichtungInput').value;
if (!results || results.length === 0) { if (!results || results.length === 0) {
resultsDiv.innerHTML = '<p>Keine Ergebnisse gefunden.</p>'; resultsDiv.innerHTML = '<p>Keine Ergebnisse gefunden.</p>';
resultCount.textContent = '0 Ergebnisse'; resultCount.textContent = '';
return; return;
} }
@@ -255,12 +259,6 @@ function displayResults(results) {
lastResults = results; lastResults = results;
const resultsHTML = results.map(customer => { 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 // Hilfsfunktion zum Erstellen von Feldern nur wenn sie Werte haben
const createFieldIfValue = (label, value, formatter = (v) => v) => { const createFieldIfValue = (label, value, formatter = (v) => v) => {
if (!value || value === 'N/A' || value === 'n/a' || value === 'N/a' || (typeof value === 'string' && value.trim() === '')) return ''; if (!value || value === 'N/A' || value === 'n/a' || value === 'N/a' || (typeof value === 'string' && value.trim() === '')) return '';
@@ -268,34 +266,52 @@ function displayResults(results) {
return `<p class="mb-1"><strong>${label}:</strong> ${formattedValue}</p>`; 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 ` return `
<div class="customer-card"> <div class="customer-card">
<div class="customer-header"> <div class="customer-header">
<h3 class="customer-name">${highlightedName || highlightedGeneral}</h3> <h3 class="customer-name">${highlightField(customer.name)}</h3>
<div class="customer-actions"> <div class="customer-actions">
<span class="badge ${(customer.tag || 'medisoft') === 'medisoft' ? 'bg-primary' : 'bg-warning text-dark'}">${(customer.tag || 'medisoft').toUpperCase()}</span> <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> <i class="fas fa-link"></i>
</button> </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> </div>
<div class="customer-details"> <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, ${createFieldIfValue('Adresse', (customer.strasse && customer.plz && customer.ort) ? true : false,
() => createAddressLink( () => createAddressLink(
highlightText(customer.strasse, generalSearchTerm), customer.strasse,
highlightText(customer.plz, generalSearchTerm), highlightField(customer.plz),
highlightText(customer.ort, generalSearchTerm) highlightField(customer.ort)
))} ))}
${createFieldIfValue('Telefon', highlightText(customer.telefon, generalSearchTerm), createPhoneLink)} ${createFieldIfValue('Telefon', highlightField(customer.telefon), createPhoneLink)}
${createFieldIfValue('Mobil', highlightText(customer.mobil, generalSearchTerm), createPhoneLink)} ${createFieldIfValue('Mobil', highlightField(customer.mobil), createPhoneLink)}
${createFieldIfValue('Handy', highlightText(customer.handy, generalSearchTerm), createPhoneLink)} ${createFieldIfValue('Handy', highlightField(customer.handy), createPhoneLink)}
${createFieldIfValue('Telefon Firma', highlightText(customer.tele_firma, generalSearchTerm), createPhoneLink)} ${createFieldIfValue('E-Mail', highlightField(customer.email), createEmailLink)}
${createFieldIfValue('E-Mail', highlightText(customer.email, generalSearchTerm), createEmailLink)} ${createFieldIfValue('Fachrichtung', highlightField(customer.fachrichtung))}
${createFieldIfValue('Fachrichtung', highlightText(customer.fachrichtung, generalSearchTerm || fachrichtungSearchTerm))} ${createFieldIfValue('Kontakt 1', highlightField(customer.kontakt1), createPhoneLink)}
${createFieldIfValue('Kontakt 1', highlightText(customer.kontakt1, generalSearchTerm), createPhoneLink)} ${createFieldIfValue('Kontakt 2', highlightField(customer.kontakt2), createPhoneLink)}
${createFieldIfValue('Kontakt 2', highlightText(customer.kontakt2, generalSearchTerm), createPhoneLink)} ${createFieldIfValue('Kontakt 3', highlightField(customer.kontakt3), createPhoneLink)}
${createFieldIfValue('Kontakt 3', highlightText(customer.kontakt3, generalSearchTerm), createPhoneLink)}
${customer.tags && customer.tags.length > 0 ? ` ${customer.tags && customer.tags.length > 0 ? `
<p class="mb-0"><strong>Tags:</strong> <p class="mb-0"><strong>Tags:</strong>
${customer.tags.map(tag => `<span class="badge bg-primary me-1">${tag}</span>`).join('')} ${customer.tags.map(tag => `<span class="badge bg-primary me-1">${tag}</span>`).join('')}

6
templates/index.html
View File

@@ -9,6 +9,7 @@
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}"> <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
</head> </head>
<body> <body>
@@ -83,10 +84,7 @@
<div id="result-counts" class="mt-2"> <div id="result-counts" class="mt-2">
<span id="result-count"></span> <span id="result-count"></span>
<button id="exportButton" class="btn btn-sm btn-outline-primary ms-2" onclick="exportToCSV()" style="display: none;"> <button id="exportButton" class="btn btn-sm btn-outline-primary ms-2" onclick="exportToCSV()" style="display: none;">
<i class="bi bi-file-earmark-excel"></i> CSV exportieren <i class="bi bi-file-earmark-spreadsheet"></i> Als CSV exportieren
</button>
<button id="vcfExportButton" class="btn btn-sm btn-outline-primary ms-2" onclick="exportToVCF()" style="display: none;">
<i class="bi bi-person-vcard"></i> VCF exportieren
</button> </button>
</div> </div>