Feature/certificate download

src/app/manager-dashboard/certifications/certifications-add.component.html

@@ -15,6 +15,10 @@
       <button mat-raised-button color="primary" type="button" (click)="submitCertificate(true)" i18n class="margin-lr-5">Save & Return</button>
       <button mat-raised-button color="accent" type="button" (click)="openCourseDialog()" i18n>Add Courses</button>
       <button mat-raised-button color="accent" type="button" [disabled]="disableRemove" (click)="removeCourses()" i18n>Remove Courses</button>
+      <button mat-raised-button color="primary" type="button" (click)="openImagePreviewDialog()">
+        <span *ngIf="previewSrc && previewSrc !== 'assets/image.png'" i18n>Change Template</span>
+        <span *ngIf="!previewSrc || previewSrc === 'assets/image.png'" i18n>Upload a certificate template or pdf</span>
+      </button>
     </div>
     <form [formGroup]="certificateForm" novalidate>
       <mat-form-field class="full-width">

src/app/manager-dashboard/certifications/certifications-add.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, AfterViewChecked, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewChecked, ChangeDetectorRef, HostListener } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
@@ -9,6 +9,10 @@ import { CoursesComponent } from '../../courses/courses.component';
 import { showFormErrors } from '../../shared/table-helpers';
 import { ValidatorService } from '../../validators/validator.service';
 import { PlanetMessageService } from '../../shared/planet-message.service';
+import { ImagePreviewDialogComponent } from '../../shared/dialogs/image-preview-dialog.component';
+import { environment } from '../../../environments/environment';
+import { CanComponentDeactivate } from '../../shared/unsaved-changes.guard';
+import { warningMsg } from '../../shared/unsaved-changes.component';
 
 interface CertificationFormModel {
   name: string;
@@ -17,14 +21,22 @@ interface CertificationFormModel {
 @Component({
   templateUrl: './certifications-add.component.html'
 })
-export class CertificationsAddComponent implements OnInit, AfterViewChecked {
+export class CertificationsAddComponent implements OnInit, AfterViewChecked, CanComponentDeactivate {
 
   readonly dbName = 'certifications';
   certificateInfo: { _id?: string, _rev?: string } = {};
   certificateForm: FormGroup;
   courseIds: string[] = [];
   pageType = 'Add';
   disableRemove = true;
+  selectedFile: any; // Will hold base64 string for new files
+  previewSrc: any = 'assets/image.png'; // For image preview
+  urlPrefix = environment.couchAddress + '/' + this.dbName + '/';
+
+  initialFormValues: any;
+  attachmentChanged = false;
+  isFormInitialized = false;
+
   @ViewChild(CoursesComponent) courseTable: CoursesComponent;
 
   constructor(
@@ -54,17 +66,31 @@ export class CertificationsAddComponent implements OnInit, AfterViewChecked {
         this.certificateInfo._id = id;
         this.certificationsService.getCertification(id).subscribe(certification => {
           this.certificateForm.patchValue({ name: certification.name || '' } as Partial<CertificationFormModel>);
+          this.initialFormValues = { ...this.certificateForm.value };
           this.certificateInfo._rev = certification._rev;
           this.courseIds = certification.courseIds || [];
           this.pageType = 'Update';
+          if (certification._attachments && certification._attachments.attachment) {
+            // Construct direct URL for the preview
+            this.previewSrc = `${this.urlPrefix}${id}/attachment`;
+          }
+          this.isFormInitialized = true;
+          this.setupFormValueChanges();
         });
       } else {
-        this.certificateInfo._id = undefined;
-        this.courseIds = [];
+        this.initialFormValues = { ...this.certificateForm.value };
+        this.isFormInitialized = true;
+        this.setupFormValueChanges();
       }
     });
   }
 
+  setupFormValueChanges() {
+    this.certificateForm.valueChanges.subscribe(() => {
+      // The guard will check for changes, no need to set a flag here
+    });
+  }
+
   ngAfterViewChecked() {
     const disableRemove = !this.courseTable || !this.courseTable.selection.selected.length;
     if (this.disableRemove !== disableRemove) {
@@ -78,18 +104,67 @@ export class CertificationsAddComponent implements OnInit, AfterViewChecked {
     this.router.navigate([ navigation ], { relativeTo: this.route });
   }
 
+  openImagePreviewDialog() {
+    const dialogRef = this.dialog.open(ImagePreviewDialogComponent, {
+      data: { file: this.previewSrc } // Pass previewSrc to the dialog
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result === undefined) {
+        return; // Dialog was closed without action
+      }
+      this.attachmentChanged = true; // Any confirmed action in the dialog is a change
+      if (result instanceof File) {
+        // New file selected, convert to base64
+        const reader = new FileReader();
+        reader.onload = () => {
+          this.selectedFile = reader.result as string;
+          this.previewSrc = this.selectedFile;
+        };
+        reader.readAsDataURL(result);
+      } else if (result === null) {
+        // Image removed
+        this.selectedFile = null;
+        this.previewSrc = 'assets/image.png';
+      }
+    });
+  }
+
   submitCertificate(reroute: boolean) {
     if (!this.certificateForm.valid) {
       showFormErrors(this.certificateForm.controls);
       return;
     }
     const certificateFormValue: CertificationFormModel = this.certificateForm.getRawValue();
-    this.certificationsService.addCertification({
+    const certData: any = {
       ...this.certificateInfo,
       ...certificateFormValue,
-      courseIds: this.courseIds
-    }).subscribe((res) => {
+      courseIds: this.courseIds,
+    };
+
+    if (this.selectedFile && this.selectedFile.startsWith('data:')) {
+      // New base64 image data is present
+      const imgDataArr: string[] = this.selectedFile.split(/;\w+,/);
+      const contentType: string = imgDataArr[0].replace(/data:/, '');
+      const data: string = imgDataArr[1];
+      certData._attachments = {
+        'attachment': {
+          'content_type': contentType,
+          'data': data
+        }
+      };
+    } else if (this.attachmentChanged && !this.selectedFile) {
+        // This means the image was removed
+        if (certData._attachments) {
+            delete certData._attachments;
+        }
+    }
+
+
+    this.certificationsService.addCertification(certData).subscribe((res) => {
       this.certificateInfo = { _id: res.id, _rev: res.rev };
+      this.initialFormValues = { ...this.certificateForm.value };
+      this.attachmentChanged = false;
       this.planetMessageService.showMessage(
         this.pageType === 'Add' ? $localize`New certification added` : $localize`Certification updated`
       );
@@ -119,4 +194,25 @@ export class CertificationsAddComponent implements OnInit, AfterViewChecked {
     this.courseIds = this.courseIds.filter(id => this.courseTable.selection.selected.indexOf(id) === -1);
   }
 
+  canDeactivate(): boolean {
+    return !this.getHasUnsavedChanges();
+  }
+
+  isFormPristine(): boolean {
+    return JSON.stringify(this.certificateForm.value) === JSON.stringify(this.initialFormValues);
+  }
+
+  @HostListener('window:beforeunload', [ '$event' ])
+  unloadNotification($event: BeforeUnloadEvent): void {
+    if (this.getHasUnsavedChanges()) {
+      $event.returnValue = warningMsg;
+    }
+  }
+
+  private getHasUnsavedChanges(): boolean {
+    if (!this.isFormInitialized) {
+        return false;
+    }
+    return !this.isFormPristine() || this.attachmentChanged;
+  }
 }

src/app/manager-dashboard/certifications/certifications.service.ts

@@ -52,7 +52,7 @@ export class CertificationsService {
   }
 
   addCertification(certification) {
-    return this.couchService.updateDocument(this.dbName, { ...certification });
+    return this.couchService.updateDocument(this.dbName, certification);
   }
 
   isCourseCompleted(course, user) {

src/app/shared/couchdb.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpHeaders, HttpClient, HttpRequest } from '@angular/common/http';
 import { environment } from '../../environments/environment';
-import { Observable, of, empty, throwError, forkJoin } from 'rxjs';
-import { catchError, map, expand, toArray, flatMap, switchMap } from 'rxjs/operators';
+import { Observable, of, empty, throwError, forkJoin } from 'rxjs';
+import { catchError, map, expand, toArray, flatMap, switchMap } from 'rxjs/operators';
 import { debug } from '../debug-operator';
 import { PlanetMessageService } from './planet-message.service';
 import { findDocuments } from './mangoQueries';
@@ -28,7 +28,8 @@ export class CouchService {
     const url = (domain ? (protocol || environment.parentProtocol) + '://' + domain : this.baseUrl) + '/' + db;
     let httpReq: Observable<any>;
     if (type === 'post' || type === 'put') {
-      httpReq = this.http[type](url, data, opts);
+      const body = typeof data === 'object' && !(data instanceof Blob) ? JSON.stringify(data) : data;
+      httpReq = this.http[type](url, body, opts);
     } else {
       httpReq = this.http[type](url, opts);
     }
@@ -68,10 +69,16 @@ export class CouchService {
     return this.couchDBReq('delete', db, this.setOpts(opts));
   }
 
-  putAttachment(db: string, file: FormData, opts?: any) {
-    return this.couchDBReq('put', db, this.setOpts(opts), file);
+  putAttachment(db: string, file: File, opts?: any) {
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': file.type,
+      }),
+      withCredentials: true,
+      ...opts,
+    };
+    return this.couchDBReq('put', db, this.setOpts(httpOptions), file);
   }
-
   updateDocument(db: string, doc: any, opts?: any) {
     let docWithDate: any;
     return this.currentTime().pipe(
@@ -97,33 +104,33 @@ export class CouchService {
     }));
   }
 
-  findAll(db: string, query: any = { 'selector': { '_id': { '$gt': null } }, 'limit': 1000 }, opts?: any) {
-    return this.findAllRequest(db, query, opts).pipe(flatMap(({ docs }) => docs), toArray());
-  }
-
-  findAllStream(db: string, query: any = { 'selector': { '_id': { '$gt': null } }, 'limit': 1000 }, opts?: any) {
-    return this.findAllRequest(db, query, opts).pipe(map(({ docs }) => docs));
-  }
-
-  findAttachmentsByIds(ids: string[], opts?: any) {
-    const uniqueIds = Array.from(new Set((ids || []).filter(id => !!id)));
-    if (uniqueIds.length === 0) {
-      return of([]);
-    }
-    const chunkSize = 50;
-    const queries = [];
-    for (let i = 0; i < uniqueIds.length; i += chunkSize) {
-      const chunk = uniqueIds.slice(i, i + chunkSize);
-      queries.push(
-        this.findAll('attachments', findDocuments({ '_id': { '$in': chunk } }, 0, 0, chunk.length), opts)
-      );
-    }
-    return forkJoin(queries).pipe(
-      map((results: any[]) => results.reduce((acc: any[], docs: any[]) => acc.concat(docs), []))
-    );
-  }
-
-  private findAllRequest(db: string, query: any, opts: any) {
+  findAll(db: string, query: any = { 'selector': { '_id': { '$gt': null } }, 'limit': 1000 }, opts?: any) {
+    return this.findAllRequest(db, query, opts).pipe(flatMap(({ docs }) => docs), toArray());
+  }
+
+  findAllStream(db: string, query: any = { 'selector': { '_id': { '$gt': null } }, 'limit': 1000 }, opts?: any) {
+    return this.findAllRequest(db, query, opts).pipe(map(({ docs }) => docs));
+  }
+
+  findAttachmentsByIds(ids: string[], opts?: any) {
+    const uniqueIds = Array.from(new Set((ids || []).filter(id => !!id)));
+    if (uniqueIds.length === 0) {
+      return of([]);
+    }
+    const chunkSize = 50;
+    const queries = [];
+    for (let i = 0; i < uniqueIds.length; i += chunkSize) {
+      const chunk = uniqueIds.slice(i, i + chunkSize);
+      queries.push(
+        this.findAll('attachments', findDocuments({ '_id': { '$in': chunk } }, 0, 0, chunk.length), opts)
+      );
+    }
+    return forkJoin(queries).pipe(
+      map((results: any[]) => results.reduce((acc: any[], docs: any[]) => acc.concat(docs), []))
+    );
+  }
+
+  private findAllRequest(db: string, query: any, opts: any) {
     return this.post(db + '/_find', query, opts).pipe(
       catchError(() => {
         return of({ docs: [], rows: [] });
@@ -225,4 +232,24 @@ export class CouchService {
     );
   }
 
+  getAttachment(db: string, docId: string, attachmentId: string, opts?: any): Observable<any> {
+    const url = `${this.baseUrl}/${db}/${docId}/${attachmentId}`;
+    const httpOptions = {
+      ...this.defaultOpts,
+      responseType: 'blob',
+      ...opts,
+    };
+    // Use http.get directly instead of couchDBReq because couchDBReq is not suitable for attachment URLs
+    return this.http.get(url, httpOptions).pipe(
+      catchError(err => {
+        if (err.status === 403) {
+          this.planetMessageService.showAlert($localize`You are not authorized. Please contact administrator.`);
+        } else {
+          this.planetMessageService.showAlert($localize`Error fetching attachment: ${err.message}`);
+        }
+        return throwError(err);
+      })
+    );
+  }
+
 }

src/app/shared/dialogs/image-preview-dialog.component.html

@@ -0,0 +1,17 @@
+<h2 mat-dialog-title>Image Preview</h2>
+<mat-dialog-content>
+  <div *ngIf="previewUrl; else noImage">
+    <img [src]="previewUrl" style="max-width: 100%; max-height: 50vh;">
+  </div>
+  <ng-template #noImage>
+    <p>No image selected.</p>
+  </ng-template>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <input type="file" #fileInput (change)="onFileSelected($event)" hidden>
+  <button mat-button (click)="fileInput.click()">Select</button>
+  <button mat-button (click)="remove()">Remove</button>
+  <span style="flex: 1 1 auto;"></span>
+  <button mat-button (click)="close()">Cancel</button>
+  <button mat-raised-button color="primary" (click)="confirm()">Confirm</button>
+</mat-dialog-actions>