Merge remote-tracking branch 'origin/EDA_3_KPIISSUE'

# Conflicts:
#	eda/eda_app/src/app/module/pages/dashboard/dashboard.page.ts

Author: jortilles

eda/eda_app/src/app/module/components/eda-kpi/eda-kpi.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit, Input, EventEmitter, Output, ViewChild, ElementRef }
 import { StyleProviderService } from '@eda/services/service.index';
 import { registerLocaleData } from '@angular/common';
 import { EdaKpi } from './eda-kpi';
-import { EdaChart } from '../eda-chart/eda-chart';
 import es from '@angular/common/locales/es';
 import { EdaChartComponent } from '../eda-chart/eda-chart.component';
 
@@ -125,6 +124,10 @@ export class EdaKpiComponent implements OnInit {
         if (this.inject.showChart) {
             resultSize = resultSize / 1.8;
         }
+        const isMobile = window.innerWidth < 640;
+        if(isMobile) {
+            resultSize = 40;
+        }
         return resultSize.toFixed().toString() + 'px';
     }
 
@@ -134,4 +137,4 @@ export class EdaKpiComponent implements OnInit {
         }
     }
 
-}
+}

eda/eda_app/src/app/module/pages/dashboard/dashboard.page.ts

@@ -266,7 +266,8 @@ export class DashboardPage implements OnInit {
       }
       this.gridsterOptions.fixedRowHeight = cellSize;
     }
-   this.gridsterOptions.api?.optionsChanged();
+    this.sortPanelsForMobile();
+    this.gridsterOptions.api?.optionsChanged();
   }
 
   public async loadDashboard() {
@@ -283,6 +284,7 @@ export class DashboardPage implements OnInit {
       this.globalFilter?.initOrderDependentFilters(dashboard.config.orderDependentFilters || []); // Filtros dependientes
       this.globalFilter?.initGlobalFilters(dashboard.config.filters || []);// Filtres del dashboard
       this.initPanels(dashboard);
+      this.sortPanelsForMobile();
       this.styles = dashboard.config.styles || this.stylesProviderService.generateDefaultStyles();
       this.getUrlParams();
       this.globalFilter.findGlobalFilterByUrlParams(this.queryParams);
@@ -497,7 +499,8 @@ export class DashboardPage implements OnInit {
     }
 
     let valor = this.getBottomMostItem();
-    this.height = valor !== undefined ? (valor.y + valor.rows + 4) * 50 : 750;
+    const rowHeight = this.gridsterOptions.fixedRowHeight || 150;
+    this.height = valor !== undefined ? (valor.y + valor.rows + 4) * rowHeight + 150 : 750;
     this.cdr.detectChanges();
     this.stylesProviderService.loadedPanels--;
   }
@@ -1242,10 +1245,16 @@ public startCountdown(seconds: number) {
   // Función que cambia el valor de la altura del gridster cada vez que hay un cambio en el elemento
   onItemChange(item: GridsterItem): void {
     if (this.panels) {
-      let valor = this.getBottomMostItem();
-      this.height = ((valor.y + valor.rows  + 4 ) * 50);
-      this.cdr.detectChanges();
-    } 
+      const rowHeight = this.gridsterOptions.fixedRowHeight || 150;
+      const isMobile = window.innerWidth < (this.gridsterOptions.mobileBreakpoint || 640);
+      if (isMobile) {
+        this.updateMobileHeight();
+      } else {
+        let valor = this.getBottomMostItem();
+        this.height = ((valor.y + valor.rows + 4) * rowHeight) + 250;
+        this.cdr.detectChanges();
+      }
+    }
   }
 
 
@@ -1305,4 +1314,28 @@ public startCountdown(seconds: number) {
     }
     return tableMatch && columnMatch && labelMatch;
   }
+
+  // Funciones auxiliares para mobile 
+  private updateMobileHeight(): void {
+    const interval = setInterval(() => {
+      if (this.stylesProviderService.loadedPanels <= 0) {
+        clearInterval(interval);
+        const gridsterEl = document.querySelector('gridster') as HTMLElement;
+        if (gridsterEl) {
+          this.height = gridsterEl.offsetHeight + 50;
+          this.cdr.detectChanges();
+        }
+      }
+    }, 100);
+    setTimeout(() => clearInterval(interval), 15000);
+  }
+  
+  private sortPanelsForMobile(): void {
+    if (!this.panels?.length) return;
+    const isMobile = window.innerWidth < (this.gridsterOptions.mobileBreakpoint || 640);
+    if (isMobile) {
+      this.panels.sort((a, b) => Math.floor(a.y / 10) - Math.floor(b.y / 10) || Math.floor(a.x / 10) - Math.floor(b.x / 10));
+      this.updateMobileHeight();
+    }
+  }
 }