(GH-31) Add report using DevExtreme DataGrid

cake-contrib · Jun 9, 2018 · 03b52c4 · 03b52c4
1 parent 8423385
commit 03b52c4
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 1 deletion.
diff --git a/src/Cake.Issues.Reporting.Generic.Tests/GenericIssueReportGeneratorTests.cs b/src/Cake.Issues.Reporting.Generic.Tests/GenericIssueReportGeneratorTests.cs
@@ -42,6 +42,7 @@ public sealed class TheInternalCreateReportMethod
             [Theory]
             [InlineData(GenericIssueReportTemplate.HtmlDiagnostic)]
             [InlineData(GenericIssueReportTemplate.HtmlDataTable)]
+            [InlineData(GenericIssueReportTemplate.HtmlDxDataGrid)]
             public void Should_Generate_Report_From_Embedded_Template(GenericIssueReportTemplate template)
             {
                 // Given

diff --git a/src/Cake.Issues.Reporting.Generic/Cake.Issues.Reporting.Generic.csproj b/src/Cake.Issues.Reporting.Generic/Cake.Issues.Reporting.Generic.csproj
@@ -85,6 +85,7 @@
     <None Include="FodyWeavers.xml" />
     <None Include="packages.config" />
     <EmbeddedResource Include="Templates\DataTable.cshtml" />
+    <EmbeddedResource Include="Templates\DxDataGrid.cshtml" />
   </ItemGroup>
   <ItemGroup>
     <Analyzer Include="..\packages\Microsoft.CodeQuality.Analyzers.2.6.0\analyzers\dotnet\cs\Microsoft.CodeQuality.Analyzers.dll" />

diff --git a/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplate.cs b/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplate.cs
@@ -13,6 +13,11 @@ public enum GenericIssueReportTemplate
         /// <summary>
         /// Template for a HTML report containing a rich data table view with sorting and search functionality.
         /// </summary>
-        HtmlDataTable
+        HtmlDataTable,
+
+        /// <summary>
+        /// Template for a HTML report containing a rich data grid with sorting, filtering, grouping and search capabilities.
+        /// </summary>
+        HtmlDxDataGrid
     }
 }
diff --git a/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplateExtensions.cs b/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplateExtensions.cs
@@ -22,6 +22,9 @@ public static string GetTemplateResourceName(this GenericIssueReportTemplate tem
                 case GenericIssueReportTemplate.HtmlDataTable:
                     return "DataTable.cshtml";
 
+                case GenericIssueReportTemplate.HtmlDxDataGrid:
+                    return "DxDataGrid.cshtml";
+
                 default:
                     throw new ArgumentOutOfRangeException(nameof(template));
             }

diff --git a/src/Cake.Issues.Reporting.Generic/Templates/DxDataGrid.cshtml b/src/Cake.Issues.Reporting.Generic/Templates/DxDataGrid.cshtml
@@ -0,0 +1,89 @@
+@model IEnumerable<Cake.Issues.IIssue>
+
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title>Issues Report</title>
+
+    @* DevExtreme dependencies *@
+    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script>
+    @* DevExtreme themes *@
+    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.common.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.light.css" />
+    @* DevExtreme library *@
+    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/18.1.3/js/dx.all.js"></script>
+</head>
+<body class="dx-viewport">
+    <h1>Issues Report</h1>
+
+    <div class="container">
+        <div id="gridContainer"></div>
+    </div>
+
+    <script type="text/javascript">
+        var issues = [];
+        @foreach (var issue in Model)
+        {
+            @:issues.push({ProviderName: "@issue.ProviderName", ProviderType: "@issue.ProviderType", Priority: "@issue.Priority", PriorityName: "@issue.PriorityName", Project: "@issue.Project", Path: "@if (issue.AffectedFileRelativePath != null) { @issue.AffectedFileRelativePath.GetDirectory() }", File: "@if (issue.AffectedFileRelativePath != null) { @issue.AffectedFileRelativePath.GetFilename() }", Line: "@issue.Line", Rule: "@issue.Rule", RuleUrl: "@issue.RuleUrl", Message: "@issue.Message"});
+        }
+    </script>
+    <script type="text/javascript">
+        $(function(){
+            $("#gridContainer").dxDataGrid({
+                dataSource: issues,
+                loadPanel: {
+                    enabled: true
+                },
+                searchPanel: {
+                    visible: true
+                },
+                groupPanel: {
+                    visible: true
+                },
+                headerFilter: {
+                    visible: true
+                },
+                rowAlternationEnabled: true,
+                allowColumnResizing: true,
+                columns: [
+                    {
+                        dataField: "ProviderName",
+                        groupIndex: 0
+                    },
+                    {
+                        caption: "Severity",
+                        dataField: "PriorityName",
+                        calculateSortValue: "Priority",
+                        width: "90px"
+                    },
+                    "Project",
+                    "Path",
+                    "File",
+                    {
+                        dataField: "Line",
+                        allowFiltering: false,
+                        allowGrouping: false,
+                        width: "70px"
+                    },
+                    "Rule",
+                    "Message"
+                ],
+                summary: {
+                    groupItems: [{
+                        column: "ProviderType",
+                        summaryType: "count",
+                        displayFormat: "{0} issues",
+                    }],
+                    totalItems: [{
+                        column: "Severity",
+                        summaryType: "count",
+                        displayFormat: "{0} issues"
+                    }]
+                }
+            });
+        });
+    </script>
+</body>
+</html>