Auto-formatted every file to keep everything consistent.

src/app/policies/policies.module.ts

@@ -3,6 +3,7 @@ import { PolicyComponent } from './policy/policy.component';
 import { PolicyTableComponent } from './policy-table/policy-table.component';
 import { PolicyItemEditComponent } from './policy-item-edit/policy-item-edit.component';
 import { PolicyAddButtonComponent } from './policy-add-button/policy-add-button.component';
+import { PolicyAddFormComponent } from './policy-add-form/policy-add-form.component';
 
 
 @NgModule({
@@ -12,6 +13,7 @@ import { PolicyAddButtonComponent } from './policy-add-button/policy-add-button.
     PolicyTableComponent,
     PolicyAddButtonComponent,
     PolicyItemEditComponent,
+    PolicyAddFormComponent,
   ]
 })
 export class PoliciesModule { }

src/app/policies/policy-add-button/policy-add-button.component.html

@@ -1,4 +1,5 @@
-<button mat-button (click)="openDialog()">
+<button mat-button
+        (click)="openDialog()">
   <mat-icon>add</mat-icon>
   Add a policy
 </button>

src/app/policies/policy-add-button/policy-add-button.component.spec.ts

@@ -10,7 +10,7 @@ describe('PolicyAddButtonComponent', () => {
     await TestBed.configureTestingModule({
       imports: [PolicyAddButtonComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(PolicyAddButtonComponent);
     component = fixture.componentInstance;

src/app/policies/policy-add-button/policy-add-button.component.ts

@@ -19,9 +19,9 @@ export class PolicyAddButtonComponent {
   private readonly dialog = inject(MatDialog);
   @Input({ required: true }) policies: Policy[] = [];
   @Input({ required: true }) groups: Group[] = [];
-  @Input() group: string|undefined = undefined;
+  @Input() group: string | undefined = undefined;
   @Output() policy = new EventEmitter<Policy>();
-  
+
 
   openDialog(): void {
     const dialogRef = this.dialog.open(PolicyItemEditComponent, {

src/app/policies/policy-add-form/policy-add-form.component.html

@@ -1,25 +1,17 @@
-<div>
-    <form
-        standalone>
-        <mat-form-field>
-            <input
-                name="path"
-                type="text"
-                placeholder="Pick one"
-                [(ngModel)]="newPolicyName"
-                matInput
-                [formControl]="myControl"
-                [matAutocomplete]="auto" />
-            <mat-autocomplete #auto="matAutocomplete">
-                @for (option of filteredPolicies | async; track option) {
-                <mat-option [value]="option">{{option}}</mat-option>
-                }
-            </mat-autocomplete>
-        </mat-form-field>
-        <button
-            mat-flat-button
-            (click)="addNewPolicy()">
-            Add
-        </button>
-    </form>
-</div>
+<form standalone>
+  <mat-form-field>
+    <mat-label>Path</mat-label>
+    <input name="path"
+           type="text"
+           placeholder="Pick one"
+           [(ngModel)]="policy"
+           matInput
+           [formControl]="policyControl"
+           [matAutocomplete]="auto" />
+    <mat-autocomplete #auto="matAutocomplete">
+      @for (option of filteredPolicies | async; track option) {
+      <mat-option [value]="option">{{option}}</mat-option>
+      }
+    </mat-autocomplete>
+  </mat-form-field>
+</form>

src/app/policies/policy-add-form/policy-add-form.component.spec.ts

@@ -10,7 +10,7 @@ describe('PolicyAddFormComponent', () => {
     await TestBed.configureTestingModule({
       imports: [PolicyAddFormComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(PolicyAddFormComponent);
     component = fixture.componentInstance;

src/app/policies/policy-add-form/policy-add-form.component.ts

@@ -4,71 +4,68 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
-import EventService from '../../shared/services/EventService';
 import { map, Observable, startWith } from 'rxjs';
-import { HermesClientService } from '../../hermes-client.service';
 
 const Policies = [
-    { path: "tts", description: "Anything to do with TTS" },
-    { path: "tts.chat", description: "Anything to do with chat" },
-    { path: "tts.chat.bits.read", description: "To read chat messages with bits via TTS" },
-    { path: "tts.chat.messages.read", description: "To read chat messages via TTS" },
-    { path: "tts.chat.redemptions.read", description: "To read channel point redemption messages via TTS" },
-    { path: "tts.chat.subscriptions.read", description: "To read chat messages from subscriptions via TTS" },
-    { path: "tts.commands", description: "To execute commands for TTS" },
-    { path: "tts.commands.nightbot", description: "To use !nightbot command" },
-    { path: "tts.commands.obs", description: "To use !obs command" },
-    { path: "tts.commands.refresh", description: "To use !refresh command" },
-    { path: "tts.commands.skip", description: "To use !skip command" },
-    { path: "tts.commands.skipall", description: "To use !skipall command" },
-    { path: "tts.commands.tts", description: "To use !tts command" },
-    { path: "tts.commands.tts.join", description: "To use !tts join command" },
-    { path: "tts.commands.tts.leave", description: "To use !tts leave command" },
-    { path: "tts.commands.version", description: "To use !version command" },
-    { path: "tts.commands.voice", description: "To use !voice command" },
-    { path: "tts.commands.voice.admin", description: "To use !voice command on others" },
+  { path: "tts", description: "Anything to do with TTS" },
+  { path: "tts.chat", description: "Anything to do with chat" },
+  { path: "tts.chat.bits.read", description: "To read chat messages with bits via TTS" },
+  { path: "tts.chat.messages.read", description: "To read chat messages via TTS" },
+  { path: "tts.chat.redemptions.read", description: "To read channel point redemption messages via TTS" },
+  { path: "tts.chat.subscriptions.read", description: "To read chat messages from subscriptions via TTS" },
+  { path: "tts.commands", description: "To execute commands for TTS" },
+  { path: "tts.commands.nightbot", description: "To use !nightbot command" },
+  { path: "tts.commands.obs", description: "To use !obs command" },
+  { path: "tts.commands.refresh", description: "To use !refresh command" },
+  { path: "tts.commands.skip", description: "To use !skip command" },
+  { path: "tts.commands.skipall", description: "To use !skipall command" },
+  { path: "tts.commands.tts", description: "To use !tts command" },
+  { path: "tts.commands.tts.join", description: "To use !tts join command" },
+  { path: "tts.commands.tts.leave", description: "To use !tts leave command" },
+  { path: "tts.commands.version", description: "To use !version command" },
+  { path: "tts.commands.voice", description: "To use !voice command" },
+  { path: "tts.commands.voice.admin", description: "To use !voice command on others" },
 ]
 
 @Component({
-    selector: 'policy-add-form',
-    imports: [
-        AsyncPipe,
-        FormsModule,
-        MatAutocompleteModule,
-        MatButtonModule,
-        MatInputModule,
-        ReactiveFormsModule,
-    ],
-    templateUrl: './policy-add-form.component.html',
-    styleUrl: './policy-add-form.component.scss'
+  selector: 'policy-add-form',
+  imports: [
+    AsyncPipe,
+    FormsModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatInputModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './policy-add-form.component.html',
+  styleUrl: './policy-add-form.component.scss'
 })
 export class PolicyAddFormComponent {
-    myControl = new FormControl('');
-    newPolicyName: string = '';
-    filteredPolicies: Observable<string[]>;
+  policyControl = new FormControl('');
+  policy: string = '';
+  filteredPolicies: Observable<string[]>;
 
-    constructor(private events: EventService, private hermes: HermesClientService) {
-        this.filteredPolicies = this.myControl.valueChanges.pipe(
-            startWith(''),
-            map(value => this._filter(value || '')),
-        );
+  constructor() {
+    this.filteredPolicies = this.policyControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value || '')),
+    );
+  }
+
+  ngOnInit() {
+    this.filteredPolicies = this.policyControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value || '')),
+    );
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+    const names = Policies.map(p => p.path);
+    if (names.includes(filterValue)) {
+      return names;
     }
 
-    ngOnInit() {
-        this.filteredPolicies = this.myControl.valueChanges.pipe(
-            startWith(''),
-            map(value => this._filter(value || '')),
-        );
-    }
-
-    private _filter(value: string): string[] {
-        const filterValue = value.toLowerCase();
-
-        return Policies.map(p => p.path).filter(option => option.toLowerCase().includes(filterValue));
-    }
-
-    addNewPolicy() {
-        this.events.emit('addPolicy', this.newPolicyName);
-        this.newPolicyName = "";
-    }
+    return names.filter(option => option.toLowerCase().includes(filterValue));
+  }
 }

src/app/policies/policy-item-edit/policy-item-edit.component.html

@@ -3,16 +3,17 @@
     <mat-card-title>{{isNew ? 'Add' : 'Edit'}} Policy</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <group-dropdown
-      ngDefaultControl
-      [formControl]="groupControl"
-      [groups]="data.groups"
-      [group]="data.group_id"
-      [groupDisabled]="data.groupDisabled"
-      [errorMessages]="groupErrorMessages" />
+    <group-dropdown ngDefaultControl
+                    [formControl]="groupControl"
+                    [groups]="data.groups"
+                    [group]="data.group_id"
+                    [groupDisabled]="data.groupDisabled"
+                    [errorMessages]="groupErrorMessages" />
     <mat-form-field>
       <mat-label>Path</mat-label>
-      <input matInput placeholder="Path" [formControl]="pathControl" />
+      <input matInput
+             placeholder="Path"
+             [formControl]="pathControl" />
       @if (pathControl.invalid && (pathControl.dirty || pathControl.touched)) {
       @if (pathControl.hasError('required')) {
       <small class="error">This field is required.</small>
@@ -21,7 +22,9 @@
     </mat-form-field>
     <mat-form-field>
       <mat-label>Usage</mat-label>
-      <input matInput type="number" [formControl]="usageControl" />
+      <input matInput
+             type="number"
+             [formControl]="usageControl" />
       @if (usageControl.invalid && (usageControl.dirty || usageControl.touched)) {
       @if (usageControl.hasError('required')) {
       <small class="error">This field is required.</small>
@@ -39,7 +42,9 @@
     </mat-form-field>
     <mat-form-field>
       <mat-label>Span</mat-label>
-      <input matInput type="number" [formControl]="spanControl" />
+      <input matInput
+             type="number"
+             [formControl]="spanControl" />
       @if (spanControl.invalid && (spanControl.dirty || spanControl.touched)) {
       @if (spanControl.hasError('required')) {
       <small class="error">This field is required.</small>
@@ -58,15 +63,18 @@
   </mat-card-content>
   <mat-card-actions>
     @if (isNew) {
-    <button mat-button (click)="save()">
+    <button mat-button
+            (click)="save()">
       <mat-icon>add</mat-icon>Add
     </button>
     } @else {
-    <button mat-button (click)="save()">
+    <button mat-button
+            (click)="save()">
       <mat-icon>save</mat-icon>Save
     </button>
     }
-    <button mat-button (click)="dialogRef.close()">
+    <button mat-button
+            (click)="dialogRef.close()">
       <mat-icon>cancel</mat-icon>Cancel
     </button>
   </mat-card-actions>

src/app/policies/policy-item-edit/policy-item-edit.component.spec.ts

@@ -10,7 +10,7 @@ describe('PolicyItemEditComponent', () => {
     await TestBed.configureTestingModule({
       imports: [PolicyItemEditComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(PolicyItemEditComponent);
     component = fixture.componentInstance;

src/app/policies/policy-item-edit/policy-item-edit.component.ts

@@ -10,6 +10,7 @@ import { HermesClientService } from '../../hermes-client.service';
 import { GroupDropdownComponent } from '../../groups/group-dropdown/group-dropdown.component';
 import { Group } from '../../shared/models/group';
 import { Policy } from '../../shared/models/policy';
+import { PolicyAddFormComponent } from '../policy-add-form/policy-add-form.component';
 
 @Component({
   selector: 'policy-item-edit',
@@ -21,6 +22,7 @@ import { Policy } from '../../shared/models/policy';
     MatIconModule,
     MatInputModule,
     ReactiveFormsModule,
+    PolicyAddFormComponent
   ],
   templateUrl: './policy-item-edit.component.html',
   styleUrl: './policy-item-edit.component.scss'

src/app/policies/policy-table/policy-table.component.html

@@ -1,40 +1,59 @@
-<table mat-table [dataSource]="policies" class="mat-elevation-z8">
+<table mat-table
+       [dataSource]="policies"
+       class="mat-elevation-z8">
   <ng-container matColumnDef="path">
-    <th mat-header-cell *matHeaderCellDef>Path</th>
-    <td mat-cell *matCellDef="let policy">
+    <th mat-header-cell
+        *matHeaderCellDef>Path</th>
+    <td mat-cell
+        *matCellDef="let policy">
       {{policy.path}}
     </td>
   </ng-container>
 
   <ng-container matColumnDef="group">
-    <th mat-header-cell *matHeaderCellDef>Group</th>
-    <td mat-cell *matCellDef="let policy">
+    <th mat-header-cell
+        *matHeaderCellDef>Group</th>
+    <td mat-cell
+        *matCellDef="let policy">
       {{getGroupById(policy.group_id)?.name || '\<unknown group\>'}}
     </td>
   </ng-container>
 
   <ng-container matColumnDef="usage">
-    <th mat-header-cell *matHeaderCellDef>Usage Rate</th>
-    <td mat-cell class="center" *matCellDef="let policy">
+    <th mat-header-cell
+        *matHeaderCellDef>Usage Rate</th>
+    <td mat-cell
+        class="center"
+        *matCellDef="let policy">
       {{policy.usage}}
     </td>
   </ng-container>
 
   <ng-container matColumnDef="span">
-    <th mat-header-cell *matHeaderCellDef>Span (ms)</th>
-    <td mat-cell class="center" *matCellDef="let policy">
+    <th mat-header-cell
+        *matHeaderCellDef>Span (ms)</th>
+    <td mat-cell
+        class="center"
+        *matCellDef="let policy">
       {{policy.span}}
     </td>
   </ng-container>
 
   <ng-container matColumnDef="actions">
-    <th mat-header-cell *matHeaderCellDef> Actions </th>
-    <td mat-cell *matCellDef="let policy">
-      <button mat-button (click)="edit(policy)"><mat-icon>edit</mat-icon>Edit</button>
-      <button mat-button class="delete" (click)="delete(policy)"><mat-icon>delete</mat-icon>Delete</button>
+    <th mat-header-cell
+        *matHeaderCellDef> Actions </th>
+    <td mat-cell
+        *matCellDef="let policy">
+      <button mat-button
+              (click)="edit(policy)"><mat-icon>edit</mat-icon>Edit</button>
+      <button mat-button
+              class="delete"
+              (click)="delete(policy)"><mat-icon>delete</mat-icon>Delete</button>
     </td>
   </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <tr mat-header-row
+      *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row
+      *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

src/app/policies/policy-table/policy-table.component.scss

@@ -7,6 +7,6 @@ table {
   color: red;
 }
 
-button ~ button {
+button~button {
   margin-left: 1em;
 }

src/app/policies/policy-table/policy-table.component.spec.ts

@@ -10,7 +10,7 @@ describe('PolicyTableComponent', () => {
     await TestBed.configureTestingModule({
       imports: [PolicyTableComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(PolicyTableComponent);
     component = fixture.componentInstance;

src/app/policies/policy/policy.component.html

@@ -1,6 +1,8 @@
 <h4>Policies</h4>
 <div class="add">
-  <policy-add-button [policies]="policies" [groups]="groups" (policy)="addPolicy($event)" />
+  <policy-add-button [policies]="policies"
+                     [groups]="groups"
+                     (policy)="addPolicy($event)" />
 </div>
 
 <div>

src/app/policies/policy/policy.component.scss

@@ -1,5 +1,5 @@
 h4 {
-    text-align: center;
+  text-align: center;
 }
 
 .add {

src/app/policies/policy/policy.component.spec.ts

@@ -10,7 +10,7 @@ describe('PolicyComponent', () => {
     await TestBed.configureTestingModule({
       imports: [PolicyComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(PolicyComponent);
     component = fixture.componentInstance;