Upgraded ComponentSelect to Angular. #2846

Author: hirokiterashima

src/main/webapp/site/src/app/classroom-monitor/component-select/component-select.component.html

@@ -0,0 +1,21 @@
+<mat-select *ngIf="components.length > 1"
+    class="md-no-underline md-button mat-button-raised md-raised"
+    [(ngModel)]="selectedComponents"
+    (selectionChange)="selectedComponentsChange()"
+    placeholder="{{getSelectedText()}}"
+    multiple>
+  <mat-select-trigger>{{getSelectedText()}}</mat-select-trigger>
+  <mat-optgroup label="Assessment items to show" i18n-label>
+    <mat-option value="{{component.id}}" *ngFor="let component of components; let i = index">
+      {{ i+1 }}: {{ getComponentTypeLabel(component.type) }}
+    </mat-option>
+  </mat-optgroup>
+</mat-select>
+<button mat-button class="md-body-1 mat-button-raised"
+    *ngIf="components.length == 1"
+    aria-label="Assessment items to show"
+    i18n-aria-label
+    disabled
+    i18n>
+  1 assessment item
+</button>

src/main/webapp/site/src/app/classroom-monitor/component-select/component-select.component.scss

@@ -0,0 +1,7 @@
+mat-select {
+  min-width: 150px;
+}
+
+mat-select, mat-select-trigger {
+  text-transform: none;
+}

src/main/webapp/site/src/app/classroom-monitor/component-select/component-select.component.ts

@@ -0,0 +1,58 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { UpgradeModule } from "@angular/upgrade/static";
+import { TeacherProjectService } from "../../../../../wise5/services/teacherProjectService";
+import { UtilService } from "../../../../../wise5/services/utilService";
+
+@Component({
+  selector: 'component-select',
+  styleUrls: ['component-select.component.scss'],
+  templateUrl: 'component-select.component.html'
+})
+export class ComponentSelectComponent {
+
+  components: any[];
+
+  @Output()
+  modelChange: EventEmitter<any> = new EventEmitter<any>();
+
+  @Input()
+  nodeId: string;
+
+  selectedComponents: any[];
+
+  constructor(private upgrade: UpgradeModule, private ProjectService: TeacherProjectService,
+      private UtilService: UtilService) {
+  }
+
+  ngOnInit() {
+    this.components = this.ProjectService.getComponentsByNodeId(this.nodeId).filter(component => {
+      return this.ProjectService.componentHasWork(component);
+    });
+    this.selectedComponents = this.components.map(component => {
+      return component.id;
+    });
+  }
+
+  getComponentTypeLabel(componentType) {
+    return this.UtilService.getComponentTypeLabel(componentType);
+  }
+
+  getSelectedText() {
+    let nComponents = this.components.length;
+    return this.upgrade.$injector.get('$filter')('translate')('selectedComponentsLabel', {
+      selected: this.selectedComponents.length,
+      total: nComponents
+    });
+  }
+
+  selectedComponentsChange() {
+    const hiddenComponents = [];
+    for (const component of this.components) {
+      const id = component.id;
+      if (this.selectedComponents.indexOf(id) < 0) {
+        hiddenComponents.push(id);
+      }
+    }
+    this.modelChange.emit(hiddenComponents);
+  }
+}

src/main/webapp/site/src/app/teacher-hybrid-angular.module.ts

@@ -22,6 +22,7 @@ import { ChooseNewComponentLocation } from './authoring-tool/add-component/choos
 import { ChooseImportStepComponent } from './authoring-tool/import-step/choose-import-step/choose-import-step.component';
 import { ChooseImportStepLocationComponent } from './authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component';
 import { ComponentNewWorkBadgeComponent } from './classroom-monitor/component-new-work-badge/component-new-work-badge.component';
+import { ComponentSelectComponent } from './classroom-monitor/component-select/component-select.component';
 import { StatusIconComponent } from './classroom-monitor/status-icon/status-icon.component';
 import { AngularJSModule } from './common-hybrid-angular.module';
 import { NodeAdvancedJsonAuthoringComponent } from '../../../wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component';
@@ -43,6 +44,7 @@ import { RubricAuthoringComponent } from '../../../wise5/authoringTool/rubric/ru
     ChooseNewComponent,
     ChooseNewComponentLocation,
     ComponentNewWorkBadgeComponent,
+    ComponentSelectComponent,
     EditComponentRubricComponent,
     EditComponentJsonComponent,
     EditComponentMaxScoreComponent,

src/main/webapp/site/src/messages.xlf

@@ -5968,6 +5968,24 @@
           <context context-type="linenumber">36</context>
         </context-group>
       </trans-unit>
+      <trans-unit datatype="html" id="92159486420caf44d25e4f85cb0ed4f105d9c854">
+        <source>Assessment items to show</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/classroom-monitor/component-select/component-select.component.html</context>
+          <context context-type="linenumber">8</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/classroom-monitor/component-select/component-select.component.html</context>
+          <context context-type="linenumber">16</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit datatype="html" id="6b8ecc745edb25da9e81cee606a8cae77549dde2">
+        <source> 1 assessment item </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/classroom-monitor/component-select/component-select.component.html</context>
+          <context context-type="linenumber">19</context>
+        </context-group>
+      </trans-unit>
       <trans-unit datatype="html" id="7affaae0e14529c0192d5a4bfabd6fcb1ea27529">
         <source>Rubric</source>
         <context-group purpose="location">

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/componentSelect/componentSelect.ts

@@ -1,7 +1,7 @@
 'use strict';
 
+import { ComponentSelectComponent } from '../../../../site/src/app/classroom-monitor/component-select/component-select.component';
 import NodeGradingView from './nodeGradingView/nodeGradingView';
-import ComponentSelect from './componentSelect/componentSelect';
 import StepTools from './stepTools/stepTools';
 import WorkgroupItem from './workgroupItem/workgroupItem';
 import * as angular from 'angular';
@@ -11,7 +11,8 @@ import { downgradeComponent } from '@angular/upgrade/static';
 const NodeGrading = angular
   .module('nodeGrading', [])
   .component('nodeGradingView', NodeGradingView)
-  .component('componentSelect', ComponentSelect)
+  .directive('componentSelect',
+      downgradeComponent({ component: ComponentSelectComponent }) as angular.IDirectiveFactory)
   .component('cmStepTools', StepTools)
   .directive('workgroupInfo',
       downgradeComponent({ component: WorkgroupInfoComponent }) as angular.IDirectiveFactory)

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/nodeGrading.ts

@@ -13,8 +13,9 @@ <h2 class="content-head__item" ng-if="$ctrl.nodeHasWork">
     </div>
     <span flex></span>
     <div class="content-head__more" layout="row" layout-align="center center" layout-wrap>
-      <component-select node-id="{{ ::$ctrl.nodeId }}" custom-class="'md-no-underline md-button'"
-                        on-change="$ctrl.onUpdateHiddenComponents(value)"></component-select>
+      <component-select node-id="{{::$ctrl.nodeId}}"
+                        class="md-button md-no-underline"
+                        (model-change)="$ctrl.onUpdateHiddenComponents($event)"></component-select>
       <md-button ng-if="$ctrl.milestoneReport" ng-click="$ctrl.showReport($event)"
                  class="md-raised info">
         <md-icon class="info"> flag </md-icon>