@barcoding/gridster-core

CRITICAL COMPONENT - The gridster-core package provides a dynamic widget system used by all three application instances.

Overview

• Package: @barcoding/gridster-core
• Location: web/projects/packages/@barcoding/gridster-core/
• Used By: Backend app, Front app, Dashboard app (ALL THREE)
• Dependencies: @barcoding/auth-core, @barcoding/core, @barcoding/sdk

Why It's Critical

The widget system is database-driven:

• Widget definitions stored in database
• Users can add/remove widgets
• Users can resize/reposition widgets
• Layout persists per user
• Configurations sync across sessions

All three application instances rely on this for their dashboard functionality.

Key Features

Dynamic Widget Loading

• Load widgets dynamically based on database configuration
• Support for lazy-loaded widget modules
• Component factory for widget instantiation

User Customization

• Drag-and-drop widget positioning
• Resize widgets
• Add new widgets from catalog
• Remove unwanted widgets
• Save layout to database

Grid System

• Responsive grid layout
• Configurable columns
• Automatic positioning
• Collision detection
• Gap management

Main Components

GridsterComponent

Main gridster container:

import { GridsterComponent } from '@barcoding/gridster-core';

<gridster [options]="gridsterOptions">
  <gridster-item
    *ngFor="let widget of widgets"
    [item]="widget">
    <!-- Widget content -->
  </gridster-item>
</gridster>

WidgetHostDirective

Dynamic widget host:

<div appWidgetHost [widgetType]="widget.type" [config]="widget.config"></div>

GridsterService

Widget management:

import { GridsterService } from '@barcoding/gridster-core';

constructor(private gridsterService: GridsterService) {}

// Load widgets
this.gridsterService.loadWidgets().subscribe(widgets => {
  this.widgets = widgets;
});

// Save layout
this.gridsterService.saveLayout(layout);

// Add widget
this.gridsterService.addWidget(widgetConfig);

// Remove widget
this.gridsterService.removeWidget(widgetId);

Usage Example

import { Component, OnInit } from '@angular/core';
import { GridsterConfig, GridsterItem } from '@barcoding/gridster-core';

@Component({
  selector: 'app-dashboard',
  template: `
    <gridster [options]="options">
      <gridster-item
        *ngFor="let item of dashboard"
        [item]="item">
        <div appWidgetHost
             [widgetType]="item.widgetType"
             [config]="item.config">
        </div>
      </gridster-item>
    </gridster>
  `
})
export class DashboardComponent implements OnInit {
  options: GridsterConfig;
  dashboard: GridsterItem[];

  ngOnInit() {
    this.options = {
      gridType: 'fit',
      compactType: 'none',
      margin: 10,
      outerMargin: true,
      pushItems: true,
      draggable: {
        enabled: true
      },
      resizable: {
        enabled: true
      }
    };

    this.dashboard = [
      { cols: 2, rows: 2, y: 0, x: 0, widgetType: 'calendar' },
      { cols: 2, rows: 1, y: 0, x: 2, widgetType: 'chart' },
      { cols: 1, rows: 1, y: 2, x: 0, widgetType: 'stats' }
    ];
  }
}

Widget Configuration

Widgets are configured in the database:

interface WidgetConfig {
  id: number;
  type: string;           // Widget type (calendar, chart, etc.)
  title: string;          // Widget title
  cols: number;           // Grid columns
  rows: number;           // Grid rows
  x: number;              // X position
  y: number;              // Y position
  config: any;            // Widget-specific config
  userId: number;         // User ID
}

Creating Custom Widgets

See Creating Widgets for details.

Database Schema

Widgets are stored in the widgets table:

CREATE TABLE widgets (
  id INT PRIMARY KEY AUTO_INCREMENT,
  user_id INT NOT NULL,
  type VARCHAR(50) NOT NULL,
  title VARCHAR(255) NOT NULL,
  cols INT NOT NULL,
  rows INT NOT NULL,
  x INT NOT NULL,
  y INT NOT NULL,
  config JSON,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id)
);

Coming Soon

This page is under construction. More details will be added about:

• Complete API reference
• Widget lifecycle
• Advanced configuration
• Event handling
• Performance optimization

For now, refer to:

• Creating Widgets
• Multi-Instance Architecture
• State Management