From 1091eb5bf8ff22b6606abdf52e4bc6b00d6767bc Mon Sep 17 00:00:00 2001
From: cas <cas@vorteq.nl>
Date: Fri, 24 Jul 2026 09:27:54 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20closeDialog=20toegevoegd=20in=20showPort?=
 =?UTF-8?q?ieEditDialog=20=E2=80=94=20bottom=20sheet=20sluit=20nu=20correc?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: showPortieEditDialog (r.3217-3401) gebruikte closeDialog op 3 plekken
(r.3279 X-kruisje, r.3280 buiten-klik, r.3348 save) maar definieerde de functie
nergens. showBulkPortieEdit (r.3462-3465) had wél een closeDialog definitie.

Fix: closeDialog definitie toegevoegd met closing-animatie + delayed overlay removal.
E2e test toegevoegd voor single-ingredient portie wijzigen + opslaan scenario.

Kanban: t_044470e2
---
 docker/index.html |  4 ++++
 index.html        |  4 ++++
 tests/e2e.spec.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)

diff --git a/docker/index.html b/docker/index.html
index 2b5a7bf..ef80903 100644
--- a/docker/index.html
+++ b/docker/index.html
@@ -3276,6 +3276,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
     document.body.appendChild(overlay);
     document.body.style.overflow = 'hidden';
 
+    function closeDialog() {
+      overlay.classList.add('closing');
+      setTimeout(() => { overlay.remove(); document.body.style.overflow = ''; }, 280);
+    }
     overlay.querySelector('#portieEditClose').addEventListener('click', closeDialog);
     overlay.addEventListener('click', (e) => { if (e.target === overlay) closeDialog(); });
 
diff --git a/index.html b/index.html
index 2b5a7bf..ef80903 100644
--- a/index.html
+++ b/index.html
@@ -3276,6 +3276,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
     document.body.appendChild(overlay);
     document.body.style.overflow = 'hidden';
 
+    function closeDialog() {
+      overlay.classList.add('closing');
+      setTimeout(() => { overlay.remove(); document.body.style.overflow = ''; }, 280);
+    }
     overlay.querySelector('#portieEditClose').addEventListener('click', closeDialog);
     overlay.addEventListener('click', (e) => { if (e.target === overlay) closeDialog(); });
 
diff --git a/tests/e2e.spec.js b/tests/e2e.spec.js
index 847634c..7a1dd39 100644
--- a/tests/e2e.spec.js
+++ b/tests/e2e.spec.js
@@ -393,4 +393,48 @@ test.describe('Karby Eetdagboek', () => {
     }
   });
 
+  test('portie-edit dialog: single ingredient portion change saves and closes', async ({ page }) => {
+    // Add a loose ingredient to the diary first
+    await page.goto(BASE);
+    await page.locator('.search-input').fill('brood');
+    await page.waitForTimeout(800);
+    await page.locator('.food-item').first().click();
+    await page.waitForTimeout(500);
+
+    // Click "Toevoegen aan eetmoment" → opens addMealModal
+    await page.locator('#detailAddBtn').click();
+    await page.waitForTimeout(500);
+
+    // Confirm adding to diary (default portie=100g, default eetmoment)
+    await page.locator('#addMealSubmit').click();
+    await page.waitForTimeout(800);
+
+    // Should now be on dagboek tab
+    // Find the portion display for a single ingredient (no data-mi attribute)
+    const portionSpan = page.locator('[data-action="edit-portie"]:not([data-mi])').first();
+    await expect(portionSpan).toBeVisible({ timeout: 5000 });
+    await portionSpan.click();
+    await page.waitForTimeout(500);
+
+    // Verify the portion edit dialog opened
+    const editInput = page.locator('#portieEditInput');
+    await expect(editInput).toBeVisible({ timeout: 3000 });
+
+    // Verify preview shows initial carbs
+    const preview = page.locator('#portieEditPreview');
+    await expect(preview).toBeVisible();
+
+    // Change the portion to 200g
+    await editInput.fill('200');
+    await editInput.dispatchEvent('input');
+    await page.waitForTimeout(300);
+
+    // Click save
+    await page.locator('#portieSaveBtn').click();
+    await page.waitForTimeout(500);
+
+    // Dialog should be gone (removed from DOM after closing animation)
+    await expect(page.locator('#portieEditInput')).not.toBeAttached({ timeout: 3000 });
+  });
+
 });