myAchievements: certificate downloader (fixes #7443)

src/app/users/users-achievements/users-achievements.component.html

@@ -35,6 +35,7 @@ <h3 i18n>My Certifications</h3>
  <mat-list>
  <mat-list-item *ngFor="let certification of certifications">
  {{certification.name}}
+ <button mat-icon-button (click)="downloadCertificate(certification)"><mat-icon>file_download</mat-icon></button>
  </mat-list-item>
  </mat-list>
  </div>

src/app/users/users-achievements/users-achievements.component.ts

@@ -9,6 +9,11 @@ import { throwError, combineLatest } from 'rxjs';
 import { StateService } from '../../shared/state.service';
 import { CoursesService } from '../../courses/courses.service';
 import { CertificationsService } from '../../manager-dashboard/certifications/certifications.service';
+import { HttpClient } from '@angular/common/http';
+
+const pdfMake = require('pdfmake/build/pdfmake');
+const pdfFonts = require('pdfmake/build/vfs_fonts');
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
 
 @Component({
  templateUrl: './users-achievements.component.html',
@@ -32,6 +37,7 @@ export class UsersAchievementsComponent implements OnInit {
  private usersAchievementsService: UsersAchievementsService,
  private stateService: StateService,
  private coursesService: CoursesService,
+ private http: HttpClient,
  private certificationsService: CertificationsService
  ) { }
 
@@ -108,4 +114,59 @@ export class UsersAchievementsComponent implements OnInit {
  });
  }
 
+ toBase64(file, callback) {
+ const reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = () => callback(reader.result);
+ reader.onerror = (error) => console.error('Error: ', error);
+ }
+
+ downloadCertificate(certification) {
+ this.http.get('assets/ole-cert-template.jpg', { responseType: 'blob' }).subscribe(blob => {
+ this.toBase64(blob, (result) => {
+ const imgSig = result;
+
+ const documentDefinition = {
+ content: [
+ {
+ text: `${this.user.firstName} ${this.user.middleName ? this.user.middleName : ''} ${this.user.lastName}`,
+ style: 'name'
+ },
+ {
+ text: `${certification.name}`,
+ style: 'courseName'
+ }
+ ],
+ styles: {
+ name: {
+ fontSize: 20,
+ alignment: 'center',
+ margin: [ 0, 180, 0, 20 ]
+ },
+ courseName: {
+ fontSize: 18,
+ italics: true,
+ alignment: 'center',
+ margin: [ 0, 50, 0, 30 ]
+ }
+ },
+ pageSize: {
+ width: 800,
+ height: 500
+ },
+ background: function(currentPage, pageSize) {
+ return {
+ image: imgSig,
+ width: pageSize.width,
+ height: pageSize.height,
+ alignment: 'center'
+ };
+ }
+ };
+
+ pdfMake.createPdf(documentDefinition).download(`${certification.name} certificate.pdf`);
+ });
+ }, error => console.error('Error fetching image:', error));
+}
+
 }