Groupsetmanager/migration

package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@angular/animations": "^17.3.6",
     "@angular/cdk": "^17.3.6",
-    "@angular/cli": "^17.3.6",
+    "@angular/cli": "^17.3.9",
     "@angular/common": "^17.3.6",
     "@angular/compiler": "^17.3.6",
     "@angular/core": "^17.3.6",

src/app/doubtfire-angular.module.ts

@@ -1,3 +1,5 @@
+import {GroupSetManagerComponent} from './groups/group-set-manager/group-set-manager.component';
+
 import {interval} from 'rxjs';
 import {take} from 'rxjs/operators';
 
@@ -44,6 +46,8 @@ import {MatDialogModule as MatDialogModuleNew} from '@angular/material/dialog';
 import {AlertService} from 'src/app/common/services/alert.service';
 import {AlertComponent} from 'src/app/common/services/alert.service';
 
+
+
 import {setTheme} from 'ngx-bootstrap/utils';
 
 import {AboutDoubtfireModalService} from 'src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.service';
@@ -228,6 +232,7 @@ import {GradeService} from './common/services/grade.service';
 @NgModule({
   // Components we declare
   declarations: [
+    GroupSetManagerComponent,
     AlertComponent,
     AboutDoubtfireModalContent,
     TeachingPeriodUnitImportDialogComponent,

src/app/doubtfire-angularjs.module.ts

@@ -87,7 +87,7 @@ import 'build/src/app/projects/project-outcome-alignment/project-outcome-alignme
 import 'build/src/app/admin/modals/modals.js';
 import 'build/src/app/admin/modals/create-unit-modal/create-unit-modal.js';
 import 'build/src/app/groups/group-selector/group-selector.js';
-import 'build/src/app/groups/group-set-manager/group-set-manager.js';
+// 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';
@@ -146,6 +146,7 @@ import 'build/src/i18n/resources-locale_en-AU.js';
 import 'build/src/i18n/resources-locale_en-GB.js';
 //#endregion
 
+
 import {AboutDoubtfireModal} from 'src/app/common/modals/about-doubtfire-modal/about-doubtfire-modal.component';
 import {TaskCommentComposerComponent} from 'src/app/tasks/task-comment-composer/task-comment-composer.component';
 import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
@@ -220,6 +221,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 {GroupSetManagerComponent} from './groups/group-set-manager/group-set-manager.component';
 
 import {FUnitsComponent} from './admin/states/f-units/f-units.component';
 import {MarkedPipe} from './common/pipes/marked.pipe';
@@ -301,6 +303,10 @@ DoubtfireAngularJSModule.factory(
   'TransitionHooksService',
   downgradeInjectable(TransitionHooksService),
 );
+DoubtfireAngularJSModule.directive(
+  'groupSetManagerComponent',
+  downgradeComponent({component: GroupSetManagerComponent}),
+);
 DoubtfireAngularJSModule.factory(
   'EditProfileService',
   downgradeInjectable(EditProfileDialogService),

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

@@ -0,0 +1,59 @@
+<!-- <group-selector
+  [unit]="unit"
+  [unit-role]="unitRole"
+  [project]="project"
+  [selected-group]="selectedGroup"
+  [selected-group-set]="selectedGroupSet"
+  [show-group-set-selector]="showGroupSetSelector"
+  (on-select)="newGroupSelected()"
+  class="mat-card mat-card-primary"
+> -->
+<!-- </group-selector> -->
+
+<mat-card *ngIf="selectedGroup">
+  <mat-card-header>
+    <mat-card-title>
+      Members of
+      <span *ngIf="unitRole || selectedGroupSet.allowStudentsToManageGroups">
+        <a (click)="updateGroup(selectedGroup)">
+          {{ selectedGroup.name }}
+        </a>
+      </span>
+    </mat-card-title>
+    <mat-card-subtitle>
+      <mat-icon *ngIf="selectedGroup.locked" matTooltip="This group is locked">lock</mat-icon>
+    </mat-card-subtitle>
+  </mat-card-header>
+
+  <mat-card-content *ngIf="showMemberPanelToolbar">
+    <form (ngSubmit)="addMember(selectedStudent)" class="input-group">
+      <mat-form-field>
+        <input
+          matInput
+          placeholder="Enter student name or username..."
+          [(ngModel)]="selectedStudent"
+          name="selectedStudent"
+          [matAutocomplete]="auto"
+          (input)="filterStudents($event.target.value)"
+        />
+        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addMember($event.option.value)">
+          <mat-option *ngFor="let student of filteredStudents | async" [value]="student">
+            {{ student.name }}
+          </mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+
+      <button mat-raised-button color="primary" type="submit" [disabled]="!selectedStudent.id">
+        <mat-icon>add</mat-icon> Add Member
+      </button>
+    </form>
+  </mat-card-content>
+
+  <group-member-list
+    [unit]="unit"
+    [unit-role]="unitRole"
+    [project]="project"
+    [selected-group]="selectedGroup"
+    (on-members-loaded)="groupMembersLoaded()"
+  ></group-member-list>
+</mat-card>