projects/cobbler-frontend/src/app/items/package/edit/package-edit.component.ts
OnInit
OnDestroy
selector | cobbler-package-edit |
standalone | true |
imports |
FormsModule
MatButton
MatCheckbox
MatFormField
MatIcon
MatIconButton
MatInput
MatLabel
MatTooltip
ReactiveFormsModule
MultiSelectComponent
KeyValueEditorComponent
|
templateUrl | ./package-edit.component.html |
styleUrl | ./package-edit.component.scss |
Properties |
|
Methods |
constructor(route: ActivatedRoute, userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar, router: Router, dialog: MatDialog)
|
|||||||||||||||||||||
Parameters :
|
cancelEdit |
cancelEdit()
|
Returns :
void
|
copyPackage |
copyPackage(uid: string, name: string)
|
Returns :
void
|
editPackage |
editPackage()
|
Returns :
void
|
getInheritObservable | ||||||
getInheritObservable(valueControl: AbstractControl)
|
||||||
Parameters :
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
refreshData |
refreshData()
|
Returns :
void
|
removePackage |
removePackage()
|
Returns :
void
|
savePackage |
savePackage()
|
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
|
name |
Type : string
|
Private ngUnsubscribe |
Default value : new Subject<void>()
|
package |
Type : Package
|
packageEditableInputData |
Type : Array<CobblerInputData>
|
Default value : [
...cobblerItemEditableData,
{
formControlName: 'redhat_management_key',
inputType: CobblerInputChoices.TEXT,
label: 'RedHat Management Key',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'mode',
inputType: CobblerInputChoices.TEXT,
label: 'Mode',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'owner',
inputType: CobblerInputChoices.TEXT,
label: 'Owner',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'group',
inputType: CobblerInputChoices.TEXT,
label: 'Group',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'path',
inputType: CobblerInputChoices.TEXT,
label: 'Path',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'template',
inputType: CobblerInputChoices.TEXT,
label: 'Template',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'action',
inputType: CobblerInputChoices.TEXT,
label: 'Action',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'installer',
inputType: CobblerInputChoices.TEXT,
label: 'Installer',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'version',
inputType: CobblerInputChoices.TEXT,
label: 'Version',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'owners',
inputType: CobblerInputChoices.MULTI_SELECT,
label: 'Owners',
disabled: true,
readonly: false,
defaultValue: [],
inherited: true,
},
]
|
packageFormGroup |
Default value : this._formBuilder.group({})
|
packageReadonlyFormGroup |
Default value : this._formBuilder.group({})
|
packageReadonlyInputData |
Default value : cobblerItemReadonlyData
|
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, Package } 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 { 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 { KeyValueEditorComponent } from '../../../common/key-value-editor/key-value-editor.component';
import {
cobblerItemEditableData,
cobblerItemReadonlyData,
} from '../../metadata';
@Component({
selector: 'cobbler-package-edit',
standalone: true,
imports: [
FormsModule,
MatButton,
MatCheckbox,
MatFormField,
MatIcon,
MatIconButton,
MatInput,
MatLabel,
MatTooltip,
ReactiveFormsModule,
MultiSelectComponent,
KeyValueEditorComponent,
],
templateUrl: './package-edit.component.html',
styleUrl: './package-edit.component.scss',
})
export class PackageEditComponent implements OnInit, OnDestroy {
// Bring Enum to HTML scope
protected readonly CobblerInputChoices = CobblerInputChoices;
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
// Form data
packageReadonlyInputData = cobblerItemReadonlyData;
packageEditableInputData: Array<CobblerInputData> = [
...cobblerItemEditableData,
{
formControlName: 'redhat_management_key',
inputType: CobblerInputChoices.TEXT,
label: 'RedHat Management Key',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'mode',
inputType: CobblerInputChoices.TEXT,
label: 'Mode',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'owner',
inputType: CobblerInputChoices.TEXT,
label: 'Owner',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'group',
inputType: CobblerInputChoices.TEXT,
label: 'Group',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'path',
inputType: CobblerInputChoices.TEXT,
label: 'Path',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'template',
inputType: CobblerInputChoices.TEXT,
label: 'Template',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'action',
inputType: CobblerInputChoices.TEXT,
label: 'Action',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'installer',
inputType: CobblerInputChoices.TEXT,
label: 'Installer',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'version',
inputType: CobblerInputChoices.TEXT,
label: 'Version',
disabled: true,
readonly: false,
defaultValue: '',
inherited: false,
},
{
formControlName: 'owners',
inputType: CobblerInputChoices.MULTI_SELECT,
label: 'Owners',
disabled: true,
readonly: false,
defaultValue: [],
inherited: true,
},
];
// Form
name: string;
package: Package;
private readonly _formBuilder = inject(FormBuilder);
packageReadonlyFormGroup = this._formBuilder.group({});
packageFormGroup = 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.packageReadonlyFormGroup,
this.packageFormGroup,
this.packageReadonlyInputData,
this.packageEditableInputData,
);
}
ngOnInit(): void {
this.refreshData();
// Observables for inherited properties
this.packageFormGroup
.get('owners_inherited')
.valueChanges.subscribe(
this.getInheritObservable(this.packageFormGroup.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_package(this.name, false, false, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(
(value) => {
this.package = value;
this.packageReadonlyFormGroup.patchValue({
name: this.package.name,
uid: this.package.uid,
mtime: Utils.floatToDate(this.package.mtime).toString(),
ctime: Utils.floatToDate(this.package.ctime).toString(),
depth: this.package.depth,
is_subobject: this.package.is_subobject,
});
this.packageFormGroup.patchValue({
comment: this.package.comment,
mode: this.package.mode,
owner: this.package.owner,
group: this.package.group,
path: this.package.path,
template: this.package.template,
action: this.package.action,
installer: this.package.installer,
version: this.package.version,
});
Utils.patchFormGroupInherited(
this.packageFormGroup,
this.package.owners,
'owners',
[],
);
},
(error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
);
}
removePackage(): void {
this.cobblerApiService
.remove_package(this.name, this.userService.token, false)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (value) => {
if (value) {
this.router.navigate(['/items', 'package']);
}
// 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');
},
});
}
editPackage(): void {
this.isEditMode = true;
this.packageFormGroup.enable();
// Inherit inputs
if (typeof this.package.owners === 'string') {
this.packageFormGroup.get('owners').disable();
}
}
cancelEdit(): void {
const dialogRef = this.dialog.open(DialogBoxConfirmCancelEditComponent, {
data: {
name: this.package.name,
},
});
dialogRef.afterClosed().subscribe((dialogResult) => {
if (dialogResult === false) {
// False means the user want's to continue
return;
}
this.isEditMode = false;
this.packageFormGroup.disable();
this.refreshData();
});
}
showAsRendered(): void {
this.cobblerApiService
.get_package_as_rendered(this.package.name, this.userService.token)
.subscribe((value) => {
this.dialog.open(DialogBoxItemRenderedComponent, {
data: {
itemType: 'Package',
uid: this.package.uid,
name: this.package.name,
renderedData: value,
},
});
});
}
copyPackage(uid: string, name: string): void {
const dialogRef = this.dialog.open(DialogItemCopyComponent, {
data: {
itemType: 'Package',
itemName: name,
itemUid: uid,
},
});
dialogRef.afterClosed().subscribe((newItemName) => {
if (newItemName === undefined) {
// Cancel means we don't need to rename the package
return;
}
this.cobblerApiService
.get_package_handle(name, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (packageHandle) => {
this.cobblerApiService
.copy_package(packageHandle, newItemName, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: () => {
this.router.navigate(['/items', 'package', 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');
},
});
});
}
savePackage(): void {
let dirtyValues = Utils.deduplicateDirtyValues(
this.packageFormGroup,
Utils.getDirtyValues(this.packageFormGroup),
);
this.cobblerApiService
.get_package_handle(this.name, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (packageHandle) => {
let modifyObservables: Observable<boolean>[] = [];
dirtyValues.forEach((value, key) => {
modifyObservables.push(
this.cobblerApiService.modify_package(
packageHandle,
key,
value,
this.userService.token,
),
);
});
combineLatest(modifyObservables).subscribe({
next: () => {
this.cobblerApiService
.save_package(packageHandle, this.userService.token)
.subscribe({
next: () => {
this.isEditMode = false;
this.packageFormGroup.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.copyPackage(this.package.uid, this.package.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.editPackage()"
matTooltip="Edit"
>
<mat-icon>edit</mat-icon>
</button>
</span>
<span class="title-cell-button">
<button
mat-icon-button
[disabled]="isEditMode"
(click)="this.removePackage()"
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]="packageReadonlyFormGroup">
@for (input of packageReadonlyInputData; 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]="packageFormGroup">
@for (input of packageEditableInputData; 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)="savePackage()">Save Package</button>
</div>
}
</form>