projects/cobbler-frontend/src/app/items/snippet/edit/snippet-edit.component.ts
OnInit
OnDestroy
selector | cobbler-snippet-edit |
standalone | true |
imports |
FormsModule
MatButtonModule
MatCheckboxModule
MatFormFieldModule
MatIconModule
MatInputModule
MatOptionModule
MatSelectModule
MatTooltipModule
ReactiveFormsModule
|
templateUrl | ./snippet-edit.component.html |
styleUrl | ./snippet-edit.component.scss |
Properties |
|
Methods |
constructor(route: ActivatedRoute, userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar, router: Router, dialog: MatDialog)
|
|||||||||||||||||||||
Parameters :
|
cancelEdit |
cancelEdit()
|
Returns :
void
|
copySnippet |
copySnippet()
|
Returns :
void
|
editSnippet |
editSnippet()
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
refreshData |
refreshData()
|
Returns :
void
|
removeSnippet |
removeSnippet()
|
Returns :
void
|
saveSnippet |
saveSnippet()
|
Returns :
void
|
Private Readonly _formBuilder |
Default value : inject(FormBuilder)
|
content |
Type : string
|
isEditMode |
Type : boolean
|
Default value : false
|
name |
Type : string
|
Private ngUnsubscribe |
Default value : new Subject<void>()
|
snippetFormGroup |
Default value : this._formBuilder.group({
content: new FormControl({ value: '', disabled: true }),
})
|
import { Component, Inject, inject, OnDestroy, OnInit } from '@angular/core';
import {
FormBuilder,
FormControl,
FormsModule,
ReactiveFormsModule,
} from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatOptionModule } from '@angular/material/core';
import { MatDialog } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ActivatedRoute, Router } from '@angular/router';
import { CobblerApiService } from 'cobbler-api';
import { 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 { UserService } from '../../../services/user.service';
import Utils from '../../../utils';
@Component({
selector: 'cobbler-snippet-edit',
standalone: true,
imports: [
FormsModule,
MatButtonModule,
MatCheckboxModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatOptionModule,
MatSelectModule,
MatTooltipModule,
ReactiveFormsModule,
],
templateUrl: './snippet-edit.component.html',
styleUrl: './snippet-edit.component.scss',
})
export class SnippetEditComponent implements OnInit, OnDestroy {
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
// Form
name: string;
content: string;
private readonly _formBuilder = inject(FormBuilder);
snippetFormGroup = this._formBuilder.group({
content: new FormControl({ value: '', disabled: true }),
});
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');
}
ngOnInit(): void {
this.refreshData();
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
refreshData(): void {
this.cobblerApiService
.read_autoinstall_snippet(this.name, this.userService.token)
.subscribe({
next: (value) => {
this.content = value;
this.snippetFormGroup.controls.content.setValue(
Utils.toHTML(this.content),
);
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
}
removeSnippet(): void {
this.cobblerApiService
.remove_autoinstall_snippet(this.name, this.userService.token)
.subscribe({
next: (value) => {
if (value) {
this.router.navigate(['/items', 'snippet']);
return;
}
// 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');
},
});
}
editSnippet(): void {
this.isEditMode = true;
this.snippetFormGroup.enable();
}
cancelEdit(): void {
const dialogRef = this.dialog.open(DialogBoxConfirmCancelEditComponent, {
data: {
name: this.name,
},
});
dialogRef.afterClosed().subscribe((dialogResult) => {
if (dialogResult === false) {
// False means the user want's to continue
return;
}
this.isEditMode = false;
this.snippetFormGroup.disable();
this.refreshData();
});
}
copySnippet(): void {
const dialogRef = this.dialog.open(DialogItemCopyComponent, {
data: {
itemType: 'Snippet',
itemName: this.name,
itemUid: '',
},
});
dialogRef.afterClosed().subscribe((newItemName) => {
if (newItemName === undefined) {
// Cancel means we don't need to rename the file
return;
}
this.cobblerApiService
.write_autoinstall_snippet(
newItemName,
this.content,
this.userService.token,
)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (value) => {
this.router.navigate(['/items', 'snippet', newItemName]);
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
});
}
saveSnippet(): void {
this.cobblerApiService
.write_autoinstall_snippet(
this.name,
this.snippetFormGroup.controls.content.value,
this.userService.token,
)
.subscribe({
next: (value) => {
this.isEditMode = false;
this.snippetFormGroup.disable();
this.refreshData();
},
error: (error) => {
// HTML encode the error message since it originates from XML
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.copySnippet()"
matTooltip="Copy"
>
<mat-icon>content_copy</mat-icon>
</button>
</span>
<span class="title-cell-button">
<button
mat-icon-button
[disabled]="isEditMode"
(click)="this.editSnippet()"
matTooltip="Edit"
>
<mat-icon>edit</mat-icon>
</button>
</span>
<span class="title-cell-button">
<button
mat-icon-button
[disabled]="isEditMode"
(click)="this.removeSnippet()"
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]="snippetFormGroup">
<mat-form-field class="form-field-full-width">
<mat-label>Template Content</mat-label>
<textarea matInput formControlName="content"></textarea>
</mat-form-field>
@if (isEditMode) {
<button mat-button (click)="saveSnippet()">Save Snippet</button>
}
</form>