Skip to content

Commit

Permalink
Cobbler-Frontend: Continue Edit
Browse files Browse the repository at this point in the history
  • Loading branch information
@SchoolGuy
SchoolGuy committed Nov 9, 2024
1 parent 995e16b commit cc08c84
Show file tree
Hide file tree
Showing 2 changed files with 193 additions and 28 deletions.
41 changes: 31 additions & 10 deletions projects/cobbler-frontend/src/app/items/system/edit/system-edit.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ <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"
>
Expand All @@ -13,52 +14,72 @@ <h1 class="title title-cell-text">Name: {{ name }}</h1>
<span class="title-cell-button">
<button
mat-icon-button
[disabled]="isEditMode"
(click)="this.copySystem(this.system.uid, this.system.name)"
matTooltip="Copy"
>
<mat-icon>content_copy</mat-icon>
</button>
</span>
<span class="title-cell-button">
<button mat-icon-button (click)="this.editSystem()" matTooltip="Edit">
<button mat-icon-button [disabled]="isEditMode" (click)="this.editSystem()" matTooltip="Edit">
<mat-icon>edit</mat-icon>
</button>
</span>
<span class="title-cell-button">
<button mat-icon-button (click)="this.removeSystem()" matTooltip="Delete">
<button mat-icon-button [disabled]="isEditMode" (click)="this.removeSystem()" 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>

<!-- TODO: Use tabs to separate system and interfaces -->
<!-- TODO: Use tabs to separate system and power options -->

<form class="form-replicate" [formGroup]="systemFormGroup">
<form class="form-replicate" [formGroup]="systemReadonlyFormGroup">
<mat-form-field class="form-field-full-width">
<mat-label>Name</mat-label>
<input matInput type="text" formControlName="name" />
<input matInput type="text" formControlName="name" [readonly]="true" />
</mat-form-field>
<mat-form-field class="form-field-full-width">
<mat-label>UID</mat-label>
<input matInput type="text" formControlName="uid" />
<input matInput type="text" formControlName="uid" [readonly]="true" />
</mat-form-field>
<mat-form-field class="form-field-full-width">
<mat-label>Last modified time</mat-label>
<input matInput type="text" formControlName="mtime" />
<input matInput type="text" formControlName="mtime" [readonly]="true" />
</mat-form-field>
<mat-form-field class="form-field-full-width">
<mat-label>Creation time</mat-label>
<input matInput type="text" formControlName="ctime" />
<input matInput type="text" formControlName="ctime" [readonly]="true" />
</mat-form-field>
<mat-form-field class="form-field-full-width">
<mat-label>Depth</mat-label>
<input matInput type="number" formControlName="depth" />
<input matInput type="number" formControlName="depth" [readonly]="true" />
</mat-form-field>
<mat-checkbox class="form-field-full-width" formControlName="is_subobject"
>Is Subobject?</mat-checkbox
<mat-checkbox
class="form-field-full-width"
formControlName="is_subobject"
[disableRipple]="true"
(click)="$event.preventDefault()"
>
Is Subobject?
</mat-checkbox>
</form>

<form class="form-replicate" [formGroup]="systemFormGroup">
<ng-container class="form-field-full-width">
<cobbler-multi-select
label="Boot Loaders"
Expand Down
180 changes: 162 additions & 18 deletions projects/cobbler-frontend/src/app/items/system/edit/system-edit.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltip } from '@angular/material/tooltip';
import { ActivatedRoute, Router } from '@angular/router';
import { CobblerApiService, System } from 'cobbler-api';
import { Subject } from 'rxjs';
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';
Expand Down Expand Up @@ -55,18 +56,20 @@ export class SystemEditComponent implements OnInit, OnDestroy {
name: string;
system: System;
private readonly _formBuilder = inject(FormBuilder);
systemReadonlyFormGroup = this._formBuilder.group({
name: new FormControl({ value: '', disabled: false }),
uid: new FormControl({ value: '', disabled: false }),
mtime: new FormControl({ value: '', disabled: false }),
ctime: new FormControl({ value: '', disabled: false }),
depth: new FormControl({ value: 0, disabled: false }),
is_subobject: new FormControl({ value: false, disabled: false }),
});
systemFormGroup = this._formBuilder.group({
name: new FormControl({ value: '', disabled: true }),
uid: new FormControl({ value: '', disabled: true }),
mtime: new FormControl({ value: '', disabled: true }),
ctime: new FormControl({ value: '', disabled: true }),
depth: new FormControl({ value: 0, disabled: true }),
virt_cpus: new FormControl({ value: 0, disabled: true }),
virt_file_size: new FormControl({ value: 0, disabled: true }),
virt_ram: new FormControl({ value: 0, disabled: true }),
serial_device: new FormControl({ value: 0, disabled: true }),
serial_baud_rate: new FormControl({ value: 0, disabled: true }),
is_subobject: new FormControl({ value: false, disabled: true }),
comment: new FormControl({ value: '', disabled: true }),
redhat_management_key: new FormControl({ value: '', disabled: true }),
autoinstall: new FormControl({ value: '', disabled: true }),
Expand Down Expand Up @@ -147,28 +150,80 @@ export class SystemEditComponent implements OnInit, OnDestroy {

ngOnInit(): void {
this.refreshData();
// Observables for inherited properties
this.systemFormGroup.controls.autoinstall_meta_inherited.valueChanges.subscribe(
this.getInheritObservable(this.systemFormGroup.controls.autoinstall_meta),
);
this.systemFormGroup.controls.boot_files_inherited.valueChanges.subscribe(
this.getInheritObservable(this.systemFormGroup.controls.boot_files),
);
this.systemFormGroup.controls.boot_loaders_inherited.valueChanges.subscribe(
this.getInheritObservable(this.systemFormGroup.controls.boot_loaders),
);
this.systemFormGroup.controls.fetchable_files_inherited.valueChanges.subscribe(
this.getInheritObservable(this.systemFormGroup.controls.fetchable_files),
);
this.systemFormGroup.controls.kernel_options_inherited.valueChanges.subscribe(
this.getInheritObservable(this.systemFormGroup.controls.kernel_options),
);
this.systemFormGroup.controls.kernel_options_post_inherited.valueChanges.subscribe(
this.getInheritObservable(
this.systemFormGroup.controls.kernel_options_post,
),
);
this.systemFormGroup.controls.mgmt_classes_inherited.valueChanges.subscribe(
this.getInheritObservable(this.systemFormGroup.controls.mgmt_classes),
);
this.systemFormGroup.controls.mgmt_parameters_inherited.valueChanges.subscribe(
this.getInheritObservable(this.systemFormGroup.controls.mgmt_parameters),
);
this.systemFormGroup.controls.owners_inherited.valueChanges.subscribe(
this.getInheritObservable(this.systemFormGroup.controls.owners),
);
this.systemFormGroup.controls.template_files_inherited.valueChanges.subscribe(
this.getInheritObservable(this.systemFormGroup.controls.template_files),
);
}

ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}

getInheritObservable(valueControl: FormControl): (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_system(this.name, false, false, this.userService.token)
.subscribe(
(value) => {
this.system = value;
this.systemFormGroup.controls.name.setValue(this.system.name);
this.systemFormGroup.controls.uid.setValue(this.system.uid);
this.systemFormGroup.controls.mtime.setValue(
this.systemReadonlyFormGroup.controls.name.setValue(this.system.name);
this.systemReadonlyFormGroup.controls.uid.setValue(this.system.uid);
this.systemReadonlyFormGroup.controls.mtime.setValue(
new Date(this.system.mtime * 1000).toString(),
);
this.systemFormGroup.controls.ctime.setValue(
this.systemReadonlyFormGroup.controls.ctime.setValue(
new Date(this.system.ctime * 1000).toString(),
);
this.systemFormGroup.controls.depth.setValue(this.system.depth);
this.systemReadonlyFormGroup.controls.depth.setValue(
this.system.depth,
);
this.systemReadonlyFormGroup.controls.is_subobject.setValue(
this.system.is_subobject,
);
if (typeof this.system.virt_cpus !== 'string') {
this.systemFormGroup.controls.virt_cpus.setValue(
this.system.virt_cpus,
Expand All @@ -190,9 +245,6 @@ export class SystemEditComponent implements OnInit, OnDestroy {
this.systemFormGroup.controls.serial_baud_rate.setValue(
this.system.serial_baud_rate,
);
this.systemFormGroup.controls.is_subobject.setValue(
this.system.is_subobject,
);
this.systemFormGroup.controls.ipv6_autoconfiguration.setValue(
this.system.ipv6_autoconfiguration,
);
Expand Down Expand Up @@ -420,8 +472,57 @@ export class SystemEditComponent implements OnInit, OnDestroy {
}

editSystem(): void {
// TODO
this._snackBar.open('Not implemented at the moment!', 'Close');
this.isEditMode = true;
this.systemFormGroup.enable();
// Inherit inputs
if (typeof this.system.autoinstall_meta === 'string') {
this.systemFormGroup.controls.autoinstall_meta.disable();
}
if (typeof this.system.boot_files === 'string') {
this.systemFormGroup.controls.boot_files.disable();
}
if (typeof this.system.boot_loaders === 'string') {
this.systemFormGroup.controls.boot_loaders.disable();
}
if (typeof this.system.fetchable_files === 'string') {
this.systemFormGroup.controls.fetchable_files.disable();
}
if (typeof this.system.kernel_options === 'string') {
this.systemFormGroup.controls.kernel_options.disable();
}
if (typeof this.system.kernel_options_post === 'string') {
this.systemFormGroup.controls.kernel_options_post.disable();
}
if (typeof this.system.mgmt_classes === 'string') {
this.systemFormGroup.controls.mgmt_classes.disable();
}
if (typeof this.system.mgmt_parameters === 'string') {
this.systemFormGroup.controls.mgmt_parameters.disable();
}
if (typeof this.system.owners === 'string') {
this.systemFormGroup.controls.owners.disable();
}
if (typeof this.system.template_files === 'string') {
this.systemFormGroup.controls.template_files.disable();
}
}

cancelEdit(): void {
const dialogRef = this.dialog.open(DialogBoxConfirmCancelEditComponent, {
data: {
name: this.system.name,
},
});

dialogRef.afterClosed().subscribe((dialogResult) => {
if (dialogResult === false) {
// False means the user want's to continue
return;
}
this.isEditMode = false;
this.systemFormGroup.disable();
this.refreshData();
});
}

copySystem(uid: string, name: string): void {
Expand Down Expand Up @@ -465,6 +566,49 @@ export class SystemEditComponent implements OnInit, OnDestroy {
}

saveSystem(): void {
// TODO
let dirtyValues = Utils.deduplicateDirtyValues(
this.systemFormGroup,
Utils.getDirtyValues(this.systemFormGroup),
);
this.cobblerApiService
.get_system_handle(this.name, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(
(systemHandle) => {
let modifyObservables: Observable<boolean>[] = [];
dirtyValues.forEach((value, key) => {
modifyObservables.push(
this.cobblerApiService.modify_system(
systemHandle,
key,
value,
this.userService.token,
),
);
});
combineLatest(modifyObservables).subscribe(
(value) => {
this.cobblerApiService
.save_system(systemHandle, this.userService.token)
.subscribe(
(value1) => {
this.isEditMode = false;
this.systemFormGroup.disable();
this.refreshData();
},
(error) => {
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
);
},
(error) => {
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
);
},
(error) => {
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
);
}
}

0 comments on commit cc08c84

Please sign in to comment.