refactor: migrated group-set-selector

src/app/doubtfire-angular.module.ts

@@ -225,6 +225,7 @@ import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-view
 import {UnitCodeComponent} from './common/unit-code/unit-code.component';
 import {GradeService} from './common/services/grade.service';
 
+import {GroupSetSelectorComponent} from './groups/group-set-selector/group-set-selector.component';
 @NgModule({
   // Components we declare
   declarations: [
@@ -325,6 +326,7 @@ import {GradeService} from './common/services/grade.service';
     FUsersComponent,
     FTaskBadgeComponent,
     FUnitsComponent,
+    GroupSetSelectorComponent,
   ],
   // Services we provide
   providers: [
@@ -348,6 +350,7 @@ import {GradeService} from './common/services/grade.service';
     UserService,
     TaskService,
     GradeService,
+
     TaskSimilarityService,
     WebcalService,
     ActivityTypeService,

src/app/doubtfire-angularjs.module.ts

@@ -91,7 +91,7 @@ import 'build/src/app/groups/group-set-manager/group-set-manager.js';
 import 'build/src/app/groups/groups.js';
 import 'build/src/app/groups/group-member-contribution-assigner/group-member-contribution-assigner.js';
 import 'build/src/app/groups/group-member-list/group-member-list.js';
-import 'build/src/app/groups/group-set-selector/group-set-selector.js';
+
 import 'build/src/app/units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.js';
 import 'build/src/app/units/modals/unit-ilo-edit-modal/unit-ilo-edit-modal.js';
 import 'build/src/app/units/modals/modals.js';
@@ -220,7 +220,7 @@ import {FUnitTaskListComponent} from './units/states/tasks/viewer/directives/f-u
 import {FTaskDetailsViewComponent} from './units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component';
 import {FTaskSheetViewComponent} from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
 import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-viewer.component';
-
+import {GroupSetSelectorComponent} from './groups/group-set-selector/group-set-selector.component';
 import {FUnitsComponent} from './admin/states/f-units/f-units.component';
 import {MarkedPipe} from './common/pipes/marked.pipe';
 import {AlertService} from './common/services/alert.service';
@@ -235,6 +235,7 @@ export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.projects',
   'doubtfire.groups',
   'doubtfire.visualisations',
+
 ]);
 
 // Downgrade angular modules that we need...
@@ -321,6 +322,10 @@ DoubtfireAngularJSModule.directive(
   'splashScreen',
   downgradeComponent({component: SplashScreenComponent}),
 );
+DoubtfireAngularJSModule.directive(
+  'groupSetSelector',
+  downgradeComponent({component: GroupSetSelectorComponent}),
+);
 DoubtfireAngularJSModule.directive(
   'userBadge',
   downgradeComponent({component: UserBadgeComponent}),

src/app/groups/group-selector/group-selector.tpl.html

@@ -3,10 +3,10 @@ <h4 class="panel-title">
     Groups for
     <strong ng-hide="showGroupSetSelector"> {{selectedGroupSet.name}} </strong>
     <group-set-selector
-      ng-show="showGroupSetSelector"
-      unit="unit"
-      ng-model="selectedGroupSet"
-      on-change="selectGroupSet"
+    *ngIf="showGroupSetSelector"
+    [unit]="unit"
+    [(selectedGroupSet)]="selectedGroupSet"
+    (selectGroupSet)="selectGroupSet($event)"
     >
     </group-set-selector>
   </h4>

src/app/groups/group-set-selector/group-set-selector.component.html

@@ -0,0 +1,3 @@
+<select class="form-control" [(ngModel)]="selectedGroupSet" (ngModelChange)="onGroupSetSelect()">
+  <option *ngFor="let gs of unit.groupSets" [ngValue]="gs">{{ gs.name }}</option>
+</select>

src/app/groups/group-set-selector/group-set-selector.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input, Output, EventEmitter, OnInit} from '@angular/core';
+import {Unit, GroupSet} from '/workspace/doubtfire-web/src/app/api/models/doubtfire-model';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'group-set-selector',
+  templateUrl: './group-set-selector.component.html',
+})
+export class GroupSetSelectorComponent implements OnInit {
+  @Input() unit: Unit;
+  @Input() selectedGroupSet: GroupSet;
+  @Output() selectGroupSet = new EventEmitter<GroupSet>(); // Renamed to follow Angular conventions
+
+  ngOnInit() {
+    if (!this.unit) {
+      throw new Error('Unit not supplied to group set selector');
+    }
+  }
+
+  onGroupSetSelect() {
+    // Method name changed to be more descriptive and avoid confusion with the @Output name
+    this.selectGroupSet.emit(this.selectedGroupSet);
+  }
+}

src/app/groups/groups.coffee

@@ -3,5 +3,5 @@ angular.module('doubtfire.groups', [
   'doubtfire.groups.group-member-list'
   'doubtfire.groups.group-selector'
   'doubtfire.groups.group-set-manager'
-  'doubtfire.groups.group-set-selector'
+
 ])