Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts

   1 import {AfterViewInit, ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
   2 import {Router} from '@angular/router';
   3 import {DomSanitizer, SafeUrl} from '@angular/platform-browser';
   4 import {GridToolbarButton, GridToolbarAction, GridContext} from '@eg/share/grid/grid';
   5 import {GridColumnWidthComponent} from './grid-column-width.component';
   6 import {GridPrintComponent} from './grid-print.component';
   7 import {GridColumn} from './grid';
   8
   9 @Component({
  10     selector: 'eg-grid-toolbar',
  11     templateUrl: 'grid-toolbar.component.html'
  12 })
  13
  14 export class GridToolbarComponent implements OnInit, AfterViewInit {
  15
  16     @Input() gridContext: GridContext;
  17     @Input() colWidthConfig: GridColumnWidthComponent;
  18     @Input() gridPrinter: GridPrintComponent;
  19     @Input() disableSaveSettings = false;
  20
  21     renderedGroups: {[group: string]: boolean} = {};
  22
  23     csvExportInProgress: boolean;
  24     csvExportUrl: SafeUrl;
  25     csvExportFileName: string;
  26
  27     constructor(
  28         private router: Router,
  29         private sanitizer: DomSanitizer,
  30         private cd: ChangeDetectorRef
  31     ) {}
  32
  33     ngOnInit() {
  34         this.sortActions();
  35     }
  36
  37     ngAfterViewInit(): void {
  38         this.cd.detectChanges();
  39     }
  40
  41     sortActions() {
  42         const actions = this.gridContext.toolbarActions;
  43
  44         const unGrouped = actions.filter(a => !a.group)
  45             .sort((a, b) => {
  46                 return a.label < b.label ? -1 : 1;
  47             });
  48
  49         const grouped = actions.filter(a => Boolean(a.group))
  50             .sort((a, b) => {
  51                 if (a.group === b.group) {
  52                     return a.label < b.label ? -1 : 1;
  53                 } else {
  54                     return a.group < b.group ? -1 : 1;
  55                 }
  56             });
  57
  58         // Insert group markers for rendering
  59         const seen: any = {};
  60         const grouped2: any[] = [];
  61         grouped.forEach(action => {
  62             if (!seen[action.group]) {
  63                 seen[action.group] = true;
  64                 const act = new GridToolbarAction();
  65                 act.label = action.group;
  66                 act.isGroup = true;
  67                 grouped2.push(act);
  68             }
  69             grouped2.push(action);
  70         });
  71
  72         this.gridContext.toolbarActions = unGrouped.concat(grouped2);
  73     }
  74
  75     saveGridConfig() {
  76         // TODO: when server-side settings are supported, this operation
  77         // may offer to save to user/workstation OR org unit settings
  78         // depending on perms.
  79
  80         this.gridContext.saveGridConfig().then(
  81             // hide the with config after saving
  82             ok => this.colWidthConfig.isVisible = false,
  83             err => console.error(`Error saving columns: ${err}`)
  84         );
  85     }
  86
  87     performButtonAction(button: GridToolbarButton) {
  88         const rows = this.gridContext.getSelectedRows();
  89         if (button.routerLink) {
  90             this.router.navigate([button.routerLink]);
  91         } else {
  92             button.onClick.emit(rows);
  93             if (button.action) { button.action(); }
  94         }
  95     }
  96
  97     printHtml() {
  98         this.gridPrinter.printGrid();
  99     }
 100
 101     printSelectedRows(): void {
 102         this.gridPrinter.printSelectedRows();
 103     }
 104
 105     generateCsvExportUrl($event) {
 106
 107         if (this.csvExportInProgress) {
 108             // This is secondary href click handler.  Give the
 109             // browser a moment to start the download, then reset
 110             // the CSV download attributes / state.
 111             setTimeout(() => {
 112                 this.csvExportUrl = null;
 113                 this.csvExportFileName = '';
 114                 this.csvExportInProgress = false;
 115             }, 500 // eslint-disable-line no-magic-numbers
 116             );
 117             return;
 118         }
 119
 120         this.csvExportInProgress = true;
 121
 122         // let the file name describe the grid
 123         this.csvExportFileName = (
 124             this.gridContext.persistKey || 'eg_grid_data'
 125         ).replace(/\s+/g, '_') + '.csv';
 126
 127         this.gridContext.gridToCsv().then(csv => {
 128             const blob = new Blob([csv], {type : 'text/plain'});
 129             const win: any = window; // avoid TS errors
 130             this.csvExportUrl = this.sanitizer.bypassSecurityTrustUrl(
 131                 (win.URL || win.webkitURL).createObjectURL(blob)
 132             );
 133
 134             // Fire the 2nd click event now that the browser has
 135             // information on how to download the CSV file.
 136             setTimeout(() => $event.target.click());
 137         });
 138
 139         $event.preventDefault();
 140     }
 141
 142     toggleVisibility(col: GridColumn) {
 143         col.visible = !col.visible;
 144         if (this.gridContext.reloadOnColumnChange) {
 145             this.gridContext.reloadWithoutPagerReset();
 146         }
 147     }
 148 }
 149
 150