[ISDK-82] Feature/activity services

package.json

@@ -43,12 +43,13 @@
     "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "3.0.0",
+    "@ionic/app-scripts": "^3.0.1",
     "@types/jasmine": "^2.5.47",
     "@types/node": "^7.0.13",
     "angular2-template-loader": "^0.6.2",
     "connect": "^3.6.0",
     "del": "2.2.0",
+    "html-loader": "^0.4.5",
     "jasmine": "^2.5.3",
     "jasmine-core": "^2.8.0",
     "jasmine-spec-reporter": "^4.2.1",

src/components/assessments/assessments.html

@@ -7,9 +7,8 @@
 
       <span class="title">{{ assessment['Assess.Assessment'].name }}</span>
     </div>
-    <div class="spacer"></div>
 
-    <div class="answer">
+    <div class="answer spacer-top">
       <div *ngIf="assessment['Assess.Assessment'].answer">
 
         <div *ngIf="assessment['Assess.Assessment'].answer.type === 'checkin'">

src/components/loadingMarker/loadingMarker.html

@@ -1,8 +1,6 @@
 <div>
   <div class="list text-center" *ngIf="loading">
     <ion-spinner icon="spiral" color="practera-thick"></ion-spinner>
-  </div>
-  <div *ngIf="!loading">
-    <p>transclude?</p>
+    <ng-content></ng-content>
   </div>
 </div>

src/components/loadingMarker/loadingMarker.ts

@@ -1,9 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'loading-marker',
   templateUrl: 'loadingMarker.html'
 })
 export class LoadingMarkerComponent {
-
+  @Input() loading: any;
 }

src/components/question/question.html

@@ -8,9 +8,7 @@
       <span class="title">{{ question.name }}</span>
     </div>
 
-    <div class="spacer"></div>
-
-    <div class="answer">
+    <div class="answer spacer-top">
       <div *ngIf="question.answer">
         <div *ngIf="question.answer.type === 'file'">
           <div *ngIf="question.answer.files.length === 1">

src/pages/activities/list/list.html

@@ -21,6 +21,7 @@
       refreshingSpinner="circles">
     </ion-refresher-content>
 	</ion-refresher>
+
   <ion-grid>
     <ion-row class="score-board">
       <ion-col class="score-board-inner">
@@ -41,6 +42,7 @@ <h1>{{ characterCurrentExperience }}</h1>
         </div>
       </ion-col>
     </ion-row>
+
     <ion-row class="activity-list">
       <ion-col>
         <!--<button (click)="shiftLanguageTrial()">Shift Language</button>-->
@@ -55,6 +57,7 @@ <h1>{{ characterCurrentExperience }}</h1>
               {{ activity.Activity.name }}
             </p>
           </div>
+
           <div *ngIf="activity.Activity.is_locked == true" class="locked">
             <i class="fa fa-lock" aria-hidden="true"></i>
             <p (click)="goToPopup(activity.Activity.unlock_id)" class="line-break">

src/pages/activities/list/popup.ts

@@ -13,7 +13,6 @@ import { loadingMessages, errMessages } from '../../../app/messages';
   templateUrl: 'popup.html'
 })
 export class ActivityListPopupPage {
-
   achievementData: any = null;
   achievementName: string;
   achievementsLoadingErr: any = errMessages.General.loading.load;

src/pages/activities/view/activities-view-modal.page.ts

@@ -24,7 +24,7 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
       <ion-card *ngIf="activityData.video_url">
         <ion-card-content>
           <video controls width="100%" height="100%">
-            <source src='{{resourceUrl}}' autostart="false">
+            <source [src]='resourceUrl' autostart="false">
           </video>
         </ion-card-content>
       </ion-card>

src/pages/activities/view/activities-view.page.ts

@@ -21,7 +21,6 @@ export class ActivitiesViewPage {
   };
   activity: any = {};
   assessment: any = {};
-  assessments: any = {};
   loadings = {
     submissions: false
   };
@@ -51,7 +50,6 @@ export class ActivitiesViewPage {
   ionViewDidEnter(): void {
     // assessment
     this.activity = this.activityService.normaliseActivity(this.navParams.get('activity') || {});
-    this.assessments = this.activity.sequences || [];
     this.assessment = this.activity.assessment;
 
     // submission
@@ -64,6 +62,8 @@ export class ActivitiesViewPage {
             return this.submissionService.normalise(submission);
           });
           this.submissions = _.orderBy(this.submissions, 'created', 'desc'); // latest at top
+
+          this.submissions = this.setSubmissionStatusTitle(this.submissions);
         }
       });
 
@@ -128,7 +128,7 @@ export class ActivitiesViewPage {
   goAssessment(submission?, opts = { hasSubmission: false }) {
     if ((this.inProgressSubmission()).length > 0 && opts.hasSubmission === false) {
       let alert = this.alertCtrl.create({
-        title: 'You have a submission in progress.',
+        title: 'You already have started a new submission! Please tap on "In Progress" below to continue with it.',
         buttons: ["Ok"]
       });
       alert.present();
@@ -146,4 +146,66 @@ export class ActivitiesViewPage {
       });
     }
   }
+
+  /**
+   * @name setSubmissionStatusTitle
+   * @description refer to assessment status and inject proper UI displayable title for different submissions (in a assessments, multiple submission has no unique title, this function is added to help user identify different submission by title)
+   * @param {Array<object>} submissions submissions array objects
+   */
+  setSubmissionStatusTitle(submissions: Array<any>) {
+    submissions = submissions.map((submission, index) => {
+      let result: {
+        name: string,
+        score: number,
+        published: boolean,
+        inprogress: boolean,
+        moderated_assessment: boolean
+      } = {
+        name: '',
+        score: 0,
+        published: false,
+        inprogress: false,
+        moderated_assessment: false
+      };
+
+      if (submission.status == "published") {
+        result.published = true;
+
+        switch (submission.moderated_score) {
+          case "1":
+            result.score = 4;
+            result.name = "Outstanding";
+            break;
+          case "0.75":
+            result.score = 3;
+            result.name = "Commendable";
+            break;
+          case "0.5":
+            result.score = 2;
+            result.name = "Competent";
+            break;
+          case "0.25":
+            result.score = 1;
+            result.name = "Developing";
+            break;
+          case "0":
+            result.score = 0;
+            result.name = "Needs Improvement";
+        }
+      } else if(submission.status == "in progress") {
+        result.inprogress = true;
+      } else {
+        result.inprogress = false;
+      }
+
+      if (submission.assessment.assessment_type == "moderated") {
+        result.moderated_assessment = true;
+      }
+
+      submission.statusTitle = result;
+      return submission;
+    });
+
+    return submissions;
+  }
 }

src/pages/activities/view/view.html

@@ -46,22 +46,33 @@
     </ion-list-header>
 
     <ion-item *ngIf="loadings.submissions" class="center">
-      <ion-spinner>Loading submissions...</ion-spinner>
+      <loading-marker [loading]="loadings.submissions">
+        <p>Loading submissions...</p>
+      </loading-marker>
     </ion-item>
 
-    <ion-item *ngFor="let submission of submissions" (click)="goAssessment(submission, {hasSubmission: true})">
-      <ion-row>
-
-        <ion-col align-self-start>
-          <div>
-            <h2>{{ (submission.submitted || submission.created).format() | amDateFormat:"MMM D YYYY, h:mm a" }}</h2>
-          </div>
+    <ion-item *ngFor="let submission of submissions" (click)="goAssessment(submission, {hasSubmission: true})" no-lines>
+      <ion-row *ngIf='!submission.statusTitle.published'>
+        <ion-col class="submission-title" col-10>
+          <h2 *ngIf='!submission.statusTitle.inprogress && submission.statusTitle.moderated_assessment'>Waiting for Review</h2>
+          <h2 *ngIf='!submission.statusTitle.inprogress && !submission.statusTitle.moderated_assessment'>Done</h2>
+          <h2 *ngIf='submission.statusTitle.inprogress'>In Progress</h2>
+          <p>{{ (submission.submitted || submission.created).format() | amDateFormat:"MMM D YYYY, h:mm a" }}</p>
         </ion-col>
-
-        <ion-col align-self-end class="note">
-          <ion-note>{{ submission.status }}</ion-note>
+        <ion-col class="note" col-2 *ngIf="submission.status !== 'done'">
+          <i class="fa fa-clock-o" aria-hidden="true"></i>
         </ion-col>
+      </ion-row>
 
+      <ion-row *ngIf='submission.statusTitle.published'>
+        <ion-col class="submission-title" col-10>
+          <h2 *ngIf="submission.statusTitle">{{ submission.statusTitle | truncate: 50 }}</h2>
+          <h2 *ngIf="!submission.statusTitle">{{ submission.statusTitle.name }}</h2>
+          <p>{{ (submission.submitted || submission.created).format() | amDateFormat:"MMM D YYYY, h:mm a" }}</p>
+        </ion-col>
+        <ion-col class="note" col-2>
+          <ion-badge>{{ submission.statusTitle.score }}</ion-badge>
+        </ion-col>
       </ion-row>
     </ion-item>
   </ion-list>

src/pages/assessments/assessments.html

@@ -1,7 +1,6 @@
 <ion-header>
   <ion-navbar>
     <ion-title></ion-title>
-
     <ion-buttons end>
       <button ion-button (click)="clickSubmit()" class="btn-submit" *ngIf="allowSubmit">
         {{ 'GENERAL.SUBMIT' | translate }}
@@ -11,21 +10,19 @@
 </ion-header>
 <ion-content class="assessments-list">
 
-  <div *ngFor="let assessmentGroup of assessmentGroups; let i = index">
-    <div *ngFor="let assessment of assessmentGroup; let j = index">
+  <div *ngFor="let assessmentGroup of assessmentGroups">
+    <div *ngFor="let assessment of assessmentGroup">
 
-      <ion-card *ngIf="assessment.description" class="no-box-shadow">
+      <ion-card *ngIf="assessment.description || assessment.name" class="no-box-shadow">
         <ion-card-content>
-          <h2 class="text-center">{{ assessment.name }}</h2>
-          <div [innerHTML]="assessment.description"></div>
+          <h2 class="text-center assessment-title">{{ assessment.name }}</h2>
+          <p [innerHTML]="assessment.description" class="assessment-description"></p>
         </ion-card-content>
       </ion-card>
-
       <questionGroup
-        *ngFor="let group of assessment.AssessmentGroup; let q = index"
+        *ngFor="let group of assessment.AssessmentGroup"
         [group]="group"
-        (click)="gotoAssessment(group, activity)"
-      >
+        (click)="gotoAssessment(group, activity)">
       </questionGroup>
     </div>
   </div>