projects/cobbler-frontend/src/app/items/template/overview/template-overview.component.ts
OnInit
OnDestroy
AfterViewInit
| selector | cobbler-template-overview |
| standalone | true |
| imports |
MatTableModule
MatButtonModule
MatIconModule
MatTooltip
MatPaginatorModule
MatSort
MatFormFieldModule
MatInputModule
|
| styleUrls | ./template-overview.component.scss |
| templateUrl | ./template-overview.component.html |
| styleUrl | ./template-overview.component.scss |
No results matching.
MatTableModule
MatButtonModule
MatIconModule
MatMenuModule
MatTooltip
MatPaginatorModule
MatSort
MatFormFieldModule
MatInputModule
OnInit
OnDestroy
AfterViewInit
Properties |
|
Methods |
| addTemplate |
addTemplate()
|
|
Returns :
void
|
| applyFilter | ||||||
applyFilter(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| deleteTemplate | ||||||
deleteTemplate(name: string)
|
||||||
|
Parameters :
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| renameTemplate | ||||||
renameTemplate(name: string)
|
||||||
|
Parameters :
Returns :
void
|
| Private retrieveTemplates |
retrieveTemplates()
|
|
Returns :
void
|
| showTemplate | ||||||
showTemplate(name: string)
|
||||||
|
Parameters :
Returns :
void
|
| Private _snackBar |
Type : unknown
|
Default value : inject(MatSnackBar)
|
| Private cobblerApiService |
Type : unknown
|
Default value : inject(CobblerApiService)
|
| dataSource |
Type : unknown
|
Default value : new MatTableDataSource<string>([])
|
| Readonly dialog |
Type : unknown
|
Default value : inject<MatDialog>(MatDialog)
|
| displayedColumns |
Type : string[]
|
Default value : ['name', 'actions']
|
| Private ngUnsubscribe |
Type : unknown
|
Default value : new Subject<void>()
|
| paginator |
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator)
|
| Private router |
Type : unknown
|
Default value : inject(Router)
|
| sort |
Type : MatSort
|
Decorators :
@ViewChild(MatSort)
|
| table |
Type : MatTable<string>
|
Decorators :
@ViewChild(MatTable)
|
| userService |
Type : unknown
|
Default value : inject(UserService)
|
import {
AfterViewInit,
Component,
OnDestroy,
OnInit,
ViewChild,
inject,
} 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,
MatTableDataSource,
MatTableModule,
} from '@angular/material/table';
import { MatTooltip } from '@angular/material/tooltip';
import { Router, RouterLink } from '@angular/router';
import { CobblerApiService } 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 { TemplateCreateComponent } from '../create/template-create.component';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
@Component({
selector: 'cobbler-template-overview',
imports: [
MatTableModule,
MatButtonModule,
MatIconModule,
MatMenuModule,
MatTooltip,
MatPaginatorModule,
MatSort,
MatFormFieldModule,
MatInputModule,
],
templateUrl: './template-overview.component.html',
styleUrl: './template-overview.component.scss',
})
export class TemplateOverviewComponent
implements OnInit, OnDestroy, AfterViewInit
{
userService = inject(UserService);
private cobblerApiService = inject(CobblerApiService);
private _snackBar = inject(MatSnackBar);
private router = inject(Router);
readonly dialog = inject<MatDialog>(MatDialog);
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
// Table
displayedColumns: string[] = ['name', 'actions'];
dataSource = new MatTableDataSource<string>([]);
@ViewChild(MatTable) table!: MatTable<string>;
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
ngOnInit(): void {
this.retrieveTemplates();
}
ngAfterViewInit(): void {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
private retrieveTemplates(): void {
this.cobblerApiService
.get_autoinstall_templates(this.userService.token)
.subscribe({
next: (value) => {
this.dataSource.data = value;
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(
Utils.toHTML(error.message),
$localize`:@@snackbar.action.close:Close`,
);
},
});
}
addTemplate(): void {
const dialogRef = this.dialog.open(TemplateCreateComponent, {
width: '40%',
});
dialogRef.afterClosed().subscribe((result) => {
if (typeof result === 'string') {
this.router.navigate(['/items', 'template', result]);
}
});
}
showTemplate(name: string): void {
this.router.navigate(['/items', 'template', name]);
}
renameTemplate(name: string): void {
const dialogRef = this.dialog.open(DialogItemRenameComponent, {
data: {
itemType: 'Template',
itemName: name,
itemUid: '',
},
});
dialogRef.afterClosed().subscribe((newItemName) => {
if (newItemName === undefined) {
// Cancel means we don't need to rename the file
return;
}
this.cobblerApiService
.read_autoinstall_template(name, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (template: string) => {
this.cobblerApiService
.write_autoinstall_template(
newItemName,
template,
this.userService.token,
)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: () => {
this.cobblerApiService
.remove_autoinstall_template(name, this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: () => {
this.retrieveTemplates();
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(
Utils.toHTML(error.message),
$localize`:@@snackbar.action.close:Close`,
);
},
});
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(
Utils.toHTML(error.message),
$localize`:@@snackbar.action.close:Close`,
);
},
});
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(
Utils.toHTML(error.message),
$localize`:@@snackbar.action.close:Close`,
);
},
});
});
}
deleteTemplate(name: string): void {
this.cobblerApiService
.remove_autoinstall_template(name, this.userService.token)
.subscribe({
next: () => {
this.retrieveTemplates();
},
error: (error) => {
// HTML encode the error message since it originates from XML
this._snackBar.open(
Utils.toHTML(error.message),
$localize`:@@snackbar.action.close:Close`,
);
},
});
}
}
<div class="title-table">
<div class="title-row">
<h1 class="title title-cell-text" i18n="@@template.overview.title">
TEMPLATES
</h1>
<span class="title-cell-button">
<button
mat-icon-button
data-testid="item-add-button"
(click)="this.addTemplate()"
matTooltip="Add Template"
i18n-matTooltip="@@template.overview.add-tooltip"
>
<mat-icon>add</mat-icon>
</button></span
>
</div>
</div>
<mat-form-field appearance="fill">
<mat-label i18n="@@filter.label">Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. legacy.ks"
i18n-placeholder="@@template.overview.filter-placeholder"
#input
/>
</mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef i18n="@@table.col.name">Name</th>
<td mat-cell *matCellDef="let element">
<a (click)="showTemplate(element)"
>{{ element }}
<mat-icon class="link-icon" aria-hidden="true"
>arrow_outward</mat-icon
></a
>
</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)="showTemplate(element)">
<mat-icon>visibility</mat-icon>
<span i18n="@@item.action.show-details">Show details</span>
</button>
<button mat-menu-item (click)="renameTemplate(element)">
<mat-icon>edit</mat-icon>
<span i18n="@@item.action.rename">Rename</span>
</button>
<button mat-menu-item (click)="deleteTemplate(element)">
<mat-icon>delete</mat-icon>
<span i18n="@@item.action.delete">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>
<mat-paginator
[length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]"
aria-label="Select page"
i18n-aria-label="@@paginator.select-page"
>
</mat-paginator>
./template-overview.component.scss
.title-table {
display: table;
width: 100%;
}
.title-row {
display: table-cell;
width: 100%;
}
.title-cell-text {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.title-cell-button {
display: table-cell;
}
.form-replicate {
min-width: 150px;
max-width: 600px;
width: 100%;
}
.form-field-full-width {
width: 100%;
}
a {
display: flex;
align-items: center;
text-decoration: none;
color: black;
cursor: pointer;
width: fit-content;
}
.link-icon {
margin-left: 5px;
font-size: 16px;
width: 20px;
height: 20px;
color: #0000004b;
}
table.mat-mdc-table {
border-radius: 14px 14px 0 0;
box-shadow: none;
overflow: hidden;
background-color: white;
}
// Table cell
.mat-mdc-header-cell {
border-bottom: 1px solid #cbcbcb;
}
.mat-mdc-cell {
border-bottom: 1px solid #cbcbcb;
}
.mat-mdc-paginator {
border-radius: 0 0 12px 12px;
background-color: white;
}
:host-context(.dark-theme) .mat-mdc-table {
background-color: #1a1b1f;
}
:host-context(.dark-theme) .mat-mdc-paginator {
background-color: #1a1b1f;
}
:host-context(.dark-theme) .mat-mdc-header-cell {
border-bottom: 1px solid #555555;
}
:host-context(.dark-theme) .mat-mdc-cell {
border-bottom: 1px solid #555555;
}
:host-context(.dark-theme) a {
color: white;
}
:host-context(.dark-theme) .link-icon {
color: rgba(255, 255, 255, 0.372);
}