projects/cobbler-frontend/src/app/items/management-class/edit/management-class-edit.component.ts
OnInit
OnDestroy
selector | cobbler-management-class-edit |
standalone | true |
imports |
FormsModule
MatButton
MatCheckbox
MatFormField
MatIcon
MatIconButton
MatInput
MatLabel
MatTooltip
ReactiveFormsModule
MultiSelectComponent
KeyValueEditorComponent
|
templateUrl | ./management-class-edit.component.html |
styleUrl | ./management-class-edit.component.scss |
Properties |
|
Methods |
constructor(route: ActivatedRoute, userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar, router: Router, dialog: MatDialog)
|
|||||||||||||||||||||
Parameters :
|
cancelEdit |
cancelEdit()
|
Returns :
void
|
copyMgmtClass |
copyMgmtClass(uid: string, name: string)
|
Returns :
void
|
editProfile |
editProfile()
|
Returns :
void
|
getInheritObservable | ||||||
getInheritObservable(valueControl: AbstractControl)
|
||||||
Parameters :
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
refreshData |
refreshData()
|
Returns :
void
|
removeManagementClass |
removeManagementClass()
|
Returns :
void
|
saveProfile |
saveProfile()
|
Returns :
void
|
showAsRendered |
showAsRendered()
|
Returns :
void
|
Private Readonly _formBuilder |
Default value : inject(FormBuilder)
|
Protected Readonly CobblerInputChoices |
Default value : CobblerInputChoices
|
isEditMode |
Type : boolean
|
Default value : false
|
managementClass |
Type : Mgmgtclass
|
managementClassEditableInputData |
Type : Array<CobblerInputData>
|
Default value : [
...cobblerItemEditableData,
{
formControlName: 'is_definition',
inputType: CobblerInputChoices.CHECKBOX,
label: 'Comment',
disabled: true,
readonly: false,
defaultValue: false,
inherited: false,
},
{
formControlName: 'redhat_management_key',
inputType: CobblerInputChoices.TEXT,
label: 'RedHat Management Key',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'class_name',
inputType: CobblerInputChoices.TEXT,
label: 'Class Name',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'owners',
inputType: CobblerInputChoices.MULTI_SELECT,
label: 'Owners',
disabled: true,
readonly: false,
defaultValue: [],
inherited: true,
},
{
formControlName: 'params',
inputType: CobblerInputChoices.KEY_VALUE,
label: 'Params',
disabled: true,
readonly: false,
defaultValue: new Map<string, any>(),
inherited: true,
},
{
formControlName: 'files',
inputType: CobblerInputChoices.MULTI_SELECT,
label: 'Files',
disabled: true,
readonly: false,
defaultValue: [],
inherited: true,
},
{
formControlName: 'packages',
inputType: CobblerInputChoices.MULTI_SELECT,
label: 'Packages',
disabled: true,
readonly: false,
defaultValue: [],
inherited: true,
},
]
|
managementClassFormGroup |
Default value : this._formBuilder.group({})
|
managementClassReadonlyFormGroup |
Default value : this._formBuilder.group({})
|
managementClassReadonlyInputData |
Default value : cobblerItemReadonlyData
|
name |
Type : string
|
Private ngUnsubscribe |
Default value : new Subject<void>()
|
import { Component, Inject, inject, OnDestroy, OnInit } from '@angular/core';
import {
AbstractControl,
FormBuilder,
FormsModule,
ReactiveFormsModule,
} from '@angular/forms';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatCheckbox } from '@angular/material/checkbox';
import { MatDialog } from '@angular/material/dialog';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatIcon } from '@angular/material/icon';
import { MatInput } from '@angular/material/input';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltip } from '@angular/material/tooltip';
import { ActivatedRoute, Router } from '@angular/router';
import { CobblerApiService, Mgmgtclass } from 'cobbler-api';
import { combineLatest, Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { DialogBoxConfirmCancelEditComponent } from '../../../common/dialog-box-confirm-cancel-edit/dialog-box-confirm-cancel-edit.component';
import { DialogItemCopyComponent } from '../../../common/dialog-item-copy/dialog-item-copy.component';
import { KeyValueEditorComponent } from '../../../common/key-value-editor/key-value-editor.component';
import { MultiSelectComponent } from '../../../common/multi-select/multi-select.component';
import { UserService } from '../../../services/user.service';
import Utils, { CobblerInputChoices, CobblerInputData } from '../../../utils';
import { DialogBoxItemRenderedComponent } from '../../../common/dialog-box-item-rendered/dialog-box-item-rendered.component';
import {
cobblerItemEditableData,
cobblerItemReadonlyData,
} from '../../metadata';
@Component({
selector: 'cobbler-management-class-edit',
standalone: true,
imports: [
FormsModule,
MatButton,
MatCheckbox,
MatFormField,
MatIcon,
MatIconButton,
MatInput,
MatLabel,
MatTooltip,
ReactiveFormsModule,
MultiSelectComponent,
KeyValueEditorComponent,
],
templateUrl: './management-class-edit.component.html',
styleUrl: './management-class-edit.component.scss',
})
export class ManagementClassEditComponent implements OnInit, OnDestroy {
// Bring Enum to HTML scope
protected readonly CobblerInputChoices = CobblerInputChoices;
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
// Form data
managementClassReadonlyInputData = cobblerItemReadonlyData;
managementClassEditableInputData: Array<CobblerInputData> = [
...cobblerItemEditableData,
{
formControlName: 'is_definition',
inputType: CobblerInputChoices.CHECKBOX,
label: 'Comment',
disabled: true,
readonly: false,
defaultValue: false,
inherited: false,
},
{
formControlName: 'redhat_management_key',
inputType: CobblerInputChoices.TEXT,
label: 'RedHat Management Key',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'class_name',
inputType: CobblerInputChoices.TEXT,
label: 'Class Name',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'owners',
inputType: CobblerInputChoices.MULTI_SELECT,
label: 'Owners',
disabled: true,
readonly: false,
defaultValue: [],
inherited: true,
},
{
formControlName: 'params',
inputType: CobblerInputChoices.KEY_VALUE,
label: 'Params',
disabled: true,
readonly: false,
defaultValue: new Map<string, any>(),
inherited: true,
},
{
formControlName: 'files',
inputType: CobblerInputChoices.MULTI_SELECT,
label: 'Files',
disabled: true,
readonly: false,
defaultValue: [],
inherited: true,
},
{
formControlName: 'packages',
inputType: CobblerInputChoices.MULTI_SELECT,
label: 'Packages',
disabled: true,
readonly: false,
defaultValue: [],
inherited: true,
},
];
// Form
name: string;
managementClass: Mgmgtclass;
private readonly _formBuilder = inject(FormBuilder);
managementClassReadonlyFormGroup = this._formBuilder.group({});
managementClassFormGroup = this._formBuilder.group({});
isEditMode: boolean = false;
constructor(
private route: ActivatedRoute,
private userService: UserService,
private cobblerApiService: CobblerApiService,
private _snackBar: MatSnackBar,
private router: Router,
@Inject(MatDialog) readonly dialog: MatDialog,
) {
this.name = this.route.snapshot.paramMap.get('name');
Utils.fillupItemFormGroup(
this.managementClassReadonlyFormGroup,
this.managementClassFormGroup,
this.managementClassReadonlyInputData,
this.managementClassEditableInputData,
);
}
ngOnInit(): void {
this.refreshData();
// Observables for inherited properties
this.managementClassFormGroup
.get('owners_inherited')
.valueChanges.subscribe(
this.getInheritObservable(this.managementClassFormGroup.get('owners')),
);
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
getInheritObservable(
valueControl: AbstractControl,
): (value: boolean) => void {
return (value: boolean): void => {
if (!this.isEditMode) {
// If we are not in edit-mode we want to discard processing the event
return;
}
if (value) {
valueControl.disable();
} else {
valueControl.enable();
}
};
}
refreshData(): void {
this.cobblerApiService
.get_mgmtclass(this.name, false, false, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (value) => {
this.managementClass = value;
this.managementClassReadonlyFormGroup.patchValue({
name: this.managementClass.name,
uid: this.managementClass.uid,
mtime: Utils.floatToDate(this.managementClass.mtime).toString(),
ctime: Utils.floatToDate(this.managementClass.ctime).toString(),
depth: this.managementClass.depth,
is_subobject: this.managementClass.is_subobject,
});
this.managementClassFormGroup.patchValue({
is_definition: this.managementClass.is_definition,
comment: this.managementClass.comment,
class_name: this.managementClass.class_name,
params: this.managementClass.params,
files: this.managementClass.files,
packages: this.managementClass.packages,
});
Utils.patchFormGroupInherited(
this.managementClassFormGroup,
this.managementClass.owners,
'owners',
[],
);
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
}
removeManagementClass(): void {
this.cobblerApiService
.remove_mgmtclass(this.name, this.userService.token, false)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (value) => {
if (value) {
this.router.navigate(['/items', 'profile']);
}
// HTML encode the error message since it originates from XML
this._snackBar.open(
'Delete failed! Check server logs for more information.',
'Close',
);
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
}
editProfile(): void {
this.isEditMode = true;
this.managementClassFormGroup.enable();
// Inherit inputs
if (typeof this.managementClass.owners === 'string') {
this.managementClassFormGroup.get('owners').disable();
}
}
cancelEdit(): void {
const dialogRef = this.dialog.open(DialogBoxConfirmCancelEditComponent, {
data: {
name: this.managementClass.name,
},
});
dialogRef.afterClosed().subscribe((dialogResult) => {
if (dialogResult === false) {
// False means the user want's to continue
return;
}
this.isEditMode = false;
this.managementClassFormGroup.disable();
this.refreshData();
});
}
showAsRendered(): void {
this.cobblerApiService
.get_mgmtclass_as_rendered(
this.managementClass.name,
this.userService.token,
)
.subscribe((value) => {
this.dialog.open(DialogBoxItemRenderedComponent, {
data: {
itemType: 'Management Class',
uid: this.managementClass.uid,
name: this.managementClass.name,
renderedData: value,
},
});
});
}
copyMgmtClass(uid: string, name: string): void {
const dialogRef = this.dialog.open(DialogItemCopyComponent, {
data: {
itemType: 'Management Class',
itemName: name,
itemUid: uid,
},
});
dialogRef.afterClosed().subscribe((newItemName) => {
if (newItemName === undefined) {
// Cancel means we don't need to rename the management class
return;
}
this.cobblerApiService
.get_mgmtclass_handle(name, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (mgmtClassHandle) => {
this.cobblerApiService
.copy_mgmtclass(
mgmtClassHandle,
newItemName,
this.userService.token,
)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: () => {
this.router.navigate([
'/items',
'management-class',
newItemName,
]);
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
});
}
saveProfile(): void {
let dirtyValues = Utils.deduplicateDirtyValues(
this.managementClassFormGroup,
Utils.getDirtyValues(this.managementClassFormGroup),
);
this.cobblerApiService
.get_mgmtclass_handle(this.name, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (managementClassHandle) => {
let modifyObservables: Observable<boolean>[] = [];
dirtyValues.forEach((value, key) => {
modifyObservables.push(
this.cobblerApiService.modify_mgmtclass(
managementClassHandle,
key,
value,
this.userService.token,
),
);
});
combineLatest(modifyObservables).subscribe({
next: () => {
this.cobblerApiService
.save_mgmtclass(managementClassHandle, this.userService.token)
.subscribe({
next: () => {
this.isEditMode = false;
this.managementClassFormGroup.disable();
this.refreshData();
},
error: (error) => {
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
},
error: (error) => {
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
},
error: (error) => {
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
}
}
<div class="title-table">
<div class="title-row">
<h1 class="title title-cell-text">Name: {{ name }}</h1>
<span class="title-cell-button">
<button
mat-icon-button
[disabled]="isEditMode"
(click)="this.refreshData()"
matTooltip="Refresh data"
>
<mat-icon>refresh</mat-icon>
</button>
</span>
<span class="title-cell-button">
<button
mat-icon-button
[disabled]="isEditMode"
(click)="
this.copyMgmtClass(
this.managementClass.uid,
this.managementClass.name
)
"
matTooltip="Copy"
>
<mat-icon>content_copy</mat-icon>
</button>
</span>
<span class="title-cell-button">
<button
mat-icon-button
[disabled]="isEditMode"
(click)="this.showAsRendered()"
matTooltip="Show rendered data"
>
<mat-icon>info</mat-icon>
</button>
</span>
<span class="title-cell-button">
<button
mat-icon-button
[disabled]="isEditMode"
(click)="this.editProfile()"
matTooltip="Edit"
>
<mat-icon>edit</mat-icon>
</button>
</span>
<span class="title-cell-button">
<button
mat-icon-button
[disabled]="isEditMode"
(click)="this.removeManagementClass()"
matTooltip="Delete"
>
<mat-icon>delete</mat-icon>
</button>
</span>
@if (isEditMode) {
<span class="title-cell-button">
<button
mat-icon-button
(click)="this.cancelEdit()"
matTooltip="Cancel edit"
>
<mat-icon>cancel</mat-icon>
</button>
</span>
}
</div>
</div>
<form class="form-replicate" [formGroup]="managementClassReadonlyFormGroup">
@for (input of managementClassReadonlyInputData; track input) {
@switch (input.inputType) {
@case (CobblerInputChoices.TEXT) {
<mat-form-field class="form-field-full-width">
<mat-label>{{ input.label }}</mat-label>
<input
matInput
type="{{ input.inputType }}"
formControlName="{{ input.formControlName }}"
readonly="{{ input.readonly }}"
/>
</mat-form-field>
}
@case (CobblerInputChoices.NUMBER) {
<mat-form-field class="form-field-full-width">
<mat-label>{{ input.label }}</mat-label>
<input
matInput
type="{{ input.inputType }}"
formControlName="{{ input.formControlName }}"
readonly="{{ input.readonly }}"
/>
</mat-form-field>
}
@case (CobblerInputChoices.CHECKBOX) {
<mat-checkbox
class="form-field-full-width"
formControlName="{{ input.formControlName }}"
[disableRipple]="true"
(click)="$event.preventDefault()"
>
{{ input.label }}
</mat-checkbox>
}
}
}
</form>
<form class="form-replicate" [formGroup]="managementClassFormGroup">
@for (input of managementClassEditableInputData; track input) {
@switch (input.inputType) {
@case (CobblerInputChoices.TEXT) {
<mat-form-field class="form-field-full-width">
<mat-label>{{ input.label }}</mat-label>
<input
matInput
type="{{ input.inputType }}"
formControlName="{{ input.formControlName }}"
readonly="{{ input.readonly }}"
/>
</mat-form-field>
}
@case (CobblerInputChoices.NUMBER) {
<mat-form-field class="form-field-full-width">
<mat-label>{{ input.label }}</mat-label>
<input
matInput
type="{{ input.inputType }}"
formControlName="{{ input.formControlName }}"
readonly="{{ input.readonly }}"
/>
</mat-form-field>
}
@case (CobblerInputChoices.CHECKBOX) {
<mat-checkbox
class="form-field-full-width"
formControlName="{{ input.formControlName }}"
[disableRipple]="true"
(click)="$event.preventDefault()"
>
{{ input.label }}
</mat-checkbox>
}
@case (CobblerInputChoices.MULTI_SELECT) {
<ng-container class="form-field-full-width">
<cobbler-multi-select
label="{{ input.label }}"
formControlName="{{ input.formControlName }}"
></cobbler-multi-select>
@if (input.inherited) {
<mat-checkbox
formControlName="{{ input.formControlName }}_inherited"
>Inherited</mat-checkbox
>
}
</ng-container>
}
@case (CobblerInputChoices.KEY_VALUE) {
<ng-container class="form-field-full-width">
<cobbler-key-value-editor
label="{{ input.label }}"
formControlName="{{ input.formControlName }}"
></cobbler-key-value-editor>
@if (input.inherited) {
<mat-checkbox
formControlName="{{ input.formControlName }}_inherited"
>Inherited</mat-checkbox
>
}
</ng-container>
}
}
}
@if (isEditMode) {
<div>
<button mat-button (click)="saveProfile()">Save Management Class</button>
</div>
}
</form>