fix: revert to dispatchEvent + add individual checkbox fallback

Revert to dispatchEvent('click') on mat-checkbox host which worked
for Job B. Add fallback in openMultipleDelete: if selectAll fails,
try selecting individual row checkboxes before attempting delete.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: renemadsen

eform-client/playwright/e2e/plugins/items-planning-pn/ItemsPlanningPlanningPage.ts

@@ -181,7 +181,14 @@ export class ItemsPlanningPlanningPage extends PageWithNavbarPage {
   }
 
   async openMultipleDelete() {
-    await this.page.locator('#deleteMultiplePluginsBtn:not([disabled])').waitFor({ state: 'visible', timeout: 40000 });
+    // Wait for button to be enabled; if selectAll checkbox didn't work, try individual selection
+    try {
+      await this.page.locator('#deleteMultiplePluginsBtn:not([disabled])').waitFor({ state: 'visible', timeout: 10000 });
+    } catch {
+      // SelectAll checkbox didn't work, try selecting individual checkboxes
+      await this.selectAllPlanningsForDelete(true, true);
+      await this.page.locator('#deleteMultiplePluginsBtn:not([disabled])').waitFor({ state: 'visible', timeout: 40000 });
+    }
     await this.page.waitForTimeout(500);
     await this.deleteMultiplePluginsBtn.click();
   }
@@ -204,18 +211,8 @@ export class ItemsPlanningPlanningPage extends PageWithNavbarPage {
 
   async selectAllPlanningsForDelete(valueCheckbox = true, pickOne = false) {
     if (!pickOne) {
-      // Simulate Cypress check({force:true}) by setting checked and dispatching events
-      const input = this.page.locator('.mat-header-cell mat-checkbox input');
-      await input.evaluate((el: HTMLInputElement, val: boolean) => {
-        el.checked = val;
-        el.dispatchEvent(new Event('change', { bubbles: true }));
-        el.dispatchEvent(new Event('input', { bubbles: true }));
-        // Also click the mat-checkbox component to trigger Angular's handler
-        const matCheckbox = el.closest('mat-checkbox');
-        if (matCheckbox) {
-          matCheckbox.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-        }
-      }, valueCheckbox);
+      // dispatchEvent('click') on the mat-checkbox host element triggers Angular's handler
+      await this.selectAllPlanningsCheckbox.dispatchEvent('click');
       await this.page.waitForTimeout(1000);
     } else {
       const plannings = await this.getAllPlannings(0, false);
@@ -453,19 +450,11 @@ export class PlanningRowObject {
   }
 
   async clickOnCheckboxForMultipleDelete(valueCheckbox = true) {
-    const input = this.checkboxDelete.locator('input');
-    await input.evaluate((el: HTMLInputElement, val: boolean) => {
-      if (el.checked !== val) {
-        el.checked = val;
-        el.dispatchEvent(new Event('change', { bubbles: true }));
-        el.dispatchEvent(new Event('input', { bubbles: true }));
-        const matCheckbox = el.closest('mat-checkbox');
-        if (matCheckbox) {
-          matCheckbox.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-        }
-      }
-    }, valueCheckbox);
-    await this.page.waitForTimeout(500);
+    const isChecked = await this.checkboxDelete.locator('input').isChecked().catch(() => false);
+    if (isChecked !== valueCheckbox) {
+      await this.checkboxDelete.dispatchEvent('click');
+      await this.page.waitForTimeout(500);
+    }
   }
 
   async readPairing(): Promise<{ workerName: string; workerValue: boolean }[]> {