Merge pull request #1999 from intersective/prerelease

Release 2.2.1.6
intersective · Oct 27, 2023 · faf72e0 · faf72e0
2 parents 1f1f9aa + 4e0c560
commit faf72e0
Show file tree

Hide file tree

Showing 22 changed files with 253 additions and 117 deletions.
diff --git a/projects/v3/src/app/components/activity/activity.component.html b/projects/v3/src/app/components/activity/activity.component.html
@@ -18,27 +18,40 @@ <h1 id="activity-name" *ngIf="activity.name" class="headline-2 activity-name">
     <app-description *ngIf="activity.description" class="body-2" [content]="activity.description"></app-description>
   </div>
 
-  <ion-item class="headline-4 task-header" lines="none" i18n>{activity.tasks.length, plural, =1 {Task} other {Tasks}}</ion-item>
+  <ng-container *ngIf="isForTeamOnly === false; else notInATeamAndForTeamOnly">
+    <ion-item class="headline-4 task-header" lines="none" i18n>{activity.tasks.length, plural, =1 {Task} other {Tasks}}</ion-item>
+    <app-list-item class="focusable"
+      role="button"
+      tabindex="0"
+      *ngFor="let task of (activity?.tasks || []); let i = index"
+      lines="full"
+      subtitle1Color="grey-50"
+      (click)="goto(task)"
+      (keydown)="goto(task, $event)"
+      [title]="task.name"
+      [subtitle1]="subtitle(task)"
+      [label]="label(task)"
+      [labelColor]="labelColor(task)"
+      [leadingIconPulsing]="assessmentNotSubmitted(task) && task.isDueToday"
+      [leadingIcon]="leadIcon(task)"
+      [active]="currentTask && currentTask.type === task.type && currentTask.id === task.id"
+      [endingIcon]="endingIcon(task)"
+      [endingIconColor]="endingIconColor(task)"
+    ></app-list-item>
+  </ng-container>
+</ng-container>
 
+<ng-template #notInATeamAndForTeamOnly>
+  <ion-item class="headline-4 task-header" lines="none" i18n>{activity.tasks.length, plural, =1 {Task} other
+    {Tasks}}</ion-item>
   <app-list-item class="focusable"
     role="button"
     tabindex="0"
-    *ngFor="let task of (activity?.tasks || []); let i = index"
     lines="full"
     subtitle1Color="grey-50"
-    (click)="goto(task)"
-    (keydown)="goto(task, $event)"
-    [title]="task.name"
-    [subtitle1]="subtitle(task)"
-    [label]="label(task)"
-    [labelColor]="labelColor(task)"
-    [leadingIconPulsing]="assessmentNotSubmitted(task) && task.isDueToday"
-    [leadingIcon]="leadIcon(task)"
-    [active]="currentTask && currentTask.type === task.type && currentTask.id === task.id"
-    [endingIcon]="endingIcon(task)"
-    [endingIconColor]="endingIconColor(task)"
-  ></app-list-item>
-</ng-container>
+    title="For team members only"></app-list-item>
+</ng-template>
+
 
 <ng-template #noActivity>
   <div *ngIf="!activity" class="ion-padding"
@@ -49,3 +62,5 @@ <h1 id="activity-name" *ngIf="activity.name" class="headline-2 activity-name">
     <ion-skeleton-text animated style="width: 90%"></ion-skeleton-text>
   </div>
 </ng-template>
+
+
diff --git a/projects/v3/src/app/components/activity/activity.component.ts b/projects/v3/src/app/components/activity/activity.component.ts
@@ -1,6 +1,6 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { SharedService } from '@v3/app/services/shared.service';
-import { Activity, Task } from '@v3/services/activity.service';
+import { Activity, ActivityService, Task } from '@v3/services/activity.service';
 import { Submission } from '@v3/services/assessment.service';
 import { NotificationsService } from '@v3/services/notifications.service';
 import { BrowserStorageService } from '@v3/services/storage.service';
@@ -11,17 +11,35 @@ import { UtilsService } from '@v3/services/utils.service';
   templateUrl: './activity.component.html',
   styleUrls: ['./activity.component.scss'],
 })
-export class ActivityComponent {
+export class ActivityComponent implements OnChanges {
   @Input() activity: Activity;
   @Input() currentTask: Task;
   @Input() submission: Submission;
   @Output() navigate = new EventEmitter();
+
+  // when user isn't in a team & all tasks are found to be team tasks, emit this event
+  // true: user not allowed to access
+  // false: at least one non-team task
+  @Output() cannotAccessTeamActivity = new EventEmitter();
+  isForTeamOnly: boolean = false;
+
   constructor(
     private utils: UtilsService,
     private storageService: BrowserStorageService,
     private notificationsService: NotificationsService,
     private sharedService: SharedService,
-  ) { }
+    private activityService: ActivityService
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.activity?.currentValue?.tasks?.length > 0) {
+      this.activityService.nonTeamActivity(changes.activity.currentValue?.tasks).then((nonTeamActivity) => {
+        this.isForTeamOnly = !nonTeamActivity;
+        this.cannotAccessTeamActivity.emit(this.isForTeamOnly);
+      });
+    }
+  }
+
 
   /**
    * Task icon type

diff --git a/projects/v3/src/app/components/fast-feedback/fast-feedback.component.html b/projects/v3/src/app/components/fast-feedback/fast-feedback.component.html
@@ -45,7 +45,7 @@
           <ion-spinner name="dots"></ion-spinner>
         </ng-container>
         <ng-container *ngIf="loading && submissionCompleted">
-          <ion-icon src="/assets/checkmark.svg"></ion-icon>
+          <ion-icon src="./assets/checkmark.svg"></ion-icon>
         </ng-container>
       </ion-button>
     </div>

diff --git a/projects/v3/src/app/components/topic/topic.component.html b/projects/v3/src/app/components/topic/topic.component.html
@@ -36,7 +36,8 @@
 
 <app-bottom-action-bar
   *ngIf="topic"
-  text="Mark as complete and continue"
+  [disabled$]="buttonDisabled$"
+  [text]="task?.status === 'done' ? 'Continue' : 'Mark as complete and continue'"
   (handleClick)="actionBarContinue(topic)"
   i18n-text
 ></app-bottom-action-bar>

diff --git a/projects/v3/src/app/components/topic/topic.component.ts b/projects/v3/src/app/components/topic/topic.component.ts
@@ -9,6 +9,8 @@ import { EmbedVideoService } from '@v3/services/ngx-embed-video.service';
 import { SafeHtml } from '@angular/platform-browser';
 import { FilestackService } from '@v3/app/services/filestack.service';
 import { NotificationsService } from '@v3/app/services/notifications.service';
+import { BehaviorSubject } from 'rxjs';
+import { Activity, Task } from '@v3/app/services/activity.service';
 
 @Component({
   selector: 'app-topic',
@@ -17,8 +19,11 @@ import { NotificationsService } from '@v3/app/services/notifications.service';
 })
 export class TopicComponent implements OnChanges {
   @Input() topic: Topic;
+  @Input() task: Task;
   continuing: boolean;
   @Output() continue = new EventEmitter();
+  @Input() buttonDisabled$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  thisTask
 
   iframeHtml = '' as SafeHtml;
   btnToggleTopicIsDone = false;
@@ -42,14 +47,10 @@ export class TopicComponent implements OnChanges {
       }
       this._initVideoPlayer();
     }
-    // mark topic as started after topic load
-    // this._markAsStartStop('started');
   }
 
   ionViewWillLeave() {
     this.sharedService.stopPlayingVideos();
-    // mark topic as stopped when leave topic page
-    // this._markAsStartStop('stopped');
   }
 
   private _setVideoUrlElelemts() {

diff --git a/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.html b/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.html
@@ -25,34 +25,45 @@
           [currentTask]="currentTask"
           [submission]="submission"
           (navigate)="goToTask($event)"
+          (cannotAccessTeamActivity)="allTeamTasks($event)"
         ></app-activity>
       </ion-col>
 
       <ion-col size="12" size-md="8" class="border-left">
-        <ng-container *ngIf="currentTask">
-          <app-assessment *ngIf="currentTask.type === 'Assessment'"
-            [assessment]="assessment"
-            [submission]="submission"
-            [review]="review"
-            [contextId]="currentTask.contextId"
-            [savingMessage$]="savingText$"
-            [btnDisabled$]="btnDisabled$"
-            action="assessment"
-            (save)="saveAssessment($event, currentTask)"
-            (readFeedback)="readFeedback($event, currentTask)"
-            (continue)="nextTask(currentTask)"
-            tabindex="0"
-            id="task-content"
-          ></app-assessment>
-
-          <app-topic *ngIf="currentTask.type === 'Topic'"
-            [topic]="topic"
-            (continue)="topicComplete(currentTask)"
-            tabindex="0"
-            id="task-content"
-          ></app-topic>
+        <ng-container *ngIf="notInATeamAndForTeamOnly === true; else showCurrentTask">
+          <div class="centered-text">
+            This assessment can only be accessed when you are in a team.
+          </div>
         </ng-container>
       </ion-col>
     </ion-row>
   </ion-grid>
 </ion-content>
+
+<ng-template #showCurrentTask>
+  <ng-container *ngIf="currentTask">
+    <app-assessment *ngIf="currentTask.type === 'Assessment'"
+      [assessment]="assessment"
+      [submission]="submission"
+      [review]="review"
+      [contextId]="currentTask.contextId"
+      [savingMessage$]="savingText$"
+      [btnDisabled$]="btnDisabled$"
+      action="assessment"
+      (save)="saveAssessment($event, currentTask)"
+      (readFeedback)="readFeedback($event, currentTask)"
+      (continue)="nextTask(currentTask)"
+      tabindex="0"
+      id="task-content"
+    ></app-assessment>
+
+    <app-topic *ngIf="currentTask.type === 'Topic'"
+      [topic]="topic"
+      [task]="currentTask"
+      (continue)="topicComplete(currentTask)"
+      [buttonDisabled$]="btnDisabled$"
+      tabindex="0"
+      id="task-content"
+    ></app-topic>
+  </ng-container>
+</ng-template>
diff --git a/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.scss b/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.scss
@@ -23,3 +23,11 @@ ion-content {
 .no-review {
   padding: 10px 15%;
 }
+
+.centered-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  text-align: center;
+}
diff --git a/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.ts b/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.ts
@@ -8,7 +8,7 @@ import { BrowserStorageService } from '@v3/app/services/storage.service';
 import { Topic, TopicService } from '@v3/app/services/topic.service';
 import { UtilsService } from '@v3/app/services/utils.service';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { delay, tap } from 'rxjs/operators';
+import { delay, filter, tap } from 'rxjs/operators';
 
 const SAVE_PROGRESS_TIMEOUT = 10000;
 
@@ -28,6 +28,7 @@ export class ActivityDesktopPage {
   loading: boolean;
   savingText$: BehaviorSubject<string> = new BehaviorSubject<string>('');
   btnDisabled$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  notInATeamAndForTeamOnly: boolean = false;
 
   // grabs from URL parameter
   urlParams = {
@@ -49,7 +50,11 @@ export class ActivityDesktopPage {
 
   ionViewWillEnter() {
     this.subscriptions.push(
-      this.activityService.activity$.subscribe(res => this.activity = res)
+      this.activityService.activity$
+      .pipe(filter(res => res?.id === +this.route.snapshot.paramMap.get('id')))
+      .subscribe(res => {
+        this.activity = res;
+      })
     );
     this.subscriptions.push(
       this.activityService.currentTask$.subscribe(res => this.currentTask = res)
@@ -105,6 +110,11 @@ export class ActivityDesktopPage {
     }));
   }
 
+  ionViewWillLeave() {
+    this.currentTask = null;
+    this.topicService.clearTopic();
+  }
+
   ionViewDidLeave() {
     this.subscriptions.forEach(sub => {
       if (sub.closed !== true) {
@@ -114,6 +124,7 @@ export class ActivityDesktopPage {
   }
 
   async goToTask(task: Task): Promise<any> {
+    this.currentTask = null;
     const taskContentElement = this.document.getElementById('task-content');
     if (taskContentElement) {
       taskContentElement.focus();
@@ -123,16 +134,20 @@ export class ActivityDesktopPage {
   }
 
   async topicComplete(task: Task) {
+    this.btnDisabled$.next(true);
     if (task.status === 'done') {
       // just go to the next task without any other action
-      return this.activityService.goToNextTask(this.activity.tasks, task);
+      this.btnDisabled$.next(false);
+      return this.activityService.goToNextTask(task);
     }
     // mark the topic as complete
     this.loading = true;
     await this.topicService.updateTopicProgress(task.id, 'completed').toPromise();
+
     // get the latest activity tasks and navigate to the next task
     return this.activityService.getActivity(this.activity.id, true, task, () => {
       this.loading = false;
+      this.btnDisabled$.next(false);
     });
   }
 
@@ -196,14 +211,14 @@ export class ActivityDesktopPage {
     }
   }
 
-  async readFeedback(submissionId, task: Task) {
+  async readFeedback(submissionId, currentTask: Task) {
     try {
       this.loading = true;
       const savedReview = this.assessmentService.saveFeedbackReviewed(submissionId);
       await savedReview.pipe(
         // get the latest activity tasks and navigate to the next task
         // wait for a while for the server to save the "read feedback" status
-        tap(() => this.activityService.getActivity(this.activity.id, true, task)),
+        tap(() => this.activityService.getActivity(this.activity.id, true, currentTask)),
         delay(400)
       ).toPromise();
       await this.reviewRatingPopUp();
@@ -219,7 +234,7 @@ export class ActivityDesktopPage {
   }
 
   nextTask(task: Task) {
-    this.activityService.goToNextTask(this.activity.tasks, task);
+    this.activityService.goToNextTask(task);
   }
 
   async reviewRatingPopUp(): Promise<void> {
@@ -232,6 +247,12 @@ export class ActivityDesktopPage {
   }
 
   goBack() {
+    this.currentTask = null;
+    this.topicService.clearTopic();
     this.router.navigate(['v3', 'home']);
   }
+
+  allTeamTasks(forTeamOnlyWarning: boolean) {
+    this.notInATeamAndForTeamOnly = forTeamOnlyWarning;
+  }
 }
diff --git a/projects/v3/src/app/pages/assessment-mobile/assessment-mobile.page.ts b/projects/v3/src/app/pages/assessment-mobile/assessment-mobile.page.ts
@@ -77,7 +77,7 @@ export class AssessmentMobilePage implements OnInit {
     }
     if (this.currentTask.status === 'done') {
       // just go to the next task without any other action
-      return this.activityService.goToNextTask(null, this.currentTask);
+      return this.activityService.goToNextTask(this.currentTask);
     }
     // get the latest activity tasks and navigate to the next task
     return this.activityService.getActivity(this.activityId, true, this.currentTask);
@@ -173,7 +173,7 @@ export class AssessmentMobilePage implements OnInit {
   }
 
   nextTask() {
-    this.activityService.goToNextTask(null, this.task);
+    this.activityService.goToNextTask(this.task);
   }
 
   async reviewRatingPopUp(): Promise<void> {

diff --git a/projects/v3/src/app/pages/home/home.page.html b/projects/v3/src/app/pages/home/home.page.html
@@ -128,7 +128,8 @@ <h1 class="for-accessibility" [attr.aria-describedby]="'nobadges'"></h1>
   <app-list-item *ngFor="let achievement of achievements"
     [title]="achievement.name"
     [subtitle1]="achievement.points ? achievement.points + ' Pts' : ''" subtitle1Color="medium"
-    [leadImage]="achievement.image" lines="full" (click)="achievePopup(achievement)"
+    [leadImage]="achievement.image" lines="full"
+    (click)="achievePopup(achievement)"
     [leadImageClass] = "!achievement.isEarned ? 'black-white-image' : ''"
     (keydown)="achievePopup(achievement, $event)"
     [endingIcon]="achievement.isEarned ? 'checkmark-circle' : 'lock-closed'"