feature(REPORT-327626): angular samples

boldreports · May 3, 2024 · 681f27b · 681f27b
1 parent cf41509
commit 681f27b
Show file tree

Hide file tree

Showing 41 changed files with 280 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-samples",
-  "version": "5.4.20",
+  "version": "6.1.34",
   "scripts": {
     "test": "gulp test",
     "postinstall": "gulp copy",

diff --git a/src/app/common/header/header.component.html b/src/app/common/header/header.component.html
@@ -20,6 +20,6 @@
     <!-- <a class="ej-sb-button nav-link bold-schedule-demo" href="https://www.boldreports.com/schedule-free-demo" target="_blank" rel="noreferrer">Schedule
       Free Demo</a> -->
       <a class="ej-sb-button nav-link product-detail" href="https://www.boldreports.com/embedded-reporting/angular-report-viewer" target="_blank" rel="noreferrer">Product Detail</a>
-    <a class="ej-sb-button nav-link try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=128&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/" target="_blank" rel="noreferrer">Try it Free</a>
+    <a class="ej-sb-button nav-link try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=174&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" target="_blank" rel="noreferrer">Try it Free</a>
   </div>
 </div>
diff --git a/src/app/common/header/header.component.ts b/src/app/common/header/header.component.ts
@@ -39,8 +39,7 @@ export class HeaderComponent {
     }
     platformSamplePath = this.getRouterPath(this.platformName, platform, sampleName);
     const reportPath = routerData.reportRouterPath ? (platformBasePath + '/' + platformSamplePath) : platformSamplePath;
-    const url: string = location.origin.indexOf('demos.boldreports.com') !== -1 ? '/' : '/demos/';
-    window.open(this.document.location.origin + url + data.otherPlatforms[platform] + reportPath, '_self');
+    window.open(this.document.location.origin + "/" + data.otherPlatforms[platform] + reportPath, '_self');
   }
 
   private getRouterPath(curPlatform: string, targetplatform: string, sampleName: string): string {
@@ -51,17 +50,9 @@ export class HeaderComponent {
     if (samePath) {
       return sampleName;
     } else {
-      if (curPlatform.indexOf('asp') !== -1) {
         return sampleName.split(/(?=[A-Z])/).map((name) => {
           return name.toLowerCase();
         }).join('-');
-
-      } else {
-        return sampleName.split(/-/).map((name) => {
-          return name.charAt(0).toUpperCase() + name.slice(1);
-        }).join('');
-
-      }
     }
   }
 }
diff --git a/src/app/common/main-content/main-content.component.html b/src/app/common/main-content/main-content.component.html
@@ -60,20 +60,20 @@ <h1 class="ej-title" #title></h1>
 
   <!--Banner section-->
   <div id="footer-banner">
-    <div id="ad-banner-head" class="ad-header" #text></div>
+    <div id="banner-head" class="header" #text></div>
     <div class="content-area" style="display: flex; flex-wrap: wrap;">
-      <div class="ad-cnt-pt">
-        <!-- <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> -->
+      <div class="cnt-pt">
+        <!-- <div class="cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> -->
         <span class="tick-mark"></span>
         <div class="cnt-text cnt-text-1" #features[0]></div>
       </div>
-      <div class="ad-cnt-pt">
-        <!-- <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> -->
+      <div class="cnt-pt">
+        <!-- <div class="cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> -->
         <span class="tick-mark"></span>
         <div class="cnt-text cnt-text-2" #features[1]></div>
       </div>
-      <div class="ad-cnt-pt">
-        <!-- <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> -->
+      <div class="cnt-pt">
+        <!-- <div class="cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> -->
         <span class="tick-mark"></span>
         <div class="cnt-text cnt-text-3" #features[2]></div>
       </div>
@@ -99,6 +99,6 @@ <h1 class="ej-title" #title></h1>
           Feedback
       </a>
     </div>
-    <div class="ej-lp-footer-copyright">Copyright © 2001-2023 Syncfusion Inc.</div>
+    <div class="ej-lp-footer-copyright">Copyright © 2001-{{copyright}} Syncfusion Inc.</div>
   </div>
 </div>
diff --git a/src/app/common/main-content/main-content.component.scss b/src/app/common/main-content/main-content.component.scss
@@ -82,6 +82,9 @@
     font-size: 14px;
     margin: 25px 3px 20px 20px;
   }
+  .tab-pane form{
+    margin-bottom: -7px;
+  }
 
   #parentTab {
     .ej-sb-icons{
@@ -196,7 +199,7 @@
   height: 121px;  
 }
 
-.ad-header {
+.header {
   font-weight: 800;
   font-size: 23px;
   color: #283A5E;
@@ -209,7 +212,7 @@
   margin-left: 15px;
 }
 
-.ad-cnt-pt {
+.cnt-pt {
   margin: 35px 0px 5px 25px;
 }
 
@@ -245,7 +248,7 @@
   #footer-banner {
     height: auto;
   }
-  .ad-header {
+  .header {
     padding: 58px 0px 14px 60px;
     font-size: 32px;
     line-height: 40px;
@@ -260,7 +263,7 @@
     font-size: 20px;
     padding: 10px 10px 0px 6px;
   }
-  .ad-cnt-pt {
+  .cnt-pt {
     margin: 10px 0px 0px 19px;
   }
   .free-trial-url{
@@ -279,7 +282,7 @@
   #footer-banner {
     height: auto;
   }
-  .ad-header {
+  .header {
     padding: 48px 0px 14px 60px;
     font-size: 22px;
     line-height: 32px;
@@ -295,7 +298,7 @@
     line-height: 15px;
     padding: 10px 10px 0px 6px;
   }
-  .ad-cnt-pt {
+  .cnt-pt {
     margin: 2px 12px 2px 25px
   }
   .free-trial-url {

diff --git a/src/app/common/preview/preview.component.html b/src/app/common/preview/preview.component.html
@@ -2,18 +2,18 @@
 <div class="ej-preview-header">
   <div class="ej-preview-left-side">
     <a href="{{homePageUrl}}" target="_blank" rel="noreferrer">
-      <div class="ej-preview-platform-name">Bold Reports for Angular</div>
+      <h1 class="ej-preview-platform-name">Bold Reports for Angular</h1>
     </a>
   </div>
   <div class="ej-preview-right-side">
     <!-- We hided this element as per management instruction -->
     <!-- <a class="ej-preview-button bold-schedule-demo" href="https://www.boldreports.com/schedule-free-demo" title="Report Server"
       target="_blank" rel="noreferrer">Schedule Free Demo</a> -->
     <a class="ej-preview-button nav-link product-detail" href="{{productDetailURL}}"  target="_blank" rel="noreferrer">Product Detail</a>
-    <a class="ej-preview-button try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=128&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/" title="Report Server"
+    <a class="ej-preview-button try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=174&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" title="Report Server"
       target="_blank" rel="noreferrer">Try it Free</a>
   </div>
 </div>
 <div class="ej-preview-content">
   <router-outlet></router-outlet>
-</div>
+</div>
diff --git a/src/app/common/preview/preview.component.scss b/src/app/common/preview/preview.component.scss
@@ -14,6 +14,7 @@
   display: flex;
   position: fixed;
   z-index: 1;
+  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
   justify-content: space-between;
 
   .ej-preview-left-side {

diff --git a/src/app/common/preview/preview.component.ts b/src/app/common/preview/preview.component.ts
@@ -18,9 +18,8 @@ export class PreviewComponent implements OnInit {
   public homePageUrl = '/';
   public productDetailURL = '';
   constructor(private routerService: RouterService, private router: Router, private titleService: Title, private meta: Meta) { }
-  ngOnInit(): void {
-    const baseUrl: string = location.origin.indexOf('demos.boldreports.com') !== -1 ? '/' : '/demos/';
-    this.homePageUrl = baseUrl + 'angular/#/';
+  ngOnInit(): void {    
+    this.homePageUrl = '/angular/#/';
     this.subscriptions.add(this.routerService.previewUrl.subscribe((url) => {
       let sampleData;
       const isReportDesigner = url.indexOf('/report-designer') !== -1;

diff --git a/src/app/common/sidebar/sidebar.component.scss b/src/app/common/sidebar/sidebar.component.scss
@@ -46,7 +46,7 @@
         width: 120px;
         margin: 8px;
         background-image: url('./../../../assets/sidebar/landscape.png');
-        background-size: 100% 1200%;
+        background-size: 100% 1100%;
       }
 
       .ej-portrait-img {
@@ -55,7 +55,7 @@
         width: 90px;
         margin: 8px;
         background-image: url('./../../../assets/sidebar/portrait.png');
-        background-size: 100% 1600%;
+        background-size: 100% 1800%;
       }
 
       .ej-sb-toc-title {

diff --git a/src/app/components/barcode/barcode.component.html b/src/app/components/barcode/barcode.component.html
@@ -8,7 +8,7 @@
         functionality of existing controls in the RDL standard.
     </p>
     <p>
-        This report showcases the one-dimensional and two-dimensional barcode types rendered in our Report Viewer
+        This report showcases the one-dimensional and two-dimensional barcode types rendered in our Bold Report Viewer
         through Custom Report Item.
     </p>
     <p>

diff --git a/src/app/components/consolidated-balance-sheet/consolidated-balance-sheet.component.html b/src/app/components/consolidated-balance-sheet/consolidated-balance-sheet.component.html
@@ -4,7 +4,7 @@
 
 <div id="description">
     <p>
-        Consolidated balance sheet RDLC report represents the assets and liabilities of a company and all subsidiaries
+        Consolidated Balance Sheet RDLC report represents the assets and liabilities of a company and all subsidiaries
         for the last four quarters in a single sheet using <a
             href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/report-items/tablix/"
             target="_blank" rel="noreferrer">Tablix</a> report item.

diff --git a/src/app/components/customer-support-analysis/customer-support-analysis.component.html b/src/app/components/customer-support-analysis/customer-support-analysis.component.html
@@ -6,7 +6,7 @@
     <p>
         Customer Support Analysis involves in monitoring and analyzing information to keep track of trends, resolution time by a representative, 
         customer satisfaction score, and support representative performance. Such analysis data is illustrated using the drill-through report concept 
-        with table data region in Bold Reports Report Viewer.
+        with table data region in Bold Report Viewer.
     </p>
     <ul>
         <li>You can navigate to another report from main report to view the detailed information on respective support representative performance and ticket 

diff --git a/src/app/components/designer/designer.component.html b/src/app/components/designer/designer.component.html
@@ -1,4 +1,4 @@
-<bold-reportdesigner id="reportdesigner" #designer [serviceUrl]="serviceUrl" (ajaxBeforeLoad)="onAjaxBeforeLoad($event)"  [toolbarSettings]="toolbarSettings" [permissionSettings]="permissionSettings"
+<bold-reportdesigner [id]="reportControlId" #designer [serviceUrl]="serviceUrl" (ajaxBeforeLoad)="onAjaxBeforeLoad($event)"  [toolbarSettings]="toolbarSettings" [permissionSettings]="permissionSettings"
     [reportItemExtensions]="itemExtensions" (toolbarRendering)="toolbarRendering($event)"
     (toolbarClick)="toolbarClick({event: $event, designerInst:designer})">
 </bold-reportdesigner>
diff --git a/src/app/components/designer/designer.component.ts b/src/app/components/designer/designer.component.ts
@@ -22,13 +22,16 @@ export class DesignerComponent implements AfterViewInit {
   // Specifies the URL of the WebAPI service. It will be used for processing the report.
   public serviceUrl = Globals.DESIGNER_SERVICE_URL;
   public reportPath: string;
+  public reportControlId = Globals.REPORT_CONTROL_ID;
   public toolbarSettings: ej.ReportDesigner.ToolbarSettings = {
-    items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Save & ~ej.ReportDesigner.ToolbarItems.Open
+    items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.New & ~ej.ReportDesigner.ToolbarItems.Save & ~ej.ReportDesigner.ToolbarItems.Open
   };
-  public permissionSettings: ej.ReportDesigner.PermissionSettings = { dataSource: ej.ReportDesigner.Permission.All & ~ej.ReportDesigner.Permission.Create};
+  public permissionSettings: ej.ReportDesigner.PermissionSettings;
   public itemExtensions: any;
 
   constructor(private router: Router) {
+    var url = window.location.host;
+    this.permissionSettings = url.indexOf("demos.boldreports.com") !== -1 ? { dataSource: ej.ReportDesigner.Permission.All & ~ej.ReportDesigner.Permission.Create } : { dataSource: ej.ReportDesigner.Permission.All };
     const params: Params = this.router.parseUrl(this.router.url).queryParams;
     const paramName = 'report-name';
     this.reportPath = params[paramName];
@@ -53,11 +56,33 @@ export class DesignerComponent implements AfterViewInit {
 
 
   public toolbarRendering(args): void {
-    if ($(args.target).hasClass('e-rptdesigner-toolbarcontainer')) {
-      const saveButton = ej.buildTag('li.e-rptdesigner-toolbarli e-designer-toolbar-align e-tooltxt', '', {}, {});
-      const saveIcon = ej.buildTag('span.e-rptdesigner-toolbar-icon e-toolbarfonticonbasic e-rptdesigner-toolbar-save e-li-item',
-        '', {}, { title: 'Save' });
-      args.target.find('ul:first').append(saveButton.append(saveIcon));
+    if (args?.target && $(args.target)?.hasClass('e-rptdesigner-toolbarcontainer')) {
+      if (args.action === 'beforeCreate') {
+        args.items.splice(0, 0, {
+          GroupName: 'customfileactionitems',
+          GroupId: this.reportControlId + '_custom_fileaction_group',
+          Items: [
+            {
+              prefixIcon: 'b-toolbar-item e-rptdesigner-toolbar-icon e-toolbarfonticonbasic e-rptdesigner-toolbar-new',
+              tooltipText: 'New',
+              id: this.reportControlId + '_custom_toolbar_btn_new',
+              htmlAttributes: {
+                id: this.reportControlId + '_custom_toolbar_new',
+                'aria-label': 'New'
+              }
+            },
+            {
+              prefixIcon: 'b-toolbar-item e-toolbarfonticonbasic e-rptdesigner-toolbar-save',
+              tooltipText: 'Save',
+              id: this.reportControlId + '_custom_toolbar_btn_save',
+              htmlAttributes: {
+                id: this.reportControlId + '_custom_toolbar_save',
+                'aria-label': 'Save'
+              }
+            }
+          ]
+        });
+      }
     }
   }
 
@@ -87,6 +112,15 @@ export class DesignerComponent implements AfterViewInit {
         }
       });
     }
+    if (this.reportPath === 'powerpoint-report.rdl') {
+      this.designerInst.widget.setModel({
+        previewOptions: {
+          exportSettings: {
+            exportOptions: ej.ReportViewer.ExportOptions.PPT
+          }
+        }
+      });
+    }
     if (this.reportPath) {
       this.designerInst.widget.openReport(this.reportPath.indexOf("external-parameter-report") !== -1 ? "product-line-sales.rdl" : this.reportPath.indexOf("parameter-customization") !== -1 ? "product-line-sales.rdl" : this.reportPath);
     }

diff --git a/src/app/components/external-parameter-report/external-parameter-report.component.css b/src/app/components/external-parameter-report/external-parameter-report.component.css
@@ -22,8 +22,9 @@
 }
 
 #r-w-property-container {
-  height: 100%;
+  height: auto;
   width: 30%;
+  position: relative;
 }
 
 #r-w-property-name-category{
@@ -70,7 +71,7 @@
 #r-w-property-category,#r-w-property-subcategory,#r-w-property-startdate,#r-w-property-enddate {
   display: inline-flex;
   margin-left: 20px;
-  margin-right: 20px;
+  margin-right: 0px;
 }
 
 #r-w-property-name-category, #r-w-property-name {
@@ -108,4 +109,10 @@
     margin: 0 0 0 20px;
   }
 
-} 
+} 
+
+@media screen and (max-width: 1262px) {
+  #r-w-property-value-subcategory{
+    right: 10px;
+  }
+}
diff --git a/src/app/components/external-parameter-report/external-parameter-report.component.html b/src/app/components/external-parameter-report/external-parameter-report.component.html
@@ -7,30 +7,31 @@
         </bold-reportviewer>
     </div>
     <div id="r-w-property-container">
-        <div id="r-w-property-title">Parameters</div>
-        <div id="r-w-property-category">
+        <div id='spinner-container'></div>
+        <div id="r-w-property-title" style="display: none;">Parameters</div>
+        <div id="r-w-property-category" class="r-w-property" style="display: none;">
             <div id="r-w-property-name-category"> Category</div>
             <div id="r-w-property-value-category">
                 <input type="text" id="category" />
             </div>
         </div>
-        <div id="r-w-property-subcategory">
+        <div id="r-w-property-subcategory" class="r-w-property" style="display: none;">
             <div id="r-w-property-name">
                 Sub Category
             </div>
             <div id="r-w-property-value-subcategory">
                 <input type="text" id="subcategory" />
             </div>
         </div>
-        <div id="r-w-property-startdate">
+        <div id="r-w-property-startdate" class="r-w-property" style="display: none;">
             <div id="r-w-property-name">
                 Start Date
             </div>
             <div id="r-w-property-value-startdate">
                 <input id="startdate" />
             </div>
         </div>
-        <div id="r-w-property-enddate">
+        <div id="r-w-property-enddate" class="r-w-property" style="display: none;">
             <div id="r-w-property-name">
                 End Date
             </div>
@@ -39,7 +40,7 @@
             </div>
         </div>
         <input type="button" class="r-w-genearte e-control e-btn e-lib e-primary"
-            id="update" (click)="loadReport()" value="View Report" />
+            id="update" (click)="loadReport()" value="View Report" style="display: none;" />
     </div>
 </div>