Mieterdaten-Eckdaten: unbefristet neben Mietende, einzeilig, nur nach Klick auf Bearbeiten editierbar

web-dashboard/index.html

@@ -3645,9 +3645,11 @@
   // änderbar, inkl. serverseitiger Plausibilitätsprüfung bei Datumsänderung.
   function buildContractEckdatenForm(c) {
     const form = el('div', 'contract-template-form');
+    form.style.flexWrap = 'nowrap';
+    form.style.overflowX = 'auto';
 
     const startField = el('div', 'field');
-    startField.style.minWidth = '150px';
+    startField.style.cssText = 'min-width:140px; flex:0 0 auto;';
     startField.appendChild(el('label', null, 'Mietbeginn'));
     const startInput = document.createElement('input');
     startInput.type = 'date';
@@ -3656,28 +3658,30 @@
     form.appendChild(startField);
 
     const endField = el('div', 'field');
-    endField.style.minWidth = '150px';
+    endField.style.cssText = 'min-width:140px; flex:0 0 auto;';
     endField.appendChild(el('label', null, 'Mietende'));
     const endInput = document.createElement('input');
     endInput.type = 'date';
     endInput.value = c.endDate ? c.endDate.slice(0, 10) : '';
     endInput.disabled = !c.endDate;
     endField.appendChild(endInput);
-    const unbefristetLabel = el('label', null, ' unbefristet');
+    form.appendChild(endField);
-    unbefristetLabel.style.cssText = 'font-weight:normal; margin-top:4px; display:block;';
+
+    const unbefristetField = el('div', 'field field-checkbox');
+    unbefristetField.style.flex = '0 0 auto';
     const unbefristetCheckbox = document.createElement('input');
     unbefristetCheckbox.type = 'checkbox';
     unbefristetCheckbox.checked = !c.endDate;
+    unbefristetField.appendChild(unbefristetCheckbox);
+    unbefristetField.appendChild(document.createTextNode('unbefristet'));
     unbefristetCheckbox.onchange = () => {
       endInput.disabled = unbefristetCheckbox.checked;
       if (unbefristetCheckbox.checked) endInput.value = '';
     };
-    unbefristetLabel.prepend(unbefristetCheckbox);
+    form.appendChild(unbefristetField);
-    endField.appendChild(unbefristetLabel);
-    form.appendChild(endField);
 
     const rentField = el('div', 'field');
-    rentField.style.width = '120px';
+    rentField.style.cssText = 'width:110px; flex:0 0 auto;';
     rentField.appendChild(el('label', null, 'Warmmiete (€)'));
     const rentInput = document.createElement('input');
     rentInput.type = 'number';
@@ -3688,7 +3692,7 @@
     form.appendChild(rentField);
 
     const depositField = el('div', 'field');
-    depositField.style.width = '120px';
+    depositField.style.cssText = 'width:110px; flex:0 0 auto;';
     depositField.appendChild(el('label', null, 'Kaution (€)'));
     const depositInput = document.createElement('input');
     depositInput.type = 'number';
@@ -3699,7 +3703,7 @@
     form.appendChild(depositField);
 
     const dueDayField = el('div', 'field');
-    dueDayField.style.minWidth = '140px';
+    dueDayField.style.cssText = 'min-width:130px; flex:0 0 auto;';
     dueDayField.appendChild(el('label', null, 'Fälligkeit der Miete'));
     const dueDaySelect = document.createElement('select');
     [[1, 'Immer zum 1.'], [15, 'Immer zum 15.']].forEach(([value, label]) => {
@@ -3713,8 +3717,8 @@
     form.appendChild(dueDayField);
 
     const noticeField = el('div', 'field');
-    noticeField.style.width = '140px';
+    noticeField.style.cssText = 'width:110px; flex:0 0 auto;';
-    noticeField.appendChild(el('label', null, 'Kündigungsfrist (Monate)'));
+    noticeField.appendChild(el('label', null, 'Kündigung (Mon.)'));
     const noticeInput = document.createElement('input');
     noticeInput.type = 'number';
     noticeInput.min = '0';
@@ -3722,14 +3726,36 @@
     noticeField.appendChild(noticeInput);
     form.appendChild(noticeField);
 
+    const allInputs = [startInput, endInput, unbefristetCheckbox, rentInput, depositInput, dueDaySelect, noticeInput];
+    const setEditable = (editable) => {
+      allInputs.forEach(input => { input.disabled = !editable; });
+      if (editable) endInput.disabled = unbefristetCheckbox.checked;
+    };
+    setEditable(false);
+
+    const editBtn = document.createElement('button');
+    editBtn.type = 'button';
+    editBtn.className = 'btn-secondary';
+    editBtn.style.width = 'auto';
+    editBtn.style.flex = '0 0 auto';
+    editBtn.textContent = 'Bearbeiten';
+
     const saveBtn = document.createElement('button');
     saveBtn.type = 'button';
     saveBtn.className = 'btn-primary';
     saveBtn.style.width = 'auto';
+    saveBtn.style.flex = '0 0 auto';
+    saveBtn.style.display = 'none';
     saveBtn.textContent = 'Speichern';
     const errorBox = el('div', 'form-error');
     errorBox.style.display = 'none';
 
+    editBtn.onclick = () => {
+      setEditable(true);
+      editBtn.style.display = 'none';
+      saveBtn.style.display = 'inline-block';
+    };
+
     saveBtn.onclick = async () => {
       errorBox.style.display = 'none';
       saveBtn.disabled = true;
@@ -3751,11 +3777,11 @@
       } catch (err) {
         errorBox.textContent = err.message;
         errorBox.style.display = 'block';
-      } finally {
         saveBtn.disabled = false;
         saveBtn.textContent = 'Speichern';
       }
     };
+    form.appendChild(editBtn);
     form.appendChild(saveBtn);
 
     const wrap = el('div');