import {AudioService} from '@eg/share/util/audio.service';
import {FormatService} from '@eg/share/util/format.service';
import {PrintService} from '@eg/share/print/print.service';
+
+// Globally available components
import {PrintComponent} from '@eg/share/print/print.component';
+import {DialogComponent} from '@eg/share/dialog/dialog.component';
+import {ConfirmDialogComponent} from '@eg/share/dialog/confirm.component';
+import {PromptDialogComponent} from '@eg/share/dialog/prompt.component';
+import {ProgressDialogComponent} from '@eg/share/dialog/progress.component';
@NgModule({
declarations: [
- PrintComponent
+ PrintComponent,
+ DialogComponent,
+ ConfirmDialogComponent,
+ PromptDialogComponent,
+ ProgressDialogComponent
],
imports: [
CommonModule,
RouterModule,
NgbModule,
FormsModule,
- PrintComponent
+ PrintComponent,
+ DialogComponent,
+ ConfirmDialogComponent,
+ PromptDialogComponent,
+ ProgressDialogComponent
]
})
// Increment the current value. If no amount is specified,
// it increments by 1. Calling increment() on an indetermite
// progress bar will force it to be a (semi-)determinate bar.
- increment(amt: number) {
+ increment(amt?: number) {
if (!Number.isInteger(amt)) { amt = 1; }
if (!this.hasValue()) {
--- /dev/null
+
+
+<ng-container>
+ <eg-progress-dialog #progressDialog></eg-progress-dialog>
+ <ng-template #printTemplate let-context>
+ <div>
+ <style>
+ .grid-table {
+ border-collapse: collapse;
+ margin: 1px;
+ }
+ .grid-table td {
+ padding: 2px;
+ border: 1px solid #aaa;
+ }
+ </style>
+ <table class="grid-table">
+ <thead>
+ <tr><th *ngFor="let col of context.columns">{{col.label}}</th></tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let row of context.rows; trackBy: index">
+ <!-- item values have already been filtered, etc. -->
+ <td *ngFor="let col of context.columns"><span>{{row[col.name]}}</span></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </ng-template>
+</ng-container>
--- /dev/null
+import {Component, Input, TemplateRef, ViewChild} from '@angular/core';
+import {ProgressDialogComponent} from '@eg/share/dialog/progress.component';
+import {PrintService} from '@eg/share/print/print.service';
+import {GridContext} from '@eg/share/grid/grid';
+
+@Component({
+ selector: 'eg-grid-print',
+ templateUrl: './grid-print.component.html'
+})
+
+/**
+ */
+export class GridPrintComponent {
+
+ @Input() gridContext: GridContext;
+ @ViewChild('printTemplate') private printTemplate: TemplateRef<any>;
+ @ViewChild('progressDialog')
+ private progressDialog: ProgressDialogComponent;
+
+ constructor(private printer: PrintService) {}
+
+ printGrid() {
+ this.progressDialog.open();
+ const columns = this.gridContext.columnSet.displayColumns();
+ const textItems = {columns: columns, rows: []};
+
+ this.gridContext.getAllRowsAsText().subscribe(
+ row => {
+ this.progressDialog.increment();
+ textItems.rows.push(row);
+ },
+ err => this.progressDialog.close(),
+ () => {
+ this.progressDialog.close();
+ this.printer.print({
+ template: this.printTemplate,
+ contextData: textItems,
+ printContext: 'default'
+ });
+ }
+ );
+ }
+}
+
+
[download]="csvExportFileName"
[href]="csvExportUrl">
<span class="material-icons">cloud_download</span>
- <span class="ml-2" i18n>Download CSV</span>
+ <span class="ml-2" i18n>Download Full CSV</span>
+ </a>
+ <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
+ <span class="material-icons">print</span>
+ <span class="ml-2" i18n>Print Full Grid</span>
</a>
<div class="dropdown-divider"></div>
import {GridColumn, GridColumnSet, GridToolbarButton,
GridToolbarAction, GridContext, GridDataSource} from '@eg/share/grid/grid';
import {GridColumnWidthComponent} from './grid-column-width.component';
+import {GridPrintComponent} from './grid-print.component';
@Component({
selector: 'eg-grid-toolbar',
@Input() gridContext: GridContext;
@Input() colWidthConfig: GridColumnWidthComponent;
+ @Input() gridPrinter: GridPrintComponent;
csvExportInProgress: boolean;
csvExportUrl: SafeUrl;
action.action(this.gridContext.getSelectedRows());
}
+ printHtml() {
+ this.gridPrinter.printGrid();
+ }
+
generateCsvExportUrl($event) {
if (this.csvExportInProgress) {
).replace(/\s+/g, '_') + '.csv';
this.gridContext.gridToCsv().then(csv => {
- console.log(csv);
const blob = new Blob([csv], {type : 'text/plain'});
const win: any = window; // avoid TS errors
this.csvExportUrl = this.sanitizer.bypassSecurityTrustUrl(
<div class="eg-grid">
- <eg-grid-toolbar [gridContext]="context" [colWidthConfig]="colWidthConfig">
+ <eg-grid-toolbar
+ [gridContext]="context"
+ [gridPrinter]="gridPrinter"
+ [colWidthConfig]="colWidthConfig">
</eg-grid-toolbar>
<eg-grid-header [gridContext]="context"></eg-grid-header>
<eg-grid-column-width #colWidthConfig [gridContext]="context">
</eg-grid-column-width>
+
+ <eg-grid-print #gridPrinter [gridContext]="context">
+ </eg-grid-print>
<div class="row" *ngIf="dataSource.data.length == 0">
<div class="col-lg-12 text-center alert alert-light font-italic" i18n>
import {GridToolbarActionComponent} from './grid-toolbar-action.component';
import {GridColumnConfigComponent} from './grid-column-config.component';
import {GridColumnWidthComponent} from './grid-column-width.component';
+import {GridPrintComponent} from './grid-print.component';
@NgModule({
GridToolbarButtonComponent,
GridToolbarActionComponent,
GridColumnConfigComponent,
- GridColumnWidthComponent
+ GridColumnWidthComponent,
+ GridPrintComponent
],
imports: [
EgCommonModule
handlePrintRequest(printReq: PrintRequest) {
this.template = printReq.template;
- this.context = printReq.contextData;
+ this.context = {$implicit: printReq.contextData};
// Give the template a chance to render inline before printing
setTimeout(() => this.dispatchPrint(printReq));
import {EgCommonModule} from '@eg/common.module';
import {StaffBannerComponent} from './share/staff-banner.component';
import {OrgSelectComponent} from '@eg/share/org-select/org-select.component';
-import {DialogComponent} from '@eg/share/dialog/dialog.component';
-import {ConfirmDialogComponent} from '@eg/share/dialog/confirm.component';
-import {PromptDialogComponent} from '@eg/share/dialog/prompt.component';
-import {ProgressDialogComponent} from '@eg/share/dialog/progress.component';
import {AccessKeyDirective} from '@eg/share/accesskey/accesskey.directive';
import {AccessKeyService} from '@eg/share/accesskey/accesskey.service';
import {AccessKeyInfoComponent} from '@eg/share/accesskey/accesskey-info.component';
declarations: [
StaffBannerComponent,
OrgSelectComponent,
- DialogComponent,
- ConfirmDialogComponent,
- PromptDialogComponent,
- ProgressDialogComponent,
AccessKeyDirective,
AccessKeyInfoComponent,
ToastComponent,
EgCommonModule,
StaffBannerComponent,
OrgSelectComponent,
- DialogComponent,
- ConfirmDialogComponent,
- PromptDialogComponent,
- ProgressDialogComponent,
AccessKeyDirective,
AccessKeyInfoComponent,
ToastComponent,
<!-- printing -->
<button class="btn btn-secondary" (click)="doPrint()">Test Print</button>
-<ng-template #printTemplate let-world="world">Hello, {{world}}!</ng-template>
+<ng-template #printTemplate let-context>Hello, {{context.world}}!</ng-template>
<!-- grid stuff -->