From 2fb6e6ea4fef7a19021e2561983639eed0d745ad Mon Sep 17 00:00:00 2001
From: tanshu <git@tanshu.com>
Date: Thu, 21 Jan 2021 09:46:26 +0530
Subject: [PATCH] Using jspdf to export to pdf

---
 otis/package.json                             |  2 +
 .../app/cause-list/cause-list.component.ts    | 72 +++++++++----------
 .../compliance-list.component.ts              | 40 +++++------
 3 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/otis/package.json b/otis/package.json
index ff8db74..ddca1d5 100644
--- a/otis/package.json
+++ b/otis/package.json
@@ -26,6 +26,8 @@
     "@angular/platform-browser": "^11.0.8",
     "@angular/platform-browser-dynamic": "^11.0.8",
     "@angular/router": "^11.0.8",
+    "jspdf": "^2.3.0",
+    "jspdf-autotable": "^3.5.13",
     "moment": "^2.29.1",
     "rxjs": "^6.6.3",
     "tslib": "^2.1.0",
diff --git a/otis/src/app/cause-list/cause-list.component.ts b/otis/src/app/cause-list/cause-list.component.ts
index 1942ac5..8cd3151 100644
--- a/otis/src/app/cause-list/cause-list.component.ts
+++ b/otis/src/app/cause-list/cause-list.component.ts
@@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { ActivatedRoute, Router } from '@angular/router';
+import { jsPDF } from 'jspdf';
+import autoTable from 'jspdf-autotable';
 import * as moment from 'moment';
 import { Observable, of } from 'rxjs';
 
@@ -110,42 +112,40 @@ export class CauseListComponent implements OnInit {
   }
 
   exportCsv() {
-    const csvData = new Blob([this.toCsv(this.dataSource.dataValues)], {
-      type: 'text/csv;charset=utf-8;',
+    const doc = new jsPDF({
+      orientation: 'landscape',
     });
-    const link = document.createElement('a');
-    link.href = window.URL.createObjectURL(csvData);
-    link.setAttribute('download', 'cause-list.csv');
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
-
-  toCsv(data: Case[]): string {
-    const header = [
-      'File No.',
-      'Title',
-      'Court Case Number',
-      'Forum',
-      'Court / Item Number',
-      'Bench',
-      'Proceedings',
-      'Next Hearing',
-      'On Behalf of',
-      'Other Hearings',
-      'Remarks',
-    ];
-    const csv = data.map(
-      (row) =>
-        `${row.caseSource.prefix}-${row.officeFileNumber}\t${row.title}\t${row.courtCaseNumber}\t${
-          row.court?.name
-        }\t${this.courtNumber(row)} / ${this.itemNumber(row)}\t${this.bench(
-          row,
-        )}\t${this.proceedings(row)}\t${this.nextHearingDate(row)}\t${
-          row.appearOnBehalfOf
-        }\t${this.otherHearingDates(row)}\t${row.remarks}`,
-    );
-    csv.unshift(header.join('\t'));
-    return csv.join('\r\n');
+    // doc.autoTable({ html: '#table' });
+    autoTable(doc, {
+      head: [
+        [
+          'File No.',
+          'Title',
+          'Court Case Number',
+          'Forum',
+          'Court / Item Number',
+          'Bench',
+          'Proceedings',
+          'Next Hearing',
+          'On Behalf of',
+          'Other Hearings',
+          'Remarks',
+        ],
+      ],
+      body: this.dataSource.dataValues.map((row) => [
+        `${row.caseSource.prefix}-${row.officeFileNumber}`,
+        row.title,
+        row.courtCaseNumber,
+        row.court?.name || '',
+        `${this.courtNumber(row)} / ${this.itemNumber(row)}`,
+        this.bench(row),
+        this.proceedings(row),
+        this.nextHearingDate(row),
+        row.appearOnBehalfOf,
+        this.otherHearingDates(row),
+        row.remarks,
+      ]),
+    });
+    doc.save('cause-list.pdf');
   }
 }
diff --git a/otis/src/app/compliance-list/compliance-list.component.ts b/otis/src/app/compliance-list/compliance-list.component.ts
index da1158d..d91d120 100644
--- a/otis/src/app/compliance-list/compliance-list.component.ts
+++ b/otis/src/app/compliance-list/compliance-list.component.ts
@@ -1,10 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
-import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
-
-import { Case } from '../core/case';
+import { ActivatedRoute } from '@angular/router';
+import { jsPDF } from 'jspdf';
+import autoTable from 'jspdf-autotable';
 
 import { ComplianceList } from './compliance-list';
 import { ComplianceListDatasource } from './compliance-list-datasource';
@@ -39,24 +37,20 @@ export class ComplianceListComponent implements OnInit {
   }
 
   exportCsv() {
-    const csvData = new Blob([this.toCsv(this.info)], {
-      type: 'text/csv;charset=utf-8;',
+    const doc = new jsPDF({
+      orientation: 'landscape',
     });
-    const link = document.createElement('a');
-    link.href = window.URL.createObjectURL(csvData);
-    link.setAttribute('download', 'cause-list.csv');
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
-
-  toCsv(data: ComplianceList[]): string {
-    const header = ['File No.', 'Title', 'Proceedings', 'Next Hearing', 'Compliance Date'];
-    const csv = data.map(
-      (row) =>
-        `${row.officeFileNumber}\t${row.title}\t${row.proceedings}\t${row.nextHearingDate}\t${row.complianceDate}`,
-    );
-    csv.unshift(header.join('\t'));
-    return csv.join('\r\n');
+    // doc.autoTable({ html: '#table' });
+    autoTable(doc, {
+      head: [['File No.', 'Title', 'Proceedings', 'Next Hearing', 'Compliance Date']],
+      body: this.info.map((row) => [
+        row.officeFileNumber,
+        row.title,
+        row.proceedings,
+        row.nextHearingDate,
+        row.complianceDate,
+      ]),
+    });
+    doc.save('compliance-list.pdf');
   }
 }