Merge pull request #5793 from Countly/dashboard/loading-fix

Fix: issue where dashboard widgets go into single column

Author: ArtursKadikis

CHANGELOG.md

@@ -1,3 +1,7 @@
+## Version 24.05.XX
+Fixes:
+- [dashboards] Fixing issue where dashboard widgets go into single column
+
 ## Version 24.05.18
 Fixes:
 - [core] Fixed bug where changing passwords results in the loss of the "Global Admin" role
@@ -79,7 +83,7 @@ Enterprise Features:
 ## Version 24.05.12
 Fixes:
 - [dashboards] Fixes for dashboards grid
-- [dasboards] UI fix for dashboard widget action menu
+- [dashboards] UI fix for dashboard widget action menu
 - [push] Refactored fcm API related code
 - [reports] Use config for encryption key in reports
 

plugins/dashboards/README.md

@@ -0,0 +1,44 @@
+# Custom Dashboards
+
+## Dashboard Frontend request & grid interaction flow
+```mermaid
+
+graph TD
+    A[User Initiates Refresh] --> B{Check Conditions}
+    B -->|Conditions Met| C[refresh method]
+    B -->|Conditions Not Met| Z[Skip Refresh]
+    
+    C --> D{isRequestSane}
+    D -->|Yes| E[dateChanged method]
+    D -->|No| Y[Mark Request Sane]
+    Y --> Z
+    
+    E --> F[dispatch getDashboard action]
+    F --> G[Server Request]
+    G --> H{Check isSane}
+    H -->|Yes| I[Update Vuex Store]
+    H -->|No| X[Skip Update]
+    
+    I --> J[validateWidgets method]
+    J --> K[Update Grid]
+    
+    L[Grid Interaction Starts] --> M[Set gridInteraction true]
+    M --> N[Mark Request Not Sane]
+    
+    O[Grid Interaction Ends] --> P[updateAllWidgetsGeography]
+    P --> Q[Set gridInteraction false]
+    Q --> R[Mark Request Sane]
+    
+    S[Widget Resize/Move] --> T[grid.on 'change' event]
+    T --> U[Update Widget in Store]
+    
+    V[New Widget Added] --> W[grid.on 'added' event]
+    W --> X1[Update Widget Size/Position]
+    X1 --> Y1[Add to Vuex Store]
+
+    style A fill:#f9f,stroke:#333,stroke-width:2px
+    style L fill:#f9f,stroke:#333,stroke-width:2px
+    style S fill:#f9f,stroke:#333,stroke-width:2px
+    style V fill:#f9f,stroke:#333,stroke-width:2px
+    
+```

plugins/dashboards/frontend/public/javascripts/countly.views.js

@@ -1169,22 +1169,24 @@
                 });
 
                 this.grid.on('change', function(event, items) {
-                    items.forEach(item => {
-                        self.updateWidgetGeography(
-                            item.id,
-                            {
-                                size: [item.w, item.h],
-                                position: [item.x, item.y]
-                            }
-                        );
-                    });
-                    _.debounce(function() {
-                        self.$nextTick(function() {
-                            setTimeout(function() {
-                                self.customCompact(self.grid);
-                            }, 10);
+                    if (self.grid.opts && self.grid.opts.column && self.grid.opts.column === 12) {
+                        items.forEach(item => {
+                            self.updateWidgetGeography(
+                                item.id,
+                                {
+                                    size: [item.w, item.h],
+                                    position: [item.x, item.y]
+                                }
+                            );
                         });
-                    }, 400)();
+                        _.debounce(function() {
+                            self.$nextTick(function() {
+                                setTimeout(function() {
+                                    self.customCompact(self.grid);
+                                }, 10);
+                            });
+                        }, 400)();
+                    }
                 });
 
                 this.grid.on("removed", function() {