diff --git a/components/SnippetEditComponent.html b/components/SnippetEditComponent.html
index 4bf4e909..4d6812f8 100644
--- a/components/SnippetEditComponent.html
+++ b/components/SnippetEditComponent.html
@@ -127,6 +127,7 @@
+ -
+ cancelEdit
+
-
copySnippet
-
editSnippet
+ -
+ ngOnDestroy
+
-
ngOnInit
@@ -274,12 +283,12 @@ Constructor
-constructor(route: ActivatedRoute, userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar, router: Router)
+constructor(route: ActivatedRoute, userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar, router: Router, dialog: MatDialog)
|
-
+
|
@@ -356,6 +365,18 @@ Constructor
+
+ dialog |
+
+
+ MatDialog
+ |
+
+
+ No
+ |
+
+
@@ -374,6 +395,43 @@ Constructor
Methods
+
+
+
+
+
+
+ cancelEdit
+
+
+ |
+
+
+
+cancelEdit()
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+ ngOnDestroy
+
+
+ |
+
+
+
+ngOnDestroy()
+ |
+
+
+
+
+
+
|
@@ -468,8 +563,8 @@
-
+
|
@@ -505,8 +600,8 @@
-
+
|
@@ -542,8 +637,8 @@
-
+
|
@@ -579,8 +674,8 @@
-
+
|
@@ -622,7 +717,7 @@
-
+
|
@@ -648,7 +743,7 @@
-
+
|
@@ -679,7 +774,7 @@
-
+
|
@@ -705,7 +800,33 @@
-
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+ Private
+ ngUnsubscribe
+
+
+ |
+
+
+
+ Default value : new Subject<void>()
+ |
+
+
+
+
|
@@ -732,7 +853,7 @@
-
+
|
@@ -745,24 +866,29 @@
- import { Component, inject, OnInit } from '@angular/core';
+ import { Component, Inject, inject, OnDestroy, OnInit } from '@angular/core';
import {
FormBuilder,
FormControl,
FormsModule,
ReactiveFormsModule,
} from '@angular/forms';
-import { MatOption } from '@angular/material/autocomplete';
-import { MatButton, MatIconButton } from '@angular/material/button';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatIcon } from '@angular/material/icon';
-import { MatInput } from '@angular/material/input';
-import { MatSelect } from '@angular/material/select';
+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 { MatTooltip } from '@angular/material/tooltip';
+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';
@@ -771,22 +897,24 @@
standalone: true,
imports: [
FormsModule,
- MatButton,
- MatCheckbox,
- MatFormField,
- MatIcon,
- MatIconButton,
- MatInput,
- MatLabel,
- MatOption,
- MatSelect,
- MatTooltip,
+ MatButtonModule,
+ MatCheckboxModule,
+ MatFormFieldModule,
+ MatIconModule,
+ MatInputModule,
+ MatOptionModule,
+ MatSelectModule,
+ MatTooltipModule,
ReactiveFormsModule,
],
templateUrl: './snippet-edit.component.html',
styleUrl: './snippet-edit.component.scss',
})
-export class SnippetEditComponent implements OnInit {
+export class SnippetEditComponent implements OnInit, OnDestroy {
+ // Unsubscribe
+ private ngUnsubscribe = new Subject<void>();
+
+ // Form
name: string;
content: string;
private readonly _formBuilder = inject(FormBuilder);
@@ -801,6 +929,7 @@
private cobblerApiService: CobblerApiService,
private _snackBar: MatSnackBar,
private router: Router,
+ @Inject(MatDialog) readonly dialog: MatDialog,
) {
this.name = this.route.snapshot.paramMap.get('name');
}
@@ -809,30 +938,36 @@
this.refreshData();
}
+ ngOnDestroy(): void {
+ this.ngUnsubscribe.next();
+ this.ngUnsubscribe.complete();
+ }
+
refreshData(): void {
this.cobblerApiService
.read_autoinstall_snippet(this.name, this.userService.token)
- .subscribe(
- (value) => {
+ .subscribe({
+ next: (value) => {
this.content = value;
this.snippetFormGroup.controls.content.setValue(
Utils.toHTML(this.content),
);
},
- (error) => {
+ 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(
- (value) => {
+ .subscribe({
+ next: (value) => {
if (value) {
- this.router.navigate(['/items', 'profile']);
+ this.router.navigate(['/items', 'snippet']);
+ return;
}
// HTML encode the error message since it originates from XML
this._snackBar.open(
@@ -840,36 +975,87 @@
'Close',
);
},
- (error) => {
+ error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
- );
+ });
}
editSnippet(): void {
- // TODO
- this._snackBar.open('Not implemented at the moment!', 'Close');
+ 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 {
- // TODO
- this._snackBar.open('Not implemented at the moment!', 'Close');
+ 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 {
- // TODO
this.cobblerApiService
- .write_autoinstall_snippet(this.name, '', this.userService.token)
- .subscribe(
- (value) => {
- // TODO
+ .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: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
- );
+ });
}
}
@@ -882,6 +1068,7 @@
<span class="title-cell-button">
<button
mat-icon-button
+ [disabled]="isEditMode"
(click)="this.refreshData()"
matTooltip="Refresh data"
>
@@ -889,24 +1076,46 @@
</button>
</span>
<span class="title-cell-button">
- <button mat-icon-button (click)="this.copySnippet()" matTooltip="Copy">
+ <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 (click)="this.editSnippet()" matTooltip="Edit">
+ <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>
@@ -916,7 +1125,7 @@
<textarea matInput formControlName="content"></textarea>
</mat-form-field>
@if (isEditMode) {
- <button mat-button (click)="saveSnippet()">Save Distro</button>
+ <button mat-button (click)="saveSnippet()">Save Snippet</button>
}
</form>
@@ -948,7 +1157,7 @@
|