mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00

Files

Lorenz Hilpert daf79d55a5 ✨ feat(shell-notifications): add notification display component

Add feature library for rendering grouped notifications with:
- Grouped notification display with collapsible sections
- Unread/read status indication
- Relative timestamps via date-fns
- Action buttons supporting navigation and callback types

2025-12-03 21:16:33 +01:00

2.4 KiB

Raw Blame History

shell-notifications

Type: Feature Library Domain: Shell Path: libs/shell/notifications

Overview

Notification display component that renders grouped notifications with actions. Used within the header's notification toggle overlay panel.

Features

Grouped notification display with collapsible sections
Unread/read status indication
Relative timestamps (e.g., "5 minutes ago")
Action buttons with navigation or callback support

Installation

import { ShellNotificationsComponent } from '@isa/shell/notifications';

Usage

@Component({
  selector: 'app-notification-panel',
  standalone: true,
  imports: [ShellNotificationsComponent],
  template: `<shell-notifications />`
})
export class NotificationPanelComponent {}

Components

ShellNotificationsComponent

Selector: shell-notifications

Main container that displays notifications grouped by category.

Behavior:

Groups notifications by group property
Sorts within groups: unread first, then by timestamp (newest first)
Empty state when no notifications

ShellNotificationComponent

Selector: shell-notification

Individual notification card with action support.

Inputs:

notification (required): Notification object to display

Outputs:

actionTriggered: Emits when notification action is triggered

Action Types:

navigate - Navigates to internal or external route
callback - Executes custom callback function

E2E Testing

Element	data-what	data-which	Purpose
Container	`container`	`notifications-list`	Main list wrapper
Group header	`notification-group-header`	`{groupName}`	Group title
Separator	`separator`	`separator-{groupName}`	Visual divider

Accessibility

Uses role="feed" for notification list
Group separators marked with aria-hidden="true"
aria-label="Benachrichtigungen" on main container

Dependencies

Internal:

@isa/shell/common - NotificationsService, Notification type
@isa/core/logging - Logger factory
@isa/icons - Action icons

External:

date-fns - Relative time formatting

Testing

npx nx test shell-notifications

@isa/shell/common - NotificationsService
@isa/shell/header - Header notification toggle

2.4 KiB Raw Blame History