Added policy path dropdown.

src/app/actions/action-item-edit/action-item-edit.component.html

@@ -108,8 +108,7 @@
       }
     </mat-card-content>
 
-    <mat-card-actions class="actions"
+    <mat-card-actions class="actions">
-                      align="end">
       @if (!isNew) {
       <button mat-raised-button
               class="delete"

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

@@ -6,7 +6,6 @@
          aria-label="group"
          [formControl]="formControl"
          [matAutocomplete]="auto"
-         [disabled]="!!groupDisabled"
          [readonly]="!!groupDisabled"
          (blur)="blur()"
          (input)="input()">

src/app/policies/policies.module.ts

@@ -3,7 +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';
+import { PolicyDropdownComponent } from './policy-dropdown/policy-dropdown.component';
 
 
 @NgModule({
@@ -13,7 +13,7 @@ import { PolicyAddFormComponent } from './policy-add-form/policy-add-form.compon
     PolicyTableComponent,
     PolicyAddButtonComponent,
     PolicyItemEditComponent,
-    PolicyAddFormComponent,
+    PolicyDropdownComponent,
   ]
 })
 export class PoliciesModule { }

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

@@ -1,17 +0,0 @@
-<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-dropdown/policy-dropdown.component.html

@@ -0,0 +1,19 @@
+<mat-form-field>
+  <mat-label>Path</mat-label>
+  <input name="path"
+         matInput
+         type="text"
+         placeholder="Pick a policy..."
+         [formControl]="policyControl"
+         [matAutocomplete]="auto" />
+  <mat-autocomplete #auto="matAutocomplete">
+    @for (option of filteredPolicies | async; track option) {
+    <mat-option [value]="option">{{option}}</mat-option>
+    }
+  </mat-autocomplete>
+  @if (policyControl.invalid && (policyControl.dirty || policyControl.touched)) {
+  @if (policyControl.hasError('required')) {
+  <small class="error">This field is required.</small>
+  }
+  }
+</mat-form-field>

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

@@ -0,0 +1,3 @@
+.error {
+  color: #ba1a1a;
+}

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

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PolicyAddFormComponent } from './policy-add-form.component';
+import { PolicyDropdownComponent } from './policy-dropdown.component';
 
 describe('PolicyAddFormComponent', () => {
-  let component: PolicyAddFormComponent;
+  let component: PolicyDropdownComponent;
-  let fixture: ComponentFixture<PolicyAddFormComponent>;
+  let fixture: ComponentFixture<PolicyDropdownComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PolicyAddFormComponent]
+      imports: [PolicyDropdownComponent]
     })
       .compileComponents();
 
-    fixture = TestBed.createComponent(PolicyAddFormComponent);
+    fixture = TestBed.createComponent(PolicyDropdownComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/policies/policy-dropdown/policy-dropdown.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
@@ -28,7 +28,7 @@ const Policies = [
 ]
 
 @Component({
-  selector: 'policy-add-form',
+  selector: 'policy-dropdown',
   imports: [
     AsyncPipe,
     FormsModule,
@@ -37,12 +37,12 @@ const Policies = [
     MatInputModule,
     ReactiveFormsModule,
   ],
-  templateUrl: './policy-add-form.component.html',
+  templateUrl: './policy-dropdown.component.html',
-  styleUrl: './policy-add-form.component.scss'
+  styleUrl: './policy-dropdown.component.scss'
 })
-export class PolicyAddFormComponent {
+export class PolicyDropdownComponent {
-  policyControl = new FormControl('');
+  @Input() policy: string | null = '';
-  policy: string = '';
+  policyControl = new FormControl('', [Validators.required]);
   filteredPolicies: Observable<string[]>;
 
   constructor() {
@@ -53,6 +53,7 @@ export class PolicyAddFormComponent {
   }
 
   ngOnInit() {
+    this.policyControl.setValue(this.policy);
     this.filteredPolicies = this.policyControl.valueChanges.pipe(
       startWith(''),
       map(value => this._filter(value || '')),

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

@@ -9,17 +9,7 @@
                     [group]="data.group_id"
                     [groupDisabled]="data.groupDisabled"
                     [errorMessages]="groupErrorMessages" />
-    <mat-form-field>
+    <policy-dropdown #policyDropdown [policy]="pathControl.value" />
-      <mat-label>Path</mat-label>
-      <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>
-      }
-      }
-    </mat-form-field>
     <mat-form-field>
       <mat-label>Usage</mat-label>
       <input matInput

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

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from '@angular/core';
+import { AfterViewInit, Component, inject, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -10,7 +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';
+import { PolicyDropdownComponent } from '../policy-dropdown/policy-dropdown.component';
 
 @Component({
   selector: 'policy-item-edit',
@@ -22,20 +22,20 @@ import { PolicyAddFormComponent } from '../policy-add-form/policy-add-form.compo
     MatIconModule,
     MatInputModule,
     ReactiveFormsModule,
-    PolicyAddFormComponent
+    PolicyDropdownComponent
   ],
   templateUrl: './policy-item-edit.component.html',
   styleUrl: './policy-item-edit.component.scss'
 })
-export class PolicyItemEditComponent implements OnInit {
+export class PolicyItemEditComponent implements OnInit, AfterViewInit {
   private readonly client = inject(HermesClientService);
   readonly data = inject(MAT_DIALOG_DATA);
   readonly dialogRef = inject(MatDialogRef<PolicyItemEditComponent>);
 
   readonly groupControl = new FormControl<Group | string | undefined>(undefined, [Validators.required]);
-  readonly pathControl = new FormControl('', [Validators.required]);
   readonly usageControl = new FormControl(1, [Validators.required, Validators.min(1), Validators.max(99)]);
   readonly spanControl = new FormControl(5000, [Validators.required, Validators.min(1000), Validators.max(86400)]);
+  pathControl = new FormControl('', [Validators.required]);
 
   readonly groupErrorMessages = {
     'required': 'This field is required.'
@@ -51,6 +51,8 @@ export class PolicyItemEditComponent implements OnInit {
   isNew: boolean = false;
   waitForResponse: boolean = false;
 
+  @ViewChild('policyDropdown') policyDropdown: PolicyDropdownComponent | undefined;
+
   ngOnInit(): void {
     this.isNew = this.data.isNew;
 
@@ -67,6 +69,13 @@ export class PolicyItemEditComponent implements OnInit {
     this.spanControl.setValue(policy.span);
   }
 
+  ngAfterViewInit() {
+    if (this.policyDropdown) {
+      this.pathControl = this.policyDropdown.policyControl;
+      this.formGroup.setControl('path', this.pathControl);
+    }
+  }
+
   save() {
     if (this.formGroup.invalid || this.waitForResponse)
       return;