Merge pull request #36 from intelequia/issue#35-change-mobile-report-…

…rendering Change rendering layout in mobile devices
intelequia · Jun 18, 2024 · 62d9d5e · 62d9d5e
2 parents 2671a37 + 7551a4e
commit 62d9d5e
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 24 deletions.
diff --git a/src/DotNetNuke.PowerBI/DotNetNuke.PowerBI.dnn b/src/DotNetNuke.PowerBI/DotNetNuke.PowerBI.dnn
@@ -1,6 +1,6 @@
 <dotnetnuke type="Package" version="5.0">
   <packages>
-    <package name="PowerBIEmbeddedList" type="Module" version="01.02.02">
+    <package name="PowerBIEmbeddedList" type="Module" version="01.02.03">
       <friendlyName>PowerBI Embedded Content List</friendlyName>
       <description>A set of modules to embed PowerBI Embedded dashboards and reports into a DNN Platform installation.</description>
       <iconFile>~/DesktopModules/MVC/PowerBIEmbedded/images/powerbi.png</iconFile>
@@ -176,7 +176,7 @@
         </component>
       </components>
     </package>
-    <package name="PowerBIEmbeddedContent" type="Module" version="01.02.02">
+    <package name="PowerBIEmbeddedContent" type="Module" version="01.02.03">
       <friendlyName>PowerBI Embedded Content View</friendlyName>
       <description>A set of modules to embed PowerBI Embedded dashboards and reports into a DNN Platform installation.</description>
       <iconFile>~/DesktopModules/MVC/PowerBIEmbedded/images/powerbi.png</iconFile>
@@ -231,7 +231,7 @@
         </component>
       </components>
     </package>
-    <package name="PowerBIEmbeddedCalendar" type="Module" version="01.02.02">
+    <package name="PowerBIEmbeddedCalendar" type="Module" version="01.02.03">
       <friendlyName>PowerBI Embedded Calendar View</friendlyName>
       <description>A set of modules to embed PowerBI Embedded dashboards and reports into a DNN Platform installation.</description>
       <iconFile>~/DesktopModules/MVC/PowerBIEmbedded/images/powerbi.png</iconFile>

diff --git a/src/DotNetNuke.PowerBI/Properties/AssemblyInfo.cs b/src/DotNetNuke.PowerBI/Properties/AssemblyInfo.cs
@@ -30,7 +30,7 @@
 //
 // You can specify all the values or you can default the Revision and Build Numbers 
 // by using the '*' as shown below:
-[assembly: AssemblyVersion("01.02.02.*")]
+[assembly: AssemblyVersion("01.02.03.*")]
 #pragma warning disable CS7035 // The specified version string does not conform to the recommended format - major.minor.build.revision
-[assembly: AssemblyFileVersion("01.02.02.*")]
+[assembly: AssemblyFileVersion("01.02.03.*")]
 #pragma warning restore CS7035 // The specified version string does not conform to the recommended format - major.minor.build.revision
diff --git a/src/DotNetNuke.PowerBI/ReleaseNotes.txt b/src/DotNetNuke.PowerBI/ReleaseNotes.txt
@@ -138,5 +138,8 @@
 
 	<b>Version 1.2.1</b>
 	<p>fix: improved permissions methods.</p>
+
+	<b>Version 1.2.3</b>
+	<p>fix: changed rendering method for mobile devices</p>
 
 </div>
diff --git a/src/DotNetNuke.PowerBI/admin/personaBar/scripts/bundles/bundle-en.js b/src/DotNetNuke.PowerBI/admin/personaBar/scripts/bundles/bundle-en.js
diff --git a/src/DotNetNuke.PowerBI/admin/personaBar/scripts/bundles/bundle-en.js.map b/src/DotNetNuke.PowerBI/admin/personaBar/scripts/bundles/bundle-en.js.map
diff --git a/src/DotNetNuke.PowerBI/scripts/ContentView.js b/src/DotNetNuke.PowerBI/scripts/ContentView.js
@@ -379,13 +379,12 @@
                     language: context.Locale,
                     formatLocale: context.Locale
                 },
-                layoutType: that.isMobile ? (that.isLandscape ? that.models.LayoutType.MobileLandscape : that.models.LayoutType.MobilePortrait) : null
             },
             pageName: context.PageName
         };
 
         if (this.overrideVisualHeaderVisibility) {
-            this.config.settings.visualSettings = {
+            that.config.settings.visualSettings = {
                 visualHeaders: [
                     {
                         settings: {
@@ -398,32 +397,29 @@
 
         //override filter pane
         if (context.overrideFilterPaneVisibility) {
-            this.config.settings.filterPaneEnabled = context.FilterPaneVisible && !that.isMobile;
+            that.config.settings.filterPaneEnabled = context.FilterPaneVisible && !that.isMobile;
         }
 
         // Get a reference to the embedded report HTML element
         this.reportContainer = $('#embedContainer_' + context.ModuleId)[0];
+
         if (!that.isMobile && that.isLandscape) {
-            var h = that.defaultHeight !== '' ? that.defaultHeight : window.innerHeight - 50 - 20 - 39 - 20 - 10;
+        var h = that.defaultHeight !== '' ? that.defaultHeight : window.innerHeight - 50 - 20 - 39 - 20 - 10;
+
             $('#embedContainer_' + context.ModuleId).css("height", h + "px");
         }
-
-        // Embed the report and display it within the div container.
-        this.report = powerbi.embed(that.reportContainer, that.config);
-
-
+
         if (this.overrideFilterPaneVisibility) {
-            const newSettings = {
-                panes: {
-                    filters: {
-                        visible: context.FilterPaneVisible && !that.isMobile, // hide filter pane
-                    }
+            that.config.settings.panes = {
+                filters: {
+                    visible: context.FilterPaneVisible && !that.isMobile, // hide filter pane
                 }
             }
-            that.report.updateSettings(newSettings)
-                .catch(error => { console.log(error) });
         }
 
+        // Embed the report and display it within the div container.
+        this.report = powerbi.load(that.reportContainer, that.config);
+
         //Getreport bookmarks
         this.report.bookmarksManager.getBookmarks()
             .then(function (bookmarks) {
@@ -468,7 +464,40 @@
             });
         });
 
+        this.setCustomLayout = function () {
+            that.config.settings.layoutType = that.models.LayoutType.Custom;
+            that.config.settings.customLayout = {
+                displayOption: that.models.DisplayOption.FitToWidth,
+                width: "100%",
+                height: "100%"
+            }
+            that.config.settings.panes = {
+                pageNavigation: {
+                    visible: false
+                },
+            }
+        }
 
+        this.report.on("loaded", async function () {
+            if (that.isMobile && that.config.settings.layoutType != that.models.LayoutType.MobilePortrait) {
+                var page = await that.report.getActivePage()
+                const hasLayout = await page.hasLayout(that.models.LayoutType.MobilePortrait);
+                if (hasLayout) {
+                    that.config.settings.layoutType = that.models.LayoutType.MobilePortrait;
+                    await powerbi.reset(that.reportContainer);
+                    that.report = powerbi.embed(that.reportContainer, that.config);
+                } else {
+                    if (that.config.settings.layoutType != that.models.LayoutType.Custom) {
+                        that.setCustomLayout();
+                        await powerbi.reset(that.reportContainer);
+                        that.report = powerbi.embed(that.reportContainer, that.config);
+                    }
+                }
+            }
+            else {
+                await that.report.render();
+            }
+        })
 
         this.createBookmarksList = function () {
             let params = {
@@ -693,6 +722,9 @@
                     filters: {
                         visible: true
                     },
+                    pageNavigation: {
+                        visible: true
+                    },
                     visualizations: {
                         visible: !context.HideVisualizationData
                     },
@@ -722,9 +754,11 @@
 
         window.onresize = function () {
             that.isMobile = window.innerWidth < 425 || window.innerHeight < 425;
+
             isLandscape = window.innerWidth > window.innerHeight;
             if (!that.isMobile && isLandscape) {
                 var h = that.defaultHeight !== '' ? that.defaultHeight : window.innerHeight - 50 - 20 - 39 - 20 - 10;
+
                 $('#embedContainer_' + context.ModuleId).css("height", h + "px");
             }
         }