LP#1775466 printing / more dates
authorBill Erickson <berickxx@gmail.com>
Mon, 14 May 2018 16:12:48 +0000 (12:12 -0400)
committerBill Erickson <berickxx@gmail.com>
Wed, 6 Jun 2018 20:59:26 +0000 (16:59 -0400)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
12 files changed:
Open-ILS/src/eg2/src/app/app.component.ts
Open-ILS/src/eg2/src/app/common.module.ts
Open-ILS/src/eg2/src/app/migration.module.ts [deleted file]
Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
Open-ILS/src/eg2/src/app/share/print/print.component.html [new file with mode: 0644]
Open-ILS/src/eg2/src/app/share/print/print.component.ts [new file with mode: 0644]
Open-ILS/src/eg2/src/app/share/print/print.service.ts [new file with mode: 0644]
Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
Open-ILS/src/eg2/src/styles.css

index d049f7a..4a36d04 100644 (file)
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'eg-root',
-  template: '<router-outlet></router-outlet>'
+  template: '<router-outlet></router-outlet><eg-print></eg-print>'
 })
 
 export class EgBaseComponent {
index 5f5f97f..6f072aa 100644 (file)
@@ -6,7 +6,6 @@ import {NgModule, ModuleWithProviders} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
-
 import {EgEventService} from '@eg/core/event.service';
 import {EgStoreService} from '@eg/core/store.service';
 import {EgIdlService} from '@eg/core/idl.service';
@@ -17,9 +16,12 @@ import {EgPcrudService} from '@eg/core/pcrud.service';
 import {EgOrgService} from '@eg/core/org.service';
 import {EgAudioService} from '@eg/share/util/audio.service';
 import {EgFormatService} from '@eg/share/util/format.service';
+import {EgPrintService} from '@eg/share/print/print.service';
+import {EgPrintComponent} from '@eg/share/print/print.component';
 
 @NgModule({
   declarations: [
+    EgPrintComponent
   ],
   imports: [
     CommonModule,
@@ -29,7 +31,8 @@ import {EgFormatService} from '@eg/share/util/format.service';
   exports: [
     CommonModule,
     NgbModule,
-    FormsModule
+    FormsModule,
+    EgPrintComponent
   ]
 })
 
@@ -50,6 +53,7 @@ export class EgCommonModule {
                 EgPermService,
                 EgPcrudService,
                 EgOrgService,
+                EgPrintService,
                 EgAudioService,
                 EgFormatService
             ]
diff --git a/Open-ILS/src/eg2/src/app/migration.module.ts b/Open-ILS/src/eg2/src/app/migration.module.ts
deleted file mode 100644 (file)
index 5c878b5..0000000
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * EgMigrationModule
- *
- * This module has no internal components or routing.  It's just a 
- * pass-through for AngularJS.
- *
- * 1. Loads the ang1 => ang2 upgrade components.
- * 2. Downgrades and injects shared ang2 services and components for use
- *    by ang1.
- * 3. Bootstraps ang1.
- */
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; // ng-bootstrap
-import {CookieModule} from 'ngx-cookie'; // import CookieMonster
-import {UpgradeModule, downgradeInjectable, downgradeComponent} 
-    from '@angular/upgrade/static';
-
-// Replacement for egStrings.setPageTitle()
-import {Title} from '@angular/platform-browser';
-
-// Import service handles so we can downgrade them.
-import {EgCommonModule} from './common.module';
-import {EgEventService} from '@eg/core/event.service';
-import {EgStoreService} from '@eg/core/store.service';
-import {EgIdlService} from '@eg/core/idl.service';
-import {EgNetService} from '@eg/core/net.service';
-import {EgAuthService} from '@eg/core/auth.service';
-import {EgPermService} from '@eg/core/perm.service';
-import {EgPcrudService} from '@eg/core/pcrud.service';
-import {EgOrgService} from '@eg/core/org.service';
-
-// Downgraded components
-//import {EgDialogComponent} from '@eg/share/dialog/dialog.component';
-//import {EgConfirmDialogComponent} from '@eg/share/dialog/confirm.component';
-
-declare var angular: any;
-
-@NgModule({
-  imports: [
-    UpgradeModule,
-    BrowserModule,
-    NgbModule.forRoot(),
-    CookieModule.forRoot(),
-    EgCommonModule.forRoot()
-  ],
-  declarations: [
-    //EgDialogComponent,
-    //EgConfirmDialogComponent
-  ],
-  entryComponents: [
-    //EgDialogComponent,
-    //EgConfirmDialogComponent
-  ]
-})
-
-export class EgMigrationModule {
-    
-    constructor(private upgrade: UpgradeModule) {}
-
-    ngDoBootstrap() {
-        let myWin: any = window; // hush compiler warnings
-
-        if (!myWin.ang1PageApp) {
-            console.error('NO PAGE APP DEFINED');
-            return;
-        }
-
-        console.log(`Ang2 loading Ang1 app ${myWin.ang1PageApp}`);
-
-        angular.module(myWin.ang1PageApp)
-            .factory('eg2Event', downgradeInjectable(EgEventService))
-            .factory('eg2Store', downgradeInjectable(EgStoreService))
-            .factory('eg2Idl',   downgradeInjectable(EgIdlService))
-            .factory('eg2Net',   downgradeInjectable(EgNetService))
-            .factory('eg2Auth',  downgradeInjectable(EgAuthService))
-            .factory('eg2Perm',  downgradeInjectable(EgPermService))
-            .factory('eg2Pcrud', downgradeInjectable(EgPcrudService))
-            .factory('eg2Org',   downgradeInjectable(EgOrgService))
-            .factory('ng2Title', downgradeInjectable(Title))
-            /*
-            .directive('eg2ConfirmDialog',
-                downgradeComponent({component: EgConfirmDialogComponent}))
-                */
-
-        ;
-
-        this.upgrade.bootstrap(document.body, [myWin.ang1PageApp]);
-    }
-}
-
-
index c686be4..93dc5cf 100644 (file)
@@ -4,7 +4,7 @@
     class="form-control" 
     ngbDatepicker
     #datePicker="ngbDatepicker"
-    placeholder="yyyy-mm-dd"
+    [placeholder]="yyyy-mm-dd"
     class="form-control"
     name="{{fieldName}}"
     [required]="required"
index 7cc188f..f203a5b 100644 (file)
@@ -1,6 +1,12 @@
 import {Component, OnInit, Input, Output, ViewChild, EventEmitter} from '@angular/core';
 import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
 
+/**
+ * RE: displaying locale dates in the input field:
+ * https://github.com/ng-bootstrap/ng-bootstrap/issues/754
+ * https://stackoverflow.com/questions/40664523/angular2-ngbdatepicker-how-to-format-date-in-inputfield
+ */
+
 @Component({
   selector: 'eg-date-select',
   templateUrl: './date-select.component.html'
index 3da8b1b..38e6c38 100644 (file)
@@ -50,7 +50,7 @@
             <span *ngIf="field.datatype == 'timestamp'">
               <eg-date-select
                 (onChangeAsIso)="record[field.name]($event)"
-                initialIso="record[field.name]()">
+                initialIso="{{record[field.name]()}}">
               </eg-date-select>
             </span>
 
diff --git a/Open-ILS/src/eg2/src/app/share/print/print.component.html b/Open-ILS/src/eg2/src/app/share/print/print.component.html
new file mode 100644 (file)
index 0000000..bc47c38
--- /dev/null
@@ -0,0 +1,5 @@
+
+<div id='eg-print-container'>
+    <ng-container *ngTemplateOutlet="template; context:context"></ng-container>
+</div>
+
diff --git a/Open-ILS/src/eg2/src/app/share/print/print.component.ts b/Open-ILS/src/eg2/src/app/share/print/print.component.ts
new file mode 100644 (file)
index 0000000..9a2ccea
--- /dev/null
@@ -0,0 +1,29 @@
+import {Component, OnInit, TemplateRef} from '@angular/core';
+import {EgPrintService, EgPrintRequest} from './print.service';
+
+@Component({
+    selector: 'eg-print',
+    templateUrl: './print.component.html'
+})
+
+export class EgPrintComponent implements OnInit {
+
+    template: TemplateRef<any>;
+    context: any;
+
+    constructor(private print: EgPrintService) {}
+    
+    ngOnInit() {
+        this.print.onPrintRequest$.subscribe(
+            printReq => this.handlePrintRequest(printReq));
+    }
+
+    handlePrintRequest(printReq: EgPrintRequest) {
+        this.template = printReq.template;
+        this.context = printReq.context;
+
+        // TODO: hatch
+        setTimeout(() => window.print());
+    }
+}
+
diff --git a/Open-ILS/src/eg2/src/app/share/print/print.service.ts b/Open-ILS/src/eg2/src/app/share/print/print.service.ts
new file mode 100644 (file)
index 0000000..cc521f6
--- /dev/null
@@ -0,0 +1,21 @@
+import {Injectable, EventEmitter, TemplateRef} from '@angular/core';
+
+export interface EgPrintRequest {
+    template: TemplateRef<any>,
+    context: any
+}
+
+@Injectable()
+export class EgPrintService {
+
+    onPrintRequest$: EventEmitter<EgPrintRequest>;
+
+    constructor() {
+        this.onPrintRequest$ = new EventEmitter<EgPrintRequest>();
+    }
+
+    print(printReq: EgPrintRequest) {
+        this.onPrintRequest$.emit(printReq);
+    }
+}
+
index fedfd06..b663434 100644 (file)
   <div>HERE: {{testDate}}</div>
 </div>
 
-
 <!-- grid stuff -->
-
-
-<eg-grid #cbtGrid idlClass="cbt" [dataSource]="btSource">
-</eg-grid>
-
 <!--
-<eg-grid #testGrid [dataSource]="gridDataSource">
-  <eg-grid-column  name="name" label="Name" i18n-label></eg-grid-column>
-  <eg-grid-column  name="state" label="State" i18n-label></eg-grid-column>
+<eg-grid #cbtGrid idlClass="cbt" [dataSource]="btSource">
 </eg-grid>
 -->
 
+<!-- printing -->
 
-
-
+<button class="btn btn-secondary" (click)="doPrint()">Test Print</button>
+<ng-template #printTemplate let-world="world">Hello, {{world}}!</ng-template>
 
 
index d34e773..5579e25 100644 (file)
@@ -8,6 +8,7 @@ import {EgIdlService, EgIdlObject} from '@eg/core/idl.service';
 import {EgPcrudService} from '@eg/core/pcrud.service';
 import {Pager} from '@eg/share/util/pager';
 import {EgDateSelectComponent} from '@eg/share/date-select/date-select.component';
+import {EgPrintService} from '@eg/share/print/print.service';
 
 @Component({
   templateUrl: 'sandbox.component.html'
@@ -20,6 +21,10 @@ export class EgSandboxComponent implements OnInit {
     @ViewChild('dateSelect')
     private dateSelector: EgDateSelectComponent;
 
+    @ViewChild('printTemplate')
+    private printTemplate: TemplateRef<any>;
+
+
     //@ViewChild('helloStr') private helloStr: EgStringComponent;
 
     gridDataSource: EgGridDataSource = new EgGridDataSource();
@@ -39,7 +44,8 @@ export class EgSandboxComponent implements OnInit {
         private idl: EgIdlService,
         private pcrud: EgPcrudService,
         private strings: EgStringService,
-        private toast: EgToastService
+        private toast: EgToastService,
+        private printer: EgPrintService
     ) {}
 
     ngOnInit() {
@@ -59,6 +65,13 @@ export class EgSandboxComponent implements OnInit {
         }
     }
 
+    doPrint() {
+        this.printer.print({
+            template: this.printTemplate,
+            context: {world : 'world'}
+        });
+    }
+
     changeDate(date) {
         console.log('HERE WITH ' + date);
         this.testDate = date;
index cc1ee6f..18d5f95 100644 (file)
@@ -98,3 +98,16 @@ h5 {font-size: .95rem}
   border-left: 8px solid #FA787E;
 }
 
+#eg-print-container {
+    display: none;
+}
+
+@media print {
+  head { display: none; } /* just to be safe */                                  
+  body div:not([id="eg-print-container"]) { display:none }                                
+  div { display: none }                                                          
+  #eg-print-container { display: block }                                                  
+  #eg-print-container div { display: block }                                              
+  #eg-print-container pre { border: none }    
+}
+