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

Sprint 16 dev
sunbird-cb · Jul 23, 2024 · eb7b0d0 · eb7b0d0
2 parents 0f8c209 + 749a75f
commit eb7b0d0
Show file tree

Hide file tree

Showing 12 changed files with 185 additions and 51 deletions.
diff --git a/...-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html b/...-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html
@@ -211,7 +211,7 @@
         </ng-container>
     </div>
 
-    <div class="flex flex-col">
+    <div class="flex flex-col" *ngIf="content?.instructions">
         <ng-container *ngIf="skeletonLoader">
             <ws-widget-skeleton-loader [width]="'80px'" [height]="'16px'"
                 [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
@@ -237,6 +237,31 @@
         </ng-container>
     </div>
 
+    <div class="flex flex-col" *ngIf="content?.objectives">
+        <ng-container *ngIf="skeletonLoader">
+            <ws-widget-skeleton-loader [width]="'80px'" [height]="'16px'"
+                [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
+            <div class="flex flex-col gap-2 mt-4">
+                <ws-widget-skeleton-loader [width]="'80%'" [height]="'16px'"
+                    [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
+                <ws-widget-skeleton-loader [width]="'95%'" [height]="'16px'"
+                    [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
+                <ws-widget-skeleton-loader [width]="'65%'" [height]="'16px'"
+                    [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
+            </div>
+        </ng-container>
+        <ng-container *ngIf="!skeletonLoader">
+            <div class="mat-subheading-1 font-bold">{{ 'apptocsinglepage.objectives' | translate }}</div>
+            <div [ngClass]="{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}" #objectivesElem>
+                <span class="mob-text" [innerHtml]="handleCapitalize(content?.objectives)"></span>
+                <div class="ws-mat-default-text font-bold cursor-pointer text-sm" *ngIf="objectives.viewLess" (click)="objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess">&nbsp;{{ 'apptocsinglepage.viewLess' | translate }}</div>
+            </div>
+            <div class="ws-mat-default-text font-bold text-sm" *ngIf="objectives.ellipsis">
+                <span class="cursor-pointer" (click)="objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess">{{ 'apptocsinglepage.viewMore' | translate }}</span>
+            </div>
+        </ng-container>
+    </div>
+
     <ng-container *ngIf="skeletonLoader">
         <div class="flex flex-col gap-3">
             <ws-widget-skeleton-loader [width]="'120px'" [height]="'16px'"
@@ -313,6 +338,28 @@
         </div>
     </ng-container>
 
+    <ng-container *ngIf="!skeletonLoader && content?.searchTags">
+        <div class="flex flex-col" *ngIf="content?.searchTags.length">
+            <div class="mat-subheading-1">{{ 'userProfile.tags' | translate }}</div>
+            <ng-container *ngIf="content?.searchTags.length">
+                <div class="flex flex-wrap gap-2" [ngClass]="{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}" #searchTagElem>
+                    <ng-container *ngFor="let tag of content?.searchTags; let i = index">
+                        <div class="text-xs mob-text" >{{ handleCapitalize(tag) }}</div>
+                        <div class="flex items-center" *ngIf="content?.searchTags.length > (i + 1)">
+                            <span class="period"></span>
+                        </div>
+                    </ng-container>
+                </div>
+                <div class="flex items-center ws-mat-default-text underline cursor-pointer text-xs" *ngIf="searchTagsEllipsis && !viewMoreTags" (click)="viewMoreTags = !viewMoreTags">{{ 'apptocsinglepage.viewMore' | translate }}</div>
+                <div class="flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1" *ngIf="viewMoreTags"
+                (click)="viewMoreTags = !viewMoreTags">{{ 'apptocsinglepage.viewLess' | translate }}</div>
+            </ng-container>
+            <div class="flex flex-wrap gap-2" *ngIf="!content?.searchTags.length">
+                {{ 'userProfile.noTags' | translate }}
+            </div>
+        </div>
+    </ng-container>
+
     <div class="mobile-karma-points">
         <ws-widget-karma-points [btnCategory]="" [condition]="condition" (clickClaimKarmaPoints)="handleClickOfClaim($event)" [data]="kparray">
         </ws-widget-karma-points>
@@ -405,7 +452,7 @@
     </ng-container>
     <ng-container *ngIf="!skeletonLoader">
         <!-- <ng-container *ngIf="content?.averageRating"> -->
-            <div class="flex flex-col ratings-div gap-10" id="ratingsDiv">
+            <div class="flex flex-col ratings-div gap-10" id="ratingsDiv" *ngIf="showReviews">
                 <ws-widget-rating-summary [ratingSummary]="ratingSummaryProcessed"></ws-widget-rating-summary>
 
                 <div class="flex flex-col gap-3">

diff --git a/...ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts b/...ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts
@@ -99,13 +99,17 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
   @Input() config: any
   @Input() resumeData: any
   @Input() forPreview = false
+  @Input() showReviews = false
   @Input() batchData: any
   @Input() fromViewer = false
   @Input() selectedBatchData: any
   @Input() selectedTabValue = 0
   @ViewChild('summaryElem', { static: false }) summaryElem !: ElementRef
+  @ViewChild('objectivesElem', { static: false }) objectivesElem !: ElementRef
   @ViewChild('descElem', { static: false }) descElem !: ElementRef
   @ViewChild('tagsElem', { static: false }) tagsElem !: ElementRef
+  @ViewChild('searchTagElem', { static: false }) searchTagElem !: ElementRef
+
   primaryCategory = NsContent.EPrimaryCategory
   stripsResultDataMap!: { [key: string]: IStripUnitContentData }
   summary = {
@@ -116,7 +120,12 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
     ellipsis: false,
     viewLess: false,
   }
+  objectives = {
+    ellipsis: false,
+    viewLess: false,
+  }
   tagsEllipsis = false
+  searchTagsEllipsis = false
   competencySelected = ''
   ratingSummary: any
   authReplies: any
@@ -175,12 +184,15 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
     } else {
       this.isMobile = false
     }
-
     if (this.content && this.content.identifier) {
       this.fetchRatingSummary()
       this.loadCompetencies()
     }
 
+    if (this.content && this.content.contentId.includes('ext_')) {
+      this.loadCompetencies()
+    }
+
     if (this.content) {
       this.content['subTheme'] = this.getSubThemes()
     }
@@ -205,6 +217,9 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
           if (this.descElem.nativeElement.offsetHeight > 72) {
             this.description.ellipsis = true
           }
+          if (this.objectivesElem.nativeElement.offsetHeight > 72) {
+            this.objectives.ellipsis = true
+          }
         } else {
           if (this.summaryElem.nativeElement.offsetHeight > 48) {
             this.summary.ellipsis = true
@@ -213,11 +228,18 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
           if (this.descElem.nativeElement.offsetHeight > 48) {
             this.description.ellipsis = true
           }
+          if (this.objectivesElem.nativeElement.offsetHeight > 48) {
+            this.objectives.ellipsis = true
+          }
         }
 
         if (this.tagsElem && this.tagsElem.nativeElement.offsetHeight > 64) {
           this.tagsEllipsis = true
         }
+
+        if (this.searchTagElem && this.searchTagElem.nativeElement.offsetHeight > 64) {
+          this.searchTagsEllipsis = true
+        }
       },         500)
     }
 
@@ -555,13 +577,17 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
   }
 
   handleCapitalize(str: string, type?: string): string {
+    let tempStr = str
+    if (tempStr) {
+      tempStr = tempStr.split('_x000D_,').join('')
+    }
     let returnValue = ''
-    if (str && type === 'name') {
-      returnValue = str.split(' ').map(_str => {
+    if (tempStr && type === 'name') {
+      returnValue = tempStr.split(' ').map(_str => {
         return _str.charAt(0).toUpperCase() + _str.slice(1)
       }).join(' ')
     } else {
-      returnValue = str && (str.charAt(0).toUpperCase() + str.slice(1))
+      returnValue = tempStr && (tempStr.charAt(0).toUpperCase() + tempStr.slice(1))
     }
     return returnValue
   }

diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/content-toc.component.html b/library/ws-widget/collection/src/lib/_common/content-toc/content-toc.component.html
@@ -1,7 +1,7 @@
 <mat-tab-group (selectedTabChange)="handleTabChange($event)" #stickyMenu [class.sticky-mat-tabs]="sticky" [selectedIndex]="selectedTabIndex" [ngClass]="fromViewer ? '' : 'content-tabs'">
     <mat-tab label="{{ 'apptocsinglepage.about' | translate }}">
         <ws-widget-app-toc-about [fromViewer]="fromViewer" [pathSet]="pathSet" [content]="content" [tocStructure]="tocStructure" [config]="config"  [forPreview]="false" [sticky]="sticky" [selectedBatchData]="selectedBatchData" [selectedTabValue]="selectedTabIndex"
-        [resumeData]="resumeData" [batchData]="batchData" [skeletonLoader]="skeletonLoader" [condition]="condition" [kparray]="kparray"></ws-widget-app-toc-about>
+        [resumeData]="resumeData" [batchData]="batchData" [skeletonLoader]="skeletonLoader" [condition]="condition" [kparray]="kparray" [showReviews]="'true'"></ws-widget-app-toc-about>
     </mat-tab>
     <ng-container *ngIf="content?.children?.length">
         <mat-tab label="{{ 'apptocsinglepage.content' | translate }}" *ngIf="contentTabFlag">

diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
         "@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.58",
+        "@sunbird-cb/consumption": "0.0.59",
         "@sunbird-cb/design-system": "0.0.2",
         "@sunbird-cb/discussions-ui-v8": "2.1.3",
         "@sunbird-cb/micro-surveys": "^2.0.17",

diff --git a/.../app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html b/.../app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html
@@ -38,8 +38,8 @@
             <div class="banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold">{{ handleCapitalize(extContentReadData?.name) }}</div>
             <div class="text-sm sm:text-base source-text font-semibold break-words" #contentSource [ngClass]="{'sourceEllipsis': sourceEllipsis}" title="{{content?.source}}">
                 {{ 'cardcontentv2.by' | translate }} 
-                <span *ngIf="extContentReadData?.source">{{ extContentReadData?.source }}</span>
-                <span *ngIf="!extContentReadData?.source">{{ 'common.karmayogiBharat' | translate }}</span>
+                <span *ngIf="extContentReadData?.contentPartner?.contentPartnerName">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>
+                <span *ngIf="!extContentReadData?.contentPartner?.contentPartnerName">{{ 'common.karmayogiBharat' | translate }}</span>
             </div>
             </ng-container>
         </div>
@@ -80,8 +80,8 @@
     </div>
 </div>
 <div class="flex flex-row gap-6 fixed-width">
-    <div class="toc-content mt-8">
-        <div class="flex flex-col">
+    <div class="toc-content mt-8 mb-8">
+        <div class="flex flex-col mt-8 mb-8">
             <ng-container *ngIf="skeletonLoader">
                 <ws-widget-skeleton-loader [width]="'80px'" [height]="'16px'"
                     [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
@@ -95,31 +95,9 @@
                 </div>
             </ng-container>
             <ng-container *ngIf="!skeletonLoader">
-                <div class="mat-subheading-1">{{ 'apptocsinglepage.description' | translate }}</div>
-                <div class="desc"   >
-                    <span [innerHTML]="extContentReadData?.description" class="mob-text"></span>
-                </div>
-            </ng-container>
-        </div>
-        <div class="flex flex-col mt-8">
-            <ng-container *ngIf="skeletonLoader">
-                <ws-widget-skeleton-loader [width]="'80px'" [height]="'16px'"
-                    [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
-                <div class="flex flex-col gap-2 mt-4">
-                    <ws-widget-skeleton-loader [width]="'80%'" [height]="'16px'"
-                        [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
-                    <ws-widget-skeleton-loader [width]="'95%'" [height]="'16px'"
-                        [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
-                    <ws-widget-skeleton-loader [width]="'65%'" [height]="'16px'"
-                        [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
-                </div>
-            </ng-container>
-            <ng-container *ngIf="!skeletonLoader">
-                <div class="mat-subheading-1">{{ 'apptochome.objectives' | translate }}</div>
-                <div class="desc"   >
-                    <span [innerHTML]="replaceText(extContentReadData?.objectives, '_x000D_,')" class="mob-text"></span>
-                </div>
+                <ws-widget-app-toc-about [content]="extContentReadData"></ws-widget-app-toc-about>
             </ng-container>
+
         </div>
     </div>
     <div class="right-container">
@@ -145,16 +123,16 @@
                 </div>
                 <div class="text-sm source-text font-semibold break-words" #contentSource [ngClass]="{'sourceEllipsis': sourceEllipsis}" title="{{content?.source}}">
                     {{ 'cardcontentv2.by' | translate }} 
-                    <span *ngIf="extContentReadData?.source">{{ extContentReadData?.source }}</span>
-                    <span *ngIf="!extContentReadData?.source">{{ 'common.karmayogiBharat' | translate }}</span>
+                    <span *ngIf="extContentReadData?.contentPartner?.contentPartnerName">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>
+                    <span *ngIf="!extContentReadData?.contentPartner?.contentPartnerName">{{ 'common.karmayogiBharat' | translate }}</span>
                 </div>
                 </div>
             </div>
             </div>
         </ng-container>
 
         <div class="flex flex-col gap-4 p-5 border-bottom">
-            <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}'">
+            <!-- <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>
@@ -163,15 +141,15 @@
                                             [progress]="userExtCourseEnroll.progress"
                                             [progressType]="'percentage'" [customClassName]="'viewer-progress'">
                                         </ws-widget-content-progress>
-              </ng-container>  
+              </ng-container>   -->
             <ng-container *ngIf="(userExtCourseEnroll | json) === '{}'">
                 <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 flex-middle resume" target="_blank" [href]="redirectToContent(extContentReadData)">
+                <a class="flex action-button justify-center flex-middle resume" target="_blank" [href]="extContentReadData?.redirectUrl">
                   <ng-container >{{ 'apptochome.redirect' | translate }}
                     <mat-icon class="ml-2 ws-mat-white-text">open_in_new</mat-icon>
                   </ng-container>
@@ -192,7 +170,7 @@
         <div>
             <div class="flex flex-col kpi-values items-center gap-2" *ngIf="extContentReadData?.duration > 0">
                 <img src="/assets/icons/toc/timer.svg" width="20px" alt="web image" />
-                <div class="text-xs">{{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}</div>
+                <div class="text-xs">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>
             </div>
         </div>
         </div>

diff --git a/...ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.ts b/...ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.ts
@@ -118,7 +118,7 @@ export class AppTocCiosHomeComponent implements OnInit, AfterViewInit {
     if (enrollRes && enrollRes.result  && Object.keys(enrollRes.result).length > 0) {
       this.userExtCourseEnroll = enrollRes.result
       this.loader.changeLoad.next(false)
-      this.snackBar.open('Successfully enrolled to the content')
+      this.snackBar.open('Successfully enrolled in the course.')
     } else {
       this.loader.changeLoad.next(false)
       this.snackBar.open('Unable to get the enrolled details')

diff --git a/project/ws/app/src/lib/routes/see-all/components/see-all-home/see-all-home.component.html b/project/ws/app/src/lib/routes/see-all/components/see-all-home/see-all-home.component.html
@@ -8,9 +8,16 @@
         <div class="flex flex-row flex-wrap content-container" infinite-scroll [infiniteScrollDistance]="scrollDistance"
             [infiniteScrollThrottle]="throttle" (scrolled)="onScrollEnd()"
             *ngIf="tabResults.length === 0">
-            <div class="mr-2 mb-5" *ngFor="let c of contentDataList">
-                <ws-widget-card-content-v2 [widgetData]="c.widgetData"> </ws-widget-card-content-v2>
-            </div>
+            <ng-container *ngIf="!isCoisContent">
+                <div class="mr-2 mb-5" *ngFor="let c of contentDataList">
+                    <ws-widget-card-content-v2 [widgetData]="c.widgetData"> </ws-widget-card-content-v2>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="isCoisContent">
+                <div class="mr-2 mb-5" *ngFor="let c of contentDataList">
+                    <sb-uic-card-portrait-ext [widgetData]="c.widgetData" (contentData)="takeExtClickAction($event)"></sb-uic-card-portrait-ext>
+                </div>
+            </ng-container>
         </div>
         <div class="flex flex-row flex-wrap content-container"
             *ngIf="tabResults.length > 0">