[TEAMMATES#12283] Instructor view session results (course-wide): Add …

…separate button to download results by question (TEAMMATES#12591) * Added separate button to download results by question * Removed download functionality from question number * �[200~ * Changed the color of chevron * Fixed lint issues * add unit tests to copy course modal component (TEAMMATES#12590) * Fixed lint issues * added color of chevron during panel expansion * Updated snapshots * Stopped propogation of download btn and removed showDownload functionality * Updated question-text-with-info snapshot --------- Co-authored-by: Maharshi Pandya <pandyamaharshi2001@gmail.com> Co-authored-by: Cedric Ong <67156011+cedricongjh@users.noreply.github.com>
jasonqiu212 · Sep 29, 2023 · 2b9f0e5 · 2b9f0e5
1 parent 70be153
commit 2b9f0e5
Show file tree

Hide file tree

Showing 17 changed files with 78 additions and 20 deletions.
diff --git a/src/web/app/components/panel-chevron/panel-chevron.component.html b/src/web/app/components/panel-chevron/panel-chevron.component.html
@@ -1,4 +1,4 @@
 <button type="button" class="chevron btn-course btn btn-primary btn-sm" aria-label="Expand panel" [attr.aria-expanded]=isExpanded>
-  <i class="fas fa-chevron-down" *ngIf="!isExpanded"></i>
-  <i class="fas fa-chevron-up" *ngIf="isExpanded"></i>
+  <i class="fas fa-chevron-down" [style.color]="chevronColor" *ngIf="!isExpanded"></i>
+  <i class="fas fa-chevron-up" [style.color]="chevronColor" *ngIf="isExpanded"></i>
 </button>
diff --git a/src/web/app/components/panel-chevron/panel-chevron.component.ts b/src/web/app/components/panel-chevron/panel-chevron.component.ts
@@ -14,4 +14,5 @@ export class PanelChevronComponent {
 
   @Input() isExpanded: boolean = false;
 
+  @Input() chevronColor: string = 'white';
 }
diff --git a/...app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/...app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -47,6 +47,7 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
           >
             <i
               class="fas fa-chevron-up"
+              style="color: white;"
             />
           </button>
         </tm-panel-chevron>

diff --git a/...ents/question-text-with-info/__snapshots__/question-text-with-info.component.spec.ts.snap b/...ents/question-text-with-info/__snapshots__/question-text-with-info.component.spec.ts.snap
@@ -8,7 +8,6 @@ exports[`QuestionTextWithInfoComponent should not show control link and question
   downloadQuestionResultEvent={[Function EventEmitter_]}
   questionDetails={[Function Object]}
   questionNumber="0"
-  shouldShowDownloadQuestionResult="false"
 >
   <span
     class="d-flex flex-column flex-sm-row align-items-sm-center"
@@ -35,7 +34,6 @@ exports[`QuestionTextWithInfoComponent should show control link when question ty
   downloadQuestionResultEvent={[Function EventEmitter_]}
   questionDetails={[Function Object]}
   questionNumber="0"
-  shouldShowDownloadQuestionResult="false"
 >
   <span
     class="d-flex flex-column flex-sm-row align-items-sm-center"
@@ -67,7 +65,6 @@ exports[`QuestionTextWithInfoComponent should show question detail when click co
   downloadQuestionResultEvent={[Function EventEmitter_]}
   questionDetails={[Function Object]}
   questionNumber="0"
-  shouldShowDownloadQuestionResult="false"
 >
   <span
     class="d-flex flex-column flex-sm-row align-items-sm-center"

diff --git a/src/web/app/components/question-text-with-info/question-text-with-info.component.html b/src/web/app/components/question-text-with-info/question-text-with-info.component.html
@@ -1,10 +1,5 @@
 <span class="d-flex flex-column flex-sm-row align-items-sm-center">
-  <h2 *ngIf="shouldShowDownloadQuestionResult" class="question-number">
-    <button ngbTooltip="Download Question Results" type="button" class="btn btn-link p-0" (click)="downloadQuestionResultEvent.emit(); $event.stopPropagation();">
-      Question {{ questionNumber }}:
-    </button>
-  </h2>
-  <h2 *ngIf="!shouldShowDownloadQuestionResult" class="question-number">
+  <h2 class="question-number">
     Question {{ questionNumber }}:
   </h2>
   <span class="question-text mx-sm-2">{{ questionDetails.questionText }}</span>

diff --git a/src/web/app/components/question-text-with-info/question-text-with-info.component.ts b/src/web/app/components/question-text-with-info/question-text-with-info.component.ts
@@ -16,7 +16,6 @@ export class QuestionTextWithInfoComponent {
     questionType: FeedbackQuestionType.TEXT,
     questionText: '',
   };
-  @Input() shouldShowDownloadQuestionResult: boolean = false;
 
   @Output() downloadQuestionResultEvent: EventEmitter<any> = new EventEmitter();
 

diff --git a/...ents/user-notifications-list/__snapshots__/user-notifications-list.component.spec.ts.snap b/...ents/user-notifications-list/__snapshots__/user-notifications-list.component.spec.ts.snap
@@ -88,6 +88,7 @@ exports[`UserNotificationsListComponent should snap when all loaded notification
                 >
                   <i
                     class="fas fa-chevron-down"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -120,6 +121,7 @@ exports[`UserNotificationsListComponent should snap when all loaded notification
                 >
                   <i
                     class="fas fa-chevron-down"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -267,6 +269,7 @@ exports[`UserNotificationsListComponent should snap when it loads the provided n
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -324,6 +327,7 @@ exports[`UserNotificationsListComponent should snap when it loads the provided n
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -450,6 +454,7 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -507,6 +512,7 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -633,6 +639,7 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -690,6 +697,7 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>

diff --git a/...rses-modal/__snapshots__/copy-instructors-from-other-courses-modal.component.spec.ts.snap b/...rses-modal/__snapshots__/copy-instructors-from-other-courses-modal.component.spec.ts.snap
@@ -89,6 +89,7 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap when feedback
               >
                 <i
                   class="fas fa-chevron-up"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>
@@ -229,6 +230,7 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap when instruct
               >
                 <i
                   class="fas fa-chevron-up"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>
@@ -492,6 +494,7 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap when instruct
               >
                 <i
                   class="fas fa-chevron-up"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>
@@ -629,6 +632,7 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap with courses
               >
                 <i
                   class="fas fa-chevron-down"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>
@@ -660,6 +664,7 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap with courses
               >
                 <i
                   class="fas fa-chevron-down"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>

diff --git a/...instructor/instructor-home-page/__snapshots__/instructor-home-page.component.spec.ts.snap b/...instructor/instructor-home-page/__snapshots__/instructor-home-page.component.spec.ts.snap
@@ -557,6 +557,7 @@ exports[`InstructorHomePageComponent should snap with one course with one feedba
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -1131,6 +1132,7 @@ exports[`InstructorHomePageComponent should snap with one course with two feedba
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -1908,6 +1910,7 @@ exports[`InstructorHomePageComponent should snap with one course with unexpanded
                 >
                   <i
                     class="fas fa-chevron-down"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -2176,6 +2179,7 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -2468,6 +2472,7 @@ exports[`InstructorHomePageComponent should snap with one course without feedbac
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>

diff --git a/...uctor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/...uctor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1306,6 +1306,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                   >
                     <i
                       class="fas fa-chevron-up"
+                      style="color: white;"
                     />
                   </button>
                 </tm-panel-chevron>
@@ -2036,6 +2037,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                   >
                     <i
                       class="fas fa-chevron-up"
+                      style="color: white;"
                     />
                   </button>
                 </tm-panel-chevron>
@@ -3978,6 +3980,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
               >
                 <i
                   class="fas fa-chevron-up"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>

diff --git a/...sions-modal/__snapshots__/copy-questions-from-other-sessions-modal.component.spec.ts.snap b/...sions-modal/__snapshots__/copy-questions-from-other-sessions-modal.component.spec.ts.snap
@@ -88,6 +88,7 @@ exports[`CopyQuestionsFromOtherSessionsModalComponent should snap when feedback
               >
                 <i
                   class="fas fa-chevron-up"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>
@@ -299,6 +300,7 @@ exports[`CopyQuestionsFromOtherSessionsModalComponent should snap when feedback
               >
                 <i
                   class="fas fa-chevron-up"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>
@@ -434,6 +436,7 @@ exports[`CopyQuestionsFromOtherSessionsModalComponent should snap when feedback
               >
                 <i
                   class="fas fa-chevron-up"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>
@@ -655,6 +658,7 @@ exports[`CopyQuestionsFromOtherSessionsModalComponent should snap with feedback
               >
                 <i
                   class="fas fa-chevron-down"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>
@@ -688,6 +692,7 @@ exports[`CopyQuestionsFromOtherSessionsModalComponent should snap with feedback
               >
                 <i
                   class="fas fa-chevron-down"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>

diff --git a/...tor/instructor-session-result-page/instructor-session-result-question-view.component.html b/...tor/instructor-session-result-page/instructor-session-result-question-view.component.html
@@ -1,14 +1,22 @@
 <div id="question-panel-{{ question.question.questionNumber }}" class="card margin-bottom-15px" *ngFor="let question of questionsOrder">
   <div class="card-header bg-info cursor-pointer" (click)="toggleAndLoadTab.emit(question.question.feedbackQuestionId)">
-    <tm-question-text-with-info [questionNumber]="question.question.questionNumber"
-                                [questionDetails]="question.question.questionDetails"
-                                [shouldShowDownloadQuestionResult]="true"
-                                (downloadQuestionResultEvent)="triggerDownloadQuestionResult({
-        questionNumber: question.question.questionNumber,
-        questionId: question.question.feedbackQuestionId})"
+   <div class="d-flex w-100 flex-fill flex-md-row flex-column align-items-md-center align-items-start">
+    <div>
+      <tm-question-text-with-info [questionNumber]="question.question.questionNumber"
+                                      [questionDetails]="question.question.questionDetails"
     ></tm-question-text-with-info>
-    <div class="card-header-btn-toolbar">
-      <tm-panel-chevron [isExpanded]="question.isTabExpanded"></tm-panel-chevron>
+    </div>
+    <div class="card-header-btn-toolbar ms-0 ms-md-auto align-self-md-end">
+      <button type="button" class="btn btn-info btn-sm" (click)="triggerDownloadQuestionResult({
+        questionNumber: question.question.questionNumber,
+        questionId: question.question.feedbackQuestionId});
+        $event.stopPropogation();">
+      Download Results
+    </button>
+   </div>
+   </div>
+   <div class="chevron-collapse">
+      <tm-panel-chevron chevronColor="black" [isExpanded]="question.isTabExpanded"></tm-panel-chevron>
     </div>
   </div>
   <div *ngIf="question.isTabExpanded" @collapseAnim>

diff --git a/...tor/instructor-session-result-page/instructor-session-result-question-view.component.scss b/...tor/instructor-session-result-page/instructor-session-result-question-view.component.scss
@@ -18,3 +18,7 @@
 .stats-table {
   min-width: 800px;
 }
+
+.chevron-collapse {
+  margin-left: 10px;
+}
diff --git a/...udent-activity-logs/__snapshots__/instructor-student-activity-logs.component.spec.ts.snap b/...udent-activity-logs/__snapshots__/instructor-student-activity-logs.component.spec.ts.snap
@@ -1257,6 +1257,7 @@ exports[`InstructorStudentActivityLogsComponent should snap with results of a se
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>
@@ -1442,6 +1443,7 @@ exports[`InstructorStudentActivityLogsComponent should snap with results of a se
                 >
                   <i
                     class="fas fa-chevron-up"
+                    style="color: white;"
                   />
                 </button>
               </tm-panel-chevron>

diff --git a/...uctor-student-list-page/__snapshots__/instructor-student-list-page.component.spec.ts.snap b/...uctor-student-list-page/__snapshots__/instructor-student-list-page.component.spec.ts.snap
@@ -94,6 +94,7 @@ exports[`InstructorStudentListPageComponent should snap with a course with stude
               >
                 <i
                   class="fas fa-chevron-up"
+                  style="color: white;"
                 />
               </button>
             </tm-panel-chevron>