UX Dashboard

The UX Dashboard is a comprehensive dashboard component that provides a structured layout with configurable sections, including a header, sidebar, and main content area. It's designed to be highly customizable while maintaining a consistent look and feel.

Features

• Responsive Layout: Adapts to various screen sizes with appropriate layouts
• Configurable Sidebar: Collapsible sidebar with customizable sections
• Flexible Header: Support for search, user menu, and custom actions
• Persistent Configuration: Saves layout state using IndexedDB
• Theme Support: Multiple built-in themes with customization options
• Project Selection: Optional project menu integration
• Action Area: Space for primary actions and contextual tools
• Content Projection: Multiple content projection slots for maximum flexibility

Basic Usage

<app-ux-dashboard
  [id]="'my-dashboard'"
  [config]="dashboardConfig"
  [sections]="dashboardSections">
  
  <!-- Your dashboard content here -->
  <div>
    <h1>Dashboard Content</h1>
    <p>This is the main content area of the dashboard.</p>
  </div>
  
</app-ux-dashboard>

import { Component } from '@angular/core';
import { UxDashboardComponent, UxDashboardConfig, UxDashboardSection } from '@ux-widgets';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [UxDashboardComponent],
  // ...
})
export class MyComponent {
  // Dashboard configuration
  dashboardConfig: UxDashboardConfig = {
    id: 'my-dashboard',
    theme: 'blue',
    initialSidebarState: 'expanded',
    initialHeaderState: 'expanded',
    showHeaderSearch: true,
    showActionArea: true,
    showProjectMenu: true,
    persistConfig: true,
    autoLoadSavedConfig: true,
  };
  
  // Sidebar sections
  dashboardSections: UxDashboardSection[] = [
    {
      id: 'overview',
      title: 'Overview',
      icon: 'dashboard',
      route: '/overview',
      active: true
    },
    {
      id: 'projects',
      title: 'Projects',
      icon: 'folder',
      route: '/projects',
      badge: '8'
    },
    // Additional sections...
  ];
}

IndexedDB Integration

The UX Dashboard automatically saves your configuration and layout state to browser storage using IndexedDB when the persistConfig option is enabled. This feature ensures that users return to the same dashboard configuration they left, even after closing the browser.

How IndexedDB Storage Works

The dashboard uses a dedicated storage service (UxDashboardStorageService) that manages all database operations. Here's how it works:

1. Database Initialization:

   • The service creates a database called ux-dashboard-db with a store for dashboard configurations
   • Each configuration is identified by a unique dashboard ID

2. Data Structure:

   • Configurations are stored with the following structure:

     interface UxDashboardStorageItem {
       id: string;              // Dashboard ID
       config: UxDashboardConfig; // Dashboard configuration
       sections: UxDashboardSection[]; // Sidebar sections
       lastSaved: string;       // Timestamp
     }
     

3. Saving Process:

   • Configuration is saved automatically on changes (when auto-save is enabled)
   • Manual saving is available through the service API
   • The service uses a transaction queue to prevent conflicts
   • Robust error handling prevents data loss

4. Loading Process:

   • When autoLoadSavedConfig is true, the dashboard automatically loads the saved state
   • Configurations can be loaded manually with loadSavedConfig()
   • Fallback default configurations ensure the dashboard always displays correctly

Ensuring Proper Functionality

When implementing the UX Dashboard with IndexedDB storage, follow these steps to ensure everything works correctly:

1. Provide Unique IDs

Always provide a unique ID for each dashboard instance:

dashboardConfig: UxDashboardConfig = {
  id: 'my-unique-dashboard-id',
  // Other configuration...
};

2. Handle Database Initialization Properly

The dashboard needs time to initialize the database. Add proper initialization handling:

import { UxDashboardStorageService } from '@ux-widgets';

constructor(private dashboardStorage: UxDashboardStorageService) {}

ngOnInit() {
  // Wait for database to be ready before performing operations
  this.dashboardStorage.isDatabaseReady().pipe(
    filter(ready => ready),
    take(1)
  ).subscribe(() => {
    // Database is ready, safe to perform operations
    this.initializeDashboard();
  });
}

3. Implement Error Handling

IndexedDB operations can fail due to various reasons (storage limits, permissions, etc.). Implement proper error handling:

saveConfiguration() {
  this.dashboardStorage.saveDashboardConfig(
    this.dashboardId,
    this.config,
    this.sections,
    'my-component'
  ).subscribe({
    next: success => {
      if (success) {
        // Show success message
      } else {
        // Show error message
      }
    },
    error: err => {
      // Handle error (e.g., try localStorage fallback)
      console.error('Failed to save dashboard config', err);
    }
  });
}

4. Test in Private/Incognito Mode

Some browsers restrict IndexedDB in private browsing modes. Always test your implementation in:

• Regular browsing mode
• Private/incognito mode
• Different browsers

5. Consider Storage Limitations

IndexedDB storage can be limited or cleared by the browser. Implement a fallback mechanism:

// Check if saved config exists
this.dashboardStorage.getDashboardConfig(this.dashboardId).pipe(
  catchError(err => {
    console.warn('Could not load from IndexedDB', err);
    // Try fallback storage if available
    return this.loadFromLocalStorage();
  })
).subscribe(config => {
  if (config) {
    this.applyConfiguration(config);
  } else {
    // Apply default configuration
    this.applyDefaultConfiguration();
  }
});

By following these steps, you can ensure that the UX Dashboard with IndexedDB storage works reliably across different environments and usage scenarios.