kerimatilgan/prov
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace VO edit prompt() with a proper modal dialog

Browse Source 
The browser's native prompt() chain was awkward and made it
impossible to clear the bezeichnung in a single, predictable
flow. The new modal mirrors the user-management dialog: it shows
the provider read-only, lets you edit nummer and bezeichnung,
and exposes the aktiv flag explicitly. Empty bezeichnung now
correctly clears the field.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kerimatilganandClaude Opus 4.7 committed 2026-05-15 16:40:49 +02:00
1 parent f2ab23f261
commit 97ff779bcf
2 files changed
+63 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+29
View File
@@ -1552,6 +1552,35 @@
</div>
</div>
<!-- Modal: VO bearbeiten -->
<div id="voEditModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000;">
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; border-radius:8px; width:90%; max-width:480px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,0.2);">
<h3 style="margin-top:0;">VO bearbeiten</h3>
<input type="hidden" id="voEditId">
<div class="form-group" style="margin-bottom:12px;">
<label>Anbieter</label>
<input type="text" id="voEditAnbieter" readonly style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f5f5f5;">
</div>
<div class="form-group" style="margin-bottom:12px;">
<label for="voEditNummer">VO-Nummer</label>
<input type="text" id="voEditNummer" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
</div>
<div class="form-group" style="margin-bottom:12px;">
<label for="voEditBezeichnung">Bezeichnung</label>
<input type="text" id="voEditBezeichnung" placeholder="z.B. Fachhandel (leer = keine)" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
</div>
<div class="form-group" style="margin-bottom:18px;">
<label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
<input type="checkbox" id="voEditAktiv"> Aktiv
</label>
</div>
<div style="text-align:right;">
<button type="button" onclick="closeVoEditModal()" style="margin-right:8px;">Abbrechen</button>
<button type="button" class="btn-success" onclick="saveVoFromModal()">Speichern</button>
</div>
</div>
</div>
<div id="messages"></div>
</div>
public/script.js
+34 -9
View File
@@ -4083,7 +4083,11 @@ async function loadVosAdmin() {
<td>${escapeHtml(v.bezeichnung || '')}</td>
<td>${v.aktiv ? '<span style="color:#27ae60;">Ja</span>' : '<span style="color:#c0392b;">Nein</span>'}</td>
<td>
<button data-vo-action="edit" data-id="${v.id}" data-nummer="${escapeHtml(v.nummer)}" data-bezeichnung="${escapeHtml(v.bezeichnung || '')}" data-aktiv="${v.aktiv}" class="btn-success" style="margin-right:5px;">Bearbeiten</button>
<button data-vo-action="edit" data-id="${v.id}"
data-anbieter-name="${escapeHtml(v.anbieter_name)}"
data-nummer="${escapeHtml(v.nummer)}"
data-bezeichnung="${escapeHtml(v.bezeichnung || '')}"
data-aktiv="${v.aktiv}" class="btn-success" style="margin-right:5px;">Bearbeiten</button>
<button data-vo-action="delete" data-id="${v.id}" data-label="${escapeHtml(v.nummer + (v.bezeichnung ? ' (' + v.bezeichnung + ')' : ''))}" class="btn-danger">Löschen</button>
</td>
`;
@@ -4091,8 +4095,11 @@ async function loadVosAdmin() {
btn.addEventListener('click', () => {
const action = btn.dataset.voAction;
const id = parseInt(btn.dataset.id, 10);
if (action === 'edit') editVo(id, btn.dataset.nummer, btn.dataset.bezeichnung, btn.dataset.aktiv === '1');
else if (action === 'delete') deleteVo(id, btn.dataset.label);
if (action === 'edit') {
editVo(id, btn.dataset.nummer, btn.dataset.bezeichnung, btn.dataset.aktiv === '1', btn.dataset.anbieterName);
} else if (action === 'delete') {
deleteVo(id, btn.dataset.label);
}
});
});
tbody.appendChild(tr);
@@ -4124,17 +4131,35 @@ async function addVo() {
} catch (e) { /* already shown */ }
}
async function editVo(id, nummer, bezeichnung, aktiv) {
const newNummer = prompt('VO-Nummer:', nummer);
if (newNummer === null) return;
const newBezeichnung = prompt('Bezeichnung (leer = keine):', bezeichnung || '');
if (newBezeichnung === null) return;
function editVo(id, nummer, bezeichnung, aktiv, anbieterName) {
document.getElementById('voEditId').value = id;
document.getElementById('voEditAnbieter').value = anbieterName || '';
document.getElementById('voEditNummer').value = nummer || '';
document.getElementById('voEditBezeichnung').value = bezeichnung || '';
document.getElementById('voEditAktiv').checked = !!aktiv;
document.getElementById('voEditModal').style.display = 'block';
}
function closeVoEditModal() {
document.getElementById('voEditModal').style.display = 'none';
}
async function saveVoFromModal() {
const id = document.getElementById('voEditId').value;
const nummer = document.getElementById('voEditNummer').value.trim();
const bezeichnung = document.getElementById('voEditBezeichnung').value.trim();
const aktiv = document.getElementById('voEditAktiv').checked;
if (!nummer) {
showMessage('VO-Nummer darf nicht leer sein', 'error');
return;
}
try {
await apiRequest(`/api/vos/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ nummer: newNummer.trim(), bezeichnung: newBezeichnung.trim() || null }),
body: JSON.stringify({ nummer, bezeichnung: bezeichnung || null, aktiv }),
});
closeVoEditModal();
showMessage('VO aktualisiert');
loadVosAdmin();
} catch (e) { /* already shown */ }