Merge pull request #2336 from abhishek-K-P/sprint-16-dev

Sprint 16 dev

library/ws-widget/collection/src/lib/_common/certificate-dialog/certificate-dialog.component.html

@@ -8,7 +8,7 @@
     <mat-card-content class="certificate-img-content">
         <img #certificate [src]="url| pipeSafeSanitizer: 'url'" alt="Certificate" role="image" class="certificate-banner-image">
     </mat-card-content>
-    <mat-card-actions class="flex flex-row-reverse">
+    <mat-card-actions class="flex flex-row-reverse gap-4">
         <!-- <ws-widget-svg-to-pdf></ws-widget-svg-to-pdf> -->
         <a mat-button (click)="shareCert()" class="ws-mat-accent-border-active mat-accent btn-custom">
             <mat-icon class="mat-icon material-icons-outlined download_icon margin-right-xs">share</mat-icon>

package.json

@@ -53,7 +53,7 @@
         "@sunbird-cb/micro-surveys": "^2.0.17",
         "@sunbird-cb/rain-dashboards": "0.4.33",
         "@sunbird-cb/resolver-v2": "0.0.7",
-        "@sunbird-cb/utils-v2": "0.0.5",
+        "@sunbird-cb/utils-v2": "0.0.6",
         "@types/file-saver": "^2.0.1",
         "@types/uuid": "^8.3.1",
         "bootstrap": "5.1.2",

project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html

@@ -154,19 +154,40 @@
         </ng-container>
 
         <div class="flex flex-col gap-4 p-5 border-bottom">
+            <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}'">
+                <div class="flex flex-row justify-end w-full ws-mat-black-text">
+                    <span class="mat-body-2  ws-mat-black-text">
+                        {{userExtCourseEnroll.progress}}%</span>
+                </div>
+                <ws-widget-content-progress [contentId]="userExtCourseEnroll.progress"
+                                            [progress]="userExtCourseEnroll.progress"
+                                            [progressType]="'percentage'" [customClassName]="'viewer-progress'">
+                                        </ws-widget-content-progress>
+              </ng-container>  
             <ng-container *ngIf="(userExtCourseEnroll | json) === '{}'">
-                <button class="flex action-button justify-center resume" type="button" (click)="enRollToExtCourse(extContentReadData?.contentId)">
+                <button class="flex action-button justify-center flex-middle resume" type="button" (click)="enRollToExtCourse(extContentReadData?.contentId)">
                   <ng-container >{{ 'apptochome.enroll' | translate }}
                   </ng-container>
                 </button>
               </ng-container>
             <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl">
-                <a class="flex action-button justify-center resume" target="_blank" [href]="redirectToContent(extContentReadData)">
+                <a class="flex action-button justify-center flex-middle resume" target="_blank" [href]="redirectToContent(extContentReadData)">
                   <ng-container >{{ 'apptochome.redirect' | translate }}
                     <mat-icon class="ml-2 ws-mat-white-text">open_in_new</mat-icon>
                   </ng-container>
                 </a>
               </ng-container>
+              <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll.issued_certificates?.length > 0 
+                && userExtCourseEnroll.progress === 100">
+                <button class="flex action-button justify-center flex-middle resume" type="button" (click)="downloadCert()">
+                    <!-- <img src="fusion-assets/images/certificate-ico.svg" width="24" height="24"> -->
+                    <span>Certificate</span>
+                    <mat-icon  *ngIf="!downloadCertificateLoading" class="ml-2">arrow_downward</mat-icon>
+                    <div class="center flex flex-middle certificate-loader margin-left-s" *ngIf="downloadCertificateLoading">
+                        <mat-spinner strokeWidth="2" stroke="'white'" class="white-spinner" [diameter]="24"></mat-spinner>
+                      </div>
+                </button>
+            </ng-container> 
         </div>
         <div>
             <div class="flex flex-col kpi-values items-center gap-2" *ngIf="extContentReadData?.duration > 0">

project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.scss

@@ -748,6 +748,10 @@ mat-divider {
 //   }
 // }
 
+.certificate-loader ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
+  stroke: #ffffff;
+}
+
 .cb-plan-wrap {
   opacity: 1;
   color: rgba(27,76,161,1);

project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.ts

@@ -2,10 +2,11 @@ import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild }
 import { ActivatedRoute } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
 import { CommonMethodsService } from '@sunbird-cb/consumption'
-import { ConfigurationsService, MultilingualTranslationsService } from '@sunbird-cb/utils-v2'
-import { WidgetContentService } from '@sunbird-cb/collection/src/lib/_services/widget-content.service'
+import { ConfigurationsService, MultilingualTranslationsService, WidgetContentService } from '@sunbird-cb/utils-v2'
 import { LoaderService } from '@ws/author/src/public-api'
-import { MatSnackBar } from '@angular/material'
+import { MatDialog, MatSnackBar } from '@angular/material'
+import { CertificateService } from '../../../certificate/services/certificate.service'
+import { CertificateDialogComponent } from '@sunbird-cb/collection/src/lib/_common/certificate-dialog/certificate-dialog.component'
 
 @Component({
   selector: 'ws-app-app-toc-cios-home',
@@ -16,6 +17,7 @@ export class AppTocCiosHomeComponent implements OnInit, AfterViewInit {
   skeletonLoader = true
   extContentReadData: any = {}
   userExtCourseEnroll: any = {}
+  downloadCertificateLoading = false
 
   rcElem = {
     offSetTop: 0,
@@ -49,6 +51,8 @@ export class AppTocCiosHomeComponent implements OnInit, AfterViewInit {
               private configSvc: ConfigurationsService,
               private langtranslations: MultilingualTranslationsService,
               private contentSvc: WidgetContentService,
+              private certSvc: CertificateService,
+              private dialog: MatDialog,
               public loader: LoaderService,
               public snackBar: MatSnackBar
   ) {
@@ -120,4 +124,20 @@ export class AppTocCiosHomeComponent implements OnInit, AfterViewInit {
       this.snackBar.open('Unable to get the enrolled details')
     }
   }
+
+  async downloadCert() {
+    this.downloadCertificateLoading = true
+    const certData = this.userExtCourseEnroll.issued_certificates
+    const certRes: any = await this.certSvc.downloadCertificate_v2(certData[0].identifier).toPromise().catch(_error => {})
+    if (certRes && Object.keys(certRes.result).length > 0) {
+      this.downloadCertificateLoading = false
+      this.dialog.open(CertificateDialogComponent, {
+        width: '1300px',
+        data: { cet: certRes.result.printUri , certId: certData[0].identifier },
+      })
+    } else {
+      this.downloadCertificateLoading = false
+      this.snackBar.open('Unable to get the certificate. Try again after sometime.')
+    }
+  }
 }

project/ws/app/src/lib/routes/app-toc/resolvers/app-toc-cios-user-enroll-resolver.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'
+import { WidgetContentService } from '@sunbird-cb/collection/src/public-api'
 import { IResolveResponse } from '@sunbird-cb/utils-v2'
 import { Observable, of } from 'rxjs'
 import { catchError, map, tap } from 'rxjs/operators'
-import { WidgetContentService } from '@sunbird-cb/collection/src/lib/_services/widget-content.service'
 
 @Injectable({
   providedIn: 'root',