วิดเจ็ทวิว

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

@@ -106,6 +106,9 @@
             #editLayout
             [allowResizing]="true"
             [allowDragging]="true"
+            [allowFloating]="false"
+            [enableRtl]="false"
+            [enablePersistence]="false"
             class="dashboard-layout"
           >
             <e-panels>
@@ -116,6 +119,10 @@
                 [sizeY]="panel.sizeY"
                 [row]="panel.row"
                 [col]="panel.col"
+                [minSizeX]="panel.minSizeX"
+                [minSizeY]="panel.minSizeY"
+                [maxSizeX]="panel.maxSizeX"
+                [maxSizeY]="panel.maxSizeY"
                 [zIndex]="999"
               >
                 <ng-template #header>

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

@@ -291,6 +291,9 @@
     position: relative;
     max-width: 100%;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
     &:hover {
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -305,12 +308,20 @@
     padding: 12px 16px;
     font-weight: 600;
     position: relative;
+    flex-shrink: 0;
+    min-height: 48px;
+    display: flex;
+    align-items: center;
   }
 
   .e-panel-content {
     border-radius: 0 0 12px 12px;
     overflow: hidden;
     position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
   }
 }
 
@@ -327,12 +338,137 @@
       max-width: 100% !important;
       overflow: hidden !important;
       position: relative !important;
+      box-sizing: border-box !important;
+      display: flex !important;
+      flex-direction: column !important;
+      height: 100% !important;
+
+      /* Ensure panel respects grid boundaries */
+      min-width: 0 !important;
+      min-height: 0 !important;
+    }
 
+    .e-panel-header {
+      flex-shrink: 0 !important;
+      min-height: 48px !important;
+      display: flex !important;
+      align-items: center !important;
+      padding: 12px 16px !important;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+      color: white !important;
+      border-radius: 12px 12px 0 0 !important;
+      font-weight: 600 !important;
     }
 
     .e-panel-content {
       overflow: hidden !important;
       max-width: 100% !important;
+      width: 100% !important;
+      height: 100% !important;
+      box-sizing: border-box !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      flex: 1 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      min-height: 0 !important;
+    }
+
+    /* Widget content constraints */
+    .e-panel .e-panel-container {
+      width: 100% !important;
+      height: 100% !important;
+      overflow: hidden !important;
+      position: relative !important;
+      box-sizing: border-box !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      flex: 1 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      min-height: 0 !important;
+    }
+
+    .e-panel .e-panel-container .content {
+      width: 100% !important;
+      height: 100% !important;
+      overflow: hidden !important;
+      position: relative !important;
+      box-sizing: border-box !important;
+      display: flex !important;
+      flex-direction: column !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      flex: 1 !important;
+      min-height: 0 !important;
+    }
+
+    /* Resize handle styling */
+    .e-resize-handle {
+      background: #3b82f6 !important;
+      opacity: 0.7 !important;
+      transition: opacity 0.2s ease !important;
+      z-index: 1000 !important;
+    }
+
+    .e-resize-handle:hover {
+      opacity: 1 !important;
+      background: #2563eb !important;
+    }
+
+    /* Resize handle positioning */
+    .e-resize-handle.e-resize-handle-right {
+      right: -2px !important;
+      width: 4px !important;
+      cursor: ew-resize !important;
+    }
+
+    .e-resize-handle.e-resize-handle-bottom {
+      bottom: -2px !important;
+      height: 4px !important;
+      cursor: ns-resize !important;
+    }
+
+    .e-resize-handle.e-resize-handle-corner {
+      width: 8px !important;
+      height: 8px !important;
+      cursor: nw-resize !important;
+    }
+
+    /* Ensure widgets don't exceed panel boundaries and fill full space */
+    .e-panel .e-panel-container .content > * {
+      max-width: 100% !important;
+      max-height: 100% !important;
+      width: 100% !important;
+      height: 100% !important;
+      overflow: hidden !important;
+      box-sizing: border-box !important;
+      flex: 1 !important;
+      display: flex !important;
+      flex-direction: column !important;
+    }
+
+    /* Specific widget component styling */
+    .e-panel .e-panel-container .content > * {
+      width: 100% !important;
+      height: 100% !important;
+      flex: 1 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      min-height: 0 !important;
+    }
+
+    /* Ensure all child elements fill the space */
+    .e-panel .e-panel-container .content > * > * {
+      width: 100% !important;
+      height: 100% !important;
+      flex: 1 !important;
+      min-height: 0 !important;
+    }
+
+    /* Force all nested elements to use full space */
+    .e-panel .e-panel-container .content * {
+      box-sizing: border-box !important;
     }
   }
 }
@@ -392,6 +528,24 @@
   .dashboard-select {
     min-width: 150px;
   }
+
+  /* Adjust resize handles for smaller screens */
+  ::ng-deep {
+    #dashboard_default.e-dashboardlayout {
+      .e-resize-handle {
+        width: 6px !important;
+        height: 6px !important;
+      }
+
+      .e-panel {
+        min-height: 120px !important;
+      }
+
+      .e-panel-content {
+        min-height: 80px !important;
+      }
+    }
+  }
 }
 
 @media (max-width: 768px) {
@@ -450,6 +604,25 @@
   ::ng-deep {
     #dashboard_default.e-dashboardlayout {
       max-height: calc(100vh - 250px) !important;
+
+      .e-resize-handle {
+        width: 8px !important;
+        height: 8px !important;
+        opacity: 0.8 !important;
+      }
+
+      .e-panel {
+        min-width: 100px !important;
+        min-height: 100px !important;
+      }
+
+      .e-panel-content {
+        min-height: 60px !important;
+      }
+
+      .e-panel .e-panel-container .content > * {
+        min-height: 60px !important;
+      }
     }
   }
 }
@@ -476,6 +649,30 @@
     width: 100%;
     justify-content: center;
   }
+
+  // Syncfusion overrides for small mobile
+  ::ng-deep {
+    #dashboard_default.e-dashboardlayout {
+      .e-resize-handle {
+        width: 10px !important;
+        height: 10px !important;
+        opacity: 0.9 !important;
+      }
+
+      .e-panel {
+        min-width: 80px !important;
+        min-height: 80px !important;
+      }
+
+      .e-panel-content {
+        min-height: 40px !important;
+      }
+
+      .e-panel .e-panel-container .content > * {
+        min-height: 40px !important;
+      }
+    }
+  }
 }
 
 

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

-import { Component, OnInit, ViewChild, Type, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, Type, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { CommonModule, TitleCasePipe } from '@angular/common';
 import { NgComponentOutlet } from '@angular/common';
@@ -74,12 +74,12 @@ export interface DashboardPanel extends PanelModel {
   styleUrls: ['./dashboard-management.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class DashboardManagementComponent implements OnInit {
+export class DashboardManagementComponent implements OnInit, OnDestroy {
   @ViewChild('editLayout') public layout!: DashboardLayoutComponent;
   @ViewChild('widgetSelectDialog') public widgetSelectDialog!: DialogComponent;
   public isWidgetDialogVisible = false;
   public panels: DashboardPanel[] = [];
-  public cellSpacing: number[] = [10, 10];
+  public cellSpacing: number[] = [8, 8];
   public columns: number = 6;
   public rows: number = 6;
   public availableWidgets: MenuItemsWidget[] = [];
@@ -101,6 +101,14 @@ export class DashboardManagementComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+    // Set responsive columns based on screen size
+    this.setResponsiveColumns();
+
+    // Listen for window resize events
+    window.addEventListener('resize', () => {
+      this.setResponsiveColumns();
+    });
+
     this.dashboardDataService.getDashboards().pipe(
       catchError(error => {
         this.notificationService.error('Error', 'Failed to load user dashboards.');
@@ -111,6 +119,33 @@ export class DashboardManagementComponent implements OnInit {
     });
   }
 
+  ngOnDestroy(): void {
+    // Clean up event listener
+    window.removeEventListener('resize', () => {
+      this.setResponsiveColumns();
+    });
+  }
+
+  private setResponsiveColumns(): void {
+    const width = window.innerWidth;
+    if (width <= 480) {
+      this.columns = 2;
+      this.cellSpacing = [4, 4];
+    } else if (width <= 768) {
+      this.columns = 3;
+      this.cellSpacing = [6, 6];
+    } else if (width <= 1024) {
+      this.columns = 4;
+      this.cellSpacing = [8, 8];
+    } else if (width <= 1200) {
+      this.columns = 5;
+      this.cellSpacing = [8, 8];
+    } else {
+      this.columns = 6;
+      this.cellSpacing = [8, 8];
+    }
+  }
+
   filterWidgets(): void {
     if (!this.widgetSearchTerm) {
       this.filteredAvailableWidgets = [...this.availableWidgets];
@@ -299,6 +334,12 @@ export class DashboardManagementComponent implements OnInit {
     const nextY = Math.max(0, ...this.dashboardData.widgets.map(w => (w.y || 0) + (w.rows || 1)));
     newWidgetInstance.y = nextY;
     newWidgetInstance.x = 0;
+
+    // Set minimum and maximum size constraints
+    newWidgetInstance.minSizeX = 1;
+    newWidgetInstance.minSizeY = 1;
+    newWidgetInstance.maxSizeX = this.columns;
+    newWidgetInstance.maxSizeY = 6;
     // --- END FIX ---
 
     if (menuItem.config) {
@@ -407,6 +448,10 @@ export class DashboardManagementComponent implements OnInit {
           sizeY: widget.rows,
           row: widget.y,
           col: widget.x,
+          minSizeX: widget.minSizeX || 1,
+          minSizeY: widget.minSizeY || 1,
+          maxSizeX: widget.maxSizeX || this.columns,
+          maxSizeY: widget.maxSizeY || 6,
           componentType: componentType,
           componentInputs: {
             config: JSON.stringify(configObject),

src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.html

@@ -29,7 +29,7 @@
           [col]="panel.col"
           [sizeX]="panel.sizeX"
           [sizeY]="panel.sizeY"
-          [id]="panel.id + '-' + panel.row + '-' + panel.col"
+          [id]="panel.id"
         >
           <ng-template #header>
             <!-- No header -->

src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.scss

-/* Enhanced Dashboard Management Styles */
+/* Dashboard Viewer Styles - Clean and Responsive */
 
 /* Background */
 .dashboard-background {
   background: linear-gradient(to bottom right, #f8fafc, #e0e7ff);
+  min-height: 100vh;
+}
+
+/* Error Message */
+.error-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(to bottom right, #f8fafc, #e0e7ff);
+}
+
+.error-message-content {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e5e7eb;
+  text-align: center;
+  max-width: 500px;
+}
+
+.error-icon {
+  font-size: 3rem;
+  color: #ef4444;
+  margin-bottom: 1rem;
+}
+
+.error-text {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #374151;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.error-description {
+  color: #6b7280;
+  font-size: 1rem;
 }
 
 /* Layout Classes */
@@ -123,11 +162,59 @@
   flex-shrink: 0;
 }
 
-/* Content Area */
+/* Dashboard Content Area - Full Width and Responsive */
 .dashboard-content-area {
-  max-width: 80rem;
-  margin: 0 auto;
-  padding: 1.5rem 1rem;
+  width: 100%;
+  min-height: 100vh;
+  padding: 0;
+  margin: 0;
+  background: linear-gradient(to bottom right, #f8fafc, #e0e7ff);
+}
+
+/* Dashboard Layout Container - Clean and Responsive */
+.dashboard-layout-container {
+  width: 100%;
+  min-height: 100vh;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+/* Dashboard Layout - Responsive Grid */
+.dashboard-layout {
+  width: 100% !important;
+  height: auto !important;
+  min-height: calc(100vh - 2rem);
+  background: transparent;
+
+  .e-panel {
+    border-radius: 12px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border: 1px solid #e5e7eb;
+    background: white;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    margin: 0;
+
+    &:hover {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      transform: translateY(-2px);
+    }
+  }
+
+  .e-panel-header {
+    display: none !important; /* Hide panel headers in viewer mode */
+  }
+
+  .e-panel-content {
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
 }
 
 .dashboard-content-card {
@@ -314,25 +401,61 @@
   }
 }
 
-/* Syncfusion DashboardLayout Override */
+/* Syncfusion DashboardLayout Override for Viewer */
 ::ng-deep {
   #dashboard_default.e-dashboardlayout {
     width: 100% !important;
     height: auto !important;
-    max-height: calc(100vh - 300px) !important;
-    overflow: auto !important;
+    min-height: calc(100vh - 2rem) !important;
+    max-height: none !important;
+    overflow: visible !important;
     position: relative !important;
+    background: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
 
     .e-panel {
       max-width: 100% !important;
       overflow: hidden !important;
       position: relative !important;
+      background: white !important;
+      border: 1px solid #e5e7eb !important;
+      border-radius: 12px !important;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+      margin: 0 !important;
+    }
 
+    .e-panel-header {
+      display: none !important; /* Completely hide headers in viewer */
     }
 
     .e-panel-content {
       overflow: hidden !important;
       max-width: 100% !important;
+      width: 100% !important;
+      height: 100% !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      background: white !important;
+      border-radius: 12px !important;
+    }
+
+    /* Ensure widgets don't overflow */
+    .e-panel .e-panel-container {
+      width: 100% !important;
+      height: 100% !important;
+      overflow: hidden !important;
+      position: relative !important;
+    }
+
+    /* Widget content styling */
+    .e-panel .e-panel-container .content {
+      width: 100% !important;
+      height: 100% !important;
+      overflow: hidden !important;
+      position: relative !important;
+      padding: 0 !important;
+      margin: 0 !important;
     }
   }
 }
@@ -365,116 +488,86 @@
   100% { background-position: 200% 0; }
 }
 
-/* Responsive Design */
-@media (max-width: 1024px) {
-  .header-content {
-    padding: 0 0.75rem;
+/* Responsive Design for Dashboard Viewer */
+@media (max-width: 1200px) {
+  .dashboard-layout-container {
+    padding: 0.75rem;
   }
 
-  .header-left {
-    gap: 1rem;
+  ::ng-deep {
+    #dashboard_default.e-dashboardlayout {
+      min-height: calc(100vh - 1.5rem) !important;
+    }
   }
+}
 
-  .header-controls {
-    gap: 1rem;
+@media (max-width: 1024px) {
+  .dashboard-layout-container {
+    padding: 0.5rem;
   }
 
-  .dashboard-selector {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
+  .dashboard-layout {
+    .e-panel {
+      margin: 0.25rem;
+    }
   }
 
-  .selector-label {
-    font-size: 0.8rem;
-  }
+  ::ng-deep {
+    #dashboard_default.e-dashboardlayout {
+      min-height: calc(100vh - 1rem) !important;
 
-  .dashboard-select {
-    min-width: 150px;
+      .e-panel {
+        border-radius: 8px !important;
+      }
+    }
   }
 }
 
 @media (max-width: 768px) {
-  .header-flex {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-    padding: 1rem 0;
-  }
-
-  .header-left {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-  }
-
-  .header-title-section {
-    justify-content: center;
-  }
-
-  .header-controls {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-  }
-
-  .dashboard-selector {
-    align-items: center;
-  }
-
-  .action-buttons {
-    justify-content: center;
-    gap: 0.5rem;
-  }
-
-  .custom-btn {
-    padding: 0.4rem 0.8rem;
-    font-size: 0.8rem;
-  }
-
-  .dashboard-content-card {
-    max-height: calc(100vh - 150px);
-  }
-
   .dashboard-layout-container {
-    max-height: calc(100vh - 200px);
+    padding: 0.25rem;
   }
 
   .dashboard-layout {
     .e-panel {
-      margin: 8px;
+      margin: 0.125rem;
+      border-radius: 8px;
     }
   }
 
-  // Syncfusion overrides for mobile
   ::ng-deep {
     #dashboard_default.e-dashboardlayout {
-      max-height: calc(100vh - 250px) !important;
+      min-height: calc(100vh - 0.5rem) !important;
+
+      .e-panel {
+        border-radius: 8px !important;
+        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06) !important;
+      }
     }
   }
 }
 
 @media (max-width: 480px) {
-  .header-content {
-    padding: 0 0.5rem;
-  }
-
-  .title-content h1 {
-    font-size: 1.25rem;
+  .dashboard-layout-container {
+    padding: 0.125rem;
   }
 
-  .title-content p {
-    font-size: 0.75rem;
+  .dashboard-layout {
+    .e-panel {
+      margin: 0.0625rem;
+      border-radius: 6px;
+    }
   }
 
-  .action-buttons {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
+  ::ng-deep {
+    #dashboard_default.e-dashboardlayout {
+      min-height: calc(100vh - 0.25rem) !important;
 
-  .custom-btn {
-    width: 100%;
-    justify-content: center;
+      .e-panel {
+        border-radius: 6px !important;
+        box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06) !important;
+      }
+    }
   }
 }
 

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

-import { Component, OnInit, Type, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, OnDestroy, Type, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts';
@@ -62,10 +62,10 @@ export interface DashboardPanel extends PanelModel {
   styleUrls: ['./dashboard-viewer.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class DashboardViewerComponent implements OnInit {
+export class DashboardViewerComponent implements OnInit, OnDestroy {
 
   public panels: DashboardPanel[] = [];
-  public cellSpacing: number[] = [10, 10];
+  public cellSpacing: number[] = [8, 8];
   public columns: number = 6;
   public dashboardData: DashboardModel | null = null;
   public errorMessage: string | null = null;
@@ -82,6 +82,14 @@ export class DashboardViewerComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    // Set responsive columns based on screen size
+    this.setResponsiveColumns();
+
+    // Listen for window resize events
+    window.addEventListener('resize', () => {
+      this.setResponsiveColumns();
+    });
+
     this.route.paramMap.pipe(
       map(params => params.get('dashboardId')),
       switchMap(id => {
@@ -128,6 +136,33 @@ export class DashboardViewerComponent implements OnInit {
     });
   }
 
+  ngOnDestroy(): void {
+    // Clean up event listener
+    window.removeEventListener('resize', () => {
+      this.setResponsiveColumns();
+    });
+  }
+
+  private setResponsiveColumns(): void {
+    const width = window.innerWidth;
+    if (width <= 480) {
+      this.columns = 2;
+      this.cellSpacing = [4, 4];
+    } else if (width <= 768) {
+      this.columns = 3;
+      this.cellSpacing = [6, 6];
+    } else if (width <= 1024) {
+      this.columns = 4;
+      this.cellSpacing = [8, 8];
+    } else if (width <= 1200) {
+      this.columns = 5;
+      this.cellSpacing = [8, 8];
+    } else {
+      this.columns = 6;
+      this.cellSpacing = [8, 8];
+    }
+  }
+
   mapWidgetsToPanels(widgets: any[]): DashboardPanel[] {
     return widgets
       .map(widget => {