Merge branch 'cbrelease-4.0.1' of https://github.com/sunbird-cb/sunbi…

…rd-cb-portal into logout
sunbird-cb · May 25, 2022 · f56c260 · f56c260
2 parents 7a0ab63 + 38bbaf4
commit f56c260
Show file tree

Hide file tree

Showing 41 changed files with 911 additions and 47 deletions.
diff --git a/...ary/ws-widget/collection/src/lib/_common/content-progress/content-progress.component.scss b/...ary/ws-widget/collection/src/lib/_common/content-progress/content-progress.component.scss
@@ -12,5 +12,5 @@
 }
 
 ::ng-deep.theme-igot.day-mode .mat-progress-bar-buffer {
-  background-color: #EDEDED;
+  background-color: #EDEDED !important;
 }
diff --git a/library/ws-widget/collection/src/lib/_common/rating-summary/rating-summary.component.html b/library/ws-widget/collection/src/lib/_common/rating-summary/rating-summary.component.html
@@ -11,7 +11,7 @@
         <div class="margin-top-s mat-body-1 ws-mat-black60-text">
             {{ ratingSummary?.total_number_of_ratings | pipeCountTransform }} ratings</div>
     </div>
-    <div class="flex items-center margin-bottom-xs" *ngFor="let rating of ratingSummary?.breakDown">
+    <div class="flex items-center margin-bottom-xs" *ngFor="let rating of ratingSummary?.breakDown.slice().reverse()">
         <div class="mat-body-2 bold-imp margin-right-m">{{rating.key}} star</div>
         <div class="flex items-center rating-progress">
             <mat-progress-bar [mode]="'determinate'" [matTooltip]="rating?.percent + ' %'"

diff --git a/library/ws-widget/collection/src/lib/_common/rating-summary/rating-summary.component.ts b/library/ws-widget/collection/src/lib/_common/rating-summary/rating-summary.component.ts
@@ -18,10 +18,10 @@ export class RatingSummaryComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges() {
-     if (this.ratingSummary && this.ratingSummary.breakDown) {
-      this.ratingSummary.breakDown = this.ratingSummary.breakDown.reverse()
-      // console.log('this.ratingSummary.breakDown', this.ratingSummary.breakDown)
-    }
+    //  if (this.ratingSummary && this.ratingSummary.breakDown) {
+    //   this.ratingSummary.breakDownReverse = this.ratingSummary.breakDown.reverse()
+    //   console.log('this.ratingSummary.breakDownReverse', this.ratingSummary.breakDownReverse)
+    // }
   }
 
   getRatingIcon(ratingIndex: number, avg: number): 'star' | 'star_border' | 'star_half' {

diff --git a/library/ws-widget/collection/src/lib/_services/widget-content.model.ts b/library/ws-widget/collection/src/lib/_services/widget-content.model.ts
@@ -19,7 +19,8 @@ export namespace NsContent {
     appIcon: string
     artifactUrl: string
     averageRating?: any
-    batches: any
+    // this will be used to content form enrollment user list
+    batch?: any
     body?: string
     certificationList?: IRelatedContentMeta[]
     certificationStatus?: TCertificationStatus
@@ -346,6 +347,7 @@ export namespace NsContent {
     MTF_QUESTION = 'MTF Question',
     MULTIPLE_CHOICE_QUESTION = 'Multiple Choice Question',
     SINGLE_CHOICE_QUESTION = 'Single Choice Question',
+    MANDATORY_COURSE_GOAL = 'Mandatory Course Goal',
     // following will not be available soon
     /**
      * @deprecated The type should not be used

diff --git a/library/ws-widget/collection/src/lib/_services/widget-content.service.ts b/library/ws-widget/collection/src/lib/_services/widget-content.service.ts
@@ -267,8 +267,9 @@ export class WidgetContentService {
       return content
     }
     if (
-      content.primaryCategory === NsContent.EPrimaryCategory.PROGRAM &&
-      !(content.artifactUrl && content.artifactUrl.length)
+      (content.primaryCategory === NsContent.EPrimaryCategory.PROGRAM &&
+      !(content.artifactUrl && content.artifactUrl.length)) ||
+      content.primaryCategory === NsContent.EPrimaryCategory.MANDATORY_COURSE_GOAL
     ) {
       const child = content.children[0]
       return this.getFirstChildInHierarchy(child)

diff --git a/library/ws-widget/collection/src/lib/card-content/card-content.component.html b/library/ws-widget/collection/src/lib/card-content/card-content.component.html
@@ -676,6 +676,184 @@ <h3 class="ws-mat-warn-text">Reply</h3>
         </button>
 
 
+        <mat-card-content class="min-top">
+          <a (click)="raiseTelemetry()" [routerLink]="(widgetData.content | pipeContentRoute).url"
+            [queryParams]="(widgetData.content | pipeContentRoute).queryParams" [state]="widgetData?.stateData"
+            role="link" i18n-aria-label>
+
+            <div class="text-gray-time complexity flex-between flex-center">
+              <!-- <div *ngIf="widgetData.content.complexityLevel" i18n-title title="Complexity Level">
+                {{ widgetData.content.complexityLevel }}
+              </div> -->
+              <div *ngIf="showIsMode" i18n i18n-title title="Newly Added"
+                class="mode-tag px-2 ws-mat-accent-background">
+                Newly Added
+              </div>
+              <!-- <div *ngIf="widgetData.content.duration" class="duration">
+                <mat-icon>access_time</mat-icon>
+                <span class="time-text">{{ widgetData.content.duration | pipeDurationTransform: 'hms' }}</span>
+              </div> -->
+              <!-- <div *ngIf="!widgetData.content.duration" class="duration">
+                <mat-icon>access_time</mat-icon>
+                <span class="time-text">0.0m</span>
+              </div> -->
+            </div>
+
+            <div class="course_widget">
+              <mat-icon class="mat-icon main_icon  ws-mat-default-text margin-right-xs">video_library</mat-icon>
+              <ws-widget-display-content-type i18n-title title="Content Type" *ngIf="widgetData.content?.primaryCategory"
+                class="ws-mat-black60-text font-normal mat-caption text-uppercase" [displayContentType]="widgetData.content?.primaryCategory==='Course Unit'
+                ?'Module'
+                :widgetData.content?.primaryCategory">
+
+              </ws-widget-display-content-type>
+            </div>
+
+            <div [id]="'m-c-'+ widgetData.content?.identifier"
+              class="mat-subheading-1 title-text ws-mat-text-block-fade-gradient">
+              {{ widgetData.content.name }}
+            </div>
+            <div class="mat-body-2 ws-mat-primary-text description-text ws-mat-text-block-fade-gradient mb-2">
+              {{ widgetData.content.description | pipeHtmlTagRemoval }}
+
+              <!-- {{widgetData.content | json}} -->
+              <!-- {{widgetData.content.sourceName}} -->
+            </div>
+            <div class="mat-body-2  mb-5" *ngIf="widgetData?.content?.batch?.endDate">
+              Deadline : {{ widgetData?.content?.batch?.endDate | date: "d MMM yyyy" }}
+            </div>
+          </a>
+          <div class="mt-4 mb-2 flex justify-between items-center absolute bottom-0 left-0 right-0 px-3 py-2">
+            <!-- <ws-widget-display-content-type
+              i18n-title
+              title="Content Type"
+              *ngIf="widgetData.content?.displayContentType"
+              class="ws-mat-primary-text font-normal"
+              [displayContentType]="widgetData.content?.displayContentType"
+            >
+            </ws-widget-display-content-type> -->
+
+              <!-- <ws-widget-display-content-type i18n-title title="Content Type" *ngIf="widgetData.content?.primaryCategory"
+              class="ws-mat-primary-text font-normal" [displayContentType]="widgetData.content?.primaryCategory==='Course Unit'
+              ?'Module'
+              :widgetData.content?.primaryCategory">
+            </ws-widget-display-content-type> -->
+
+            <div class="flex flex-row justify-between w-full">
+              <div *ngIf="widgetData.content.duration" class="duration flex ">
+                <!-- <mat-icon>access_time</mat-icon> -->
+                <span class="time-text ws-mat-black60-text">{{ widgetData.content.duration | pipeDurationTransform: 'hms' }}</span>
+              </div>
+
+              <div *ngIf="widgetData.content?.completionStatus == 2" class="flex">
+                <p class="margin-remove-bottom">100%</p>
+              </div>
+              <div *ngIf="widgetData.content?.completionStatus < 2" class="flex">
+                <p class="margin-remove-bottom"> {{ widgetData.content?.completionPercentage }} %</p>
+                <!-- <p *ngIf="widgetData.content?.completionPercentage > 0" class="margin-remove-bottom"> {{ widgetData.content?.completionPercentage }} %</p> -->
+              </div>
+
+
+            </div>
+              <!-- <div *ngIf="!widgetData.content.duration" class="duration">
+                <mat-icon>access_time</mat-icon>
+                <span class="time-text">0.0m</span>
+              </div> -->
+
+            <div class="flex items-center">
+              <!-- <ng-container [ngTemplateOutlet]="rating"></ng-container>
+              <button type="button" mat-icon-button i18n-aria-label [matMenuTriggerFor]="cardMenu">
+                <mat-icon>more_vertical</mat-icon>
+
+              </button> -->
+              <!-- <mat-icon class="mat-icon ws-mat-black60-text">share</mat-icon> -->
+            </div>
+          </div>
+          <ng-container *ngIf="widgetData.content?.completionStatus == 2">
+            <ws-widget-content-progress class="progress-bar" *ngIf="widgetData.content?.identifier"
+              [contentId]="widgetData.content?.identifier" [progress]="100"
+              [progressType]="'percentage'">
+            </ws-widget-content-progress>
+          </ng-container>
+          <ng-container *ngIf="widgetData.content?.completionStatus < 2">
+            <ws-widget-content-progress class="progress-bar" *ngIf="widgetData.content?.identifier"
+            [contentId]="widgetData.content?.identifier" [progress]="widgetData.content?.completionPercentage"
+            [progressType]="'percentage'">
+          </ws-widget-content-progress>
+          </ng-container>
+
+        </mat-card-content>
+      </ng-container>
+      <ng-container *ngIf="isCardFlipped">
+        <div class="flex items-center">
+          <h2 class="mat-subheading-2 flex-1 min-w-0 margin-remove-bottom" i18n>Reason</h2>
+          <button mat-icon-button (click)="isCardFlipped = false">
+            <mat-icon>close</mat-icon>
+          </button>
+        </div>
+        <p class="text-justify mat-body-1">
+          {{ widgetData.content.reason }}
+        </p>
+      </ng-container>
+
+
+
+    </div>
+  </mat-card>
+</ng-template>
+
+<ng-template #cardStandardGoals>
+  <mat-card class="card-standard-container goals mr-6" [ngClass]="{
+      greyOut:
+        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion
+          ? true
+          : widgetData?.intranetMode === 'greyOut' && showIntranetContent
+    }" (click)="(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()">
+    <!-- <ws-widget-content-progress
+      class="progress-bar"
+      *ngIf="widgetData.content?.identifier"
+      [contentId]="widgetData.content?.identifier"
+    ></ws-widget-content-progress> -->
+    <div class="display-contents" [ngClass]="{
+        disableClick:
+          widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion
+            ? true
+            : widgetData?.intranetMode === 'greyOut' && showIntranetContent
+      }">
+      <ng-container *ngIf="!isCardFlipped">
+        <div class="status-danger" role="note" i18n-aria-label aria-label="Content expired or deleted" i18n-matTooltip
+          matTooltip="Content may be expired or deleted" *ngIf="!isLiveOrMarkForDeletion"></div>
+        <div class="status-danger" role="note" i18n-aria-label aria-label="Intranet content" i18n-matTooltip
+          matTooltip="Available only in Company's network"
+          *ngIf="widgetData?.intranetMode === 'greyOut' && showIntranetContent"></div>
+        <!-- <a (click)="raiseTelemetry()" [routerLink]="(widgetData.content | pipeContentRoute).url"
+          [queryParams]="(widgetData.content | pipeContentRoute).queryParams" class="rounded-t" role="link"
+          aria-label="Content" i18n-aria-label="Content | Click to view"> -->
+        <div style="position: relative; z-index: 1;">
+          <img mat-card-image [src]="widgetData.content.posterImage" loading="lazy" style="position: absolute; z-index: 2;"
+            class="card-img ws-mat-primary-lite-background" [wsUtilsDefaultThumbnail]="defaultThumbnail"
+            [alt]="widgetData.content.name" />
+
+            <!-- image overlay box-->
+            <div class="course_logo_box">
+              <img [src]="widgetData.content.creatorLogo" class="source-icon" [wsUtilsDefaultThumbnail]="defaultSLogo"
+              [alt]="(widgetData.content.sourceName + '_' + widgetData.content.identifier)" />
+              <!-- <p class="mat-subheading-1 margin-remove">IGOT</p> -->
+            </div>
+          <div class="source-div" style="display: none;">
+            <!-- [src]="sourseIcon(widgetData.content.sourceName)" -->
+            <img [src]="widgetData.content.creatorLogo" class="source-icon" [wsUtilsDefaultThumbnail]="defaultSLogo"
+              [alt]="(widgetData.content.sourceName + '_' + widgetData.content.identifier)" />
+            <!-- [title]="widgetData.content.sourceName" -->
+          </div>
+        </div>
+        <!-- </a> -->
+        <button *ngIf="showFlip" class="detail-button ws-mat-primary-lite-background-op30" mat-icon-button
+          (click)="isCardFlipped = true" aria-label="Details" i18n-aria-label="Details | Click to see details">
+          <mat-icon>flip_to_back</mat-icon>
+        </button>
+
+
         <mat-card-content class="min-top">
           <a (click)="raiseTelemetry()" [routerLink]="(widgetData.content | pipeContentRoute).url"
             [queryParams]="(widgetData.content | pipeContentRoute).queryParams" [state]="widgetData?.stateData"
@@ -719,6 +897,9 @@ <h3 class="ws-mat-warn-text">Reply</h3>
               <!-- {{widgetData.content | json}} -->
               <!-- {{widgetData.content.sourceName}} -->
             </div>
+            <div class="mat-body-2 ws-mat-primary-text description-text ws-mat-text-block-fade-gradient mb-10">
+              End date : {{ widgetData?.batch?.end | date: "MMM yyyy" }}
+            </div>
           </a>
           <div class="mt-4 mb-2 flex justify-between items-center absolute bottom-0 left-0 right-0 px-3 py-2">
             <!-- <ws-widget-display-content-type
@@ -881,6 +1062,9 @@ <h2 class="mat-subheading-2 flex-1 min-w-0 margin-remove-bottom" i18n>Reason</h2
           </ul>
         </div>
         <!-- <div class="flex"> -->
+          <div *ngIf="widgetData?.content?.batch?.endDate">
+            <p>Deadline - {{widgetData.content.batch?.endDate | date: "d MMM yyyy"}}</p>
+          </div>
           <div class="tags" *ngIf="widgetData.content.keywords && widgetData.content.keywords.length > 0">
             <ul class="mat-caption margin-remove-top padding-remove tag_list">
               <li *ngFor="let tag of widgetData.content.keywords">

diff --git a/library/ws-widget/collection/src/lib/card-content/card-content.component.scss b/library/ws-widget/collection/src/lib/card-content/card-content.component.scss
@@ -424,6 +424,8 @@
     position: relative;
     overflow: hidden;
     height: $description-line-count * $description-line-height;
+    white-space: normal;
+    text-overflow: ellipsis;
     // line-height: $description-line-height;
   }
 }

diff --git a/...ws-widget/collection/src/lib/content-strip-multiple/content-strip-multiple.component.html b/...ws-widget/collection/src/lib/content-strip-multiple/content-strip-multiple.component.html
@@ -83,7 +83,7 @@ <h3 i18n>View All</h3>
             </ws-utils-horizontal-scroller>
             </ng-container>
             <ng-container *ngIf="key !== 'continueLearning'" >
-              <ws-utils-horizontal-scroller *ngIf="getLength(stripsResultDataMap[key]) && showAccordion(key)">
+              <ws-utils-horizontal-scroller *ngIf="getLength(stripsResultDataMap[key]) && showAccordion(key)" [loadStatus]="'done'">
                 <ng-container *ngFor="let widget of stripsResultDataMap[key]?.widgets; trackBy: tracker" [wsResolverWidget]="widget"></ng-container>
               </ws-utils-horizontal-scroller>
             </ng-container>