@openmfp/webcomponents 0.6.1

package/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,354 @@
+import { resetDashboardCardRegistry } from '../card/utils/dashboard-card-registry';
+import { CardConfig, SectionConfig } from '../models';
+import { Dashboard } from './dashboard.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+vi.mock('gridstack', () => ({}));
+
+vi.mock('gridstack/dist/angular', async () => {
+  const { Component, EventEmitter, Input, Output } =
+    await import('@angular/core');
+
+  @Component({
+    selector: 'mfp-gridstack',
+    standalone: true,
+    template: '<ng-content />',
+  })
+  class GridstackComponent {
+    @Input() options?: unknown;
+    @Output() readonly changeCB = new EventEmitter<unknown>();
+
+    gridstackItems = {
+      toArray: () => [],
+    };
+  }
+
+  @Component({
+    selector: 'mfp-gridstack-item',
+    standalone: true,
+    template: '<ng-content />',
+  })
+  class GridstackItemComponent {
+    @Input() options?: unknown;
+  }
+
+  return {
+    GridstackComponent,
+    GridstackItemComponent,
+  };
+});
+
+type Fixture = ComponentFixture<Dashboard>;
+
+function setup(): { fixture: Fixture; component: Dashboard } {
+  const fixture = TestBed.createComponent(Dashboard);
+  const component = fixture.componentInstance;
+  return { fixture, component };
+}
+
+function root(fixture: Fixture): ShadowRoot | HTMLElement {
+  return fixture.nativeElement.shadowRoot ?? fixture.nativeElement;
+}
+
+describe('Dashboard', () => {
+  beforeEach(async () => {
+    resetDashboardCardRegistry();
+    await TestBed.configureTestingModule({
+      imports: [Dashboard],
+    }).compileComponents();
+  });
+
+  it('creates and applies the configured background image', () => {
+    const { fixture, component } = setup();
+
+    fixture.componentRef.setInput('config', {
+      title: 'Operations',
+      backgroundImageUrl: 'https://example.com/bg.png',
+    });
+    fixture.detectChanges();
+
+    expect(component).toBeTruthy();
+    expect(fixture.nativeElement.style.backgroundImage).toContain(
+      'https://example.com/bg.png',
+    );
+  });
+
+  it('renders dashboard metadata, sections and loose cards from the provided inputs', () => {
+    const { fixture, component } = setup();
+
+    fixture.componentRef.setInput('config', {
+      title: 'Operations',
+      description: 'Platform status',
+    });
+    component.sections.set([{ id: 'alpha', title: 'Alpha' }]);
+    component.cards.set([
+      { id: 'card-1', component: 'mfp-a', sectionId: 'alpha' },
+      { id: 'card-2', component: 'mfp-b' },
+    ]);
+    fixture.detectChanges();
+
+    expect(root(fixture).textContent).toContain('Operations');
+    expect(root(fixture).textContent).toContain('Platform status');
+    expect(
+      root(fixture).querySelectorAll('mfp-dashboard-section'),
+    ).toHaveLength(1);
+    expect(root(fixture).querySelectorAll('gridstack-item')).toHaveLength(1);
+    expect(
+      root(fixture).querySelector('.mfp-dashboard__toolbar ui5-button'),
+    ).toBeNull();
+  });
+
+  it('switches the template into edit mode and opens the add-card dialog from the toolbar', () => {
+    const { fixture, component } = setup();
+
+    fixture.componentRef.setInput('config', {
+      title: 'Operations',
+      editable: true,
+    });
+    component.cards.set([{ id: 'card-1', component: 'mfp-a' }]);
+    fixture.detectChanges();
+
+    const editButton = root(fixture).querySelector(
+      '.mfp-dashboard__toolbar ui5-button',
+    );
+
+    editButton?.dispatchEvent(new Event('click'));
+    fixture.detectChanges();
+
+    const addCardButton = root(fixture).querySelector('#add-card-btn');
+
+    expect(component.editMode()).toBe(true);
+    expect(addCardButton).not.toBeNull();
+    expect(
+      root(fixture).querySelectorAll('.mfp-dashboard__edit-bar ui5-button'),
+    ).toHaveLength(2);
+
+    addCardButton?.dispatchEvent(new Event('click'));
+    fixture.detectChanges();
+
+    expect(component.cardDialogOpen()).toBe(true);
+  });
+
+  it('computes added components, section cards, loose cards and drag options from state', () => {
+    const { component } = setup();
+    const cards: CardConfig[] = [
+      { id: 'card-1', component: 'mfp-a', sectionId: 'alpha' },
+      { id: 'card-2', component: 'mfp-b' },
+      { id: 'card-3', component: 'mfp-c' },
+    ];
+    const gridOptions = (
+      component as unknown as { gridOptions: () => { disableDrag: boolean } }
+    ).gridOptions;
+
+    component.cards.set(cards);
+
+    expect(component.addedCardsIds()).toEqual(
+      new Set(['card-1', 'card-2', 'card-3']),
+    );
+    expect(component.sectionCards()('alpha')).toEqual([cards[0]]);
+    expect(component.looseCards()).toEqual([cards[1], cards[2]]);
+    expect(gridOptions().disableDrag).toBe(true);
+
+    component.editMode.set(true);
+
+    expect(gridOptions().disableDrag).toBe(false);
+  });
+
+  it('captures snapshots and grid positions when entering edit mode', () => {
+    const { component } = setup();
+    const sections: SectionConfig[] = [{ id: 'alpha', title: 'Alpha' }];
+    const cards: CardConfig[] = [
+      { id: 'card-1', component: 'mfp-a', x: 0, y: 0 },
+      { id: 'card-2', component: 'mfp-b', sectionId: 'alpha', x: 1, y: 1 },
+    ];
+
+    component.sections.set(sections);
+    component.cards.set(cards);
+    (component as unknown as { gridStackItems: () => unknown }).gridStackItems =
+      () => ({
+        gridstackItems: {
+          toArray: () => [
+            { options: { id: 'card-1', x: 4, y: 2 } },
+            { options: { id: 'card-2', x: 1, y: 3 } },
+          ],
+        },
+      });
+
+    component.enterEditMode();
+
+    expect(component.editMode()).toBe(true);
+    expect(
+      (component as unknown as { sectionsSnapshot: SectionConfig[] })
+        .sectionsSnapshot,
+    ).toEqual(sections);
+    expect(
+      (component as unknown as { cardsSnapshot: CardConfig[] }).cardsSnapshot,
+    ).toEqual(cards);
+    expect(component.cardsPosition.get('card-1')).toEqual({ x: 4, y: 2 });
+    expect(component.cardsPosition.get('card-2')).toEqual({ x: 1, y: 3 });
+  });
+
+  it('emits the saved payload and persists the latest order on save', () => {
+    const { component } = setup();
+    const sections: SectionConfig[] = [{ id: 'alpha', title: 'Alpha' }];
+    const cards: CardConfig[] = [{ id: 'card-1', component: 'mfp-a' }];
+    const emitted: { sections: SectionConfig[]; cards: CardConfig[] }[] = [];
+
+    component.sections.set(sections);
+    component.cards.set(cards);
+    component.editMode.set(true);
+    component.saved.subscribe((value) => emitted.push(value));
+    component.onOrderChange({
+      nodes: [{ id: 'card-1', x: 7, y: 5 }],
+    } as never);
+
+    component.saveEdit();
+
+    expect(emitted).toEqual([
+      {
+        sections,
+        cards: [{ id: 'card-1', component: 'mfp-a', x: 7, y: 5 }],
+      },
+    ]);
+    expect(component.cardsPosition.get('card-1')).toEqual({ x: 7, y: 5 });
+    expect(component.editMode()).toBe(false);
+  });
+
+  it('restores snapshot data and saved positions when edit mode is cancelled', () => {
+    const { component } = setup();
+    const sections: SectionConfig[] = [{ id: 'alpha', title: 'Alpha' }];
+    const cards: CardConfig[] = [
+      { id: 'card-1', component: 'mfp-a', x: 0, y: 0 },
+      { id: 'card-2', component: 'mfp-b', sectionId: 'alpha', x: 1, y: 1 },
+    ];
+
+    component.sections.set(sections);
+    component.cards.set(cards);
+    (component as unknown as { gridStackItems: () => unknown }).gridStackItems =
+      () => ({
+        gridstackItems: {
+          toArray: () => [
+            { options: { id: 'card-1', x: 3, y: 6 } },
+            { options: { id: 'card-2', x: 8, y: 1 } },
+          ],
+        },
+      });
+    component.enterEditMode();
+    component.sections.set([{ id: 'beta', title: 'Beta' }]);
+    component.cards.set([{ id: 'temp', component: 'mfp-temp', x: 9, y: 9 }]);
+    component.cardDialogOpen.set(true);
+
+    component.cancelEdit();
+
+    expect(component.sections()).toEqual(sections);
+    expect(component.cards()).toEqual([
+      { id: 'card-1', component: 'mfp-a', x: 3, y: 6 },
+      { id: 'card-2', component: 'mfp-b', sectionId: 'alpha', x: 8, y: 1 },
+    ]);
+    expect(component.cardDialogOpen()).toBe(false);
+    expect(component.editMode()).toBe(false);
+  });
+
+  it('removes sections together with their cards and removes loose cards by id', () => {
+    const { component } = setup();
+
+    component.sections.set([
+      { id: 'alpha', title: 'Alpha' },
+      { id: 'beta', title: 'Beta' },
+    ]);
+    component.cards.set([
+      { id: 'card-1', component: 'mfp-a', sectionId: 'alpha' },
+      { id: 'card-2', component: 'mfp-b', sectionId: 'beta' },
+      { id: 'card-3', component: 'mfp-c' },
+    ]);
+
+    component.removeSection('alpha');
+    component.removeCard('card-3');
+
+    expect(component.sections()).toEqual([{ id: 'beta', title: 'Beta' }]);
+    expect(component.cards()).toEqual([
+      { id: 'card-2', component: 'mfp-b', sectionId: 'beta' },
+    ]);
+  });
+
+  it('opens and closes the add-card dialog', () => {
+    const { component } = setup();
+
+    component.openCardPanel();
+    expect(component.cardDialogOpen()).toBe(true);
+
+    component.closeCardPanel();
+    expect(component.cardDialogOpen()).toBe(false);
+  });
+
+  it('adds new cards and closes the panel', () => {
+    const { component } = setup();
+
+    component.cards.set([{ id: 'card-1', component: 'mfp-a' }]);
+    component.cardDialogOpen.set(true);
+
+    component.onCardsAdded([
+      {
+        id: 'template-card',
+        component: 'mfp-b',
+        label: 'Table',
+        componentInputs: { size: 'L' },
+      },
+    ]);
+
+    expect(component.cards()).toEqual([
+      { id: 'card-1', component: 'mfp-a' },
+      {
+        id: 'template-card',
+        component: 'mfp-b',
+        label: 'Table',
+        componentInputs: { size: 'L' },
+      },
+    ]);
+    expect(component.cardDialogOpen()).toBe(false);
+  });
+
+  it('preserves card constraint fields (maxH/maxW/minH/minW) through saveEdit', () => {
+    const { component } = setup();
+    const cards: CardConfig[] = [
+      {
+        id: 'card-1',
+        component: 'mfp-a',
+        x: 0,
+        y: 0,
+        maxH: 4,
+        maxW: 6,
+        minH: 1,
+        minW: 2,
+      },
+    ];
+
+    component.cards.set(cards);
+    component.editMode.set(true);
+    component.saved.subscribe(() => false);
+    component.onOrderChange({
+      nodes: [{ id: 'card-1', x: 1, y: 2 }],
+    } as never);
+
+    component.saveEdit();
+
+    expect(component.cards()[0]).toMatchObject({
+      maxH: 4,
+      maxW: 6,
+      minH: 1,
+      minW: 2,
+    });
+  });
+
+  it('still closes the add-card dialog when no cards were selected', () => {
+    const { component } = setup();
+
+    component.cardDialogOpen.set(true);
+    component.cards.set([{ id: 'card-1', component: 'mfp-a' }]);
+
+    component.onCardsAdded([]);
+
+    expect(component.cards()).toEqual([{ id: 'card-1', component: 'mfp-a' }]);
+    expect(component.cardDialogOpen()).toBe(false);
+  });
+});

package/projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts

@@ -0,0 +1,238 @@
+import { ButtonSettings } from '../../models/ui-definition';
+import { AddCardDialog } from '../add-card-dialog/add-card-dialog.component';
+import { addComponentToRegistry } from '../card/utils/dashboard-card-registry';
+import { DashboardCard } from '../card/dashboard-card.component';
+import { CardConfig, DashboardConfig, SectionConfig } from '../models';
+import { CELL_HEIGHT, COMPACT_BREAKPOINT } from '../models/constants';
+import { DashboardSection } from '../section/dashboard-section.component';
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  Type,
+  ViewEncapsulation,
+  computed,
+  inject,
+  input,
+  linkedSignal,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+import { Menu } from '@fundamental-ngx/ui5-webcomponents/menu';
+import { MenuItem } from '@fundamental-ngx/ui5-webcomponents/menu-item';
+import { MenuSeparator } from '@fundamental-ngx/ui5-webcomponents/menu-separator';
+import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
+import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
+import '@ui5/webcomponents-icons/dist/action-settings.js';
+import '@ui5/webcomponents-icons/dist/menu2.js';
+import { GridStackNode, GridStackOptions } from 'gridstack';
+import {
+  GridstackComponent,
+  GridstackItemComponent,
+  nodesCB,
+} from 'gridstack/dist/angular';
+
+document.body.classList.add('ui5-content-density-compact');
+
+@Component({
+  selector: 'mfp-dashboard',
+  imports: [
+    GridstackComponent,
+    GridstackItemComponent,
+    AddCardDialog,
+    DashboardSection,
+    DashboardCard,
+    Button,
+    Menu,
+    MenuItem,
+    MenuSeparator,
+    Title,
+    Text,
+  ],
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.scss',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[style.background-image]':
+      'config().backgroundImageUrl ? "url(" + config().backgroundImageUrl + ")" : null',
+  },
+})
+export class Dashboard implements OnInit, OnDestroy {
+  static registerAngularComponents(componentTypes: Type<unknown>[]): void {
+    addComponentToRegistry(componentTypes);
+  }
+
+  config = input.required<DashboardConfig>();
+  sections = model<SectionConfig[]>([]);
+  cards = model<CardConfig[]>([]);
+  availableCards = input<CardConfig[]>([]);
+
+  readonly saved = output<{ sections: SectionConfig[]; cards: CardConfig[] }>();
+  readonly actionButtonClick = output<{
+    event: MouseEvent;
+    action: ButtonSettings;
+  }>();
+
+  editMode = signal(false);
+  compactToolbar = signal(false);
+  toolbarMenuOpen = signal(false);
+
+  private sectionsSnapshot: SectionConfig[] = [];
+  private cardsSnapshot: CardConfig[] = [];
+  private gridStackItems = viewChild.required<GridstackComponent>('grid');
+  private resizeObserver?: ResizeObserver;
+  private readonly hostEl = inject(ElementRef<HTMLElement>);
+
+  protected gridOptions = computed(
+    (): GridStackOptions => ({
+      cellHeight: CELL_HEIGHT,
+      disableResize: !this.editMode(),
+      disableDrag: !this.editMode(),
+      columnOpts: {
+        breakpointForWindow: true,
+        breakpoints: [
+          { w: 1440, c: 12, layout: 'none' },
+          { w: 1024, c: 8, layout: 'compact' },
+          { w: 600, c: 1, layout: 'list' },
+        ],
+      },
+    }),
+  );
+
+  cardDialogOpen = signal(false);
+  customActions = computed(() => this.config().customActions ?? []);
+  addedCardsIds = computed(() => new Set(this.cards().map((c) => c.id)));
+
+  editViewButton = computed(() => ({
+    icon: 'action-settings',
+    design: 'Transparent' as const,
+    tooltip: 'Edit View',
+    text: '',
+    ...this.config().buttonsSettings?.editViewButton,
+  }));
+
+  addCardButton = computed(() => ({
+    icon: '',
+    design: 'Default' as const,
+    tooltip: '',
+    text: '+ Add Card',
+    ...this.config().buttonsSettings?.addCardButton,
+  }));
+
+  sectionCards = computed(() => {
+    const all = this.cards();
+    return (sectionId: string) => all.filter((c) => c.sectionId === sectionId);
+  });
+
+  cardsPosition = new Map<string, { x?: number; y?: number }>();
+  looseCards = linkedSignal(() => this.cards().filter((c) => !c.sectionId));
+
+  private newGridStackNodes: GridStackNode[] = [];
+
+  ngOnInit(): void {
+    this.resizeObserver = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      this.compactToolbar.set(width < COMPACT_BREAKPOINT);
+    });
+    this.resizeObserver.observe(this.hostEl.nativeElement);
+  }
+
+  ngOnDestroy(): void {
+    this.resizeObserver?.disconnect();
+  }
+
+  onMenuItemClick(actionId: string, event: Event): void {
+    if (actionId === 'edit-view') {
+      this.enterEditMode();
+      return;
+    }
+    const action = this.customActions().find((a) => a.action === actionId);
+    if (action) {
+      this.actionButtonClick.emit({ event: event as MouseEvent, action });
+    }
+  }
+
+  enterEditMode(): void {
+    const gridStackNodes = this.gridStackItems()
+      .gridstackItems?.toArray()
+      .map((node) => node.options);
+
+    if (gridStackNodes) {
+      this.saveCardsPosition(gridStackNodes);
+    }
+
+    this.sectionsSnapshot = [...this.sections()];
+    this.cardsSnapshot = [...this.cards()];
+    this.editMode.set(true);
+  }
+
+  saveEdit(): void {
+    this.saveCardsPosition(this.newGridStackNodes);
+    this.saved.emit({
+      sections: this.sections(),
+      cards: this.cards().map((c) => {
+        const pos = this.cardsPosition.get(c.id);
+        return { ...c, x: pos?.x, y: pos?.y };
+      }),
+    });
+    this.editMode.set(false);
+  }
+
+  cancelEdit(): void {
+    this.sections.set(this.sectionsSnapshot);
+    this.cards.set(
+      this.cardsSnapshot.map((c) => {
+        const pos = this.cardsPosition.get(c.id);
+        return { ...c, x: pos?.x, y: pos?.y };
+      }),
+    );
+    this.cardDialogOpen.set(false);
+    this.editMode.set(false);
+  }
+
+  removeSection(id: string): void {
+    this.sections.update((list) => list.filter((s) => s.id !== id));
+    this.cards.update((list) => list.filter((c) => c.sectionId !== id));
+  }
+
+  removeCard(id: string): void {
+    this.cardsPosition.delete(id);
+    this.cards.update((list) => list.filter((c) => c.id !== id));
+  }
+
+  openCardPanel(): void {
+    this.cardDialogOpen.set(true);
+  }
+
+  closeCardPanel(): void {
+    this.cardDialogOpen.set(false);
+  }
+
+  onCardsAdded(cards: CardConfig[]): void {
+    if (cards.length > 0) {
+      this.cards.update((list) => [
+        ...list,
+        ...cards.map((ac) => ({
+          ...ac,
+        })),
+      ]);
+    }
+    this.closeCardPanel();
+  }
+
+  onOrderChange(event: nodesCB): void {
+    this.newGridStackNodes = event.nodes;
+  }
+
+  private saveCardsPosition(items: GridStackNode[]): void {
+    items.forEach((node) => {
+      if (node.id) {
+        this.cardsPosition.set(node.id, { x: node.x, y: node.y });
+      }
+    });
+  }
+}

package/projects/ngx/declarative-ui/dashboard/dashboard/index.ts

@@ -0,0 +1 @@
+export * from './dashboard.component';

package/projects/ngx/declarative-ui/dashboard/index.ts

@@ -0,0 +1,5 @@
+export * from './dashboard';
+export * from './add-card-dialog/add-card-dialog.component';
+export * from './card/dashboard-card.component';
+export * from './section/dashboard-section.component';
+export * from './models';

package/projects/ngx/declarative-ui/dashboard/models/constants.ts

@@ -0,0 +1,2 @@
+export const COMPACT_BREAKPOINT = 726;
+export const CELL_HEIGHT = 10;

package/projects/ngx/declarative-ui/dashboard/models/dashboard.model.ts

@@ -0,0 +1,50 @@
+import { ButtonSettings } from '../../models/ui-definition';
+
+
+
+
+export const CARD_TYPES = {
+  WC: 'wc',
+  ANGULAR: 'angular',
+  SAP_UI: 'sap-ui',
+} as const;
+
+export type CardsType = (typeof CARD_TYPES)[keyof typeof CARD_TYPES];
+
+export interface CardConfig {
+  id: string;
+  w?: number;
+  h?: number;
+  x?: number;
+  y?: number;
+  maxH?: number;
+  maxW?: number;
+  minH?: number;
+  minW?: number;
+  sectionId?: string;
+  component: string;
+  type?: CardsType;
+  componentInputs?: Record<string, unknown>;
+  label?: string;
+}
+
+export interface SectionConfig {
+  id: string;
+  w?: number;
+  title?: string;
+  editable?: boolean;
+}
+
+export interface DashboardButtonsSettings {
+  editViewButton?: Partial<ButtonSettings>;
+  addCardButton?: Partial<ButtonSettings>;
+}
+
+export interface DashboardConfig {
+  title: string;
+  description?: string;
+  backgroundImageUrl?: string;
+  buttonsSettings?: DashboardButtonsSettings;
+  customActions?: ButtonSettings[];
+  editable?: boolean;
+}

package/projects/ngx/declarative-ui/dashboard/models/index.ts

@@ -0,0 +1 @@
+export * from './dashboard.model';

package/projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.html

@@ -0,0 +1,28 @@
+<div
+  class="section"
+  [class.section--edit]="editMode() && section().editable !== false"
+>
+  @if (editMode() && section().editable !== false) {
+    <ui5-button
+      class="section__remove"
+      design="Default"
+      icon="decline"
+      (click)="removeSection.emit()"
+    >
+    </ui5-button>
+  }
+  @if (section().title) {
+    <div class="section__header">
+      <span class="section__title">{{ section().title }}</span>
+    </div>
+  }
+  <div class="section__grid" [style.--cols]="columns()">
+    @for (card of cards(); track card.id) {
+      <mfp-dashboard-card
+        [card]="card"
+        [editMode]="editMode() && section().editable !== false"
+        (removeCard)="removeCard.emit($any(card.id))"
+      />
+    }
+  </div>
+</div>