Skip to content

Commit

Permalink
Merge pull request #2397 from bharathravi-in/cbrelease-4.8.16.2
Browse files Browse the repository at this point in the history 
changes in the certificate download
  • Loading branch information
@vishnubansaltarento
vishnubansaltarento authored Aug 6, 2024
2 parents d1aba42 + daacd51 commit a0980a2
Show file tree
Hide file tree
Showing 10 changed files with 299 additions and 55 deletions.
29 changes: 23 additions & 6 deletions ...-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@
<ws-widget-skeleton-loader [bindingClass]="'flex rounded'" [width]="'24px'"
[height]="'24px'"></ws-widget-skeleton-loader>
</ng-container>
<ng-container *ngIf="!skeletonLoader && content?.certificateObj?.certData">
<mat-icon class="icon cursor-pointer "
<ng-container >
<mat-icon class="icon cursor-pointer " *ngIf="!downloadCertificateBool"
(click)="handleOpenCertificateDialog()">arrow_downward</mat-icon>
<mat-spinner *ngIf="downloadCertificateBool" strokeWidth="2" [diameter]="20"></mat-spinner>
</ng-container>
</div>
</div>
Expand All @@ -31,7 +32,7 @@
[height]="'148px'"></ws-widget-skeleton-loader>
</ng-container>
<ng-container *ngIf="!skeletonLoader">
<div class="certificate_box" *ngIf="!content?.certificateObj?.certData">
<div class="certificate_box" *ngIf="!content?.certificateObj?.certId">
<img src="/assets/icons/toc/no-certificate.svg" alt="No certificate image" />
<div class="flex items-center certificate_overlay">
<div class="flex flex-col text-center gap-1 p-4 text-white mt-4">
Expand All @@ -41,12 +42,28 @@
</div>
</div>
</div>
<ng-container *ngIf="content?.certificateObj?.certData">
<ng-container *ngIf="content?.certificateObj?.certId">
<div class="img-container">
<img class="celebration-animation" src="assets/images/animation/leaderboard_animation.gif"/>
<img class="ceritificate-image"
[src]="'/assets/icons/toc/no-certificate.svg'"
alt="certificate image" />
<div [ngClass]="{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}">
<button type="button" (click)="handleOpenCertificateDialog()">
<span *ngIf="!downloadCertificateBool">{{ 'apptoccontentcard.viewCertificate' | translate }}</span>
<div *ngIf="downloadCertificateBool" class="uploader-status">
<mat-spinner></mat-spinner>
</div>
</button>
</div>
</div>
</ng-container>
<!-- <ng-container *ngIf="content?.certificateObj?.certData">
<img class="celebration-animation" src="assets/images/animation/leaderboard_animation.gif"/>
<img class="ceritificate-image"
[src]="content?.certificateObj?.certData | pipeSafeSanitizer: 'url'"
alt="certificate image" />
</ng-container>
</ng-container> -->
</ng-container>
</div>
</div>
Expand Down Expand Up @@ -77,7 +94,7 @@
</ng-template>

<div class="flex flex-col my-4 px-4" [class.mt60]="sticky" [ngClass]="isMobile ? '' : 'gap-10'">
<ng-container *ngIf="(content?.completionStatus === 2 || content?.certificateObj?.certData) && !fromMarketPlace">
<ng-container *ngIf="(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace">
<div class="certificate-container" *ngIf="!skeletonLoader">
<div class="flex flex-row earned-certificate-container">
<div class="ribbon"></div>
Expand Down
81 changes: 80 additions & 1 deletion ...-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -445,7 +445,7 @@ $mob-title-line-count: 2;

.ceritificate-image {
display: flex;
max-width: 248px;
// max-width: 248px;
margin: auto;
width: 100%;
border-radius: 8px;
Expand Down Expand Up @@ -509,3 +509,82 @@ $mob-title-line-count: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.img-container {
position: relative;

.view-cert {
visibility: hidden;
display: none;
}

&:hover {
display: block;
z-index: 99999;
.view-cert {
visibility: visible;
position: absolute;
left: 0;
top: 0;
text-align: center;
opacity: 1;
transition: opacity 0.35s ease;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #000000b5;
border-radius: 8px;
button {
color: white;
border: 1px solid white;
padding: 8px;
background: transparent;
border-radius: 12px;
cursor: pointer;
z-index: 999999;
}
}
}
}
.view-certificate {
visibility: visible !important;
display: block;
position: absolute;
/* width: 500px; */
left: 0;
top: 0;
text-align: center;
opacity: 1;
background-color: #000000b5;
border-radius: 8px;
transition: opacity 0.35s ease;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;

button {
color: white;
border: 1px solid white;
padding: 8px;
background: transparent;
border-radius: 12px;
cursor: pointer;
z-index: 999999;
width: 150px;
}
}

.uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #ffffff;
}
.uploader-status ::ng-deep .mat-progress-spinner svg {
width: 24px !important;
height: 24px !important;
}
.uploader-status ::ng-deep .mat-progress-spinner {
width: 24px !important;
height: 24px !important;
}
33 changes: 27 additions & 6 deletions ...ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { NsContentStripWithTabs } from '../../../content-strip-with-tabs/content

import { AppTocService } from '@ws/app/src/lib/routes/app-toc/services/app-toc.service'
import { NsContent, RatingService } from '@sunbird-cb/collection/src/public-api'
import { LoggerService, ConfigurationsService } from '@sunbird-cb/utils-v2'
import { LoggerService, ConfigurationsService, WidgetContentService } from '@sunbird-cb/utils-v2'
import { TimerService } from '@ws/app/src/lib/routes/app-toc/services/timer.service'
import { HandleClaimService } from '../content-services/handle-claim.service'
import { LoadCheckService } from '@ws/app/src/lib/routes/app-toc/services/load-check.service'
Expand Down Expand Up @@ -83,6 +83,7 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
private reviewDataService: ReviewComponentDataService,
private handleClaimService: HandleClaimService,
private resetRatingsService: ResetRatingsService,
private contentSvc: WidgetContentService
) {
this.resetRatingsService.resetRatings$.subscribe((_res: any) => {
this.fetchRatingSummary()
Expand Down Expand Up @@ -150,6 +151,7 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
private destroySubject$ = new Subject<any>()
viewMoreTags = false
timerUnsubscribe: any
downloadCertificateBool = false

strip: NsContentStripWithTabs.IContentStripUnit = {
key: 'blendedPrograms',
Expand Down Expand Up @@ -695,11 +697,30 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
}

handleOpenCertificateDialog() {
const cet = this.content && this.content.certificateObj.certData
this.dialog.open(CertificateDialogComponent, {
width: '1200px',
data: { cet, certId: this.content && this.content.certificateObj.certId },
})
this.downloadCertificateBool = true
const certId = this.content && this.content.certificateObj.certId
if (this.content && this.content.certificateObj && !this.content.certificateObj.certData) {
this.contentSvc.downloadCert(certId).subscribe(response => {
if (this.content) {
this.downloadCertificateBool = false
this.content['certificateObj']['certData'] = response.result.printUri
this.dialog.open(CertificateDialogComponent, {
width: '1200px',
data: { cet: response.result.printUri, certId: this.content && this.content.certificateObj.certId },
})
}
}, (error: any) => {
this.downloadCertificateBool = false
this.loggerService.error('CERTIFICATE FETCH ERROR >', error)
this.matSnackBar.open('Unable to View Certificate, due to some error!')
})
} else {
this.downloadCertificateBool = false
this.dialog.open(CertificateDialogComponent, {
width: '1200px',
data: { cet: this.content && this.content.certificateObj.certData, certId: this.content && this.content.certificateObj.certId },
})
}
}

checkValidJSON(str: any) {
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,13 @@
"@project-sunbird/sb-styles": "0.0.7",
"@project-sunbird/sunbird-quml-player": "0.0.6",
"@project-sunbird/telemetry-sdk": "0.0.26",
"@sunbird-cb/consumption": "0.0.72",
"@sunbird-cb/consumption": "0.0.73",
"@sunbird-cb/design-system": "0.0.2",
"@sunbird-cb/discussions-ui-v8": "2.1.3",
"@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.8",
"@sunbird-cb/utils-v2": "0.0.10",
"@types/file-saver": "^2.0.1",
"@types/uuid": "^8.3.1",
"bootstrap": "5.1.2",
Expand Down
46 changes: 29 additions & 17 deletions project/ws/app/src/lib/routes/app-toc/components/app-toc-home/app-toc-home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -979,8 +979,20 @@ export class AppTocHomeComponent implements OnInit, OnDestroy, AfterViewChecked,
this.tocSvc.checkModuleWiseData(this.content)
this.enrolledCourseData = enrolledCourse
this.currentCourseBatchId = enrolledCourse.batchId
this.downloadCert(enrolledCourse.issuedCertificates)

// this.downloadCert(enrolledCourse.issuedCertificates)
if (enrolledCourse && enrolledCourse.issuedCertificates &&
enrolledCourse.issuedCertificates.length) {
const certificate: any = enrolledCourse.issuedCertificates.sort((a: any, b: any) =>
new Date(b.lastIssuedOn).getTime() - new Date(a.lastIssuedOn).getTime())
const certId = certificate[0].identifier
this.certId = certId
if (this.content) {
this.content['certificateObj'] = {
certId,
certData: '',
}
}
}
this.content.completionPercentage = enrolledCourse.completionPercentage || 0
this.content.completionStatus = enrolledCourse.status || 0
if (this.contentReadData && this.contentReadData.cumulativeTracking) {
Expand Down Expand Up @@ -1098,22 +1110,22 @@ export class AppTocHomeComponent implements OnInit, OnDestroy, AfterViewChecked,
return batchId
}

downloadCert(certIdArr: any) {
if (certIdArr && certIdArr.length && certIdArr.length > 0) {
certIdArr.sort((a: any, b: any) => new Date(b.lastIssuedOn).getTime() - new Date(a.lastIssuedOn).getTime())
const certId = certIdArr[0].identifier
this.certId = certId
// downloadCert(certIdArr: any) {
// if (certIdArr && certIdArr.length && certIdArr.length > 0) {
// certIdArr.sort((a: any, b: any) => new Date(b.lastIssuedOn).getTime() - new Date(a.lastIssuedOn).getTime())
// const certId = certIdArr[0].identifier
// this.certId = certId

this.contentSvc.downloadCert(certId).subscribe(response => {
if (this.content) {
this.content['certificateObj'] = {
certData: response.result.printUri,
certId: this.certId,
}
}
})
}
}
// this.contentSvc.downloadCert(certId).subscribe(response => {
// if (this.content) {
// this.content['certificateObj'] = {
// certData: response.result.printUri,
// certId: this.certId,
// }
// }
// })
// }
// }

public handleAutoBatchAssign() {
if (this.forPreview) {
Expand Down
2 changes: 1 addition & 1 deletion ...outes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export class KarmaProgramsMicrositeV2Component implements OnInit {
}

}

richTextContent(content: any) {
return this.sanitizer.bypassSecurityTrustHtml(content)
}
Expand Down
28 changes: 21 additions & 7 deletions src/app/competency-passbook/competency-card-details/competency-card-details.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,19 +69,33 @@
<ws-widget-skeleton-loader [bindingClass]="'flex rounded'" [width]="'32px'" [height]="'32px'"></ws-widget-skeleton-loader>
</ng-container>
<ng-container *ngIf="!eachCert?.loading && !eachCert.error && eachCert?.identifier">
<mat-icon class="icon cursor-pointer" (click)="handleDownloadCertificatePDF(eachCert?.printURI)" >arrow_downward</mat-icon>
<mat-icon class="icon cursor-pointer share-icon" (click)="shareCertificate(eachCert?.identifier)">share</mat-icon>
<mat-icon class="icon cursor-pointer" (click)="getCertificateSVG(eachCert, 'DOWNLOAD')" >arrow_downward</mat-icon>
<mat-icon class="icon cursor-pointer share-icon" (click)="getCertificateSVG(eachCert, 'SHARE')">share</mat-icon>
</ng-container>
</div>
</div>
<div class="flex justify-center">
<ng-container *ngIf="eachCert?.loading">
<!-- <ng-container *ngIf="eachCert?.loading">
<ws-widget-skeleton-loader [bindingClass]="'flex rounded'" [width]="'280px'" [height]="'160px'"></ws-widget-skeleton-loader>
</ng-container>
<ng-container *ngIf="!eachCert?.loading">
</ng-container> -->
<ng-container >
<ng-container *ngIf="!eachCert.error && eachCert?.identifier">
<div class="flex justify-center items-center img-div">
<img [src]="eachCert?.printURI | pipeSafeSanitizer: 'url'" alt="{{ eachCert?.courseName }} certificate" />
<div class="flex justify-center items-center img-div img-container">
<!-- [src]="eachCert?.printURI | pipeSafeSanitizer: 'url'" -->
<ng-container *ngIf="!eachCert?.printURI">
<img [src]="'/assets/icons/toc/no-certificate.svg'" alt="{{ eachCert?.courseName }} certificate" />
</ng-container>
<ng-container *ngIf="!eachCert?.loading && eachCert?.printURI">
<img [src]="eachCert?.printURI | pipeSafeSanitizer: 'url'" alt="{{ eachCert?.courseName }} certificate" />
</ng-container>
<div [ngClass]="{'view-certificate': eachCert?.loading, 'view-cert': !eachCert?.loading}">
<button type="button" (click)="getCertificateSVG(eachCert)">
<span *ngIf="!eachCert?.loading">{{ 'apptoccontentcard.viewCertificate' | translate }}</span>
<div *ngIf="eachCert?.loading" class="uploader-status">
<mat-spinner></mat-spinner>
</div>
</button>
</div>
</div>
</ng-container>
<ng-container *ngIf="eachCert?.error || !eachCert?.identifier">
Expand Down
Loading

0 comments on commit a0980a2

Please sign in to comment.