Merge branch 'master' into 7928-collections-overflow-resources-view-fix

package.json

@@ -3,8 +3,8 @@
   "license": "AGPL-3.0",
   "version": "0.16.10",
   "myplanet": {
-    "latest": "v0.21.40",
-    "min": "v0.20.40"
+    "latest": "v0.21.42",
+    "min": "v0.20.42"
   },
   "scripts": {
     "ng": "ng",

src/app/community/community.component.html

@@ -72,7 +72,7 @@ <h3 style="text-align: right; margin-right: 0.5rem;">
           <planet-teams-reports [reports]="reports" [editable]="isCommunityLeader && !planetCode" [team]="team" (reportsChanged)="dataChanged()"></planet-teams-reports>
         </mat-tab>
         <mat-tab i18n-label label="Calendar" *ngIf="deviceType !== deviceTypes.DESKTOP">
-          <planet-calendar [resizeCalendar]="resizeCalendar" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
+          <planet-calendar [resizeCalendar]="resizeCalendar" [type]="'community'" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
         </mat-tab>
       </mat-tab-group>
     </div>

src/app/community/community.scss

@@ -35,6 +35,27 @@ planet-calendar {
   overflow-y: auto;
 }
 
+.calendar-legend {
+  padding-top: 10px;
+  text-align: right;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.calendar-legend .legend-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.calendar-legend .legend-color {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  border-radius: 4px;
+}
+
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -60,6 +81,6 @@ mat-tab-group, mat-tab {
   padding-top: 0.5rem;
 }
 
-.toggle-button{
+.toggle-button {
   margin-bottom: 1rem;
 }

src/app/courses/courses.service.ts

@@ -203,6 +203,7 @@ export class CoursesService {
 
   courseResignAdmission(courseId, type, courseTitle?) {
     const title = courseTitle ? courseTitle : this.getCourseNameFromId(courseId);
+    const truncatedTitle = title.length > 180 ? `${title.slice(0, 180)}...` : title;
     const courseIds: any = [ ...this.userService.shelf.courseIds ];
     if (type === 'resign') {
       const myCourseIndex = courseIds.indexOf(courseId);
@@ -211,8 +212,9 @@ export class CoursesService {
       courseIds.push(courseId);
     }
     return this.userService.updateShelf(courseIds, 'courseIds').pipe(map((res) => {
-      const admissionMessage = type === 'resign' ? $localize`${title} successfully removed from myCourses` :
-        $localize`${title} added to your dashboard`;
+      const admissionMessage = type === 'resign'
+        ? $localize`${truncatedTitle} successfully removed from myCourses`
+        : $localize`${truncatedTitle} added to your dashboard`;
       this.planetMessageService.showMessage(admissionMessage);
       return res;
     }));

src/app/courses/progress-courses/courses-progress-chart.component.html

@@ -41,6 +41,6 @@
   <div class="errors" *ngFor="let set of sets">
     <div>{{set.total}}</div>
     <planet-avatar *ngIf="showAvatar" class="cursor-pointer" (click)="labelClick(set)" [username]="set.label" [planetCode]="set.planetCode" imgClass="profile-image-large"></planet-avatar>
-    <div class="wrap-content cursor-pointer" (click)="labelClick(set)" i18n-matTooltip [matTooltip]="set.label?.length > 3 ? set.label : null "><p>{{set.label}}</p></div>
+    <div class="wrap-content cursor-pointer" (click)="labelClick(set)" i18n-matTooltip [matTooltip]="set.label && set.label.length > 3 ? (set.label.length > 180 ? (set.label | slice:0:180) + '...' : set.label) : null"><p>{{set.label}}</p></div>
   </div>
 </div>

src/app/courses/progress-courses/courses-progress-learner.component.html

@@ -7,7 +7,7 @@
     <span i18n>Courses: myProgress</span>
   </mat-toolbar>
   <div class="view-container view-full-height">
-    <planet-courses-progress-chart *ngIf="chartData?.length; else noProgress" [inputs]="chartData" [height]="yAxisLength" [showTotals]="false" (changeData)="changeData($event)">
+    <planet-courses-progress-chart *ngIf="chartData?.length; else noProgress" [inputs]="chartData" [height]="yAxisLength" [showTotals]="false" (clickAction)="handleCourseClick($event)" (changeData)="changeData($event)">
     </planet-courses-progress-chart>
     <ng-template #noProgress i18n>No Progress record available</ng-template>
   </div>

src/app/courses/progress-courses/courses-progress-learner.component.ts

@@ -62,6 +62,7 @@ export class CoursesProgressLearnerComponent implements OnInit, OnDestroy {
   createChartData(courses = [], submissions) {
     return courses.map((course: any) => ({
       label: course.doc.courseTitle,
+      courseId: course._id,
       items: this.courseBySteps(
         course,
         submissions.filter(submission => submission.parentId.indexOf(course._id) > -1)
@@ -106,4 +107,10 @@ export class CoursesProgressLearnerComponent implements OnInit, OnDestroy {
 
   changeData(event) {}
 
+  handleCourseClick(event: any) {
+    if (event.courseId) {
+      this.router.navigate([ '/courses', 'view', event.courseId ]);
+    }
+  }
+
 }

src/app/exams/exams-view.component.ts

@@ -279,13 +279,22 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
 }
 
   setAnswer(event, option) {
-    this.answer.setValue(Array.isArray(this.answer.value) ? this.answer.value : []);
-    const value = this.answer.value;
-    if (event.checked === true) {
-      value.push(option);
-    } else if (event.checked === false) {
-      value.splice(value.indexOf(option), 1);
+    const value = this.answer.value || [];
+
+
+    if (event.checked) {
+      if (!value.includes(option)) {
+        value.push(option);
+      }
+    } else {
+      const index = value.indexOf(option);
+      if (index > -1) {
+        value.splice(index, 1);
+      }
     }
+
+    this.answer.setValue(value);
+    this.answer.updateValueAndValidity();
     this.checkboxState[option.id] = event.checked;
   }
 
@@ -343,9 +352,14 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
 
   answerValidator(ac: AbstractControl) {
     if (typeof ac.value === 'string') {
-      return CustomValidators.required(ac);
+      return ac.value.trim() ? null : { required: true };
     }
-    return ac.value !== null ? null : { required: true };
+
+    if (Array.isArray(ac.value)) {
+      return ac.value.length > 0 ? null : { required: true };
+    }
+
+    return ac.value !== null && ac.value !== undefined ? null : { required: true };
   }
 
   setViewAnswerText(answer: any) {

src/app/shared/calendar.component.ts

@@ -16,6 +16,14 @@ import { addDateAndTime, styleVariables } from './utils';
   selector: 'planet-calendar',
   template: `
     <full-calendar #calendar [options]="calendarOptions"></full-calendar>
+    <div class="calendar-legend" *ngIf="showLegend">
+      <div *ngFor="let legend of eventLegend">
+        <div class="legend-item" *ngIf="!legend.type || legend.type === type">
+          <div class="legend-color" [style.backgroundColor]="legend.color"></div>
+          <span>{{ legend.label }}</span>
+        </div>
+      </div>
+    </div>
   `
 })
 export class PlanetCalendarComponent implements OnInit, OnChanges {
@@ -25,6 +33,7 @@ export class PlanetCalendarComponent implements OnInit, OnChanges {
   @Input() link: any = {};
   @Input() sync: { type: 'local' | 'sync', planetCode: string };
   @Input() editable = true;
+  @Input() type = '';
 
   @Input() header?: any = {
     left: 'title',
@@ -47,6 +56,12 @@ export class PlanetCalendarComponent implements OnInit, OnChanges {
   dbName = 'meetups';
   meetups: any[] = [];
   tasks: any[] = [];
+  showLegend = true;
+  eventLegend = [
+    { color: styleVariables.primary, label: 'Event' },
+    { color: 'orange', label: 'Uncompleted Task', type: 'team' },
+    { color: 'grey', label: 'Completed Task', type: 'team' }
+  ];
 
   calendarOptions: CalendarOptions = {
     initialView: 'dayGridMonth',

src/app/teams/teams-view.component.html

@@ -131,7 +131,7 @@ <h3 *ngIf="mode==='services'" class="margin-lr-3 ellipsis-title">{{configuration
           <ng-template mat-tab-label>
             <ng-container i18n>Calendar</ng-container>
           </ng-template>
-          <planet-calendar *ngIf="calendarTab.isActive" [link]="{ teams: teamId }" [sync]="{ type: team.teamType, planetCode: team.teamPlanetCode }" [editable]="userStatus === 'member'"></planet-calendar>
+          <planet-calendar *ngIf="calendarTab.isActive" [type]="'team'" [link]="{ teams: teamId }" [sync]="{ type: team.teamType, planetCode: team.teamPlanetCode }" [editable]="userStatus === 'member'"></planet-calendar>
         </mat-tab>
         <mat-tab *ngIf="mode!=='team'">
           <ng-template mat-tab-label>