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     generateCsvExportUrl($event) {
 102
 103         if (this.csvExportInProgress) {
 104             // This is secondary href click handler.  Give the
 105             // browser a moment to start the download, then reset
 106             // the CSV download attributes / state.
 107             setTimeout(() => {
 108                 this.csvExportUrl = null;
 109                 this.csvExportFileName = '';
 110                 this.csvExportInProgress = false;
 111                }, 500
 112             );
 113             return;
 114         }
 115
 116         this.csvExportInProgress = true;
 117
 118         // let the file name describe the grid
 119         this.csvExportFileName = (
 120             this.gridContext.persistKey || 'eg_grid_data'
 121         ).replace(/\s+/g, '_') + '.csv';
 122
 123         this.gridContext.gridToCsv().then(csv => {
 124             const blob = new Blob([csv], {type : 'text/plain'});
 125             const win: any = window; // avoid TS errors
 126             this.csvExportUrl = this.sanitizer.bypassSecurityTrustUrl(
 127                 (win.URL || win.webkitURL).createObjectURL(blob)
 128             );
 129
 130             // Fire the 2nd click event now that the browser has
 131             // information on how to download the CSV file.
 132             setTimeout(() => $event.target.click());
 133         });
 134
 135         $event.preventDefault();
 136     }
 137
 138     toggleVisibility(col: GridColumn) {
 139         col.visible = !col.visible;
 140         if (this.gridContext.reloadOnColumnChange) {
 141             this.gridContext.reloadWithoutPagerReset();
 142         }
 143     }
 144 }
 145
 146