feat: add user badge component

src/app/common/user-badge/user-badge.component.html

@@ -0,0 +1,9 @@
+<mat-chip-list *ngIf="project" #chipList aria-label="user badge" (click)="goToStudent()">
+  <mat-chip fxLayout="row" style="padding-left: -0px">
+    <user-icon size="32" [user]="project.student" style="margin-right: 10px"></user-icon>
+    <span>{{ project.student.name }}</span>
+  </mat-chip>
+  <mat-chip>
+    <span>{{ project.targetGradeAcronym }}</span>
+  </mat-chip>
+</mat-chip-list>

src/app/common/user-badge/user-badge.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserBadgeComponent } from './user-badge.component';
+
+describe('UserBadgeComponent', () => {
+  let component: UserBadgeComponent;
+  let fixture: ComponentFixture<UserBadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UserBadgeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/common/user-badge/user-badge.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { UIRouter } from '@uirouter/angular';
+import { Project, ProjectService } from 'src/app/api/models/doubtfire-model';
+import { UserService } from 'src/app/api/services/user.service';
+
+@Component({
+  selector: 'f-user-badge',
+  templateUrl: './user-badge.component.html',
+  styleUrls: ['./user-badge.component.scss'],
+})
+export class UserBadgeComponent {
+  constructor(private userService: UserService, private router: UIRouter, private projectService: ProjectService) {}
+  @Input() project: Project;
+
+  goToStudent(): void {
+    this.router.stateService.go('projects/dashboard', {
+      projectId: this.project.id,
+      tutor: true,
+      taskAbbr: '',
+    });
+  }
+}

src/app/doubtfire-angular.module.ts

@@ -174,6 +174,7 @@ import { SignInComponent } from './sessions/states/sign-in/sign-in.component';
 import { EditProfileFormComponent } from './common/edit-profile-form/edit-profile-form.component';
 import { TransitionHooksService } from './sessions/transition-hooks.service';
 import { EditProfileComponent } from './account/edit-profile/edit-profile.component';
+import { UserBadgeComponent } from './common/user-badge/user-badge.component';
 
 @NgModule({
   // Components we declare
@@ -237,6 +238,7 @@ import { EditProfileComponent } from './account/edit-profile/edit-profile.compon
     SignInComponent,
     EditProfileFormComponent,
     EditProfileComponent,
+    UserBadgeComponent,
   ],
   // Module Imports
   imports: [

src/app/doubtfire-angularjs.module.ts

@@ -264,6 +264,7 @@ import { ObjectSelectComponent } from './common/obect-select/object-select.compo
 import { TaskDefinitionService } from './api/services/task-definition.service';
 import { EditProfileDialogService } from './common/modals/edit-profile-dialog/edit-profile-dialog.service';
 import { GroupService } from './api/services/group.service';
+import { UserBadgeComponent } from './common/user-badge/user-badge.component';
 
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
@@ -318,6 +319,7 @@ DoubtfireAngularJSModule.directive(
 );
 DoubtfireAngularJSModule.directive('objectSelect', downgradeComponent({ component: ObjectSelectComponent }));
 DoubtfireAngularJSModule.directive('appHeader', downgradeComponent({ component: HeaderComponent }));
+DoubtfireAngularJSModule.directive('userBadge', downgradeComponent({ component: UserBadgeComponent }));
 DoubtfireAngularJSModule.directive(
   'intelligentDiscussionPlayer',
   downgradeComponent({ component: IntelligentDiscussionPlayerComponent })