Added groups - missing user management. Fixed several issues.

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

@@ -0,0 +1,38 @@
+<div>
+  <h2>{{group?.name}}</h2>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>Policies</mat-panel-title>
+      <mat-panel-description class="muted">
+        {{policies.length}} polic{{policies.length == 1 ? 'y' : 'ies'}}
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+    <policy-add-button class="add" [groups]="groups" [policies]="policies" [group]="group?.id" />
+    @if (policies.length > 0) {
+    <policy-table [policies]="policies" />
+    }
+  </mat-expansion-panel>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title class="danger">Danger Zone</mat-panel-title>
+      <mat-panel-description class="muted">
+        Dangerous actions
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+    <div class="content">
+      <section>
+        <article class="left">
+          <h4>Deletion</h4>
+          <p>Deleting this group will delete everything that is part of it, including policies and permissions.</p>
+        </article>
+        <article class="right">
+          <button mat-raised-button class="delete" (click)="delete()">
+            <mat-icon>delete</mat-icon>Delete this group.
+          </button>
+        </article>
+      </section>
+    </div>
+  </mat-expansion-panel>
+</div>

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

@@ -0,0 +1,21 @@
+.mat-expansion-panel ~ .mat-expansion-panel {
+  margin-top: 4em;
+}
+
+.delete {
+  justify-content: space-around;
+  color: red;
+}
+
+.muted {
+  color: grey;
+  margin: 5px 0;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}

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

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

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

@@ -0,0 +1,86 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Group } from '../../shared/models/group';
+import { Policy } from '../../shared/models/policy';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { PoliciesModule } from '../../policies/policies.module';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { PolicyTableComponent } from "../../policies/policy-table/policy-table.component";
+import { PolicyAddButtonComponent } from '../../policies/policy-add-button/policy-add-button.component';
+import { HermesClientService } from '../../hermes-client.service';
+import { GroupChatter } from '../../shared/models/group-chatter';
+
+@Component({
+  selector: 'group-page',
+  imports: [
+    MatButtonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    PoliciesModule,
+    PolicyAddButtonComponent,
+    ReactiveFormsModule,
+    PolicyTableComponent
+  ],
+  templateUrl: './group-page.component.html',
+  styleUrl: './group-page.component.scss'
+})
+export class GroupPageComponent {
+  private readonly _router = inject(Router);
+  private readonly _route = inject(ActivatedRoute);
+  private readonly _client = inject(HermesClientService);
+  private _group: Group | undefined;
+  private _chatters: GroupChatter[];
+  private _policies: Policy[];
+
+  groups: Group[] = [];
+
+  constructor() {
+    this._chatters = [];
+    this._policies = [];
+
+    this._route.params.subscribe((p: any) => {
+      const group_id = p.id;
+
+      this._route.data.subscribe(async (data: any) => {
+        this.groups = [...data['groups']];
+        const group = this.groups.find((g: Group) => g.id == group_id);
+
+        if (!group) {
+          await this._router.navigate(['groups']);
+          return;
+        }
+
+        this._group = group;
+        this._chatters = [...data['chatters'].filter((c: GroupChatter) => c.group_id == group_id)];
+        this._policies = [...data['policies'].filter((p: Policy) => p.group_id == group_id)];
+      });
+    });
+  }
+
+  get group() {
+    return this._group;
+  }
+
+  get chatters() {
+    return this._chatters;
+  }
+
+  get policies() {
+    return this._policies;
+  }
+
+  delete() {
+    if (!this.group)
+      return;
+
+    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);
+  }
+}