save

src/app/portal-manage/dashboard-management/dashboard-management.component.ts

@@ -14,6 +14,7 @@ import { MenuItemsWidget } from '../models/m-menuitems-widget.model';
 import { DashboardDataService } from '../services/dashboard-data.service';
 import { MMenuitemsWidgetService } from '../services/m-menuitems-widget.service';
 import { DashboardStateService, SelectedDataset } from '../services/dashboard-state.service';
+import { WidgetStateService } from '../services/widget-state.service'; // Import WidgetStateService
 
 import { WidgetConfigComponent } from './widget-config/widget-config.component';
 
@@ -100,6 +101,7 @@ export class DashboardManagementComponent implements OnInit {
     private dashboardDataService: DashboardDataService,
     private mMenuitemsWidgetService: MMenuitemsWidgetService,
     private dashboardStateService: DashboardStateService,
+    private widgetStateService: WidgetStateService, // Inject WidgetStateService
     private dialog: MatDialog,
     private notificationService: NotificationService
   ) { }
@@ -261,11 +263,19 @@ export class DashboardManagementComponent implements OnInit {
 
     const dashboardToSave = JSON.parse(JSON.stringify(this.dashboardData));
     if (dashboardToSave.widgets) {
+      const allWidgetStates = this.widgetStateService.getAllWidgetStates(); // Get all current widget states
+
       dashboardToSave.widgets.forEach((widget: WidgetModel) => {
         if (widget.config && typeof widget.config === 'object') {
           widget.config = JSON.stringify(widget.config);
         }
-        // Add stringify for perspective
+
+        // Update perspective from WidgetStateService if available
+        const currentPerspective = allWidgetStates.get(widget.widgetId);
+        if (currentPerspective !== undefined) { // Check for undefined to allow nulls
+          widget.perspective = currentPerspective;
+        }
+        // Ensure perspective is stringified if it's an object (though it should be string from getWidgetState)
         if (widget.perspective && typeof widget.perspective === 'object') {
           widget.perspective = JSON.stringify(widget.perspective);
         }

src/app/portal-manage/services/widget-state.service.ts

+import { Injectable } from '@angular/core';
+
+export interface StatefulWidget {
+  widgetId: string;
+  getWidgetState(): string | null;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WidgetStateService {
+  private registeredWidgets = new Map<string, StatefulWidget>();
+
+  constructor() { }
+
+  registerWidget(widgetId: string, widget: StatefulWidget): void {
+    this.registeredWidgets.set(widgetId, widget);
+    console.log(`Widget ${widgetId} registered.`);
+  }
+
+  unregisterWidget(widgetId: string): void {
+    this.registeredWidgets.delete(widgetId);
+    console.log(`Widget ${widgetId} unregistered.`);
+  }
+
+  getWidgetState(widgetId: string): string | null {
+    const widget = this.registeredWidgets.get(widgetId);
+    if (widget) {
+      return widget.getWidgetState();
+    }
+    return null;
+  }
+
+  getAllWidgetStates(): Map<string, string | null> {
+    const allStates = new Map<string, string | null>();
+    this.registeredWidgets.forEach((widget, widgetId) => {
+      allStates.set(widgetId, widget.getWidgetState());
+    });
+    return allStates;
+  }
+}

src/app/portal-manage/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts

-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { GridModule, PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, GridComponent, ToolbarItems, SearchSettingsModel, GroupSettingsModel, FilterSettingsModel, SelectionSettingsModel, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, ColumnMenuClickEventArgs, PdfExportProperties, ExcelExportProperties, LoadingIndicatorModel, Column,SearchService } from '@syncfusion/ej2-angular-grids';
 import { ClickEventArgs } from '@syncfusion/ej2-navigations';
@@ -6,6 +6,7 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
 import { DashboardStateService } from '../../services/dashboard-state.service';
 import { BaseWidgetComponent } from '../base-widget.component';
 import { L10n, setCulture } from '@syncfusion/ej2-base'; // For L10n
+import { WidgetStateService, StatefulWidget } from '../../services/widget-state.service'; // Import WidgetStateService
 
 setCulture('th-TH');
 
@@ -54,9 +55,11 @@ L10n.load({
   providers: [PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, SearchService],
   templateUrl: './syncfusion-datagrid-widget.component.html',
 })
-export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
+export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent implements OnInit, OnDestroy, StatefulWidget {
   @ViewChild('grid') public grid: GridComponent;
 
+  public widgetId: string; // Added widgetId property
+
   public data: DataManager = new DataManager([]);
   public columns: any[] = [];
   public pageSettings: Object = { pageSize: 10 };
@@ -78,10 +81,28 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
   public showColumnMenu: boolean;
   public allowMultiSorting: boolean;
 
-  constructor(protected override dashboardStateService: DashboardStateService) {
+  constructor(
+    protected override dashboardStateService: DashboardStateService,
+    private widgetStateService: WidgetStateService // Inject WidgetStateService
+  ) {
     super(dashboardStateService);
   }
 
+  override ngOnInit(): void { // Added override
+    super.ngOnInit(); // Call parent's ngOnInit
+    if (this.config && this.config.widgetId) {
+      this.widgetId = this.config.widgetId; // Initialize widgetId
+      this.widgetStateService.registerWidget(this.widgetId, this);
+    }
+  }
+
+  override ngOnDestroy(): void { // Added override
+    super.ngOnDestroy(); // Call parent's ngOnDestroy
+    if (this.config && this.config.widgetId) {
+      this.widgetStateService.unregisterWidget(this.config.widgetId);
+    }
+  }
+
   applyInitialConfig(): void {
     this.title = this.config.title || 'Data Grid';
     this.columns = this.config.columns || [];
@@ -112,6 +133,33 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
     this.allowReordering = this.config.allowReordering !== undefined ? this.config.allowReordering : true;
     this.showColumnMenu = this.config.showColumnMenu !== undefined ? this.config.showColumnMenu : true;
     this.allowMultiSorting = this.config.allowMultiSorting !== undefined ? this.config.allowMultiSorting : true;
+
+    // Apply saved perspective if available
+    if (this.config.perspective && this.grid) {
+      this.setWidgetState(this.config.perspective);
+    }
+  }
+
+  /**
+   * Returns the current state of the Syncfusion Grid.
+   * This state can be used to restore the grid's perspective (sorting, filtering, grouping, etc.).
+   * @returns A JSON string representing the grid's state.
+   */
+  getWidgetState(): string | null {
+    if (this.grid) {
+      return this.grid.getPersistData();
+    }
+    return null;
+  }
+
+  /**
+   * Applies a previously saved state to the Syncfusion Grid.
+   * @param state A JSON string representing the grid's state.
+   */
+  setWidgetState(state: string): void {
+    if (this.grid && state) {
+      (this.grid as any).setPersistData(state); // Cast to any
+    }
   }
 
   onDataUpdate(data: any[]): void {