Merge pull request #345 from cobbler/feature/implement-item-rename

Items: Implement rename operation for overview

projects/cobbler-frontend/src/app/common/dialog-item-rename/dialog-item-rename.component.html

@@ -0,0 +1,21 @@
+<h1 mat-dialog-title>Rename {{ data.itemType }}</h1>
+<mat-dialog-content>
+  <mat-form-field class="form-field-full-width">
+    <mat-label>Old name</mat-label>
+    <input matInput readonly value="{{ data.itemName }}" />
+  </mat-form-field>
+
+  <mat-form-field class="form-field-full-width">
+    <mat-label>New name</mat-label>
+    <input
+      matInput
+      [(ngModel)]="dialogCloseSignal"
+      cdkFocusInitial
+      placeholder="New name"
+    />
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Close</button>
+  <button mat-button [mat-dialog-close]="dialogCloseSignal()">Rename</button>
+</mat-dialog-actions>

projects/cobbler-frontend/src/app/common/dialog-item-rename/dialog-item-rename.component.scss

@@ -0,0 +1,3 @@
+.form-field-full-width {
+  width: 100%;
+}

projects/cobbler-frontend/src/app/common/dialog-item-rename/dialog-item-rename.component.spec.ts

@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+
+import { DialogItemRenameComponent } from './dialog-item-rename.component';
+
+describe('DialogItemRenameComponent', () => {
+  let component: DialogItemRenameComponent;
+  let fixture: ComponentFixture<DialogItemRenameComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DialogItemRenameComponent,
+        MatDialogModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        {
+          provide: MatDialogRef,
+          useValue: {},
+        },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: { itemType: 'Test', itemName: 'test', itemUid: '' },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DialogItemRenameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/cobbler-frontend/src/app/common/dialog-item-rename/dialog-item-rename.component.ts

@@ -0,0 +1,48 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Inject,
+  model,
+} from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButton, MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+export interface DialogItemRenameData {
+  itemType: string;
+  itemName: string;
+  itemUid: string;
+}
+
+@Component({
+  selector: 'cobbler-dialog-item-rename',
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+  ],
+  templateUrl: './dialog-item-rename.component.html',
+  styleUrl: './dialog-item-rename.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DialogItemRenameComponent {
+  readonly dialogRef = inject(MatDialogRef<DialogItemRenameComponent>);
+  readonly dialogCloseSignal = model('');
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogItemRenameData) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

projects/cobbler-frontend/src/app/items/distro/overview/distros-overview.component.html

@@ -30,7 +30,7 @@ <h1 class="title">DISTROS</h1>
           <mat-icon>visibility</mat-icon>
           <span>Show details</span>
         </button>
-        <button mat-menu-item (click)="editDistro(element.uid, element.name)">
+        <button mat-menu-item (click)="renameDistro(element.uid, element.name)">
           <mat-icon>edit</mat-icon>
           <span>Rename</span>
         </button>

projects/cobbler-frontend/src/app/items/distro/overview/distros-overview.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -17,6 +18,10 @@ import {
 } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { CobblerApiService, Distro } from 'cobbler-api';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { DialogBoxTextConfirmComponent } from '../../../common/dialog-box-text-confirm/dialog-box-text-confirm';
+import { DialogItemRenameComponent } from '../../../common/dialog-item-rename/dialog-item-rename.component';
 import { UserService } from '../../../services/user.service';
 
 @Component({
@@ -44,7 +49,11 @@ import { UserService } from '../../../services/user.service';
     MatMenuTrigger,
   ],
 })
-export class DistrosOverviewComponent implements OnInit {
+export class DistrosOverviewComponent implements OnInit, OnDestroy {
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
+
+  // Table
   displayedColumns: string[] = ['name', 'breed', 'os_version', 'actions'];
   dataSource: Array<Distro> = [];
 
@@ -55,35 +64,81 @@ export class DistrosOverviewComponent implements OnInit {
     private cobblerApiService: CobblerApiService,
     private _snackBar: MatSnackBar,
     private router: Router,
+    @Inject(MatDialog) readonly dialog: MatDialog,
   ) {}
 
   ngOnInit(): void {
     this.retrieveDistros();
   }
 
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   private retrieveDistros(): void {
-    this.cobblerApiService.get_distros().subscribe(
-      (value) => {
-        this.dataSource = value;
-      },
-      (error) => {
-        // HTML encode the error message since it originates from XML
-        this._snackBar.open(this.toHTML(error.message), 'Close');
-      },
-    );
+    this.cobblerApiService
+      .get_distros()
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(
+        (value) => {
+          this.dataSource = value;
+        },
+        (error) => {
+          // HTML encode the error message since it originates from XML
+          this._snackBar.open(this.toHTML(error.message), 'Close');
+        },
+      );
   }
 
   showDistro(uid: string, name: string): void {
     this.router.navigate(['/items', 'distro', name]);
   }
 
-  editDistro(uid: string, name: string): void {
-    // TODO
+  renameDistro(uid: string, name: string): void {
+    const dialogRef = this.dialog.open(DialogItemRenameComponent, {
+      data: {
+        itemType: 'Distro',
+        itemName: name,
+        itemUid: uid,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((newItemName) => {
+      if (newItemName === undefined) {
+        // Cancel means we don't need to rename the distro
+        return;
+      }
+      this.cobblerApiService
+        .get_distro_handle(name, this.userService.token)
+        .pipe(takeUntil(this.ngUnsubscribe))
+        .subscribe(
+          (distroHandle) => {
+            this.cobblerApiService
+              .rename_distro(distroHandle, newItemName, this.userService.token)
+              .pipe(takeUntil(this.ngUnsubscribe))
+              .subscribe(
+                (value) => {
+                  this.retrieveDistros();
+                },
+                (error) => {
+                  // HTML encode the error message since it originates from XML
+                  this._snackBar.open(this.toHTML(error.message), 'Close');
+                },
+              );
+          },
+          (error) => {
+            // HTML encode the error message since it originates from XML
+            this._snackBar.open(this.toHTML(error.message), 'Close');
+          },
+        );
+    });
   }
 
   deleteDistro(uid: string, name: string): void {
     this.cobblerApiService
       .remove_distro(name, this.userService.token, false)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe(
         (value) => {
           this.retrieveDistros();

projects/cobbler-frontend/src/app/items/file/overview/file-overview.component.html

@@ -30,7 +30,7 @@ <h1 class="title">FILES</h1>
           <mat-icon>visibility</mat-icon>
           <span>Show details</span>
         </button>
-        <button mat-menu-item (click)="editFile(element.uid, element.name)">
+        <button mat-menu-item (click)="renameFile(element.uid, element.name)">
           <mat-icon>edit</mat-icon>
           <span>Rename</span>
         </button>

projects/cobbler-frontend/src/app/items/file/overview/file-overview.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatIconButton } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -17,6 +18,9 @@ import {
 } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { CobblerApiService, File } from 'cobbler-api';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { DialogItemRenameComponent } from '../../../common/dialog-item-rename/dialog-item-rename.component';
 import { UserService } from '../../../services/user.service';
 
 @Component({
@@ -42,7 +46,11 @@ import { UserService } from '../../../services/user.service';
   templateUrl: './file-overview.component.html',
   styleUrl: './file-overview.component.scss',
 })
-export class FileOverviewComponent implements OnInit {
+export class FileOverviewComponent implements OnInit, OnDestroy {
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
+
+  // Table
   displayedColumns: string[] = ['name', 'action', 'path', 'actions'];
   dataSource: Array<File> = [];
 
@@ -53,35 +61,81 @@ export class FileOverviewComponent implements OnInit {
     private cobblerApiService: CobblerApiService,
     private _snackBar: MatSnackBar,
     private router: Router,
+    @Inject(MatDialog) readonly dialog: MatDialog,
   ) {}
 
   ngOnInit(): void {
     this.retrieveFiles();
   }
 
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   private retrieveFiles(): void {
-    this.cobblerApiService.get_files().subscribe(
-      (value) => {
-        this.dataSource = value;
-      },
-      (error) => {
-        // HTML encode the error message since it originates from XML
-        this._snackBar.open(this.toHTML(error.message), 'Close');
-      },
-    );
+    this.cobblerApiService
+      .get_files()
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(
+        (value) => {
+          this.dataSource = value;
+        },
+        (error) => {
+          // HTML encode the error message since it originates from XML
+          this._snackBar.open(this.toHTML(error.message), 'Close');
+        },
+      );
   }
 
   showDistro(uid: string, name: string): void {
     this.router.navigate(['/items', 'file', name]);
   }
 
-  editFile(uid: string, name: string): void {
-    // TODO
+  renameFile(uid: string, name: string): void {
+    const dialogRef = this.dialog.open(DialogItemRenameComponent, {
+      data: {
+        itemType: 'Repository',
+        itemName: name,
+        itemUid: uid,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((newItemName) => {
+      if (newItemName === undefined) {
+        // Cancel means we don't need to rename the file
+        return;
+      }
+      this.cobblerApiService
+        .get_file_handle(name, this.userService.token)
+        .pipe(takeUntil(this.ngUnsubscribe))
+        .subscribe(
+          (fileHandle) => {
+            this.cobblerApiService
+              .rename_file(fileHandle, newItemName, this.userService.token)
+              .pipe(takeUntil(this.ngUnsubscribe))
+              .subscribe(
+                (value) => {
+                  this.retrieveFiles();
+                },
+                (error) => {
+                  // HTML encode the error message since it originates from XML
+                  this._snackBar.open(this.toHTML(error.message), 'Close');
+                },
+              );
+          },
+          (error) => {
+            // HTML encode the error message since it originates from XML
+            this._snackBar.open(this.toHTML(error.message), 'Close');
+          },
+        );
+    });
   }
 
   deleteFile(uid: string, name: string): void {
     this.cobblerApiService
       .remove_file(name, this.userService.token, false)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe(
         (value) => {
           this.retrieveFiles();

projects/cobbler-frontend/src/app/items/image/overview/image-overview.component.html

@@ -36,7 +36,7 @@ <h1 class="title">IMAGES</h1>
           <mat-icon>visibility</mat-icon>
           <span>Show details</span>
         </button>
-        <button mat-menu-item (click)="editImage(element.uid, element.name)">
+        <button mat-menu-item (click)="renameImage(element.uid, element.name)">
           <mat-icon>edit</mat-icon>
           <span>Rename</span>
         </button>