From 888d4b9993ad31fd203cc0793be164451f6109eb Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Mon, 22 Mar 2021 15:40:28 -0700
Subject: [PATCH] Added WorkgroupComponentGrading and replaced it in
 WorkgroupItem. #18

---
 .../nodeGradingView/nodeGradingView.ts        |  2 +-
 .../workgroupItem/workgroupItem.ts            | 34 +++++--
 .../shared/shared.ts                          |  2 +
 .../workgroupComponentGrading.html            | 96 +++++++++++++++++++
 .../workgroupComponentGrading.ts              | 44 +++++++++
 5 files changed, 167 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupComponentGrading/workgroupComponentGrading.html
 create mode 100644 src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupComponentGrading/workgroupComponentGrading.ts

diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/nodeGradingView/nodeGradingView.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/nodeGradingView/nodeGradingView.ts
index 06f3fbbe61..657f4ab990 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/nodeGradingView/nodeGradingView.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/nodeGradingView/nodeGradingView.ts
@@ -17,7 +17,7 @@ class NodeGradingViewController {
   $translate: any;
   canViewStudentNames: boolean;
   componentId: string = null;
-  hiddenComponents: any;
+  hiddenComponents: any = [];
   isExpandAll: boolean;
   maxScore: any;
   milestone: any;
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupItem/workgroupItem.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupItem/workgroupItem.ts
index 26412b4cfc..acafde4b89 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupItem/workgroupItem.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupItem/workgroupItem.ts
@@ -6,11 +6,12 @@ import * as angular from 'angular';
 class WorkgroupItemController {
   $translate: any;
   componentId: string;
+  components: any[];
   disabled: any;
   expand: any;
   hasAlert: boolean;
   hasNewAlert: boolean;
-  hiddenComponents: any;
+  hiddenComponents: any = [];
   maxScore: number;
   nodeHasWork: boolean;
   nodeId: string;
@@ -31,13 +32,12 @@ class WorkgroupItemController {
     this.nodeHasWork = this.ProjectService.nodeHasWork(this.nodeId);
     this.statusText = '';
     this.update();
+    this.components = this.ProjectService.getComponentsByNodeId(this.nodeId).filter((component) => {
+      return this.ProjectService.componentHasWork(component);
+    });
   }
 
   $onChanges(changesObj) {
-    if (changesObj.hiddenComponents) {
-      this.hiddenComponents = angular.copy(changesObj.hiddenComponents.currentValue);
-    }
-
     if (changesObj.maxScore) {
       this.maxScore =
         typeof changesObj.maxScore.currentValue === 'number' ? changesObj.maxScore.currentValue : 0;
@@ -54,6 +54,10 @@ class WorkgroupItemController {
     this.update();
   }
 
+  isComponentVisible(componentId: string): boolean {
+    return !this.hiddenComponents.includes(componentId);
+  }
+
   update() {
     switch (this.status) {
       case -1:
@@ -136,11 +140,21 @@ const WorkgroupItem = {
                 </button>
             </md-subheader>
             <md-list-item ng-if="$ctrl.expand && !$ctrl.disabled" class="grading__item-container">
-                <workgroup-node-grading workgroup-id="::$ctrl.workgroupId"
-                                        class="workgroup-node-grading"
-                                        node-id="{{::$ctrl.nodeId}}"
-                                        hidden-components="$ctrl.hiddenComponents"
-                                        flex></workgroup-node-grading>
+                <div class="grading__item" style="width:100%">
+                  <div id="component_{{::component.id}}_{{::$ctrl.workgroupId}}" class="component component--grading" ng-repeat='component in $ctrl.components'>
+                    <div ng-show="$ctrl.isComponentVisible(component.id)">
+                      <h3 class="accent-1 md-body-2 gray-lightest-bg component__header">
+                        {{ $index+1 + '. ' + $ctrl.getComponentTypeLabel(component.type) }}&nbsp;
+                        <component-new-work-badge [component-id]="component.id"
+                                                  [workgroup-id]="$ctrl.workgroupId"
+                                                  [node-id]="$ctrl.nodeId"></component-new-work-badge>
+                      </h3>
+                      <workgroup-component-grading component-id="component.id"
+                          workgroup-id="$ctrl.workgroupId"
+                          node-id="$ctrl.nodeId"></workgroup-component-grading>
+                    </div>
+                  </div>
+                </div>
             </md-list-item>
         </div>`
 };
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/shared.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/shared.ts
index bf6bc1e1ff..80547297c4 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/shared.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/shared.ts
@@ -11,6 +11,7 @@ import PeriodSelect from './periodSelect/periodSelect';
 import { StatusIconComponent } from '../../../../../app/classroom-monitor/status-icon/status-icon.component';
 import Toolbar from './toolbar/toolbar';
 import TopBar from './topBar/topBar';
+import WorkgroupComponentGrading from './workgroupComponentGrading/workgroupComponentGrading';
 import WorkgroupComponentRevisions from './workgroupComponentRevisions/workgroupComponentRevisions';
 import WorkgroupNodeGrading from './workgroupNodeGrading/workgroupNodeGrading';
 import { WorkgroupNodeStatusComponent } from '../../../../../app/classroom-monitor/workgroup-node-status/workgroup-node-status.component';
@@ -44,6 +45,7 @@ const Shared = angular
   )
   .component('cmToolbar', Toolbar)
   .component('cmTopBar', TopBar)
+  .component('workgroupComponentGrading', WorkgroupComponentGrading)
   .component('workgroupComponentRevisions', WorkgroupComponentRevisions)
   .component('workgroupNodeGrading', WorkgroupNodeGrading)
   .directive(
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupComponentGrading/workgroupComponentGrading.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupComponentGrading/workgroupComponentGrading.html
new file mode 100644
index 0000000000..8af58d137b
--- /dev/null
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupComponentGrading/workgroupComponentGrading.html
@@ -0,0 +1,96 @@
+<ng-content ng-switch="::$ctrl.component.type">
+  <div ng-switch-when="AudioOscillator|ConceptMap|Discussion|Draw|Graph|Label|Match|MultipleChoice|OpenResponse|Table" ng-switch-when-separator="|" class="component__content" layout="row" layout-wrap>
+    <div flex="100" flex-gt-sm="66" layout="column" class="component--grading__response">
+      <ng-content ng-if="$ctrl.latestComponentState != null && $ctrl.latestComponentState !== ''">
+        <audio-oscillator-grading
+            ng-if="$ctrl.component.type === 'AudioOscillator'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}">
+        </audio-oscillator-grading>
+        <concept-map-grading
+            ng-if="$ctrl.component.type === 'ConceptMap'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}">
+        </concept-map-grading>
+        <discussion-grading
+            ng-if="$ctrl.component.type === 'Discussion'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}"
+            workgroup-id="{{::$ctrl.workgroupId}}">
+        </discussion-grading>
+        <draw-grading
+            ng-if="$ctrl.component.type === 'Draw'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}">
+        </draw-grading>
+        <graph-grading
+            ng-if="$ctrl.component.type === 'Graph'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}">
+        </graph-grading>
+        <label-grading
+            ng-if="$ctrl.component.type === 'Label'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}">
+        </label-grading>
+        <match-grading
+            ng-if="$ctrl.component.type === 'Match'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}">
+        </match-grading>
+        <multiple-choice-grading
+            ng-if="$ctrl.component.type === 'MultipleChoice'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}">
+        </multiple-choice-grading>
+        <open-response-grading
+            ng-if="$ctrl.component.type === 'OpenResponse'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}">
+        </open-response-grading>
+        <table-grading
+            ng-if="$ctrl.component.type === 'Table'"
+            node-id="{{::$ctrl.nodeId}}"
+            component-id="{{::$ctrl.component.id}}"
+            component-state="{{$ctrl.latestComponentState}}">
+        </table-grading>
+        <span flex></span>
+        <component-revisions-info node-id="::$ctrl.nodeId"
+            component-id="::$ctrl.component.id"
+            from-workgroup-id="::$ctrl.teacherWorkgroupId"
+            to-workgroup-id="::$ctrl.workgroupId"
+            component-state="$ctrl.latestComponentState"
+            active='true'>
+        </component-revisions-info>
+      </ng-content>
+    </div>
+    <div flex="100" flex-gt-sm="33" class="component--grading__annotations">
+      <component-grading node-id="::$ctrl.nodeId"
+          component-id="::$ctrl.component.id"
+          max-score="$ctrl.component.maxScore"
+          from-workgroup-id="::$ctrl.teacherWorkgroupId"
+          to-workgroup-id="::$ctrl.workgroupId"
+          component-state-id="$ctrl.latestComponentState.id"
+          show-all-annotations="false"
+          is-disabled="false">
+      </component-grading>
+    </div>
+  </div>
+  <component ng-switch-default class="component-container"
+      node-id='{{::$ctrl.nodeId}}'
+      component-id='{{::$ctrl.component.id}}'
+      component-state='{{$ctrl.latestComponentState}}'
+      workgroup-id='::$ctrl.workgroupId'
+      teacher-workgroup-id='::$ctrl.teacherWorkgroupId'
+      mode='grading'>
+  </component>
+</ng-content>
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupComponentGrading/workgroupComponentGrading.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupComponentGrading/workgroupComponentGrading.ts
new file mode 100644
index 0000000000..68d46d2f46
--- /dev/null
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupComponentGrading/workgroupComponentGrading.ts
@@ -0,0 +1,44 @@
+'use strict';
+
+import { TeacherDataService } from '../../../../services/teacherDataService';
+import { TeacherProjectService } from '../../../../services/teacherProjectService';
+
+class WorkgroupComponentGradingController {
+  component: any;
+  componentId: string;
+  latestComponentState: any;
+  nodeId: string;
+  workgroupId: number;
+
+  static $inject = ['ProjectService', 'TeacherDataService'];
+
+  constructor(
+    private ProjectService: TeacherProjectService,
+    private TeacherDataService: TeacherDataService
+  ) {}
+
+  $onInit() {
+    this.component = this.ProjectService.getComponentByNodeIdAndComponentId(
+      this.nodeId,
+      this.componentId
+    );
+    this.latestComponentState = this.TeacherDataService.getLatestComponentStateByWorkgroupIdNodeIdAndComponentId(
+      this.workgroupId,
+      this.nodeId,
+      this.componentId
+    );
+  }
+}
+
+const WorkgroupComponentGrading = {
+  bindings: {
+    nodeId: '<',
+    componentId: '<',
+    workgroupId: '<'
+  },
+  templateUrl:
+    '/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupComponentGrading/workgroupComponentGrading.html',
+  controller: WorkgroupComponentGradingController
+};
+
+export default WorkgroupComponentGrading;