feat: allow preventing automatic item removal in Dashboard

[sissbruecker]

Description

Adds a dashboard-item-before-remove event that can be canceled to prevent automatic removal of an item or section. This gives manual control over the removal, for example to show a confirmation dialog. The event provides the relevant item or section that should be removed, and optionally the section in which the item is in, which then allows to programmatically remove the item after a confirmation.

Example usage:

dashboard.addEventListener('dashboard-item-before-remove', async (e) => {
  e.preventDefault();

  const item = e.detail.item;

  const dialog = document.createElement('vaadin-confirm-dialog');
  dialog.header = 'Remove Widget';
  dialog.message = `Are you sure you want to remove "${item.title}"?`;
  dialog.confirmText = 'Remove';
  dialog.confirmTheme = 'error primary';
  dialog.cancelButtonVisible = true;
  dialog.opened = true;

  document.body.appendChild(dialog);

  dialog.addEventListener('confirm', () => {
    const { item, section } = e.detail;
    if (section) {
      section.items = section.items.filter((i) => i !== item);
      dashboard.items = [...dashboard.items];
    } else {
      dashboard.items = dashboard.items.filter((i) => i !== item);
    }
    dialog.remove();
  });

  dialog.addEventListener('cancel', () => {
    dialog.remove();
  });
});

Part of vaadin/flow-components#8257

Type of change

• Feature

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud