LP#1775466 Add grid print support; move dialogs to root module
authorBill Erickson <berickxx@gmail.com>
Tue, 12 Jun 2018 21:54:27 +0000 (17:54 -0400)
committerBill Erickson <berickxx@gmail.com>
Wed, 5 Sep 2018 14:05:23 +0000 (10:05 -0400)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/src/app/common.module.ts
Open-ILS/src/eg2/src/app/share/dialog/progress.component.ts
Open-ILS/src/eg2/src/app/share/grid/grid-print.component.html [new file with mode: 0644]
Open-ILS/src/eg2/src/app/share/grid/grid-print.component.ts [new file with mode: 0644]
Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts
Open-ILS/src/eg2/src/app/share/grid/grid.component.html
Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
Open-ILS/src/eg2/src/app/share/print/print.component.ts
Open-ILS/src/eg2/src/app/staff/common.module.ts
Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html

index b728240..e04e003 100644 (file)
@@ -18,11 +18,21 @@ import {OrgService} from '@eg/core/org.service';
 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,
@@ -35,7 +45,11 @@ import {PrintComponent} from '@eg/share/print/print.component';
     RouterModule,
     NgbModule,
     FormsModule,
-    PrintComponent
+    PrintComponent,
+    DialogComponent,
+    ConfirmDialogComponent,
+    PromptDialogComponent,
+    ProgressDialogComponent
   ]
 })
 
index 180ed50..9a32bf5 100644 (file)
@@ -82,7 +82,7 @@ export class ProgressDialogComponent extends DialogComponent {
     // 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()) {
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.html
new file mode 100644 (file)
index 0000000..bcb29e7
--- /dev/null
@@ -0,0 +1,30 @@
+
+
+<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>
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.ts
new file mode 100644 (file)
index 0000000..f73e26b
--- /dev/null
@@ -0,0 +1,45 @@
+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'
+                });
+            }
+        );
+    }
+}
+
+
index fd301a4..5f9a34a 100644 (file)
         [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>
index 43d3aec..9e3ceda 100644 (file)
@@ -4,6 +4,7 @@ import {Pager} from '@eg/share/util/pager';
 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',
@@ -14,6 +15,7 @@ export class GridToolbarComponent implements OnInit {
 
     @Input() gridContext: GridContext;
     @Input() colWidthConfig: GridColumnWidthComponent;
+    @Input() gridPrinter: GridPrintComponent;
 
     csvExportInProgress: boolean;
     csvExportUrl: SafeUrl;
@@ -39,6 +41,10 @@ export class GridToolbarComponent implements OnInit {
         action.action(this.gridContext.getSelectedRows());
     }
 
+    printHtml() {
+        this.gridPrinter.printGrid();
+    }
+
     generateCsvExportUrl($event) {
 
         if (this.csvExportInProgress) {
@@ -64,7 +70,6 @@ export class GridToolbarComponent implements OnInit {
         ).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(
index 84c8dee..5a24fc3 100644 (file)
@@ -1,13 +1,19 @@
 
 <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>
index 07a7eed..31a052c 100644 (file)
@@ -8,6 +8,7 @@ import {GridToolbarButtonComponent} from './grid-toolbar-button.component';
 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({
@@ -20,7 +21,8 @@ import {GridColumnWidthComponent} from './grid-column-width.component';
         GridToolbarButtonComponent,
         GridToolbarActionComponent,
         GridColumnConfigComponent,
-        GridColumnWidthComponent
+        GridColumnWidthComponent,
+        GridPrintComponent
     ],
     imports: [
         EgCommonModule
index b715bc6..0496f0c 100644 (file)
@@ -23,7 +23,7 @@ export class PrintComponent implements OnInit {
 
     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));
index 33af569..2dfbb3c 100644 (file)
@@ -2,10 +2,6 @@ import {NgModule, ModuleWithProviders} from '@angular/core';
 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';
@@ -25,10 +21,6 @@ import {DateSelectComponent} from '@eg/share/date-select/date-select.component';
   declarations: [
     StaffBannerComponent,
     OrgSelectComponent,
-    DialogComponent,
-    ConfirmDialogComponent,
-    PromptDialogComponent,
-    ProgressDialogComponent,
     AccessKeyDirective,
     AccessKeyInfoComponent,
     ToastComponent,
@@ -44,10 +36,6 @@ import {DateSelectComponent} from '@eg/share/date-select/date-select.component';
     EgCommonModule,
     StaffBannerComponent,
     OrgSelectComponent,
-    DialogComponent,
-    ConfirmDialogComponent,
-    PromptDialogComponent,
-    ProgressDialogComponent,
     AccessKeyDirective,
     AccessKeyInfoComponent,
     ToastComponent,
index 4430212..bc6a8d6 100644 (file)
@@ -70,7 +70,7 @@
 <!-- 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 -->