Skip to content

Commit bb3ac30

Browse files
mansurskTarentomansurskTarento
committed
new ui cahnges in cios to show transform progress and certificate in top
1 parent 0107b5d commit bb3ac30

12 files changed

+181
-20
lines changed

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/configure-marketplace-providers/configure-marketplace-providers.component.html

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,60 @@
1414
(loadProviderDetails)="getProviderDetails($event)"></ws-app-provider-details>
1515
</div>
1616
</mat-tab>
17-
<mat-tab data-id="contentUpload" label=" Upload Course Catalog" [disabled]="disableCourseCatalog">
17+
<mat-tab data-id="contentUpload" label="Configure Course Catalog" [disabled]="disableCourseCatalog">
1818
<ng-container *ngIf="!disableCourseCatalog">
1919
<div class="w-full mt-4">
2020
<ws-app-content-upload [providerDetails]="providerDetails" [selectedTabIndex]="selectedIndex"
2121
(loadProviderDetails)="getProviderDetails($event)"></ws-app-content-upload>
2222
</div>
2323
</ng-container>
2424
</mat-tab>
25+
26+
<mat-tab data-id="contentUpload" label="Configure Certificate" [disabled]="disableCourseCatalog">
27+
<ng-container *ngIf="!disableCourseCatalog">
28+
<div class="w-full mt-4">
29+
<ws-app-help-center-guide [helpCenterGuide]="helpCenterGuide"></ws-app-help-center-guide>
30+
<mat-card class="content-upload m-1 mb-5">
31+
<div class="flex flex-col mb-6">
32+
<div class="flex gap-1 items-center">
33+
<span class="header">Configure Certificate</span>
34+
</div>
35+
</div>
36+
<mat-card-content>
37+
<div class="flex flex-col w-full gap-10">
38+
<div class="flex flex-col gap-4">
39+
<span class="instruction-text mb-2">Open & follow these instruction</span>
40+
<span class="instruction-text">1.Please ensure the Certificate file is named correctly.</span>
41+
</div>
42+
<ws-app-transformations [providerDetails]="providerDetails"
43+
[transformationType]="'certificateTemplateUrl'" (loadProviderDetails)="getProviderDetails(true)"
44+
(loadTablesData)="getTablesData()">
45+
</ws-app-transformations>
46+
</div>
47+
</mat-card-content>
48+
</mat-card>
49+
</div>
50+
</ng-container>
51+
</mat-tab>
52+
53+
<mat-tab data-id="contentUpload" label="Transform Progress" [disabled]="true">
54+
<ng-container *ngIf="!disableCourseCatalog">
55+
<div class="p-1 mt-4">
56+
<mat-accordion class="flex gap-6 flex-col">
57+
<mat-expansion-panel class="margin-0">
58+
<mat-expansion-panel-header>
59+
<mat-panel-description class="accordian-description"> Via CSV
60+
</mat-panel-description>
61+
</mat-expansion-panel-header>
62+
<ws-app-transformations [providerDetails]="providerDetails"
63+
[transformationType]="'transformProgressJson'" (loadProviderDetails)="getProviderDetails(true)"
64+
(loadTablesData)="getTablesData()">
65+
</ws-app-transformations>
66+
</mat-expansion-panel>
67+
</mat-accordion>
68+
</div>
69+
</ng-container>
70+
</mat-tab>
2571
</mat-tab-group>
2672
</div>
2773
</div>

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/configure-marketplace-providers/configure-marketplace-providers.component.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.accoridan-description {
2+
font: 700 20px Lato;
3+
}
4+
5+
.header {
6+
/* stylelint-enable */
7+
font: 700 20px / 30px Lato;
8+
/* stylelint-disable */
9+
color: #212529;
10+
}
11+
12+
.instruction-text {
13+
color: #000000DE;
14+
/* stylelint-enable */
15+
font: 400 14px Lato;
16+
/* stylelint-disable */
17+
}

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/configure-marketplace-providers/configure-marketplace-providers.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ export class ConfigureMarketplaceProvidersComponent implements OnInit {
2424
providerDetails: any
2525
disableCourseCatalog = true
2626

27+
helpCenterGuide = {
28+
header: 'Content Upload Details: Video Guides and Tips',
29+
guideNotes: [
30+
`Upload the certificate using a SVG file.`,
31+
],
32+
helpVideoLink: `/assets/public/content/guide-videos/CIOS_Updated_demo.mp4`,
33+
}
34+
2735
constructor(
2836
private activateRoute: ActivatedRoute,
2937
private snackBar: MatSnackBar,
@@ -61,6 +69,8 @@ export class ConfigureMarketplaceProvidersComponent implements OnInit {
6169
}
6270
}
6371

72+
getTablesData() { }
73+
6474
showSnackBar(message: string) {
6575
this.snackBar.open(message)
6676
}

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/content-upload/content-upload.component.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<mat-expansion-panel class="margin-0" (opened)="openedTab = 'trasformContentJson'"
2626
(closed)="openedTab = ''">
2727
<mat-expansion-panel-header>
28-
<mat-panel-description class="accoridan-description"> Via CSV
28+
<mat-panel-description class="accordian-description"> Via CSV
2929
</mat-panel-description>
3030
</mat-expansion-panel-header>
3131
<ws-app-transformations [providerDetails]="providerDetails"
@@ -36,7 +36,7 @@
3636

3737
<mat-expansion-panel class="margin-0" (opened)="openedTab = 'transformContentViaApi'">
3838
<mat-expansion-panel-header>
39-
<mat-panel-description class="accoridan-description"> Via API
39+
<mat-panel-description class="accordian-description"> Via API
4040
</mat-panel-description>
4141
</mat-expansion-panel-header>
4242
<ws-app-via-api [providerDetails]="providerDetails" [viaApiTabIndex]="viaApiTabIndex" [tabIndex]="0"
@@ -46,12 +46,12 @@
4646
</mat-accordion>
4747
</div>
4848
</mat-tab>
49-
<mat-tab label="Transform Progress">
49+
<!-- <mat-tab label="Transform Progress">
5050
<div class="w-full mt-4">
5151
<mat-accordion class="flex gap-6 flex-col">
5252
<mat-expansion-panel class="margin-0" (opened)="openedTab = 'transformProgressJson'">
5353
<mat-expansion-panel-header>
54-
<mat-panel-description class="accoridan-description"> Via CSV
54+
<mat-panel-description class="accordian-description"> Via CSV
5555
</mat-panel-description>
5656
</mat-expansion-panel-header>
5757
<ws-app-transformations [providerDetails]="providerDetails"
@@ -67,7 +67,7 @@
6767
<mat-accordion class="flex gap-6 flex-col">
6868
<mat-expansion-panel class="margin-0" (opened)="openedTab = 'certificateTemplateUrl'">
6969
<mat-expansion-panel-header>
70-
<mat-panel-description class="accoridan-description" class="accoridan-description"> Via CSV
70+
<mat-panel-description class="accordian-description"> Via CSV
7171
</mat-panel-description>
7272
</mat-expansion-panel-header>
7373
<ws-app-transformations [providerDetails]="providerDetails"
@@ -77,7 +77,7 @@
7777
</mat-expansion-panel>
7878
</mat-accordion>
7979
</div>
80-
</mat-tab>
80+
</mat-tab> -->
8181
</mat-tab-group>
8282
</ng-container>
8383
</div>

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/content-upload/content-upload.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
margin: 0px !important;
7878
}
7979

80-
.accoridan-description {
80+
.accordian-description {
8181
font: 700 20px Lato;
8282
}
8383

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/provider-details/provider-details.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
</mat-error>
8181
<mat-error [hidden]="false" aria-label="Event title Error|Explains event title is required "
8282
*ngIf="getControlValidation('websiteUrl', 'pattern')">
83-
Only ( a-z/A-Z/0-9 . - _ $ / : [ ]' !) characters are supported
83+
Please give valid URL
8484
</mat-error>
8585
<mat-hint class="w-full flex justify-between items-center">
8686
<span class="input-note">Only ( a-z/A-Z/0-9 . - _ $ / : [ ]' !) characters are supported</span>

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/provider-details/provider-details.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export class ProviderDetailsComponent implements OnInit, OnChanges {
6464
this.providerFormGroup = this.formBuilder.group({
6565
contentPartnerName: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0-9.\-_$/:\[\] ' !]*$/), Validators.maxLength(70)]),
6666
partnerCode: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0-9]*$/), Validators.maxLength(6)]),
67-
websiteUrl: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0-9.\-_$/:\[\] ' !]*$/), Validators.maxLength(70)]),
67+
websiteUrl: new FormControl('', [Validators.required, Validators.pattern(/^(https?|http):\/\/[^\s/$.?#].[^\s]*$/), Validators.maxLength(70)]),
6868
description: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0-9,.\-_$/:\[\] ' !]*$/), Validators.maxLength(500)]),
6969
providerTips: this.formBuilder.array([]),
7070
})

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/transformations/transformations.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333
<mat-icon
3434
*ngIf="!(transformationType === 'certificateTemplateUrl' && providerDetalsBeforUpdate['certificateTemplateUrl'])"
3535
class="removeFile" matTooltip="Remove File" (click)="removeFile()">close</mat-icon>
36-
<div class="flex items-center justify-center">
37-
<!-- <img src="/assets/icons/samplePdf.svg" alt="file" class="samplePdf"> -->
36+
<div class="flex items-center justify-center gap-10">
37+
<img class="certificatePreview" [src]="certificateUrl" alt="">
3838
<div class="flex flex-column gap-4 pdfDetails">
3939
<ng-container *ngIf="fileName">
4040
<span class="pdfName">{{fileName}}</span>

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/transformations/transformations.component.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,10 @@
184184
}
185185
}
186186

187+
.certificatePreview {
188+
width: 40%;
189+
}
190+
187191
:host ::ng-deep .transformationEditor {
188192
.jsoneditor {
189193
height: 400px;

‎project/ws/app/src/lib/routes/home/routes/marketplace-provider/components/transformations/transformations.component.ts

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export class TransformationsComponent implements OnInit, OnChanges {
3535
contentFileUploaded = false
3636
fileName = ''
3737
dialogRef: any
38+
certificateUrl = ''
3839

3940
//#region (transformation variables)
4041
transforamtionType = 'viaForm'
@@ -107,6 +108,8 @@ export class TransformationsComponent implements OnInit, OnChanges {
107108
trasformationJson = _.get(this.providerConfiguration, 'transformProgressJson[0].spec')
108109
} else if (_.get(this.providerDetalsBeforUpdate, 'certificateTemplateUrl')) {
109110
this.contentFileUploaded = true
111+
this.certificateUrl = this.generatePublicUrl(_.get(this.providerDetalsBeforUpdate, 'certificateTemplateUrl'))
112+
this.fileName = this.getImageName(_.get(this.providerDetalsBeforUpdate, 'certificateTemplateUrl'))
110113
}
111114

112115
if (trasformationJson) {
@@ -126,6 +129,27 @@ export class TransformationsComponent implements OnInit, OnChanges {
126129
}
127130
}
128131

132+
generatePublicUrl(googleUrl: string): string {
133+
const urlToReplace = 'https://storage.googleapis.com/igot'
134+
let url = googleUrl
135+
if (googleUrl.startsWith(urlToReplace)) {
136+
const urlSplice = googleUrl.slice(urlToReplace.length).split('/')
137+
url = `${environment.karmYogiPath}/content-store/${urlSplice.slice(1).join('/')}`
138+
}
139+
return url
140+
}
141+
142+
getImageName(url: string): string {
143+
const lastSlashIndex = url.lastIndexOf('/')
144+
const imageWithPrefix = url.slice(lastSlashIndex + 1)
145+
const firstUnderscoreIndex = imageWithPrefix.indexOf('_')
146+
if (firstUnderscoreIndex !== -1) {
147+
return imageWithPrefix.slice(firstUnderscoreIndex + 1)
148+
}
149+
150+
return imageWithPrefix
151+
}
152+
129153
ngOnInit(): void {
130154
}
131155

@@ -141,6 +165,7 @@ export class TransformationsComponent implements OnInit, OnChanges {
141165
this.showSnackBar('Please upload a file less than 100 MB')
142166
} else {
143167
this.contentFile = file
168+
this.certificateUrl = URL.createObjectURL(file)
144169
this.contentFileUploaded = true
145170
if (this.fileName.toLowerCase().endsWith('.csv')) {
146171
this.getCsvHeaders(file)
@@ -254,6 +279,9 @@ export class TransformationsComponent implements OnInit, OnChanges {
254279
}
255280
},
256281
error: (error: HttpErrorResponse) => {
282+
if (this.contentFileUploaded) {
283+
this.providerDetalsBeforUpdate['certificateTemplateUrl'] = ''
284+
}
257285
const errmsg = _.get(error, 'error.params.errMsg', 'Something went worng, please try again later')
258286
this.showSnackBar(errmsg)
259287
},
@@ -434,16 +462,10 @@ export class TransformationsComponent implements OnInit, OnChanges {
434462
}
435463

436464
uploadCertificate(formData: any) {
437-
this.marketPlaceSvc.uploadCIOSContract(formData).subscribe({
465+
this.marketPlaceSvc.uploadThumbNail(formData).subscribe({
438466
next: responce => {
439467
const createdUrl = _.get(responce, 'result.url')
440-
const urlToReplace = 'https://storage.googleapis.com/igot'
441-
let url = createdUrl
442-
if (createdUrl.startsWith(urlToReplace)) {
443-
const urlSplice = createdUrl.slice(urlToReplace.length).split('/')
444-
url = `${environment.karmYogiPath}/content-store/${urlSplice.slice(1).join('/')}`
445-
}
446-
this.providerDetalsBeforUpdate['certificateTemplateUrl'] = url
468+
this.providerDetalsBeforUpdate['certificateTemplateUrl'] = createdUrl
447469
this.fileName = ''
448470
this.upDateTransforamtionDetails()
449471
this.dialogRef.close()

0 commit comments

Comments
 (0)