newportsite 1.1.3

package/src/lib/common/grid.component.ts

@@ -0,0 +1,747 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  OnDestroy,
+  inject,
+  DestroyRef,
+  signal,
+  computed,
+  input,
+  output,
+  effect,
+} from '@angular/core';
+
+import { GlobalService, Languages } from '../services/global.service';
+
+import { AppMessageService } from '../services/message.service';
+
+import { NgClass } from '@angular/common';
+
+import {
+  ItemInterface,
+  Member,
+  TransportInterface,
+  FieldType,
+  ViewListInterface,
+  ManagmentInterface,
+  Entities,
+  EntitiesData,
+} from '../interfaces/index';
+import { ManagmentService } from '../home/model/services/index';
+import { NEWPORT_CONFIG } from '../config';
+import { AllCommunityModule, GridApi, GridOptions, ModuleRegistry } from 'ag-grid-community';
+import { AgGridAngular } from 'ag-grid-angular';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ThemeService } from '../services/theme.service';
+
+  
+@Component({
+  selector: 'grid',
+  templateUrl: 'grid.component.html',
+  imports: [AgGridAngular, NgClass],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GridComponent implements OnDestroy {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+  msv = inject(ManagmentService);
+  private config = inject(NEWPORT_CONFIG);
+  themeService = inject(ThemeService);
+  private destroyRef = inject(DestroyRef);
+
+  readonly model = input<ItemInterface>();
+  readonly viewList = input<boolean>();
+  readonly lookup = input<string>('');
+  readonly filter = input<string>('');
+  readonly refreshGrid = input<boolean>();
+  readonly print = input<boolean>();
+
+  readonly viewChanged = output<ViewListInterface>();
+
+  public currentModel!: ItemInterface;
+  public selectedRows: any[] | null = null;
+  readonly currentTheme = this.themeService.currentTheme;
+  readonly loading = toSignal(this.gsv.getLoaderState(), {
+    initialValue: false,
+  });
+
+  readonly gridThemeClass = computed(() =>
+    this.currentTheme() === 'dark'
+      ? 'ag-theme-balham-dark grid-wrapper'
+      : 'ag-theme-balham grid-wrapper'
+  );
+
+  public fieldArray: string[] = [];
+  public fields!: Member[];
+  public managment: ManagmentInterface = {
+    functionId: '',
+    appId: '',
+    entId: '',
+    year: 0,
+    keys: '',
+    fields: [],
+    states: [],
+    entIds: [],
+    keyId: '1',
+    filterId: '',
+    page: 1,
+    data: '',
+  };
+  readonly columnDefs = signal<any>(null);
+  public rowData = signal<any[]>([]);
+  public gridOptions!: GridOptions;
+  public rowSelection = 'single';
+  public gridApi!: GridApi<any>;
+  public localeText!: any;
+  public defaultColDef!: any;
+  public title: string = '';
+
+  constructor() {
+    this.defaultColDef = {
+      sortable: true,
+      filter: true,
+    };
+    this.gridOptions = {
+      suppressNoRowsOverlay: true,
+      suppressLoadingOverlay: true,
+    };
+    this.localeText = this.msg.get('app.gridlocale');
+    ModuleRegistry.registerModules([AllCommunityModule]);
+
+    effect(
+      () => {
+        const m = this.model();
+        this.viewList();
+        this.lookup();
+        this.refreshGrid();
+        if (m) {
+          this.currentModel = m;
+        }
+        if (m || this.lookup()) {
+          this.changeData();
+        }
+      },
+      { allowSignalWrites: true }
+    );
+
+    effect(() => {
+      this.print();
+      if (this.gridApi && this.viewList()) {
+        this.exportToPDF(this.gridApi);
+      }
+    });
+  }
+
+  /** Clears all grid state (rows, columns, API references) to avoid memory leaks. */
+  public ngOnDestroy(): void {
+    this.rowData.set([]);
+    this.columnDefs.set([]);
+    this.fieldArray = [];
+    this.fields = [];
+    this.gridOptions = undefined!;
+    this.gridApi = undefined!;
+  }
+
+  /** Resolves managment IDs from the model or lookup input, then calls prepareData. */
+  public changeData() {
+    this.title =
+      this.gsv.getLng() === Languages.IT
+        ? this.currentModel?.title
+        : this.currentModel.titleGb;
+    if (
+      (this.currentModel && this.currentModel.name !== undefined) ||
+      this.lookup() !== ''
+    ) {
+      if (this.lookup() !== '') {
+        const lkinfo: string[] = this.lookup()!.split('#');
+        this.managment.appId = lkinfo[0].toUpperCase();
+        this.managment.year = parseInt(lkinfo[1], 10);
+        this.managment.entId = lkinfo[2].toUpperCase();
+        this.managment.keyId = '1';
+        this.managment.keys = 'prg=0';
+        const projectId = lkinfo[0].toUpperCase() + '.' + lkinfo[1];
+        const projectItems = this.gsv.getProjectItems(projectId);
+        if (projectItems === undefined) {
+          this.msv
+            .getItemsState(this.managment)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+              next: (data: ItemInterface[]) => {
+                this.gsv.setProjectItems(projectId, data);
+                this.prepareData();
+              },
+              error: () => {},
+            });
+        } else {
+          this.prepareData();
+        }
+      } else if (this.currentModel && this.currentModel.name !== undefined) {
+        this.managment.appId = this.gsv.getProject().project;
+        this.managment.year = this.gsv.getYear();
+        this.managment.entId = this.currentModel.name;
+        this.managment.keyId = this.gsv.getKeyId();
+        this.managment.keys = 'prg=0';
+        this.prepareData();
+      }
+      if (this.managment.appId === undefined) {
+        return;
+      }
+    }
+  }
+
+  /** Re-selects a previously selected row (by _prg) after the grid data refreshes. */
+  public selectRow(): void {
+    if (this.selectedRows !== null && this.selectedRows.length > 0) {
+      this.gridApi.deselectAll();
+      this.gridApi.forEachNodeAfterFilter(node => {
+        if (node.data._prg === this.selectedRows![0]._prg) {
+          node.setSelected(true);
+        }
+      });
+      this.selectedRows = null;
+    }
+  }
+
+  /** Loads project schema/data from cache or config and then calls setColumns + setData. */
+  public prepareData() {
+    if (
+      this.viewList() === true ||
+      (this.currentModel !== undefined &&
+        this.currentModel.masterDetail !== 0) ||
+      this.lookup() !== ''
+    ) {
+      this.gsv.setLoaderState(true);
+      this.config.projectsInfoLoader(this.managment.year, this.managment.appId)
+        .then(prj_Info => {
+          const id = this.managment.appId + '.' + this.managment.year;
+          if (!this.gsv.getDataJson(id)) {
+            this.gsv.setDataJson(id, prj_Info.getData());
+          }
+          if (!this.gsv.getSchemaJson(id)) {
+            this.gsv.setSchemaJson(id, prj_Info.getSchema());
+          }
+          let root: Entities | null = this.gsv.getSchemaJson(
+            this.managment.appId + '.' + this.managment.year
+          );
+          let entity = root?.entities.find(
+            e => e.name === this.managment.entId.toLocaleLowerCase()
+          );
+          if (entity) {
+            this.fields = entity.members;
+            this.setColumns(this.fields);
+            this.setData();
+          }
+          root = null;
+          entity = undefined;
+        })
+        .catch(() => this.gsv.setLoaderState(false));
+    }
+  }
+
+  /** Converts raw EntitiesData into a flat row array, resolving lookups and formatting values. */
+  public getData(data: EntitiesData): any[] | undefined {
+    if (!data || !this.fields) {
+      return undefined;
+    }
+    const module = data.entities.find(
+      e => e.name === this.managment.entId.toLocaleLowerCase()
+    );
+    if (!module) return undefined;
+    const rows: any[] = [];
+    for (const item of module.modules.filter(e => e.state === 1)) {
+      if (
+        item.members.length === 0 ||
+        item.state === 0 ||
+        (this.gsv.getCurrentLinkItem().id ===
+          this.managment.entId.toLocaleLowerCase() &&
+          this.gsv.getCurrentLinkItem().prg.length > 1 &&
+          this.gsv.getCurrentLinkItem().prg[0] !== item.prg[0])
+      ) {
+        continue;
+      }
+      const obj: { [k: string]: any } = {};
+      for (const member of item.members) {
+        obj['_prg'] = '';
+        for (let i = 0; i < item.prg.length; i++) {
+          if (obj['_prg'] !== '') {
+            obj['_prg'] += ',';
+          }
+          obj['_prg'] += item.prg[i];
+        }
+        if (this.fieldArray.lastIndexOf(member.name) !== -1) {
+          const value = member.value;
+          const field: Member | undefined = this.fields.find(
+            fld => fld.id === member.name
+          );
+          obj[member.name] = value ? value : null;
+          if (field && obj[member.name]) {
+            if (field.type === FieldType.Number) {
+              obj[member.name] =
+                this.gsv.getLng() === Languages.IT
+                  ? parseFloat(obj[member.name]).toLocaleString('it-it', {
+                      minimumFractionDigits: field.scale,
+                    })
+                  : parseFloat(obj[member.name]).toLocaleString('en-us', {
+                      minimumFractionDigits: field.scale,
+                    });
+            } else if (field.type === FieldType.Date) {
+              obj[member.name] = obj[member.name].toString();
+            }
+          }
+          if (field && field.lookup !== '' && field.lookuplink) {
+            const lkmanagment = this.gsv.getManagmentInterface();
+            const lkinfo: string[] = field.lookup.split('#');
+            const input: string[] = lkinfo[3].split(',');
+            const output: string[] = lkinfo[4].split(',');
+            lkmanagment.functionId = 'read';
+            lkmanagment.appId = lkinfo[0].toUpperCase();
+            lkmanagment.year = parseInt(lkinfo[1], 0);
+            lkmanagment.entId = lkinfo[2].toUpperCase();
+            if (
+              this.currentModel.groupName ===
+                this.gsv.getCurrentLinkItem().groupName &&
+              this.currentModel.prgDim > 1
+            ) {
+              lkmanagment.keys = 'prg=' + this.gsv.getCurrentLinkItem().prg[0];
+            } else {
+              lkmanagment.keys = 'prg=0';
+            }
+            const lkFieldsId: string =
+              lkmanagment.appId +
+              '.' +
+              lkmanagment.entId +
+              '.' +
+              lkmanagment.year;
+            const lkdata = this.gsv.getData(lkFieldsId);
+            if (!lkdata && !this.currentModel.cache) {
+              this.msv
+                .getData(lkmanagment)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(
+                  (dtlk: TransportInterface) => {
+                    this.gsv.setData(lkFieldsId, JSON.parse(dtlk.dataFile as string));
+                    let val: any;
+                    let elem: any;
+                    switch (field.type) {
+                      case 0:
+                        val = value;
+                        break;
+                      case 1: {
+                        const strValue = value as string;
+                        if (field.thousandseparator) {
+                          field.value =
+                            this.gsv.getLng() === Languages.IT
+                              ? parseFloat(
+                                  strValue.replace(',', '.')
+                                ).toLocaleString('it-it', {
+                                  minimumFractionDigits: field.scale,
+                                })
+                              : parseFloat(strValue).toLocaleString('en-us', {
+                                  minimumFractionDigits: field.scale,
+                                });
+                        } else {
+                          val = parseFloat(strValue).toLocaleString(
+                            this.gsv.getLng() === Languages.IT
+                              ? 'it-it'
+                              : 'en-us',
+                            { minimumFractionDigits: field.scale }
+                          );
+                        }
+                      }
+                        break;
+                    }
+                    elem = JSON.parse(dtlk.dataFile as string).find(
+                      (e: any) => e[field.id] === val
+                    );
+                    if (elem !== undefined) {
+                      for (let i = 0; i < input.length; i++) {
+                        if (i > 0) {
+                          obj[output[i]] = elem[input[i]];
+                        }
+                      }
+                    }
+                  },
+                  error => {}
+                );
+            } else {
+              let val: any;
+              let elem: any;
+              switch (field.type) {
+                case 0:
+                  val = value;
+                  break;
+                case 1: {
+                  const strValue = value as string;
+                  if (field.thousandseparator) {
+                    field.value =
+                      this.gsv.getLng() === Languages.IT
+                        ? parseFloat(strValue.replace(',', '.')).toLocaleString(
+                            'it-it',
+                            { minimumFractionDigits: field.scale }
+                          )
+                        : parseFloat(strValue).toLocaleString('en-us', {
+                            minimumFractionDigits: field.scale,
+                          });
+                  } else {
+                    val = parseFloat(strValue).toLocaleString(
+                      this.gsv.getLng() === Languages.IT ? 'it-it' : 'en-us',
+                      { minimumFractionDigits: field.scale }
+                    );
+                  }
+                  break;
+                }
+              }
+              // elem = lkdata.find((e) => e.fieldStates[id].value === val.toString());
+              elem = null;
+              if (elem !== undefined) {
+                for (let i = 0; i < input.length; i++) {
+                  if (i > 0) {
+                    obj[output[i]] = elem.fieldStates['_' + input[i]].value;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      if (obj._prg !== '') {
+        rows.push(obj);
+      }
+    }
+    return rows;
+  }
+
+  /** Fetches entity data (from cache or API) and populates rowData via getData + filterData. */
+  public setData() {
+    if (!this.currentModel && this.lookup() !== '') {
+      const lkinfo: string[] = this.lookup()!.split('#');
+      this.currentModel = this.gsv
+        .getProjectItems(lkinfo[0].toUpperCase() + '.' + lkinfo[1])
+        .find(e => e.name === lkinfo[2].toUpperCase())!;
+    }
+    this.rowData.set([]);
+    this.managment.fields = [];
+    this.managment.functionId = 'read';
+    if (
+      this.currentModel.groupName === this.gsv.getCurrentLinkItem().groupName &&
+      this.currentModel.prgDim > 1
+    ) {
+      this.managment.keys = 'prg=' + this.gsv.getCurrentLinkItem().prg[0];
+    } else {
+      this.managment.keys = 'prg=0';
+    }
+    const lkFieldsId: string =
+      this.managment.appId +
+      '.' +
+      this.managment.entId +
+      '.' +
+      this.managment.year;
+    const lkdata = this.gsv.getData(lkFieldsId);
+    if (lkdata || this.currentModel.masterDetail != 0) {
+      this.rowData.set(this.filterData(this.getData(lkdata!) ?? []) ?? []);
+      this.gsv.setLoaderState(false);
+    } else {
+      this.msv
+        .getData(this.managment)
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          next: (data: TransportInterface) => {
+            this.gsv.setData(lkFieldsId, JSON.parse(data.dataFile as string));
+            this.rowData.set(
+              this.filterData(this.getData(JSON.parse(data.dataFile as string)) ?? []) ??
+                []
+            );
+            this.gsv.setLoaderState(false);
+          },
+          error: () => {},
+        });
+    }
+  }
+
+  /** Returns data filtered by the `filter` input expression (format: "field;value"). */
+  public filterData(data: any[]): any[] {
+    if (this.filter()) {
+      const fd: string[] = this.filter()!.split(',')[0].split(';');
+      return data.filter(e => e[fd[0]] === fd[1]);
+    }
+    return data;
+  }
+
+  /** Builds AG Grid column definitions from the entity schema members and preloads lookup data. */
+  public setColumns(fields: Member[]) {
+    const columns: any[] = [];
+    this.rowData.set([]);
+    this.columnDefs.set([]);
+    this.fieldArray = [];
+    columns.push({
+      headerName: '_prg',
+      field: '_prg',
+      width: 20,
+      hide: true,
+    });
+    this.fieldArray.push('_prg');
+    const sortedFields = this.gsv.sortArray(
+      'viewlist',
+      this.fields.filter(item => item.viewlist > 0)
+    );
+    for (const field of sortedFields) {
+      if (field.type !== FieldType.Label && field.viewlist !== 0) {
+        this.fieldArray.push(field.name);
+        let width: number = 1.1 * parseFloat(field.width);
+        let widthName: number = 15.6 * field.name.length;
+        if (widthName < 100) {
+          widthName = 100;
+        }
+        if (field.caption === '' || field.width === '0px') {
+          widthName = 0;
+          width = 0;
+        }
+        columns.push({
+          headerName:
+            this.gsv.getLng() === Languages.IT
+              ? field.caption
+              : field.captiongb,
+          field: field.name,
+          width: Math.max(widthName, width),
+          minWidth: Math.max(widthName, width),
+          filter: true,
+          sortable: true,
+          suppressMenu: false,
+          floatingFilter: width !== 0,
+          cellStyle:
+            field.alignment === 'right'
+              ? { 'text-align': 'right' }
+              : field.alignment === 'center'
+                ? { 'text-align': 'center' }
+                : '',
+          headerClass:
+            field.alignment === 'right'
+              ? 'cellRight'
+              : field.alignment === 'center'
+                ? 'cellCenter'
+                : '',
+        });
+
+        if (field !== undefined && field.lookup !== '') {
+          const lkmanagment = this.gsv.getManagmentInterface();
+          const lkinfo: string[] = field.lookup.split('#');
+          const input: string[] = lkinfo[3].split(',');
+          const output: string[] = lkinfo[4].split(',');
+          lkmanagment.functionId = 'read';
+          lkmanagment.appId = lkinfo[0].toUpperCase();
+          lkmanagment.year = parseInt(lkinfo[1], 0);
+          lkmanagment.entId = lkinfo[2].toUpperCase();
+          lkmanagment.keys = 'prg=0';
+          const lkFieldsId: string =
+            lkmanagment.appId +
+            '.' +
+            lkmanagment.entId +
+            '.' +
+            lkmanagment.year;
+          const lkdata = this.gsv.getData(lkFieldsId);
+          if (!lkdata && this.currentModel && !this.currentModel.cache) {
+            this.msv
+              .getData(lkmanagment)
+              .pipe(takeUntilDestroyed(this.destroyRef))
+              .subscribe({
+                next: (dtlk: TransportInterface) => {
+                  this.gsv.setData(lkFieldsId, JSON.parse(dtlk.dataFile as string));
+                },
+                error: () => {},
+              });
+          }
+        }
+      }
+    }
+    this.columnDefs.set(columns);
+  }
+
+  /** Stores the AG Grid API reference when the grid initialises. */
+  public onGridReady(params: any) {
+    this.gridApi = params.api;
+  }
+
+  /** Captures the clicked row and emits viewChanged to navigate to the record's detail view. */
+  public onRowClicked(event: any) {
+    if (event?.data) {
+      this.selectedRows = [event.data];
+      this.viewChanged.emit({
+        state: false,
+        rows: this.selectedRows,
+      });
+    }
+  }
+
+  /** Hook for row-data-changed events (currently unused). */
+  public onRowDataChanged(event: any) {}
+
+  /** Hook for filter-changed events (currently unused). */
+  public onFilterChanged(filter: any) {}
+
+  /**
+   * This function iterates over all of the columns to create a row of header cells
+   */
+  private getHeaderToExport = (gridApi: any) => {
+    if (gridApi) {
+      const columns = gridApi.getAllDisplayedColumns();
+      return columns.map((column: any) => {
+        const { field } = column.getColDef();
+        const sort = column.getSort();
+        // Enables export when row grouping
+        const headerName = column.getColDef().headerName ?? field;
+        const headerNameUppercase =
+          headerName[0].toUpperCase() + headerName.slice(1);
+        const headerCell = {
+          text: headerNameUppercase + (sort ? ` (${sort})` : ''),
+
+          // styles
+          bold: true,
+          margin: [0, 12, 0, 0],
+        };
+        return headerCell;
+      });
+    }
+  };
+
+  /**
+   * This function iterates over all of the rows and columns to create
+   * a matrix of cells when pivoting is enabled
+   */
+
+  private getRowsToExportPivot = (gridApi: any) => {
+    const rowsToExport: any[] = [];
+    if (gridApi) {
+      const columns = gridApi.getAllDisplayedColumns();
+      const getCellToExport = (column: any, node: any) => ({
+        text: gridApi.getValue(column, node) ?? '',
+        // styles
+        ...column.getColDef().cellStyle,
+      });
+      gridApi.forEachNodeAfterFilterAndSort((node: any) => {
+        if (node.group) {
+          const rowToExport = columns.map((column: any) =>
+            getCellToExport(column, node)
+          );
+          rowsToExport.push(rowToExport);
+        }
+      });
+    }
+    return rowsToExport;
+  };
+
+  /**
+   * This function iterates over all of the rows and columns to create
+   * a matrix of cells
+   */
+  private getRowsToExport = (gridApi: any) => {
+    const rowsToExport: any[] = [];
+    if (gridApi) {
+      //Enables export when pivoting
+      if (gridApi.isPivotMode()) {
+        return this.getRowsToExportPivot(gridApi);
+      }
+      const columns = gridApi.getAllDisplayedColumns();
+      const getCellToExport = (column: any, node: any) => ({
+        text: node.data[column.colId],
+        // styles
+        ...column.getColDef().cellStyle,
+      });
+      gridApi.forEachNodeAfterFilterAndSort((node: any) => {
+        const rowToExport = columns.map((column: any) =>
+          getCellToExport(column, node)
+        );
+        rowsToExport.push(rowToExport);
+      });
+    }
+    return rowsToExport;
+  };
+
+  // Row colors
+  private HEADER_ROW_COLOR = '#f8f8f8';
+  private EVEN_ROW_COLOR = '#fcfcfc';
+  private ODD_ROW_COLOR = '#fff';
+
+  private PDF_INNER_BORDER_COLOR = '#dde2eb';
+  private PDF_OUTER_BORDER_COLOR = '#babfc7';
+
+  private createLayout = (numberOfHeaderRows: any) => ({
+    fillColor: (rowIndex: any) => {
+      if (rowIndex < numberOfHeaderRows) {
+        return this.HEADER_ROW_COLOR;
+      }
+      return rowIndex % 2 === 0 ? this.EVEN_ROW_COLOR : this.ODD_ROW_COLOR;
+    },
+    //vLineHeight not used here.
+    vLineWidth: (rowIndex: any, node: any) =>
+      rowIndex === 0 || rowIndex === node.table.widths.length ? 1 : 0,
+    hLineColor: (rowIndex: any, node: any) =>
+      rowIndex === 0 || rowIndex === node.table.body.length
+        ? this.PDF_OUTER_BORDER_COLOR
+        : this.PDF_INNER_BORDER_COLOR,
+    vLineColor: (rowIndex: any, node: any) =>
+      rowIndex === 0 || rowIndex === node.table.widths.length
+        ? this.PDF_OUTER_BORDER_COLOR
+        : this.PDF_INNER_BORDER_COLOR,
+  });
+
+  /**
+   * Returns a pdfMake shaped config for export, for more information
+   * regarding pdfMake configuration, please see the pdfMake documentation.
+   */
+  private getDocument = (gridApi: any) => {
+    if (gridApi) {
+      const columns = gridApi.getAllDisplayedColumns();
+      const headerRow = this.getHeaderToExport(gridApi);
+      const rows = this.getRowsToExport(gridApi);
+      return {
+        pageOrientation: 'landscape', // can also be 'portrait'
+        content: [
+          this.title + '\n\n',
+          {
+            table: {
+              // the number of header rows
+              headerRows: 1,
+
+              // the width of each column, can be an array of widths
+              widths: `${100 / columns.length}%`,
+
+              // all the rows to display, including the header rows
+              body: [headerRow, ...rows],
+
+              // Header row is 40px, other rows are 15px
+              heights: (rowIndex: any) => (rowIndex === 0 ? 40 : 15),
+            },
+            layout: this.createLayout(1),
+          },
+        ],
+        pageMargins: [10, 10, 10, 10],
+      };
+    }
+  };
+
+  private exportToPDF = async (gridApi: GridApi) => {
+    if (gridApi) {
+      try {
+        const doc = this.getDocument(gridApi);
+        const date = new Date();
+        const [{ default: pdfMake }, { default: pdfFonts }] = await Promise.all([
+          import('pdfmake/build/pdfmake'),
+          import('pdfmake/build/vfs_fonts'),
+        ]);
+        pdfMake.vfs = (pdfFonts as any).pdfMake.vfs;
+        pdfMake
+          .createPdf(doc)
+          .download(
+            this.title +
+              '_' +
+              date.toDateString().trim() +
+              '_' +
+              date.toTimeString().trim() +
+              '.pdf'
+          );
+      } catch {
+        this.gsv.setLoaderState(false);
+      }
+    }
+  };
+}