diff --git a/build/copy.js b/build/copy.js index 91f6cf0..f781111 100644 --- a/build/copy.js +++ b/build/copy.js @@ -3,13 +3,12 @@ const { cp, mkdir } = require('shelljs'); const fs = require('fs'); const scripts = { - common: ['common/ej2-base.min.js', 'common/ej2-data.min.js', 'common/ej2-pdf-export.min.js', 'common/ej2-svg-base.min.js'], - control: ['data-visualization/ej2-circulargauge.min.js', 'data-visualization/ej2-lineargauge.min.js', 'data-visualization/ej2-maps.min.js'], barcode: ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js'], signature: ['signature.reportitem.css', 'signature.dialog.css', 'signature.reportitem.js', 'signature.dialog.js'], shape: ['shape.reportitem.css','shape.reportitem.js'], pdf: ['document.reportitem.css', 'pdfdocument.reportitem.js'], - html: ['htmldocument.reportitem.js'] + html: ['htmldocument.reportitem.js'], + pdfSignature: ['pdf.signature.reportitem.css', 'pdf.signature.reportitem.js'] }; const srcDir = 'node_modules/@boldreports/javascript-reporting-controls/Scripts/'; @@ -23,17 +22,17 @@ const extensionsExportTemp = { 'signatureDialog': 'export { SignatureDialog }', 'shape': 'export { EJShape }', 'pdfDocument': 'export { EJPdfDocument };', - 'htmlDocument': 'export { EJHtmlDocument };' + 'htmlDocument': 'export { EJHtmlDocument };', + 'pdfSignature': 'export { EJPDFSignature }' } gulp.task('copy', (done) => { - copyFiles(scripts.common, srcDir, destDir + 'common'); - copyFiles(scripts.control, srcDir, destDir + 'data-visualization'); copyFiles(scripts.barcode, extensionsItemSrcDir, extensionsItemDir); copyFiles(scripts.signature, extensionsItemSrcDir, extensionsItemDir); copyFiles(scripts.shape, extensionsItemSrcDir, extensionsItemDir); copyFiles(scripts.html, extensionsItemSrcDir, extensionsItemDir); copyFiles(scripts.pdf, extensionsItemSrcDir, extensionsItemDir); + copyFiles(scripts.pdfSignature, extensionsItemSrcDir, extensionsItemDir); done(); }); @@ -52,7 +51,8 @@ gulp.task('update-extensions-export', (done) => { 'signatureDialog': ['signature.dialog.js', 'signatureDialog'], 'pdfDocument': ['pdfdocument.reportitem.js', 'pdfDocument'], 'htmlDocument': ['htmldocument.reportitem.js', 'htmlDocument'], - 'shape': ['shape.reportitem.js', 'shape'] + 'shape': ['shape.reportitem.js', 'shape'], + 'pdfSignature': ['pdf.signature.reportitem.js', 'pdfSignature'] }; const updateFile = (key, [filename, exportKey]) => { const filePath = `${extensionsItemDir}${filename}`; diff --git a/build/router.js b/build/router.js index e86ff00..3fb0f6d 100644 --- a/build/router.js +++ b/build/router.js @@ -43,14 +43,14 @@ gulp.task('generate-router', (done) => { let initilaReportRouterPath = defaultSampleData.routerPath ? defaultSampleData.basePath + '/' + defaultSampleData.routerPath : defaultSampleData.basePath; //Initila routing - routes.push(`{ path: '', redirectTo: '${initilaReportRouterPath}', pathMatch: 'full' }`); + routes.push(`{ path: '', redirectTo: '${initilaReportRouterPath}/', pathMatch: 'full' }`); for (let i = 0; i < samples.length; i++) { let sampleData = samples[i]; let reportRouterPath = sampleData.routerPath ? sampleData.basePath + '/' + sampleData.routerPath : sampleData.basePath; let reportComponentPath = sampleData.routerPath ? sampleData.directoryName + '/' + sampleData.routerPath : sampleData.directoryName + '/' + sampleData.basePath; - childRoutes.push(childRouterTemplate.replace('{{path}}', reportRouterPath).replace('{{component}}', sampleData.className)); - previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `${reportRouterPath}/preview`).replace('{{component}}', sampleData.className)); + childRoutes.push(childRouterTemplate.replace('{{path}}', `${reportRouterPath}/`).replace('{{component}}', sampleData.className)); + previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `${reportRouterPath}/preview/`).replace('{{component}}', sampleData.className)); importStatements.push(importTemplate.replace('{{component}}', sampleData.className).replace('{{path}}', `../components/${reportComponentPath}.component`)); components.push(sampleData.className); } @@ -58,18 +58,18 @@ gulp.task('generate-router', (done) => { //Designer importStatements.push(importTemplate.replace('{{component}}', `DesignerComponent`).replace('{{path}}', `../components/designer/designer.component`)); components.push('DesignerComponent'); - previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `report-designer`).replace('{{component}}', 'DesignerComponent')); + previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `report-designer/`).replace('{{component}}', 'DesignerComponent')); //RDLC Designer importStatements.push(importTemplate.replace('{{component}}', `RDLCComponent`).replace('{{path}}', `../components/rdlc/rdlc.component`)); components.push('RDLCComponent'); - previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `report-designer/rdlc`).replace('{{component}}', 'RDLCComponent')); + previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `report-designer/rdlc/`).replace('{{component}}', 'RDLCComponent')); routes.push(routerTempalte.replace('{{component}}', `AppComponent`).replace('{{childRoute}}', childRoutes.join(',\n\ '))); routes.push(routerTempalte.replace('{{component}}', `PreviewComponent`).replace('{{childRoute}}', previewChildRoutes.join(',\n\ '))); //re-routing - routes.push(`{ path: '**', redirectTo: '${initilaReportRouterPath}' }`); + routes.push(`{ path: '**', redirectTo: '${initilaReportRouterPath}/' }`); let importContent = importStatements.join('\n'); let componentContent = `const components: any[] | Type | ModuleWithProviders<{}> = [ ${components.join(',\n ')} diff --git a/package.json b/package.json index 297371c..c7515ea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-samples", - "version": "11.1.10", + "version": "12.1.12", "scripts": { "test": "gulp test", "postinstall": "gulp copy", @@ -16,10 +16,10 @@ "@angular/platform-browser": "^16.1.0", "@angular/platform-browser-dynamic": "^16.1.0", "@angular/router": "^16.1.0", - "@boldreports/angular-reporting-components": "*", - "@boldreports/javascript-reporting-controls": "*", - "@boldreports/javascript-reporting-extensions": "*", - "@boldreports/types": "*", + "@boldreports/angular-reporting-components": "12.1.12", + "@boldreports/javascript-reporting-controls": "12.1.12", + "@boldreports/javascript-reporting-extensions": "12.1.12", + "@boldreports/types": "12.1.12", "@syncfusion/ej2-angular-buttons": "22.2.5", "@syncfusion/ej2-angular-calendars": "22.2.5", "@syncfusion/ej2-angular-dropdowns": "22.2.5", diff --git a/src/app/common/app.component.ts b/src/app/common/app.component.ts index ff25701..aa807d9 100644 --- a/src/app/common/app.component.ts +++ b/src/app/common/app.component.ts @@ -122,7 +122,7 @@ export class AppComponent implements OnInit { width: 100% !important; } - #external-parameter-report, #multi-language-report { + #external-parameter-report, #external-parameter-report { height: auto !important; }`; } diff --git a/src/app/common/main-content/main-content.component.html b/src/app/common/main-content/main-content.component.html index eb9078d..1dd5dd5 100644 --- a/src/app/common/main-content/main-content.component.html +++ b/src/app/common/main-content/main-content.component.html @@ -105,6 +105,6 @@

Learning Center -
Copyright © 2001-2025 Syncfusion Inc.
+
diff --git a/src/app/common/main-content/main-content.component.ts b/src/app/common/main-content/main-content.component.ts index 055715d..42a602f 100644 --- a/src/app/common/main-content/main-content.component.ts +++ b/src/app/common/main-content/main-content.component.ts @@ -126,7 +126,7 @@ export class MainContentComponent implements AfterViewInit { onTabBtnClick(): void { const modifiedUrl = this.router.url.indexOf('?') !== -1 ? this.router.url.substring(0, this.router.url.indexOf('?')) : this.router.url; - window.open(this.location.prepareExternalUrl(modifiedUrl) + '/preview', '_blank', 'noreferrer'); + window.open(this.location.prepareExternalUrl(modifiedUrl) + 'preview/', '_blank', 'noreferrer'); } onTabNext(): void { diff --git a/src/app/common/main.component.ts b/src/app/common/main.component.ts index 5a6544c..5cbff79 100644 --- a/src/app/common/main.component.ts +++ b/src/app/common/main.component.ts @@ -10,6 +10,7 @@ export class MainComponent { this.router.events.subscribe((event: Event) => { if (event instanceof NavigationStart) { + this.routerService.addTrailingSlash(event.url); if (event.url.indexOf('/preview') === -1 && event.url.indexOf('/report-designer') === -1) { this.routerService.sampleUrl.next(event.url); } else { diff --git a/src/app/common/router.service.ts b/src/app/common/router.service.ts index 07ff7a4..d5b658a 100644 --- a/src/app/common/router.service.ts +++ b/src/app/common/router.service.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; +import { Router } from '@angular/router'; @Injectable() export class RouterService { @@ -16,6 +17,17 @@ export class RouterService { routerData.spilttedUrl = spilttedUrl; return routerData; } + + constructor(private router: Router) { } + public addTrailingSlash(url: string): boolean { + const qIndex = url.indexOf('?'); + const pathPart = url.slice(0, qIndex !== -1 ? qIndex : url.length); + if (pathPart && pathPart !== '/' && !pathPart.endsWith('/')) { + this.router.navigateByUrl(url.replace(pathPart, `${pathPart}/`)); + return false; + } + return true; + } } interface RouterData { diff --git a/src/app/common/sidebar/sidebar.component.scss b/src/app/common/sidebar/sidebar.component.scss index aba7b0f..2b1ec48 100644 --- a/src/app/common/sidebar/sidebar.component.scss +++ b/src/app/common/sidebar/sidebar.component.scss @@ -55,7 +55,7 @@ width: 90px; margin: 8px; background-image: url('./../../../assets/sidebar/portrait.png'); - background-size: 100% 2100%; + background-size: 100% 2200%; } .ej-sb-toc-title { diff --git a/src/app/components/designer/designer.component.ts b/src/app/components/designer/designer.component.ts index 48ebc12..3cecdc0 100644 --- a/src/app/components/designer/designer.component.ts +++ b/src/app/components/designer/designer.component.ts @@ -7,6 +7,7 @@ import { Router, Params } from '@angular/router'; import { EJBarcode } from './../extensions/report-item-extensions/barcode.reportitem'; import { EJQRBarcode } from './../extensions/report-item-extensions/qrbarcode.reportitem'; import { EJSignature } from './../extensions/report-item-extensions/signature.reportitem'; +import { EJPDFSignature } from './../extensions/report-item-extensions/pdf.signature.reportitem'; import { SignatureDialog } from './../extensions/report-item-extensions/signature.dialog'; import { EJShape } from './../extensions/report-item-extensions/shape.reportitem'; import { EJPdfDocument } from './../extensions/report-item-extensions/pdfdocument.reportitem'; @@ -30,6 +31,9 @@ const htmlDocument = 'EJHtmlDocument'; window[pdfDocument] = EJPdfDocument; window[htmlDocument] = EJHtmlDocument; +const pdfSignature = 'EJPDFSignature'; +window[pdfSignature] = EJPDFSignature; + @Component({ selector: 'ej-sample', templateUrl: './designer.component.html', @@ -70,7 +74,7 @@ export class DesignerComponent implements AfterViewInit { className: 'EJSignature', imageClass: 'customitem-signature', displayName: 'Electronic', - category: 'Signature' + category: 'Signatures' }, { name: 'Shape', className: 'EJShape', @@ -90,6 +94,12 @@ export class DesignerComponent implements AfterViewInit { imageClass: 'customitem-htmldocument', displayName: 'Html', category: 'Documents', + }, { + name: 'PDFSignature', + className: 'EJPDFSignature', + imageClass: 'customitem-pdfsignature', + displayName: 'PDF', + category: 'Signatures' }]; } diff --git a/src/app/components/hr-payroll/hr-payroll.component.css b/src/app/components/hr-payroll/hr-payroll.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/hr-payroll/hr-payroll.component.html b/src/app/components/hr-payroll/hr-payroll.component.html new file mode 100644 index 0000000..381e9b8 --- /dev/null +++ b/src/app/components/hr-payroll/hr-payroll.component.html @@ -0,0 +1,21 @@ + + +
+

+ The HR Payroll report provides a comprehensive overview of employee compensation, departmental performance, and leave management. It helps HR teams analyze payroll trends and make informed decisions. +

+ +

+ For more information on how dynamic image report items enhance customization in multi-company HR reports, refer to this + documentation section. +

+
\ No newline at end of file diff --git a/src/app/components/hr-payroll/hr-payroll.component.ts b/src/app/components/hr-payroll/hr-payroll.component.ts new file mode 100644 index 0000000..2dd7bea --- /dev/null +++ b/src/app/components/hr-payroll/hr-payroll.component.ts @@ -0,0 +1,24 @@ +/** + * HR Payroll - This demo showcases an HR Payroll report showing salaries, deductions, demographics, and performance insights in the Angular Bold Report Viewer. + */ + import { Component } from '@angular/core'; + import { Globals } from '../globals'; + @Component({ + selector: 'ej-sample', + templateUrl: './hr-payroll.component.html', + styleUrls: ['./hr-payroll.component.css'] + }) + export class HRPayrollComponent { + // Specifies the report Web API service URL. It is used to process the reports. + public serviceUrl = Globals.SERVICE_URL; + // Specifies the path of the RDL report file + public reportPath: string; + public toolbarSettings = Globals.TOOLBAR_OPTIONS; + public onToolbarItemClick = Globals.EDIT_REPORT; + public onExportItemClick = Globals.EXPORT_ITEM_CLICK; + + constructor() { + this.reportPath = 'hr-payroll.rdl'; + } + } + \ No newline at end of file diff --git a/src/app/components/multi-language-report/multi-language-report.component.ts b/src/app/components/multi-language-report/multi-language-report.component.ts index fe077b2..6814707 100644 --- a/src/app/components/multi-language-report/multi-language-report.component.ts +++ b/src/app/components/multi-language-report/multi-language-report.component.ts @@ -31,14 +31,31 @@ export class MultiLanguageReportComponent { this.parameterSettings = { hideParameterBlock: true }; } public languagesList: any = [{ Name: "English", languageId: "en-US" }, { Name: "French", languageId: "fr-CA" }, { Name: "German", languageId: "de-DE" }, { Name: "Hindi", languageId: "hi-IN" }, { Name: "Spanish", languageId: "es-ES" }, { Name: "Dutch", languageId: "nl-NL" }, { Name: "Korean", languageId: "ko-KR" }, { Name: "Hebrew", languageId: "he-IL" }, { Name: "Russian", languageId: "ru-RU" }]; + public tooltipLocales: any = { + "en-US": { header: "Edit Report", content: "Edit this report in designer" }, + "fr-CA": { header: "Modifier le rapport", content: "Modifier ce rapport dans le concepteur" }, + "de-DE": { header: "Bericht bearbeiten", content: "Bearbeiten Sie diesen Bericht im Designer" }, + "hi-IN": { header: "रिपोर्ट संपादित करें", content: "इस रिपोर्ट को डिज़ाइनर में संपादित करें" }, + "es-ES": { header: "Editar informe", content: "Editar este informe en el diseñador" }, + "nl-NL": { header: "Rapport bewerken", content: "Bewerk dit rapport in de ontwerper" }, + "ko-KR": { header: "보고서 편집", content: "디자이너에서 이 보고서를 편집합니다" }, + "he-IL": { header: "ערוך דוח", content: "ערוך דוח זה במעצב" }, + "ru-RU": { header: "Редактировать отчет", content: "Редактировать этот отчет в дизайнере" } + }; public loadReport(): void { const reportViewer = this.multiLanguageReport; const selectedLanguageId = (jQuery("#languages"))[0].ej2_instances[0].value; + const tooltipData = this.tooltipLocales[selectedLanguageId]; const selectedLanguage = this.languagesList.find(lang => lang.languageId === selectedLanguageId); const parameters = [{ name: 'Language', labels: [selectedLanguage.Name], values: [selectedLanguage.Name] }]; reportViewer.widget.model.parameters = parameters; reportViewer.widget.reload(); reportViewer.widget.setModel({'locale': selectedLanguageId}); + const item = reportViewer.widget.model.toolbarSettings.customGroups[0].items[0]; + item.tooltip = { + header: tooltipData.header, + content: tooltipData.content + }; } ngAfterViewInit(): void { createSpinner({target: document.getElementById("spinner-container")}); diff --git a/src/app/components/rdlc/rdlc.component.ts b/src/app/components/rdlc/rdlc.component.ts index 0170a8e..86f1cfb 100644 --- a/src/app/components/rdlc/rdlc.component.ts +++ b/src/app/components/rdlc/rdlc.component.ts @@ -11,6 +11,7 @@ import { SignatureDialog } from './../extensions/report-item-extensions/signatur import { EJShape } from './../extensions/report-item-extensions/shape.reportitem'; import { EJPdfDocument } from './../extensions/report-item-extensions/pdfdocument.reportitem'; import { EJHtmlDocument } from './../extensions/report-item-extensions/htmldocument.reportitem'; +import { EJPDFSignature } from './../extensions/report-item-extensions/pdf.signature.reportitem'; import { rdlcData } from '../rdlcData'; @@ -32,6 +33,9 @@ const htmlDocument = 'EJHtmlDocument'; window[pdfDocument] = EJPdfDocument; window[htmlDocument] = EJHtmlDocument; +const pdfSignature = 'EJPDFSignature'; +window[pdfSignature] = EJPDFSignature; + @Component({ selector: 'ej-sample', templateUrl: './rdlc.component.html', @@ -73,7 +77,7 @@ export class RDLCComponent implements AfterViewInit { className: 'EJSignature', imageClass: 'customitem-signature', displayName: 'Electronic', - category: 'Signature' + category: 'Signatures' }, { name: 'Shape', className: 'EJShape', @@ -93,6 +97,12 @@ export class RDLCComponent implements AfterViewInit { imageClass: 'customitem-htmldocument', displayName: 'Html', category: 'Documents', + }, { + name: 'PDFSignature', + className: 'EJPDFSignature', + imageClass: 'customitem-pdfsignature', + displayName: 'PDF', + category: 'Signatures' }]; } diff --git a/src/app/components/samples.json b/src/app/components/samples.json index db2082c..3387c5f 100644 --- a/src/app/components/samples.json +++ b/src/app/components/samples.json @@ -81,7 +81,6 @@ "sampleName": "Sales Report", "basePath": "report-viewer", "directoryName": "sales-report", - "status": "Updated", "imageDetails": { "isLandscape": false, "index": 9 @@ -503,7 +502,6 @@ "sampleName": "Dynamic Logos", "basePath": "report-viewer", "directoryName": "dynamic-logos", - "status": "New", "imageDetails": { "isLandscape": false, "index": 19 @@ -518,7 +516,6 @@ "sampleName": "Multi Language Report", "basePath": "report-viewer", "directoryName": "multi-language-report", - "status": "New", "imageDetails": { "isLandscape": false, "index": 5 @@ -526,6 +523,21 @@ "metaData": { "description": "This demo showcases a Multi Language Report that allows users to view report in various languages using the Angular Bold Report Viewer." } + }, + { + "routerPath": "hr-payroll", + "className": "HRPayrollComponent", + "sampleName": "HR Payroll", + "basePath": "report-viewer", + "directoryName": "hr-payroll", + "status": "New", + "imageDetails": { + "isLandscape": false, + "index": 20 + }, + "metaData": { + "description": "This demo showcases an HR Payroll report showing salaries, deductions, demographics, and performance insights in the Angular Bold Report Viewer." + } } ] } diff --git a/src/assets/sidebar/portrait.png b/src/assets/sidebar/portrait.png index cb3ae12..ac5b9e9 100644 Binary files a/src/assets/sidebar/portrait.png and b/src/assets/sidebar/portrait.png differ diff --git a/src/styles.scss b/src/styles.scss index 524f325..01af003 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -9,6 +9,7 @@ @import './app/components/extensions/report-item-extensions/signature.dialog.css'; @import './app/components/extensions/report-item-extensions/shape.reportitem.css'; @import './app/components/extensions/report-item-extensions/document.reportitem.css'; +@import './app/components/extensions/report-item-extensions/pdf.signature.reportitem.css'; // code-mirror @import './../node_modules/codemirror/lib/codemirror.css';