Added group permissions. Added some global styles. Made groups rely on services' data.

src/app/groups/group-page/group-page.component.html

@@ -14,6 +14,18 @@
   </mat-expansion-panel>
   }
 
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>Permissions</mat-panel-title>
+      <mat-panel-description class="muted">
+        {{permissions.length}} permission{{permissions.length == 1 ? '' : 's'}}
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+    <permission-list [permissions]="permissions"
+                     [groups]="groups"
+                     [group]="group" />
+  </mat-expansion-panel>
+
   <mat-expansion-panel>
     <mat-expansion-panel-header>
       <mat-panel-title>Policies</mat-panel-title>
@@ -43,7 +55,7 @@
         </article>
         <article class="right">
           <button mat-raised-button
-                  class="delete"
+                  class="danger"
                   (click)="delete()">
             <mat-icon>delete</mat-icon>Delete this group.
           </button>

src/app/groups/group-page/group-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Group } from '../../shared/models/group';
 import { Policy } from '../../shared/models/policy';
@@ -15,6 +15,12 @@ import { HermesClientService } from '../../hermes-client.service';
 import { GroupChatter } from '../../shared/models/group-chatter';
 import { TwitchUsersModule } from "../../twitch-users/twitch-users.module";
 import { SpecialGroups } from '../../shared/utils/groups';
+import { PermissionListComponent } from "../../permissions/permission-list/permission-list.component";
+import { Permission } from '../../shared/models/permission';
+import { Subscription } from 'rxjs';
+import { PermissionService } from '../../shared/services/permission.service';
+import GroupService from '../../shared/services/group.service';
+import PolicyService from '../../shared/services/policy.service';
 
 @Component({
   imports: [
@@ -29,30 +35,42 @@ import { SpecialGroups } from '../../shared/utils/groups';
     PolicyTableComponent,
     PolicyTableComponent,
     TwitchUsersModule,
+    PermissionListComponent
   ],
   templateUrl: './group-page.component.html',
   styleUrl: './group-page.component.scss'
 })
-export class GroupPageComponent {
+export class GroupPageComponent implements OnDestroy {
   private readonly _router = inject(Router);
   private readonly _route = inject(ActivatedRoute);
+  private readonly _groupService = inject(GroupService);
+  private readonly _permissionService = inject(PermissionService);
+  private readonly _policyService = inject(PolicyService);
   private readonly _client = inject(HermesClientService);
   private _group: Group | undefined;
   private _chatters: GroupChatter[];
   private _policies: Policy[];
+  private _permissions: Permission[];
+
+  isSpecialGroup: boolean;
+  _groups: Group[];
+
+  private readonly subscriptions: (Subscription | undefined)[] = [];
 
-  isSpecialGroup = false;
-  groups: Group[] = [];
 
   constructor() {
+    this.isSpecialGroup = false
+    this._groups = [];
     this._chatters = [];
+    this._permissions = [];
     this._policies = [];
 
-    this._route.params.subscribe((p: any) => {
-      const group_id = p.id;
+    this._route.params.subscribe((params: any) => {
+      // Fetch the group id from the query params.
+      const group_id = params['id'];
 
       this._route.data.subscribe(async (data: any) => {
-        this.groups = [...data['groups']];
+        this._groups = data['groups'];
         const group = this.groups.find((g: Group) => g.id == group_id);
 
         if (!group) {
@@ -62,29 +80,88 @@ export class GroupPageComponent {
 
         this._group = group;
         this.isSpecialGroup = SpecialGroups.includes(this.group!.name);
-        this._chatters = [...data['chatters'].filter((c: GroupChatter) => c.group_id == group_id)];
-        this._policies = [...data['policies'].filter((p: Policy) => p.group_id == group_id)];
+        this._chatters = data['chatters'];
+        this._permissions = data['permissions'];
+        this._policies = data['policies'];
       });
     });
+
+    this.subscriptions.push(this._permissionService.delete$?.subscribe(d => {
+      if (d.error) {
+        return;
+      }
+
+      this._permissionService.fetch().subscribe(permissions => this._permissions = permissions);
+    }));
+
+    this.subscriptions.push(this._groupService.deleteGroup$?.subscribe(d => {
+      if (d.error) {
+        return;
+      }
+
+      this._groupService.fetch().subscribe(data => this._groups = data.groups);
+    }));
+
+    this.subscriptions.push(this._groupService.deleteChatter$?.subscribe(d => {
+      if (d.error) {
+        return;
+      }
+
+      this._groupService.fetch().subscribe(data => this._chatters = data.chatters);
+    }));
+
+    this.subscriptions.push(this._policyService.delete$?.subscribe(d => {
+      if (d.error) {
+        return;
+      }
+
+      this._policyService.fetch().subscribe(policies => this._policies = policies);
+    }));
+  }
+
+  ngOnDestroy(): void {
+    if (this.subscriptions) {
+      for (let subscription of this.subscriptions) {
+        if (subscription)
+          subscription.unsubscribe();
+      }
+    }
   }
 
   get group() {
     return this._group;
   }
 
+  get groups() {
+    return this._groups;
+  }
+
   get chatters() {
-    return this._chatters;
+    if (!this._group) {
+      return [];
+    }
+    return this._chatters.filter((c: GroupChatter) => c.group_id == this._group!.id);
+  }
+
+  get permissions() {
+    if (!this._group) {
+      return [];
+    }
+    return this._permissions.filter((p: Permission) => p.group_id == this._group!.id);
   }
 
   get policies() {
-    return this._policies;
+    if (!this._group) {
+      return [];
+    }
+    return this._policies.filter((p: Policy) => p.group_id == this._group!.id);
   }
 
   delete() {
     if (!this.group)
       return;
 
-    this._client.first(d => d.d.request.type == 'delete_group' && d.d.request.data.group == this.group!.id)
+    this._client.first(d => d.d.request.type == 'delete_group' && d.d.request.data.id == this.group!.id)
       .subscribe(async () => await this._router.navigate(['groups']));
     this._client.deleteGroup(this.group.id);
   }