@Component({
selector: 'eg-root',
- template: '<router-outlet></router-outlet>'
+ template: '<router-outlet></router-outlet><eg-print></eg-print>'
})
export class EgBaseComponent {
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';
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,
exports: [
CommonModule,
NgbModule,
- FormsModule
+ FormsModule,
+ EgPrintComponent
]
})
EgPermService,
EgPcrudService,
EgOrgService,
+ EgPrintService,
EgAudioService,
EgFormatService
]
+++ /dev/null
-/**
- * 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]);
- }
-}
-
-
class="form-control"
ngbDatepicker
#datePicker="ngbDatepicker"
- placeholder="yyyy-mm-dd"
+ [placeholder]="yyyy-mm-dd"
class="form-control"
name="{{fieldName}}"
[required]="required"
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'
<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>
--- /dev/null
+
+<div id='eg-print-container'>
+ <ng-container *ngTemplateOutlet="template; context:context"></ng-container>
+</div>
+
--- /dev/null
+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());
+ }
+}
+
--- /dev/null
+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);
+ }
+}
+
<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>
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'
@ViewChild('dateSelect')
private dateSelector: EgDateSelectComponent;
+ @ViewChild('printTemplate')
+ private printTemplate: TemplateRef<any>;
+
+
//@ViewChild('helloStr') private helloStr: EgStringComponent;
gridDataSource: EgGridDataSource = new EgGridDataSource();
private idl: EgIdlService,
private pcrud: EgPcrudService,
private strings: EgStringService,
- private toast: EgToastService
+ private toast: EgToastService,
+ private printer: EgPrintService
) {}
ngOnInit() {
}
}
+ doPrint() {
+ this.printer.print({
+ template: this.printTemplate,
+ context: {world : 'world'}
+ });
+ }
+
changeDate(date) {
console.log('HERE WITH ' + date);
this.testDate = date;
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 }
+}
+