Migration/groups.coffee

src/app/doubtfire-angularjs.module.ts

@@ -53,7 +53,6 @@ import 'build/src/app/config/routing/routing.js';
 import 'build/src/app/config/vendor-dependencies/vendor-dependencies.js';
 import 'build/src/app/config/analytics/analytics.js';
 import 'build/src/app/projects/projects.js';
-import 'build/src/app/projects/states/groups/groups.js';
 import 'build/src/app/projects/states/feedback/feedback.js';
 import 'build/src/app/projects/states/states.js';
 import 'build/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.js';

src/app/doubtfire.states.ts

@@ -17,7 +17,7 @@ import { Ng2ViewDeclaration } from '@uirouter/angular';
 import { TutorialsComponent } from './projects/states/tutorials/tutorials.component';
 import {PortfoliosComponent} from './units/states/portfolios/portfolios.component';
 import { RolloverComponent } from './units/states/rollover/rollover.component';
-
+import { ProjectGroupsComponent } from './projects/states/groups/project-groups/project-groups.component';
 /*
  * Use this file to store any states that are sourced by angular components.
  */
@@ -456,6 +456,20 @@ const PortfoliosState: NgHybridStateDeclaration = {
   },
 };
 
+const ProjectGroupsState: NgHybridStateDeclaration = {
+  name: 'projects/groups',
+  parent: 'projects2',
+  url: '/groups',
+  views: {
+    projectView: {
+      component: ProjectGroupsComponent,
+    },
+  },
+  data: {
+    task: 'Groups List',
+    pageTitle: 'Unit Groups',
+  },
+};
 
 const RolloverState: NgHybridStateDeclaration = {
   name: 'units/rollover',
@@ -505,4 +519,5 @@ export const doubtfireStates = [
   TutorialState,
   PortfoliosState,
   RolloverState,
+  ProjectGroupsState,
 ];

src/app/projects/states/groups/project-groups/project-groups.component.html

@@ -1,6 +1,6 @@
-<div class="container">
-  @if (unit.hasGroupwork()) {
-    <f-group-set-manager [project]="project" [unit]="unit" [selectedGroupSet]="selectedGroupSet">
+<div class="container" *ngIf="project$ | async as project">
+  @if (project.unit.hasGroupwork()) {
+    <f-group-set-manager [project]="project" [unit]="project.unit" [selectedGroupSet]="selectedGroupSet">
     </f-group-set-manager>
   } @else {
     <div class="flex flex-col justify-center items-center max-w-4xl mx-auto">

src/app/projects/states/groups/project-groups/project-groups.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {GroupSet, Project} from 'src/app/api/models/doubtfire-model';
-import {Unit} from 'src/app/api/models/unit';
+import { Observable } from 'rxjs';
 
 // This component is only displayed to students (projects)
 @Component({
@@ -9,7 +9,6 @@ import {Unit} from 'src/app/api/models/unit';
   styleUrl: './project-groups.component.scss',
 })
 export class ProjectGroupsComponent {
-  @Input() unit: Unit;
-  @Input() project: Project;
+  @Input() project$: Observable<Project>;
   @Input() selectedGroupSet: GroupSet;
 }

src/app/projects/states/states.coffee

@@ -2,6 +2,5 @@ angular.module('doubtfire.projects.states', [
   'doubtfire.projects.states.index'
   'doubtfire.projects.states.dashboard'
   'doubtfire.projects.states.portfolio'
-  'doubtfire.projects.states.groups'
   'doubtfire.projects.states.outcomes'
 ])