Update group-detail component (#1675)

modules/fbs-core/web/src/app/page-components/group-detail/group-detail.component.html

@@ -1 +1,5 @@
-<p>group-detail works!</p>
+<div class="group-details">
+  <button mat-icon-button color="primary">
+    <mat-icon (click)="navigateToKanban()">view_kanban</mat-icon>
+  </button>
+</div>

modules/fbs-core/web/src/app/page-components/group-detail/group-detail.component.scss

@@ -0,0 +1,9 @@
+@import "../../../colors";
+
+.group-details {
+  .mat-icon {
+    color: $cPrimary;
+    margin-top: 100px;
+    transform: scale(10);
+  }
+}

modules/fbs-core/web/src/app/page-components/group-detail/group-detail.component.ts

@@ -1,12 +1,41 @@
 import { Component, OnInit } from "@angular/core";
+import { Observable, of } from "rxjs";
+import { Group } from "../../model/group";
+import { GroupService } from "../../service/group.service";
+import { ActivatedRoute } from "@angular/router";
+import { TitlebarService } from "../../service/titlebar.service";
 
 @Component({
   selector: "app-group-detail",
   templateUrl: "./group-detail.component.html",
   styleUrls: ["./group-detail.component.scss"],
 })
 export class GroupDetailComponent implements OnInit {
-  constructor() {}
+  constructor(
+    private groupService: GroupService,
+    private route: ActivatedRoute,
+    private titlebar: TitlebarService
+  ) {}
+  courseID: number;
+  groupID: number;
+  group$: Observable<Group> = of();
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.route.params.subscribe((param) => {
+      this.courseID = param.courseId;
+      this.groupID = param.id;
+      this.loadGroup();
+    });
+  }
+
+  loadGroup(): void {
+    this.group$ = this.groupService.getGroup(this.courseID, this.groupID);
+    this.group$.subscribe((group) => {
+      this.titlebar.emitTitle(group.name);
+    });
+  }
+
+  navigateToKanban() {
+    window.location.href = "http://localhost:3000/";
+  }
 }