tom/hermes-web-angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added policy path dropdown.

Browse Source
This commit is contained in:
Tom 2025-03-18 14:39:02 +00:00
parent 9201f9b6c5
commit d0556dce9c
11 changed files with 54 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/actions/action-item-edit/action-item-edit.component.html
View File

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

1
src/app/groups/group-dropdown/group-dropdown.component.html
View File

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

4
src/app/policies/policies.module.ts
View File

@ -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 { }

17
src/app/policies/policy-add-form/policy-add-form.component.html
View File

@ -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>

0
src/app/policies/policy-add-form/policy-add-form.component.scss
View File

19
src/app/policies/policy-dropdown/policy-dropdown.component.html Normal file
View File

@ -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>

3
src/app/policies/policy-dropdown/policy-dropdown.component.scss Normal file
View File

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

10
src/app/policies/policy-add-form/policy-add-form.component.spec.ts → src/app/policies/policy-dropdown/policy-dropdown.component.spec.ts
View File

@ -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 fixture: ComponentFixture<PolicyAddFormComponent>;
let component: PolicyDropdownComponent;
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();
});

17
src/app/policies/policy-add-form/policy-add-form.component.ts → src/app/policies/policy-dropdown/policy-dropdown.component.ts
View File

@ -1,6 +1,6 @@
import { AsyncPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'
import { Component, Input } from '@angular/core';
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',
styleUrl: './policy-add-form.component.scss'
templateUrl: './policy-dropdown.component.html',
styleUrl: './policy-dropdown.component.scss'
})
export class PolicyAddFormComponent {
policyControl = new FormControl('');
policy: string = '';
export class PolicyDropdownComponent {
@Input() policy: string | null = '';
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 || '')),

12
src/app/policies/policy-item-edit/policy-item-edit.component.html
View File

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

19
src/app/policies/policy-item-edit/policy-item-edit.component.ts
View File

@ -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;