projects/cobbler-frontend/src/app/items/management-class/overview/management-class-overview.component.ts
OnInit
OnDestroy
selector | cobbler-management-class-overview |
standalone | true |
imports |
MatTableModule
MatIconModule
MatButtonModule
MatMenuModule
MatTooltipModule
|
templateUrl | ./management-class-overview.component.html |
styleUrl | ./management-class-overview.component.scss |
Properties |
|
Methods |
constructor(userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar, router: Router, dialog: MatDialog)
|
||||||||||||||||||
Parameters :
|
addManagementClass |
addManagementClass()
|
Returns :
void
|
deleteManagementClass |
deleteManagementClass(uid: string, name: string)
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
renameManagementClass |
renameManagementClass(uid: string, name: string)
|
Returns :
void
|
Private retrieveManagementClasses |
retrieveManagementClasses()
|
Returns :
void
|
showManagementClass |
showManagementClass(uid: string, name: string)
|
Returns :
void
|
dataSource |
Type : Array<Mgmgtclass>
|
Default value : []
|
displayedColumns |
Type : string[]
|
Default value : [
'name',
'class_name',
'is_definition',
'actions',
]
|
Private ngUnsubscribe |
Default value : new Subject<void>()
|
table |
Type : MatTable<Mgmgtclass>
|
Decorators :
@ViewChild(MatTable)
|
Public userService |
Type : UserService
|
import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTable, MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { Router } from '@angular/router';
import { CobblerApiService, Mgmgtclass } 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';
import Utils from '../../../utils';
import { ManagementClassCreateComponent } from '../create/management-class-create.component';
@Component({
selector: 'cobbler-management-class-overview',
standalone: true,
imports: [
MatTableModule,
MatIconModule,
MatButtonModule,
MatMenuModule,
MatTooltipModule,
],
templateUrl: './management-class-overview.component.html',
styleUrl: './management-class-overview.component.scss',
})
export class ManagementClassOverviewComponent implements OnInit, OnDestroy {
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
// Table
displayedColumns: string[] = [
'name',
'class_name',
'is_definition',
'actions',
];
dataSource: Array<Mgmgtclass> = [];
@ViewChild(MatTable) table: MatTable<Mgmgtclass>;
constructor(
public userService: UserService,
private cobblerApiService: CobblerApiService,
private _snackBar: MatSnackBar,
private router: Router,
@Inject(MatDialog) readonly dialog: MatDialog,
) {}
ngOnInit(): void {
this.retrieveManagementClasses();
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
private retrieveManagementClasses(): void {
this.cobblerApiService
.get_mgmtclasses()
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (value) => {
this.dataSource = value;
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(Utils.toHTML(error.message), 'Close');
},
});
}
addManagementClass(): void {
const dialogRef = this.dialog.open(ManagementClassCreateComponent, {
width: '40%',
});
dialogRef.afterClosed().subscribe((result) => {
if (typeof result === 'string') {
this.router.navigate(['/items', 'management-class', result]);
}
});
}
showManagementClass(uid: string, name: string): void {
this.router.navigate(['/items', 'management-class', name]);
}
renameManagementClass(uid: string, name: string): void {
const dialogRef = this.dialog.open(DialogItemRenameComponent, {
data: {
itemType: 'Management Class',
itemName: name,
itemUid: uid,
},
});
dialogRef.afterClosed().subscribe((newItemName) => {
if (newItemName === undefined) {
// Cancel means we don't need to rename the management class
return;
}
this.cobblerApiService
.get_mgmtclass_handle(name, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (mgmtclassHandle) => {
this.cobblerApiService
.rename_mgmtclass(
mgmtclassHandle,
newItemName,
this.userService.token,
)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: () => {
this.retrieveManagementClasses();
},
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');
},
});
});
}
deleteManagementClass(uid: string, name: string): void {
this.cobblerApiService
.remove_mgmtclass(name, this.userService.token, false)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: () => {
this.retrieveManagementClasses();
},
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">MANAGEMENT CLASSES</h1>
<span class="title-cell-button">
<button
mat-icon-button
(click)="this.addManagementClass()"
matTooltip="Add Management Class"
>
<mat-icon>add</mat-icon>
</button></span
>
</div>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<!-- Class Name Column -->
<ng-container matColumnDef="class_name">
<th mat-header-cell *matHeaderCellDef>Class Name</th>
<td mat-cell *matCellDef="let element">{{ element.class_name }}</td>
</ng-container>
<!-- is_definition Column -->
<ng-container matColumnDef="is_definition">
<th mat-header-cell *matHeaderCellDef>Is Definition?</th>
<td mat-cell *matCellDef="let element">{{ element.is_definition }}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button
mat-menu-item
(click)="showManagementClass(element.uid, element.name)"
>
<mat-icon>visibility</mat-icon>
<span>Show details</span>
</button>
<button
mat-menu-item
(click)="renameManagementClass(element.uid, element.name)"
>
<mat-icon>edit</mat-icon>
<span>Rename</span>
</button>
<button
mat-menu-item
(click)="deleteManagementClass(element.uid, element.name)"
>
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>