Merge pull request #193 from mansurskTarento/cios-v2

Cios v2
KB-iGOT · Mar 3, 2025 · 259747a · 259747a
2 parents 0107b5d + 7965980
commit 259747a
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 24 deletions.
diff --git a/...components/configure-marketplace-providers/configure-marketplace-providers.component.html b/...components/configure-marketplace-providers/configure-marketplace-providers.component.html
@@ -14,14 +14,62 @@
             (loadProviderDetails)="getProviderDetails($event)"></ws-app-provider-details>
         </div>
       </mat-tab>
-      <mat-tab data-id="contentUpload" label=" Upload Course Catalog" [disabled]="disableCourseCatalog">
+      <mat-tab data-id="contentUpload" label="Configure Course Catalog" [disabled]="disableCourseCatalog">
         <ng-container *ngIf="!disableCourseCatalog">
           <div class="w-full mt-4">
             <ws-app-content-upload [providerDetails]="providerDetails" [selectedTabIndex]="selectedIndex"
               (loadProviderDetails)="getProviderDetails($event)"></ws-app-content-upload>
           </div>
         </ng-container>
       </mat-tab>
+
+      <mat-tab data-id="contentUpload" label="Configure Certificate" [disabled]="disableCourseCatalog">
+        <ng-container *ngIf="!disableCourseCatalog">
+          <div class="w-full mt-4">
+            <ws-app-help-center-guide [helpCenterGuide]="helpCenterGuide"></ws-app-help-center-guide>
+            <mat-card class="content-upload m-1 mb-5">
+              <div class="flex flex-col mb-6">
+                <div class="flex gap-1 items-center">
+                  <span class="header">Configure Certificate</span>
+                </div>
+              </div>
+              <mat-card-content>
+                <div class="flex flex-col w-full gap-10">
+                  <div class="flex flex-col gap-4">
+                    <span class="instruction-text mb-2">Open & follow these instruction</span>
+                    <ng-container *ngFor="let instruction of instructionsList; let i = index">
+                      <span class="instruction-text">{{i+1}}.{{instruction}} </span>
+                    </ng-container>
+                  </div>
+                  <ws-app-transformations [providerDetails]="providerDetails"
+                    [transformationType]="'certificateTemplateUrl'" (loadProviderDetails)="getProviderDetails(true)"
+                    (loadTablesData)="getTablesData()">
+                  </ws-app-transformations>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </div>
+        </ng-container>
+      </mat-tab>
+
+      <mat-tab data-id="contentUpload" label="Transform Progress" [disabled]="true">
+        <ng-container *ngIf="!disableCourseCatalog">
+          <div class="p-1 mt-4">
+            <mat-accordion class="flex gap-6 flex-col">
+              <mat-expansion-panel class="margin-0">
+                <mat-expansion-panel-header>
+                  <mat-panel-description class="accordian-description"> Via CSV
+                  </mat-panel-description>
+                </mat-expansion-panel-header>
+                <ws-app-transformations [providerDetails]="providerDetails"
+                  [transformationType]="'transformProgressJson'" (loadProviderDetails)="getProviderDetails(true)"
+                  (loadTablesData)="getTablesData()">
+                </ws-app-transformations>
+              </mat-expansion-panel>
+            </mat-accordion>
+          </div>
+        </ng-container>
+      </mat-tab>
     </mat-tab-group>
   </div>
 </div>
diff --git a/...components/configure-marketplace-providers/configure-marketplace-providers.component.scss b/...components/configure-marketplace-providers/configure-marketplace-providers.component.scss
@@ -0,0 +1,17 @@
+.accoridan-description {
+  font: 700 20px Lato;
+}
+
+.header {
+    /* stylelint-enable */
+    font: 700 20px / 30px Lato;
+    /* stylelint-disable */
+    color: #212529;
+  }
+
+.instruction-text {
+    color: #000000DE;
+    /* stylelint-enable */
+    font: 400 14px Lato;
+    /* stylelint-disable */
+  }
diff --git a/...r/components/configure-marketplace-providers/configure-marketplace-providers.component.ts b/...r/components/configure-marketplace-providers/configure-marketplace-providers.component.ts
@@ -24,6 +24,18 @@ export class ConfigureMarketplaceProvidersComponent implements OnInit {
   providerDetails: any
   disableCourseCatalog = true
 
+  helpCenterGuide = {
+    header: 'Content Upload Details: Video Guides and Tips',
+    guideNotes: [
+      `Upload the certificate using a SVG file.`,
+    ],
+    helpVideoLink: `/assets/public/content/guide-videos/CIOS_Updated_demo.mp4`,
+  }
+
+  instructionsList = [
+    'Please ensure the Certificate file is named correctly'
+  ]
+
   constructor(
     private activateRoute: ActivatedRoute,
     private snackBar: MatSnackBar,
@@ -41,6 +53,10 @@ export class ConfigureMarketplaceProvidersComponent implements OnInit {
         this.disableCourseCatalog = false
         this.providerDetails = data.providerDetails.data.result
       }
+      if (_.get(data, 'pageData.data.configureCertificateGuide')) {
+        this.helpCenterGuide = _.get(data, 'pageData.data.configureCertificateGuide.helpCenterGuide', this.helpCenterGuide)
+        this.instructionsList = _.get(data, 'pageData.data.configureCertificateGuide.instructions', this.instructionsList)
+      }
     })
   }
 
@@ -61,6 +77,8 @@ export class ConfigureMarketplaceProvidersComponent implements OnInit {
     }
   }
 
+  getTablesData() { }
+
   showSnackBar(message: string) {
     this.snackBar.open(message)
   }

diff --git a/.../home/routes/marketplace-provider/components/content-upload/content-upload.component.html b/.../home/routes/marketplace-provider/components/content-upload/content-upload.component.html
@@ -25,7 +25,7 @@
                 <mat-expansion-panel class="margin-0" (opened)="openedTab = 'trasformContentJson'"
                   (closed)="openedTab = ''">
                   <mat-expansion-panel-header>
-                    <mat-panel-description class="accoridan-description"> Via CSV
+                    <mat-panel-description class="accordian-description"> Via CSV
                     </mat-panel-description>
                   </mat-expansion-panel-header>
                   <ws-app-transformations [providerDetails]="providerDetails"
@@ -36,7 +36,7 @@
 
                 <mat-expansion-panel class="margin-0" (opened)="openedTab = 'transformContentViaApi'">
                   <mat-expansion-panel-header>
-                    <mat-panel-description class="accoridan-description"> Via API
+                    <mat-panel-description class="accordian-description"> Via API
                     </mat-panel-description>
                   </mat-expansion-panel-header>
                   <ws-app-via-api [providerDetails]="providerDetails" [viaApiTabIndex]="viaApiTabIndex" [tabIndex]="0"
@@ -46,12 +46,12 @@
               </mat-accordion>
             </div>
           </mat-tab>
-          <mat-tab label="Transform Progress">
+          <!-- <mat-tab label="Transform Progress">
             <div class="w-full mt-4">
               <mat-accordion class="flex gap-6 flex-col">
                 <mat-expansion-panel class="margin-0" (opened)="openedTab = 'transformProgressJson'">
                   <mat-expansion-panel-header>
-                    <mat-panel-description class="accoridan-description"> Via CSV
+                    <mat-panel-description class="accordian-description"> Via CSV
                     </mat-panel-description>
                   </mat-expansion-panel-header>
                   <ws-app-transformations [providerDetails]="providerDetails"
@@ -67,7 +67,7 @@
               <mat-accordion class="flex gap-6 flex-col">
                 <mat-expansion-panel class="margin-0" (opened)="openedTab = 'certificateTemplateUrl'">
                   <mat-expansion-panel-header>
-                    <mat-panel-description class="accoridan-description" class="accoridan-description"> Via CSV
+                    <mat-panel-description class="accordian-description"> Via CSV
                     </mat-panel-description>
                   </mat-expansion-panel-header>
                   <ws-app-transformations [providerDetails]="providerDetails"
@@ -77,7 +77,7 @@
                 </mat-expansion-panel>
               </mat-accordion>
             </div>
-          </mat-tab>
+          </mat-tab> -->
         </mat-tab-group>
       </ng-container>
     </div>

diff --git a/.../home/routes/marketplace-provider/components/content-upload/content-upload.component.scss b/.../home/routes/marketplace-provider/components/content-upload/content-upload.component.scss
@@ -77,7 +77,7 @@
   margin: 0px !important;
 }
 
-.accoridan-description {
+.accordian-description {
   font: 700 20px Lato;
 }
 

diff --git a/...e/routes/marketplace-provider/components/provider-details/provider-details.component.html b/...e/routes/marketplace-provider/components/provider-details/provider-details.component.html
@@ -73,18 +73,18 @@
           <span class="lable">Website URL</span>
         </div>
         <mat-form-field class="w-full provider-input-form">
-          <input formControlName="websiteUrl" matInput placeholder="Type here" maxlength="70">
+          <input formControlName="websiteUrl" matInput placeholder="Type here" maxlength="1024">
           <mat-error [hidden]="false" aria-label="Event title Error|Explains event title is required "
             *ngIf="getControlValidation('websiteUrl', 'required')">
             Website URL is mandatory
           </mat-error>
           <mat-error [hidden]="false" aria-label="Event title Error|Explains event title is required "
             *ngIf="getControlValidation('websiteUrl', 'pattern')">
-            Only ( a-z/A-Z/0-9 . - _ $ / : [ ]' !) characters are supported
+            Please give valid URL
           </mat-error>
-          <mat-hint class="w-full flex justify-between items-center">
-            <span class="input-note">Only ( a-z/A-Z/0-9 . - _ $ / : [ ]' !) characters are supported</span>
-            <span class="input-note">{{getTextLength('websiteUrl')}}/70</span>
+          <mat-hint class="w-full flex justify-end items-center">
+            <!-- <span class="input-note">Please give valid URL</span> -->
+            <span class="input-note">{{getTextLength('websiteUrl')}}/1024</span>
           </mat-hint>
         </mat-form-field>
       </div>

diff --git a/...ome/routes/marketplace-provider/components/provider-details/provider-details.component.ts b/...ome/routes/marketplace-provider/components/provider-details/provider-details.component.ts
@@ -64,7 +64,7 @@ export class ProviderDetailsComponent implements OnInit, OnChanges {
     this.providerFormGroup = this.formBuilder.group({
       contentPartnerName: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0-9.\-_$/:\[\] ' !]*$/), Validators.maxLength(70)]),
       partnerCode: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0-9]*$/), Validators.maxLength(6)]),
-      websiteUrl: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0-9.\-_$/:\[\] ' !]*$/), Validators.maxLength(70)]),
+      websiteUrl: new FormControl('', [Validators.required, Validators.pattern(/^(https?|http):\/\/[^\s/$.?#].[^\s]*$/), Validators.maxLength(1024)]),
       description: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0-9,.\-_$/:\[\] ' !]*$/), Validators.maxLength(500)]),
       providerTips: this.formBuilder.array([]),
     })

diff --git a/...ome/routes/marketplace-provider/components/transformations/transformations.component.html b/...ome/routes/marketplace-provider/components/transformations/transformations.component.html
@@ -33,8 +33,8 @@
         <mat-icon
           *ngIf="!(transformationType === 'certificateTemplateUrl' && providerDetalsBeforUpdate['certificateTemplateUrl'])"
           class="removeFile" matTooltip="Remove File" (click)="removeFile()">close</mat-icon>
-        <div class="flex items-center justify-center">
-          <!-- <img src="/assets/icons/samplePdf.svg" alt="file" class="samplePdf"> -->
+        <div class="flex items-center justify-center gap-10">
+          <img class="certificatePreview" [src]="certificateUrl" alt="">
           <div class="flex flex-column gap-4 pdfDetails">
             <ng-container *ngIf="fileName">
               <span class="pdfName">{{fileName}}</span>

diff --git a/...ome/routes/marketplace-provider/components/transformations/transformations.component.scss b/...ome/routes/marketplace-provider/components/transformations/transformations.component.scss
@@ -184,6 +184,12 @@
   }
 }
 
+.certificatePreview {
+  width: 40%;
+  min-width: 180px;
+  max-width: 400px;
+}
+
 :host ::ng-deep .transformationEditor {
   .jsoneditor {
     height: 400px;

diff --git a/.../home/routes/marketplace-provider/components/transformations/transformations.component.ts b/.../home/routes/marketplace-provider/components/transformations/transformations.component.ts
@@ -35,6 +35,7 @@ export class TransformationsComponent implements OnInit, OnChanges {
   contentFileUploaded = false
   fileName = ''
   dialogRef: any
+  certificateUrl = ''
 
   //#region (transformation variables)
   transforamtionType = 'viaForm'
@@ -107,6 +108,8 @@ export class TransformationsComponent implements OnInit, OnChanges {
       trasformationJson = _.get(this.providerConfiguration, 'transformProgressJson[0].spec')
     } else if (_.get(this.providerDetalsBeforUpdate, 'certificateTemplateUrl')) {
       this.contentFileUploaded = true
+      this.certificateUrl = this.generatePublicUrl(_.get(this.providerDetalsBeforUpdate, 'certificateTemplateUrl'))
+      this.fileName = this.getImageName(_.get(this.providerDetalsBeforUpdate, 'certificateTemplateUrl'))
     }
 
     if (trasformationJson) {
@@ -126,6 +129,30 @@ export class TransformationsComponent implements OnInit, OnChanges {
     }
   }
 
+  generatePublicUrl(googleUrl: string): string {
+    const urlToReplace = 'https://storage.googleapis.com/igot'
+    let url = googleUrl
+    if (googleUrl && googleUrl.startsWith(urlToReplace)) {
+      const urlSplice = googleUrl.slice(urlToReplace.length).split('/')
+      url = `${environment.karmYogiPath}/content-store/${urlSplice.slice(1).join('/')}`
+    }
+    return url
+  }
+
+  getImageName(url: string): string {
+    if (url) {
+      const lastSlashIndex = url.lastIndexOf('/')
+      const imageWithPrefix = url.slice(lastSlashIndex + 1)
+      const firstUnderscoreIndex = imageWithPrefix.indexOf('_')
+      if (firstUnderscoreIndex !== -1) {
+        return imageWithPrefix.slice(firstUnderscoreIndex + 1)
+      }
+
+      return imageWithPrefix
+    }
+    return url
+  }
+
   ngOnInit(): void {
   }
 
@@ -141,6 +168,7 @@ export class TransformationsComponent implements OnInit, OnChanges {
       this.showSnackBar('Please upload a file less than 100 MB')
     } else {
       this.contentFile = file
+      this.certificateUrl = URL.createObjectURL(file)
       this.contentFileUploaded = true
       if (this.fileName.toLowerCase().endsWith('.csv')) {
         this.getCsvHeaders(file)
@@ -254,6 +282,9 @@ export class TransformationsComponent implements OnInit, OnChanges {
           }
         },
         error: (error: HttpErrorResponse) => {
+          if (this.contentFileUploaded) {
+            this.providerDetalsBeforUpdate['certificateTemplateUrl'] = ''
+          }
           const errmsg = _.get(error, 'error.params.errMsg', 'Something went worng, please try again later')
           this.showSnackBar(errmsg)
         },
@@ -434,16 +465,10 @@ export class TransformationsComponent implements OnInit, OnChanges {
   }
 
   uploadCertificate(formData: any) {
-    this.marketPlaceSvc.uploadCIOSContract(formData).subscribe({
+    this.marketPlaceSvc.uploadThumbNail(formData).subscribe({
       next: responce => {
         const createdUrl = _.get(responce, 'result.url')
-        const urlToReplace = 'https://storage.googleapis.com/igot'
-        let url = createdUrl
-        if (createdUrl.startsWith(urlToReplace)) {
-          const urlSplice = createdUrl.slice(urlToReplace.length).split('/')
-          url = `${environment.karmYogiPath}/content-store/${urlSplice.slice(1).join('/')}`
-        }
-        this.providerDetalsBeforUpdate['certificateTemplateUrl'] = url
+        this.providerDetalsBeforUpdate['certificateTemplateUrl'] = createdUrl
         this.fileName = ''
         this.upDateTransforamtionDetails()
         this.dialogRef.close()

diff --git a/...src/lib/routes/home/routes/marketplace-provider/components/via-api/via-api.component.scss b/...src/lib/routes/home/routes/marketplace-provider/components/via-api/via-api.component.scss
@@ -103,6 +103,21 @@
   min-height: 803px;
   padding: 24px;
 
+  .lable {
+      /* stylelint-enable */
+      font: 700 14px Lato;
+      /* stylelint-disable */
+      color: #212529;
+      width:  50%;
+    }
+
+    .colun {
+      /* stylelint-enable */
+      font: 700 14px Lato;
+      /* stylelint-disable */
+      color: #212529;
+      width: 5px;
+    }
 }
 
 .transformation-required {